bootstrap表格的多种用法

最新推荐文章于 2024-05-19 13:56:53 发布
最新推荐文章于 2024-05-19 13:56:53 发布
阅读量1.1k 收藏 6
点赞数 2
分类专栏： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qqj3066574300/article/details/87996718
版权

bootstrap前言

（1）Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的

（2）Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

（3）Bootstrap的优点

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。

浏览器支持：所有的主流浏览器都支持 Bootstrap。

    容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。

  • Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见

  • 它为开发人员创建接口提供了一个简洁统一的解决方案。

  • 它包含了功能强大的内置组件，易于定制。

  • 它还提供了基于 Web 的定制。

  • 它是开源的。

(2)今天我就以bootstrap中的几种表格的用法

Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：

标签描述
<table>为表格添加基础样式。
<thead>表格标题行的容器元素（<tr>），用来标识表格列。
<tbody>表格主体中的表格行的容器元素（<tr>）。
<tr>一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）。
<td>默认的表格单元格。
<th>特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。
<caption>关于表格存储内容的描述或总结。

 (1)table的用法

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 基本表单</title>
	<script type="text/javascript" src="js/bootstrap.js" ></script>
	<script type="text/javascript" src="js/bootstrap.min.js" ></script>
</head>
<body>
	<div class="container">
		<h3>Bootstrap表格中tabel的案例</h3>
		<table class="table" border="2">
		<thead>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
		</thead>
		<tbody>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>19</td>
				<>
			</tr>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>19</td>
				<>
			</tr>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>19</td>
				<>
			</tr>
		</tbody>
	</table>
	</div>
</body>
</html>

 效果图：

（2） .table-striped

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 基本表单</title>
	<script type="text/javascript" src="js/bootstrap.js" ></script>
	<script type="text/javascript" src="js/bootstrap.min.js" ></script>
</head>
<body>
	<h3>Bootstrap中的多种表格用法</h3>
	<table class="table-bordered" border="1">
   <thead>
     <tr>
       <th>Bootstrap中的多种表格用法</th>
       <th>Bootstrap中的多种表格用法</th>
       <th>Bootstrap中的多种表格用法</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>Bootstrap中的多种表格用法</td>
       <td>Bootstrap中的多种表格用法</td>
       <td>Bootstrap中的多种表格用法</td>
     </tr>
     <tr>
       <td>Bootstrap中的多种表格用法</td>
       <td>Bootstrap中的多种表格用法</td>
       <td>Bootstrap中的多种表格用法</td>
     </tr>
   </tbody>
 </table>
</body>
</html>

效果图：

 （3）条纹表格布局（ .table-striped class）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 基本的表格</title>
	<link rel="stylesheet" href="../css/bootstrap.min.css" />
	<script src="../js/bootstrap.min.js"></script>
</head>
<body>
  <h2>条纹表格布局</h2>
  <br />
  <br />
  <!--
  	作者：3066574300@qq.com
  	时间：2019-03-03
  	描述：条纹布局，就是 .table-striped class在<tbody>
  -->
<table class="table table-striped" >
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>联系电话</th>
      <th>家庭地址</th>
      <th>身份证</th>
      
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>张三</td>
      <td>男</td>
      <td>19</td>
      <td>11234567890</td>
      <td>广东珠海</td>
      <td>12345678901234567890</td>
    </tr>
    <tr>
      <td>002</td>
      <td>李四</td>
      <td>男</td>
      <td>14</td>
      <td>11234567890</td>
      <td>广东广州</td>
      <td>12345678901234567890</td>
    </tr>
    <tr>
      <td>003</td>
      <td>丽莎</td>
      <td>女</td>
      <td>19</td>
      <td>11234567890</td>
      <td>江西南昌</td>
      <td>12345678901234567890</td>
    </tr>
     <tr>
      <td>004</td>
      <td>王五</td>
      <td>女</td>
      <td>39</td>
      <td>11234567890</td>
      <td>广东清远</td>
      <td>12345678901234567890</td>
    </tr>
     <tr>
      <td>005</td>
      <td>田七</td>
      <td>男</td>
      <td>34</td>
      <td>11234567890</td>
      <td>广西南宁</td>
      <td>12345678901234567890</td>
    </tr>
     <tr>
      <td>006</td>
      <td>章丘</td>
      <td>男</td>
      <td>29</td>
      <td>11234567890</td>
      <td>广东珠海</td>
      <td>12345678901234567890</td>
    </tr>
  </tbody>
</table>

</body>
</html>

效果图：

 

 （4）边框表格布局

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 基本的表格</title>
	<link rel="stylesheet" href="../css/bootstrap.min.css" />
	<script src="../js/bootstrap.min.js"></script>
</head>
<body>
  <h2>边框表格布局</h2>
  <br />
  <br />
  <!--
  	作者：3066574300@qq.com
  	时间：2019-03-03
  	描述：边框表格，就是 在<tbody>的<>里面加入.table table-bordered"，而<table></table>中以表格的形式显示出来
  -->
<table class="table table-bordered btn-link" >
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>联系电话</th>
      <th>家庭地址</th>
      <th>身份证</th>
      
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>张三</td>
      <td>男</td>
      <td>19</td>
      <td>11234567890</td>
      <td>广东珠海</td>
      <td>12345678901234567890</td>
    </tr>
    <tr>
      <td>002</td>
      <td>李四</td>
      <td>男</td>
      <td>14</td>
      <td>11234567890</td>
      <td>广东广州</td>
      <td>12345678901234567890</td>
    </tr>
    <tr>
      <td>003</td>
      <td>丽莎</td>
      <td>女</td>
      <td>19</td>
      <td>11234567890</td>
      <td>江西南昌</td>
      <td>12345678901234567890</td>
    </tr>
     <tr>
      <td>004</td>
      <td>王五</td>
      <td>女</td>
      <td>39</td>
      <td>11234567890</td>
      <td>广东清远</td>
      <td>12345678901234567890</td>
    </tr>
     <tr>
      <td>005</td>
      <td>田七</td>
      <td>男</td>
      <td>34</td>
      <td>11234567890</td>
      <td>广西南宁</td>
      <td>12345678901234567890</td>
    </tr>
     <tr>
      <td>006</td>
      <td>章丘</td>
      <td>男</td>
      <td>29</td>
      <td>11234567890</td>
      <td>广东珠海</td>
      <td>12345678901234567890</td>
    </tr>
  </tbody>
</table>

</body>
</html>

 

运行效果

 （5）悬停表格

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 基本的表格</title>
	<link rel="stylesheet" href="../css/bootstrap.min.css" />
	<script src="../js/bootstrap.min.js"></script>
</head>
<body>
  <h2>悬停表格布局</h2>
  <br />
  <br />
  <!--
  	作者：3066574300@qq.com
  	时间：2019-03-03
  	描述：边框表格，就是 在<tbody>的<>里面加入.table table-hover"，而<table></table>中以表格的形式显示出来
  -->
<table class="table table-hover btn-link" >
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>联系电话</th>
      <th>家庭地址</th>
      <th>身份证</th>
      
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>张三</td>
      <td>男</td>
      <td>19</td>
      <td>11234567890</td>
      <td>广东珠海</td>
      <td>12345678901234567890</td>
    </tr>
    <tr>
      <td>002</td>
      <td>李四</td>
      <td>男</td>
      <td>14</td>
      <td>11234567890</td>
      <td>广东广州</td>
      <td>12345678901234567890</td>
    </tr>
    <tr>
      <td>003</td>
      <td>丽莎</td>
      <td>女</td>
      <td>19</td>
      <td>11234567890</td>
      <td>江西南昌</td>
      <td>12345678901234567890</td>
    </tr>
     <tr>
      <td>004</td>
      <td>王五</td>
      <td>女</td>
      <td>39</td>
      <td>11234567890</td>
      <td>广东清远</td>
      <td>12345678901234567890</td>
    </tr>
     <tr>
      <td>005</td>
      <td>田七</td>
      <td>男</td>
      <td>34</td>
      <td>11234567890</td>
      <td>广西南宁</td>
      <td>12345678901234567890</td>
    </tr>
     <tr>
      <td>006</td>
      <td>章丘</td>
      <td>男</td>
      <td>29</td>
      <td>11234567890</td>
      <td>广东珠海</td>
      <td>12345678901234567890</td>
    </tr>
  </tbody>
</table>

</body>
</html>

运行效果

（6）精简表格布局

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 基本的表格</title>
	<link rel="stylesheet" href="../css/bootstrap.min.css" />
	<script src="../js/bootstrap.min.js"></script>
</head>
<body>
  <h2>精简表格布局</h2>
  <br />
  <br />
  <!--
  	作者：3066574300@qq.com
  	时间：2019-03-03
  	描述：精简表格，就是 在<tbody>的<>里面加入.table table-condensed"，而<table></table>中以表格的形式显示出来
  -->
<table class="table table-condensed badge-dark" >
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>联系电话</th>
      <th>家庭地址</th>
      <th>身份证</th>
      
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>张三</td>
      <td>男</td>
      <td>19</td>
      <td>11234567890</td>
      <td>广东珠海</td>
      <td>12345678901234567890</td>
    </tr>
    <tr>
      <td>002</td>
      <td>李四</td>
      <td>男</td>
      <td>14</td>
      <td>11234567890</td>
      <td>广东广州</td>
      <td>12345678901234567890</td>
    </tr>
    <tr>
      <td>003</td>
      <td>丽莎</td>
      <td>女</td>
      <td>19</td>
      <td>11234567890</td>
      <td>江西南昌</td>
      <td>12345678901234567890</td>
    </tr>
     <tr>
      <td>004</td>
      <td>王五</td>
      <td>女</td>
      <td>39</td>
      <td>11234567890</td>
      <td>广东清远</td>
      <td>12345678901234567890</td>
    </tr>
     <tr>
      <td>005</td>
      <td>田七</td>
      <td>男</td>
      <td>34</td>
      <td>11234567890</td>
      <td>广西南宁</td>
      <td>12345678901234567890</td>
    </tr>
     <tr>
      <td>006</td>
      <td>章丘</td>
      <td>男</td>
      <td>29</td>
      <td>11234567890</td>
      <td>广东珠海</td>
      <td>12345678901234567890</td>
    </tr>
  </tbody>
</table>

</body>
</html>

运行效果

 (7)响应式布局

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 实例 - 响应式表格</title>
	<link rel="stylesheet" href="../css/bootstrap.min.css" />
	<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
</head>
<body>

<div class="table-responsive btn-group-toggle">
	<table class="table">
		<caption>响应式表格布局</caption>
		<thead>
			<tr>
				<th>编号</th>
				<th>产品</th>
				<th>待付款</th>
				<th>付款日期</th>
				<th>待发货</th>
				<th>待收货</th>
				<td>收款日期</td>
				<th>待评价</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>002</td>
				<td>产品2</td>
				<td>3/3/2019</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>003</td>
				<td>产品3</td>
				<td>3/3/2019</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>004</td>
				<td>产品1</td>
				<td>3/3/2019</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>005</td>
				<td>产品5</td>
				<td>3/3/2019</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>006</td>
				<td>产品6</td>
				<td>3/3/2019</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</tbody>
</table>
</div>  	

</body>
</html>

运行效果

 （8）总结

其实细心观察的话，还是可以明显的看出来的，前面的两种表格的方法，是我们平时最常用的了，而后面的自己中，其实它们都是差不多相似的，只不过我在table table-xxx这里做了一些改动和改变<table></table>里面的内容罢了。希望今天写的这篇文章，能够帮助到有技术困惑的编程朋友。

人生无绝境
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap表格
weixin_44543307的博客
06-17 472
Bootstrap表格 开发工具与关键技术：VS Bootstrap 作者：木林森 撰写时间：2019年6月16日 之前我们分享了layui表格，今天我们就来分享另一种表格——Bootstrap表格。 在写编程时我们经常会用到表格，那我们是使用layui表格还是使用Bootstrap表格，这个就需要根据实际的情况进行选择了。 如果你想要设计一个有自己特点的表格，那就建议使用Bootstrap表格...
我的天！做Java九个月涨薪7K，这究竟是怎么做到的
2401_83411843的博客
04-12 730
总而言之，面试官问来问去，问的那些Redis知识点也就这么多吧，复习的不够到位，知识点掌握不够熟练，所以面试才会卡壳。将这些Redis面试知识解析以及我整理的一些学习笔记分享出来给大家参考学习《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！大家参考学习还有更多学习笔记面试资料也分享如下：[外链图片转存中…(img-qqGiEtUj-1712925995904)]《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》
零基础Bootstrap入门教程(7)--使用表格
程序员大阳
04-26 3178
表单控件 添加.form-control样式即可将基本表单控件转化为Bootstrap样式 .form-control 应用于表单控件 .input-lg 大号控件 .input-sm 小号控件 Bootstrap基本表单 &amp;lt;form&amp;gt;&amp;lt;!--表单--&amp;gt; &amp;lt;div class=&quot;form-group&quot;&amp;gt;&amp
BootStrap入门到实战：BootStrap全局CSS样式（三）- 表格、表单、按钮、图片、辅助类
最新发布
林林一928的博客
05-19 1142
一. 表格 1.基本表格2.带边框的表格3.条纹状表格4.鼠标悬停时作出响应的表格5.紧缩表格6. 状态类7. 响应式表格。 二.表单 1.基本实例2.水平排列的表单3.内联表单4.被支持的控件4.1输入框4.2文本域4.3多选4.4 单选5.表单状态5.1焦点在状态5.2禁用状态5.3只读状态5.4效验状态5.5控制尺寸 三.按钮 1.可作为按钮使用的标签或元素2. 预定义样式3. 尺寸4. 禁用状态 四.图片 1.响应式图片2.图片形状 五.辅助类 1.情景文本颜色2.情景背景色3.关闭按钮4.三角符号
Bootstrap——表格（基本实例、表头选项、条纹状表格、带边框的表格、无边框的表格、鼠标指针悬停、紧凑表格、状态类、响应式表格）
m0_69034993的博客
11-05 9890
状态类设置的是、或元素样式，使用.table-*来设置，可选值包括success、active、primary、secondary、danger、warning、info、light、dark等，同时状态类也适用于反转色调。Bootstrap中提供了一系列表格布局样式，利用该样式可以帮助开发者快速开发出美观的表格，作用于元素的表格样式如下表所示。上表中，.table是表格的一个基类，如果想要加其他的样式，都要在.table的基础上去添加。例：表格背景颜色示例。
bootstrapTable的使用及表格的导出_bootstraptable 导出
2401_84240554的博客
04-13 2427
有toolbar：的样式无toolbar：的样式（2）sidePagination："client"或 “server”：分页方式：client客户端分页，server服务端分页（*）**client客户端分页：**如果是客户端分页的话，每次请求数据时请求的是全部数据，传递的请求参数中没有pageSize和PageNumber这两个属性；server服务端分页：如果是r服务端分页的话，每次请求数据时请求的是全部数据，传递的请求参数中必须有pageSize和PageNumber这两个属性；
bootstrap-table 常用用法
这个面它又长又宽
04-16 9691
页面效果： 导入资源： <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"></link> <script src="https://unpkg.com/boots...
Bootstrap Table使用整理（四）-工具栏
天马3798
06-08 2万+
一、启用默认支持的工具栏 /* * data-search 是否显示搜索框 * data-show-refresh 是否像是刷新按钮,注：刷新操作会重新请求数据，并带着请求参数 * data-show-toggle 是否显示面板切换按钮 * data-show-columns 是否显示列控制按钮 */ $('#table1').bootstrapTable({ columns: [
Bootstrap-table 自我留存
Rebirth 重生
05-18 1363
一、什么是Bootstrap-table？ 　　在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能，而且该插件同时也提供了一些不错的扩展功能，如..
如何实现BootStrapTable的动态表格
编程小透明的博客
09-13 4万+
BootStrapTable的动态表格 在我们构建BootStrapTable(下文中均称：BsTable)，其中columns参数作为表格列的内容存储，我们的需求是根据返回的数据动态的生成columns参数的内容。从而生成动态表格。 columns参数格式：类似下文 columns: { { field: 'Id', title: '编号', ...
Bootstrap中六种表格样式
weixin_30420305的博客
12-06 453
表格 表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格，在接下来的内容中，我们会详细介绍Bootstrap的表格使用。 同样的，如果你对CSS预处理器熟悉，你可以使用Bootstrap提供的预处理版本： ☑ LESS版本，...
Bootstrap多级树形分类折叠菜单.zip
05-24
Bootstrap多级树形分类折叠菜单基于Bootstrap2.2.1制作，多级分类树形菜单。
Bootstrap 表格内容水平、垂直居中
热门推荐
饮冰室人的博客
04-24 7万+
水平居中为 td th 设置text-align: center即可 需要注意的是：th 默认为内容居左，td 则没有，所以直接在 th 的父标签 tr上添加 class="text-center"是无效的 这是无效的<tr class="text-center"> <th >#</th> <th>商品信息</th> <th
bootstrap table使用总结
小小黑
01-09 4万+
使用bootstrap table可以很方便的开发后台表格，对数据进行异步更新，编辑。下面就来介绍一下bootstrap table的详细使用方法： 因为之前在官网也找了很久的教程，源码感觉隐藏的比较隐秘，其他扩展功能也很难找到，其实都在：http://issues.wenzhixin.net.cn/bootstrap-table/index.html这里面，点击上面的tab可以找到具体的功能实现（
bootstraptable 手册_bootstrap table表格使用方法详解
weixin_42395740的博客
02-15 8136
本文实例为大家分享了bootstrap table表格的使用方法，供大家参考，具体内容如下1.进入页面，根据指定的URL加载数据(json格式)2.加载成功，根据$table.bootstrapTable({options})显示表格样式。感觉还是挺漂亮的哈，OK，下面贴代码解释功能。开始之前，当然要引用js啦html代码，一是指定table要使用的工具栏，而是写一个空的table新增修改删除js...
bootstrap table的基础用法
野蛮女孩的博客
11-23 1820
JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利） 前言：前面介绍了两篇关于bootstrap table的基础用法，这章我们继续来看看它比较常用的一些功能，来个终结篇吧，毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能覆盖似乎不太现实，博主挑选了一些自认为比较常用的功能在此分享给各位园友。源码也在这篇统一给出。好了，不多说废话，开始我们的干货之旅吧。 bootstrap table系列： JS组件系列——表格组件神器：bootstra
bootstrap中六种表格样式
weixin_34337381的博客
11-29 1559
表格表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格，在接下来的内容中，我们会详细介绍Bootstrap的表格使用。同样的，如果你对CSS预处理器熟悉，你可以使用Bootstrap提供的预处理版本： LESS版本，对...
JS组件系列——表格组件神器：bootstrap table
weixin_33725272的博客
11-19 1566
前言：之前一直在忙着各种什么效果，殊不知最基础的Bootstrap Table用法都没有涉及，罪过，罪过。今天补起来吧。上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ，遇到不少使用方面的问题，也做了一部分笔记，在此分享出来供需要使用的园友参考。还记得前两天有园友加群问我Bootstrap Table的使用问题，呵呵，巧了，今天博主也遇到同样的问题了，在此还是要表示抱歉，没有...
Bootstrap 表格的可选样式
歪脖先生的博客
03-06 1万+
表格的可选样式除了 .table 类之外，Bootstrap还为表格提供了4个辅助类 .table-striped、.table-bordered、.table-hover 和 .table-condensed，分别用来实现带条纹背景的表格、带边框的表格、带悬停效果的表格、紧凑的表格。这 4个类之间互不排斥，可以根据需要，为一个表格应用多个类。1、带条纹背景的表格为 &lt;table&gt; 添...
深入探索Bootstrap前端框架
重点讲解了栅格系统，这是Bootstrap响应式布局的核心，包括其实现原理、基本用法、响应式特性以及如何处理重复代码。此外，还阐述了CSS组件架构的设计思想，包括基础样式、颜色、尺寸、状态、特殊元素、并列元素、嵌...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值