Bootstrap響應(yīng)式表格詳解
更新時(shí)間：2017年05月23日 10:32:46 作者：ChrissZhao
這篇文章主要為大家詳細(xì)介紹了Bootstrap響應(yīng)式表格的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
Bootstrap 的響應(yīng)式 CSS 能夠自適應(yīng)于臺(tái)式機(jī)、平板電腦和手機(jī)
下面是手機(jī)端顯示的樣式
代碼如下：
1.test.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</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>代號(hào)</th>
<th>名稱</th>
<th class="hidden-xs">系列</th>
<th class="hidden-xs">上市時(shí)間</th>
<th class="hidden-xs">油耗</th>
<th class="hidden-xs">功率</th>
<th>價(jià)格</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>
<!-- 模態(tài)框（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">汽車詳細(xì)信息</h4>
</div>
<div class="modal-body" id="neirong"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<script type="text/javascript">
$(".xq").click(function(){
//顯示詳細(xì)信息
//取代號(hào)
var code = $(this).attr("code");
//查詢?cè)撈嚨乃行畔?
$.ajax({
url:"chuli.php",
data:{code:code},
type:"POST",
dataType:"TEXT",
success: function(data){
var lie = data.trim().split("^");
var str = "<div>代號(hào)："+lie[0]+"</div><div>名稱："+lie[1]+"</div>
<div>系列："+lie[2]+"</div><div>上市時(shí)間："+lie[3]+"</div><div>油耗："+lie[4]+"</div><div>功率："+lie[5]+"</div><div>價(jià)格："+lie[7]+"</div>";
$("#neirong").html(str);
//觸發(fā)模態(tài)框
$('#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);
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- BootStrap學(xué)習(xí)筆記之nav導(dǎo)航欄和面包屑導(dǎo)航
- Bootstrap CSS組件之面包屑導(dǎo)航(breadcrumb)
- Bootstrap組件學(xué)習(xí)之導(dǎo)航、標(biāo)簽、面包屑導(dǎo)航(精品)
- bootstrap響應(yīng)式表格實(shí)例詳解
- Bootstrap禁用響應(yīng)式布局的實(shí)現(xiàn)方法
- Bootstrap Navbar Component實(shí)現(xiàn)響應(yīng)式導(dǎo)航
- Bootstrap開發(fā)實(shí)戰(zhàn)之響應(yīng)式輪播圖
- BootStrap創(chuàng)建響應(yīng)式導(dǎo)航條實(shí)例代碼
- 談一談bootstrap響應(yīng)式布局
- bootstrap-treeview自定義雙擊事件實(shí)現(xiàn)方法
- BootStrap中關(guān)于Select下拉框選擇觸發(fā)事件及擴(kuò)展
- bootstrap動(dòng)態(tài)添加面包屑(breadcrumb)及其響應(yīng)事件的方法
相關(guān)文章
基于JS實(shí)現(xiàn)一個(gè)隨機(jī)生成驗(yàn)證碼功能
這篇文章主要介紹了基于JS實(shí)現(xiàn)一個(gè)隨機(jī)生成驗(yàn)證碼功能，隨機(jī)生成一個(gè)四位數(shù)的驗(yàn)證碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
今天小編就為大家分享一篇layer更改皮膚的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
關(guān)于小程序優(yōu)化的一些建議(小結(jié))
這篇文章主要介紹了關(guān)于小程序優(yōu)化的一些建議(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
下面小編就為大家?guī)硪黄猻witch語句的妙用(必看篇)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
前一篇《關(guān)于selector性能比賽》中提到，目測(cè)覺得在$("div,p,a")這樣有逗號(hào)時(shí)，sizzle耗時(shí)異常（600多個(gè)元素，花了200ms），說是它可能沒有優(yōu)化ie下的排序。2011-01-01
微信小程序使用第三方庫(kù)Underscore.js步驟詳解
大家都知道Underscore.js是一個(gè) JavaScript 工具庫(kù)，它提供了一整套函數(shù)式編程的實(shí)用功能，但是沒有擴(kuò)展任何 JavaScript 內(nèi)置對(duì)象。那么這篇文章我們就來學(xué)習(xí)下微信小程序如何使用第三方庫(kù)Underscore.js，有需要的可以參考學(xué)習(xí)。2016-09-09
漂亮實(shí)用的頁(yè)面loading(加載)封裝代碼
要做一個(gè)異步登錄，打算給用戶做一點(diǎn)提示，所以就網(wǎng)上找了點(diǎn)代碼，自己修改新增了一些，做了一個(gè)html+css+js的功能封裝,供大家參考，需要的朋友參考下吧2017-02-02
DEDECMS如何為文章添加HOT NEW標(biāo)志圖片
再用織夢(mèng)建站的時(shí)候，常常需要要在列表頁(yè)添加前兩天的文章后面添加個(gè)new小圖片，那么此功能是怎么實(shí)現(xiàn)的呢，下面通過本文給大家詳解dedecms為文章添加HOT NEW標(biāo)志圖片，需要的朋友可以參考下2015-08-08
這篇文章主要介紹了js與applet相互調(diào)用的方法,結(jié)合實(shí)例形式分析了js調(diào)用java的applet以及java調(diào)用js的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
常見瀏覽器多長(zhǎng)時(shí)間會(huì)提示“腳本運(yùn)行時(shí)間過長(zhǎng)”總結(jié)
這篇文章主要介紹了常見瀏覽器多長(zhǎng)時(shí)間會(huì)提示“腳本運(yùn)行時(shí)間過長(zhǎng)”總結(jié),需要的朋友可以參考下2014-04-04