bootstrap响应式表格实例详解

网友投稿 293 2023-05-15


bootstrap响应式表格实例详解

Bootstrap 的响应式 css 能够自适应于台式机、平板电脑和手机,现在就bootstrap的响应式举一个例子:

如上图所示,要实现该表格在手机等移动端上只显示代号、名称、和价格,其他以查看详情的方式显示(也就是下图:)

首先,先实现在移动端能由左图到右图的转换:

代码如下:

query($sql);

foreach($arr as $v){

echo "

";

//为什么id='xq'不行?不要用id,id是唯一的,此处有多个查看详情。。。。记住了!!!!

}

?>

代号

名称

价格

产地

库存

数量

操作

其次:实现点击查看详情出现模态框

处理页面:chuli.php

$code=$_POST["code"];

require "../DB.class.php";

$db=new DB();

$sql = "select * from buyfruits where ids='{$code}'";

$arr = $db->strquery($sql);

echo $arr;

?>


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Spring Boot 基于注解的 Redis 缓存使用详解
下一篇:java接口多实现(java接口实现打印机)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~