bootstrap响应式表格实例详解

发布时间：2020-12-18 00:38:09 所属栏目：安全来源：网络整理

导读：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机，现在就bootstrap的响应式举一个例子：如上图所示，要实现该表格在手机等移动端上只显示代号、名称、和价格，其他以查看详情的方式显示（也就是下图：）首先，先实现在移动端能由左图到右图的

代号

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

$.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>名称："+lie[1]+"</div><div>价格："+lie[2]+"</div><div>产地："+lie[3]+"</div><div>库存："+lie[4]+"</div><div>数量："+lie[5]+"</div>";
$("#neirong").html(str);

// $("#mymodal").modal("show"); 双引号不行！！！
//触发模态框
$('#myModal').modal('show');
}
});
})

处理页面：chuli.php

strquery($sql); echo $arr; ?>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

名称	价格
Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机，现在就bootstrap的响应式举一个例子：如上图所示，要实现该表格在手机等移动端上只显示代号、名称、和价格，其他以查看详情的方式显示（也就是下图：）首先，先实现在移动端能由左图到右图的转换：代码如下： query($sql); foreach($arr as $v){ `echo " "; //为什么id='xq'不行？不要用id，id是唯一的，此处有多个查看详情。。。。记住了！！！！` } ?> <table class="table table-striped">

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

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

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

代码如下：

query($sql);
foreach($arr as $v){

 echo "
 ";  
 //为什么id='xq'不行？不要用id，id是唯一的，此处有多个查看详情。。。。记住了！！！！

}
?>
<table class="table table-striped">

名称价格