Bootstrap响应式表格详解
Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机
下面是手机端显示的样式
代码如下：
1.test.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="external nofollow" />
<script src="jquery-3.2.0.min.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>汽车信息</h1>
<table class="table table-striped">
<thead>
<tr>
<th>代号</th>
<th>名称</th>
<th class="hidden-xs">系列</th>
<th class="hidden-xs">上市时间</th>
<th class="hidden-xs">油耗</th>
<th class="hidden-xs">功率</th>
<th>价格</th>
<th class="visible-xs-block">详情</th>
</tr>
</thead>
<tbody>
<?php
require "DBDA.class.php";
$db = new DBDA();
$sql = "select * from car";
$arr = $db->query($sql,1);
foreach($arr as $v)
{
echo "<tr>
<td>{$v[0]}</td>
<td>{$v[1]}</td>
<td class='hidden-xs'>{$v[2]}</td>
<td class='hidden-xs'>{$v[3]}</td>
<td class='hidden-xs'>{$v[4]}</td>
<td class='hidden-xs'>{$v[5]}</td>
<td>{$v[7]}</td>
<td class='visible-xs-block'>
<button type='button' class='btn btn-primary btn-xs xq' code='{$v[0]}'>详情</button>
</td>
</tr>";
}
?>
</tbody>
</table>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">汽车详细信息</h4>
</div>
<div class="modal-body" id="neirong"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<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>名称："+lie[1]+"</div>
<div>系列："+lie[2]+"</div><div>上市时间："+lie[3]+"</div><div>油耗："+lie[4]+"</div><div>功率："+lie[5]+"</div><div>价格："+lie[7]+"</div>";
$("#neirong").html(str);
//触发模态框
$('#myModal').modal('show');
}
});
})
</script>
</body>
</html>
2.chuli.php
<?php
$code = $_POST["code"];
require "DBDA.class.php";
$db = new DBDA();
$sql = "select * from car where code='{$code}'";
echo $db->strquery($sql);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
BootStrap学习笔记之nav导航栏和面包屑导航
nav导航栏 <nav role="navigation" class="navbar navbar-default"> <div class="container-fluid"></div> <div class="navbar-header"> <a href="#" class="navbar-brand"> 大大的log
-
Bootstrap开发实战之响应式轮播图
本文主要内容是在导航条的下方做一张轮播图,自动播放最新的重要动态,供大家参考,具体内容如下 一.响应式轮播图 //响应式轮播图 <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0"
-
Bootstrap Navbar Component实现响应式导航
目的: 用Bootstrap Navbar component 实现一个响应式导航 理解Bootstrap Navbar component是如何工作的(不包括collepse.js) 清楚自己添加一个规定的类名时是做了些什么 根据自己的需求进行改装 对比自己的实现方法,找出差距. 1.实现: 我想要模仿一个这样的响应式导航: 按照Bootstrap官网上介绍的方法,按照规则创建标签添加类名之后,可以得到一个这样的导航: 代码: <nav class="navbar navbar-defa
-
Bootstrap CSS组件之面包屑导航(breadcrumb)
面包屑breadcrumb一般用于导航,表示当前页面所在的位置 面包屑可以设置其他相关的小标记内容,比如标签.徽章标记等. //源码 //基础样式 .breadcrumb { padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: #f5f5f5; border-radius: 4px; } //所有li项都是内联块方式 .breadcrumb > li { display: inline-block
-
BootStrap中关于Select下拉框选择触发事件及扩展
Select下拉框的问题,想在选择一个选项后,前台显示做出变动,并且知道选择的是第几个选项. 这个很好解决: 如下: <div class="page-header"> <div class="form-horizontal"> <div class="control-label col-lg-0"> </div> <div class="col-lg-2"> <
-
谈一谈bootstrap响应式布局
随着移动端的用户越来越多,传统的web系统架构无法兼容很多移动终端的正常使用.在工作中也会发现,现在很多的客户都有在手机.平板等移动终端上使用管理系统的需求.如果单独为每一个终端开发相应的响应网页,这必定增加项目的成本和开发人员的压力.这时候了解响应式布局就很有必要,响应式布局就是为解决多终端问题而生的.本次介绍的是轻量级.开源的.免费的bootstrap. 搭建开发环境 首先下载官网的boostrap源码包:http://www.bootcss.com/. 开发简单的项目不必加入源码中的所有c
-
Bootstrap组件学习之导航、标签、面包屑导航(精品)
导航 Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分.改变修饰类可以改变样式. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- <link rel="stylesheet" >--> <link rel="stylesheet" href="css/bootst
-
BootStrap创建响应式导航条实例代码
首先你得引入bootstrap与jquery 推荐一个CDN:http://cdn.gbtags.com/index.html 然后就是开始编写HTML代码.如果你不想更改显示效果的话实际上CSS都免去写了2333 因为HTML代码比较多 这里分为三个部分 然后最后再上一份整体HTML代码 首先如上图所示的,实现这个效果需要了解bootstrap的以下几个组件 •导航条 •按钮 •表单 •下拉菜单 实际上以上几个组件的样式有很多.我们只需要了解一部分即可 如需了解更多的请转自http://www
-
bootstrap响应式表格实例详解
Bootstrap 的响应式 CSS 能够自适应于台式机.平板电脑和手机,现在就bootstrap的响应式举一个例子: 如上图所示,要实现该表格在手机等移动端上只显示代号.名称.和价格,其他以查看详情的方式显示(也就是下图:) 首先,先实现在移动端能由左图到右图的转换: 代码如下: <meta charset="UTF-8"> <title></title> <!--引入bootstrap的css文件--> <link type=&
-
Bootstrap禁用响应式布局的实现方法
在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootstrap开发自己的项目却又恰巧不太喜欢响应式布局(或者你所设计的页面布局不允许你使用响应式技术),那么你可以通过以下方式禁用响应式布局. 移除标签 禁用第一步,就是需要移除在head标签中添加的 <meta name="viewport" content="width=dev
-
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
本文实例讲述了bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法.分享给大家供大家参考,具体如下: Bootstrap官网中,只介绍了breadcrumb的布局(如下图),未介绍使用方法,如何动态增加面包屑title及点击事件的响应. 本人在使用过程中探索出以下的方式. 首先,在html文件里定义div <div> <ul class="breadcrumb " style="margin-bottom:0px;visibility:
-
bootstrap-treeview自定义双击事件实现方法
bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等.但是不知为什么这个插件没有自带双击事件. 经过多次测试,使用方法$('#tree').dblclick( function () {})和方法$('#tree').on('dblclick',function(){})都不起作用!百思不得其解.最后救助大神,问题解决了,但是