文档章节

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

珲少
 珲少
发布于 2016/12/05 14:29
字数 1084
阅读 147
收藏 1

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

© 著作权归作者所有

共有 人打赏支持
珲少

珲少

粉丝 842
博文 376
码字总数 441694
作品 0
上海
iOS工程师
十大前端开发框架(下)

本文由伯乐在线 -厉瑶 翻译。未经许可,禁止转载! 英文出处:Site Point。欢迎加入翻译组。 在《十大前端开发框架(上)》中我们了解了跟Bootstrap相关的一系列前端开发框架,如果你对于Boo...

伯乐在线
2013/07/01
0
0
十大前端开发框架(上)

本文由伯乐在线 -厉瑶 翻译。未经许可,禁止转载! 英文出处:site point。欢迎加入翻译组。 编者按:考虑到英文原文的长度以及可读性,十大前端开发框架将分成上下两部分呈现给大家。上半部...

伯乐在线
2013/07/16
0
0
物联网学习笔记——构建RESTFul平台1

0.前言 前些时间顺着Yeelink学习了RESTFUL,使用PHP和Slim框架尝试实现简单的REST API,树莓派可通过GET方法获得JSON数据包,通过这种方式实现了树莓派和服务器(我的PC)的互动。但是由于没...

thinkyoung
2014/12/02
0
0
Bootstrap响应式前端框架笔记十五——面板与井

Bootstrap响应式前端框架笔记十五——面板与井 Bootstrap中的面板由pannel相关类来创建,一个完整的面板分为面板头部、面板体和面板注脚,并且Bootstrap中默认定义了一些面板风格,示例如下:...

珲少
2016/12/22
22
0
Bootstrap响应式前端框架笔记十七——下拉列表交互

Bootstrap响应式前端框架笔记十七——下拉列表交互 为dropdown-toggle类添加data-toggle="dropdown"属性可以实现其下拉列表功能的绑定,示例如下: 点击此按钮后,可以自动实现下拉列表的显示...

珲少
2016/12/27
101
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

[雪峰磁针石博客]python3快速入门教程1 turtle绘图-2函数

菲波那契序列: >>> # Fibonacci series:... # the sum of two elements defines the next... a, b = 0, 1>>> while b < 10:... print(b)... a, b = b, a+b...112......

python测试开发人工智能安全
今天
0
0
java环境变量配置最正确的方式

原贴:https://blog.csdn.net/qq_40007997/article/details/79784711,十分详细,亲测有效

kitty1116
今天
0
0
49.Nginx防盗链 访问控制 解析php相关 代理服务器

12.13 Nginx防盗链 12.14 Nginx访问控制 12.15 Nginx解析php相关配置(502的问题) 12.16 Nginx代理 扩展 502问题汇总 http://ask.apelearn.com/question/9109 location优先级 http://blog....

王鑫linux
今天
1
0
Nginx防盗链、访问控制、解析php相关配置、Nginx代理

一、Nginx防盗链 1. 编辑虚拟主机配置文件 vim /usr/local/nginx/conf/vhost/test.com.conf 2. 在配置文件中添加如下的内容 { expires 7d; valid_referers none blocked server_names *.tes......

芬野de博客
今天
0
0
spring EL 和资源调用

资源调用 import org.springframework.beans.factory.annotation.Value;import org.springframework.context.annotation.PropertySource;import org.springframework.core.io.Resource;......

Canaan_
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部