Bootstrap响应式前端框架笔记三——代码与表格

Bootstrap响应式前端框架笔记三——代码与表格

一、代码

    在技术博客文章类页面的开发中,常常需要在文本总插入说明代码,使用code便签可以创建这种效果,示例如下:

		<p>code标签用于在文本中插入代码</p>
		<div>定义变量a:<code>int a = 3; </code></div>

效果如下:

kbd标签可以用来提示进行键盘输入,示例如下:

		<p>kbd标签可以创建用户键盘输入的效果</p>
		<div>使用键盘上的<kbd>control</kbd>+<kbd>v</kbd>来进行文本的粘贴</div>

效果:

可以使用pre标签来进行成段代码的插入,同时可以使用pre-scrollable类来将代码块修饰为可滚动的,示例如下:

		<pre class="pre-scrollable">
		&lt;head&gt;
			&lt;meta charset="UTF-8"&gt;
			&lt;link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css" /&gt;
			&lt;title&lt;代码与表格&lt;/title&gt;
		&lt;/head&gt;
		</pre>

效果如下:

除了上面描述的标签和类外,一般情况下,程序中的变量会以斜体来显示,也可以使用var标签来包裹,程序输出结果可以使用samp标签来包裹。

二、表格

    为H5标签table添加table类可以使用Bootstrap定义的表格样式,示例如下:

		<p>使用table标签添加table类可以进行表格的创建</p>
		<table class="table">
			<thead>学生表</thead>
			<tr>
				<th>班级</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<th>3年1班</th>
				<th>jaki</th>
				<th>24</th>
			</tr>
		</table>

效果如下:

为表格添加tabke-striped类可以实现斑马纹样式的表格,示例如下:

		<p>使用table-striped类可以为表格添加斑马纹</p>
		<table class="table table-striped">
			<thead>学生表</thead>
			<tr>
				<th>班级</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<th>3年1班</th>
				<th>jaki</th>
				<th>24</th>
			</tr>
			<tr>
				<th>3年2班</th>
				<th>Annay</th>
				<th>22</th>
			</tr>
		</table>

效果如下:

Bootstrap默认的列表样式是不带边框的,可以使用table-bordered类来为列表添加边框,示例如下:

		<p>使用table-boardered类可以为表格添加边框</p>
		<table class="table table-striped table-bordered">
			<thead>学生表</thead>
			<tr>
				<th>班级</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<th>3年1班</th>
				<th>jaki</th>
				<th>24</th>
			</tr>
			<tr>
				<th>3年2班</th>
				<th>Annay</th>
				<th>22</th>
			</tr>
		</table>

效果如下:

使用table-hover类修饰的列表,当鼠标悬停时会有高亮效果,示例如下:

		<p>使用table-hover类修饰的列表,当鼠标悬停时 会有高亮效果</p>
		<table class="table table-hover">
			<thead>学生表</thead>
			<tr>
				<th>班级</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<th>3年1班</th>
				<th>jaki</th>
				<th>24</th>
			</tr>
			<tr>
				<th>3年2班</th>
				<th>Annay</th>
				<th>22</th>
			</tr>
		</table>

使用.table-condensed类可以是默认的列表padding减半。

    对于行标签tr与列表前th,开发者也可以使用如下类来修饰,为其指定状态:

.active类:将此行或者此列标记为高亮状态。

.success类:将此行或者此列标记为成功状态。

.info类:将此行或者此列标记为详情状态。

.warning类:将此行或者此列标记为警告状态。

.danger类:将此行或者此列标记为危险状态。

示例代码如下:

		<p>为列表设置状态</p>
		<table class="table table-hover table-condensed">
			<thead>学生表</thead>
			<tr>
				<th>班级</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr class="active">
				<th>3年1班</th>
				<th>jaki</th>
				<th>24</th>
			</tr>
			<tr class="success">
				<th>3年2班</th>
				<th>Annay</th>
				<th>22</th>
			</tr>
			<tr class="info">
				<th>3年1班</th>
				<th>CJ</th>
				<th>19</th>
			</tr>
			<tr class="warning">
				<th>3年1班</th>
				<th>jaki</th>
				<th>24</th>
			</tr>
			<tr>
				<th>3年2班</th>
				<th class="danger">Annay</th>
				<th>22</th>
			</tr>
		</table>

效果如下:

列表元素也可以包裹在table-responsive类内,此时列表会变成响应式列表,当屏幕尺寸小于768px时,会自动出现水平滚动条。

   另外,本篇博客中所有的实例代码及显示效果,在如下地址中,需要的可以自行对照学习。

http://zyhshao.github.io/bootStrapDemo/codeAndGroup.html

前端学习新人,有志同道合的朋友,欢迎交流与指导,QQ群:541458536

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏简书专栏

基于Excel2013的数据转换和清洗

数字可以被设成的格式有12种:常规、数值、货币、会计专用、日期、时间、百分比、分数、科学记数、文本、特殊、自定义

1592
来自专栏JetpropelledSnake

Vue学习笔记之Vue指令系统介绍

所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了。

1034
来自专栏数据科学学习手札

(数据科学学习手札41)folium基础内容介绍

  folium是js上著名的地理信息可视化库leaflet.js为Python提供的接口,通过它,我们可以通过在Python端编写代码操纵数据,来调用leaf...

6827
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2.2.3 文档对象模型DOM及表单

文档对象模型DOM用途是什么?先从一棵树说起。下面是一棵树,由,根部、枝干、叶构成,通过根部可以访问到任何一个叶节点。

702
来自专栏竹清助手

jQuery架构设计与实现(2.1.4版本)

1414
来自专栏Modeng的专栏

Vue2.5笔记:Vue中的模版

我们在上一篇说到如何把 Vue 实例中的数据显示到视图中,就会需要用到我们的模版,我们只是简单的使用了一些,模版其实还有很多其他的特性。今天我们就来看看模版的其...

1201
来自专栏前端知识分享

第80天:jQuery插件使用

jQuery其他补充 + 4.1 链式编程: end()补充 * 补充五角星 评论案例 * 第一步:鼠标移入,当前五角星和前面的五角星变实体。后...

821
来自专栏CoXie带你学编程

初学Python:写码时应该缩进使用 tab 还是空格?

在不同的编辑器里tab的长度可能不一致,所以在一个编辑器里用tab设置缩进后,在其它编辑器里看可能缩进就乱了。空格不会出现这个问题,因为空格就占一个字符的位置。

1631
来自专栏全沾开发(huā)

总结CSS3新特性(选择器篇)

总结CSS3新特性(选择器篇) CSS3新增了 ? 嗯- -21个选择器,脚本通过控制台在这里运...

2924
来自专栏Petrichor的专栏

python: and & or 探究

今天处理的数据集里,图片同时有 “.jpg” 和 “.JPG” 两种后缀名,因此我要实现一个 找出所有不同后缀图片 的功能。一开始,实现该功能的模块我是这么写的...

1292

扫码关注云+社区

领取腾讯云代金券