Bootstrap响应式表格详解
作者：ChrissZhao 发布时间：2023-07-02 05:23:58
标签：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);
0
投稿猜你喜欢
- 相关的题外话：一、操作系统window系统内部都是unicode的。文件夹名，文件名等都是unicode的，任何语言系统下都能正常显示。二、
前言;Python基础知识+结构+数据类型Python基础学习列表+元组+字典+集合Python基础学习函数+模块+类今天给大家分享的是第四- 如下所示：import pandas as pdfile = pd.read_csv('file.csv',iterator
- 方法一:也是最简单的 直接使用pd.to_datetime函数实现data['交易时间'] = pd.to_datetime
- 在神经网络入门回顾（感知器、多层感知器）中整理了关于感知器和多层感知器的理论，这里实现关于与门、与非门、或门、异或门的代码，以便对感知器有更
- 参数strSQL 要导出的SQL查询语句strFields 字段名称列表,如果为空字符,则使用SQL语句中的字段名用法示例:1:export
- conftest.py文件特点所有同目录测试文件运行前都会执行conftest.py文件 不需要import导入conftest.py，py
- 提到 super，最直接的想法就是它代表了父类，替父类执行某些方法。但是理解也仅止步于此，下面对 super 做进一步理解super 的完整
- 本文实例讲述了mysql语句实现简单的增、删、改、查操作。分享给大家供大家参考，具体如下：1、创建db_shop数据库，如果该数据库不存在则
- 最近小编遇到一个奇葩问题，就是上传代码时拷贝vs里面的代码不能直接粘贴，否则空格会不符合要求，怎么解决此问题呢？下面小编给大家分享我的解决方
- 1.建表脚本1.1.建表DROP TABLE IF EXISTS `sys_region`;CREATE TABLE `sys_region
- 简单来说conda有什么用？方便的创建多个python虚拟环境，方便多个python项目同时开发的时候，每个项目都有自己独立的python开
- python各类经纬度转换，具体代码如下所示：import mathimport urllibimport jsonx_pi = 3.141
- 1.命令模式命令模式的目的是解耦调用操作的对象（调用者）和提供实现的对象（接收者）。命令模式的思路是在调用者和接收者之间插入一个命令类（Co
- 经常写一些联合查询，联合一多了，代码就成倍的增加，时间一长，连我自己也看不懂到底是什么意思了。做Oracle 的时候，就看到有个 WITH,
- 一、控制用户存取 1、创建修改用户Creating Users Create/alter user new_user identified
- 我为一大型网站做了一个论坛，也顺利通过了测试。由于是第一次做这方面的数据库，我不知道比其它网站上数据库差距有多大，是不是够优化。能推荐或介绍
- 代码如下:title=request("title") title=replace(title,"chr(3
- 一、前言在程序中，有很多高效率的字符串处理方式，如果开发者能够完全掌握这些高效的字符串处理，往往在开发者也能事半功倍。比如针对于字符串的处理
- 本文实例讲述了Python3将jpg转为pdf文件的方法。分享给大家供大家参考，具体如下：#coding=utf-8#!/usr/bin/e
