文档章节

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

珲少
 珲少
发布于 2016/12/05 14:29
字数 1084
阅读 158
收藏 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

© 著作权归作者所有

共有 人打赏支持
珲少

珲少

粉丝 852
博文 384
码字总数 452377
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

Linux学习-1031(rsync同步工具 上)

10.28 rsync工具介绍 10.29/10.30 rsync常用选项 10.31 rsync通过ssh同步 一、 rsync工具介绍 rsync是一个同步工具,在日常的运维中常会用到。它可以本地同步,也实现可以远程两台机器同步。...

wxy丶
27分钟前
1
0
python实战一期:第一天

1. 为什么学习python 1.1 为什么要学Python? Python第一是个非常牛B的脚本语言,能满足绝大部分自动化运维的需求,又能做后端C/S架构,又能用WEB框架快速开发出高大上的Web界面,只有当你自...

laoba
30分钟前
2
0
Java并发编程学习三:线程同步的关键字以及理解

上篇文章中介绍了Java线程的带来的问题与内存模型中介绍了线程可能会引发的问题以及对应Java的内存模型,顺带介绍了Volatile和Sychronized关键字。今天对Java中涉及到的常见的关键类和关键字...

JerryLin123
36分钟前
0
0
我用代码来给你们分析一个赚钱的技巧

赚钱是个俗气的话题,但又是人人都绕不开的事情。我今天来“科学”地触碰下这个话题。 谈赚钱,就会谈到理财、投资,谈到炒股。有这样一个笑话: 问:如何成为百万富翁? 答:带一千万进入股...

crossin
36分钟前
1
0
spring MatchingBean应用

1、编写接口FactoryList import java.util.List;public interface FactoryList<E extends MatchingBean<K>, K> extends List<E> { E getBean(K factor); List<E> getBeanLi......

重城重楼
50分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部