Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机，现在就bootstrap的响应式举一个例子：
如上图所示，要实现该表格在手机等移动端上只显示代号、名称、和价格，其他以查看详情的方式显示（也就是下图：）
首先，先实现在移动端能由左图到右图的转换：
代码如下：
Meta charset="UTF-8">
代号
名称
价格
数量
query($sql);
foreach($arr as $v){
echo "
";
//为什么id='xq'不行？不要用id，id是唯一的，此处有多个查看详情。。。。记住了！！！！ }
?>
<table class="table table-striped">
其次：实现点击查看详情出现模态框
<script type="text/javascript">
$(".xq").click(function(){
var code = $(this).attr("code"); //取属性值
$.ajax({
url:"chuli.PHP",data:{code:code},type:"POST",dataType:"TEXT",success:function(data){
var lie = data.trim().split("^");
var str="<div>代号："+lie[0]+"</div><div><a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a>："+lie[1]+"</div><div>价格："+lie[2]+"</div><div>产地："+lie[3]+"</div><div>库存："+lie[4]+"</div><div><a href="https://www.jb51.cc/tag/shuliang/" target="_blank" class="keywords">数量</a>："+lie[5]+"</div>";
$("#neirong").html(str); // $("#mymodal").modal("show"); 双引号不行！！！
//触发模态框
$('#myModal').modal('show');
}
});
})
PHP;">
strquery($sql);
echo $arr;
?>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/bootstrap/39284.html