bootstrap的排版、代码、表格
bootstrap的排版、代码、表格主要就是介绍bootstrap提供的预置的类供使用。
排版:
1 标题 。
h1-h6 small标签代表副标题
2 页面主体 。
bootstrap将全局font-size设置为14px,line-height设置为1.428.这些属性直接赋予<bodu>元素和所有段落元素。另外<p>元素还被设置了等于1/2行高(10px)的底部外边距(margin)。
3 中心内容。
<lead>标签 可以让段落突出显示
4 内联文本元素
<mark>标签 可以使得文本高亮
5 被删除的文本
<del>标签
6 无用文本
<s>标签 跟被删除的文本样式一样
7 插入文本
<ins> 文本下方有删除线
8 带下划线的文本
<u>
9 小号文本
<small> 文本的大小将被设置为父容器字体大小的85%
10 着重
<strong> 通过增加font-weight强调文本
11 斜体
<em> 用斜体强调一段文本
12 代替的元素
在html5中可以放心使用<b>和<i>标签。<b>用于高亮单词或短语,不带有任何着重的意味;儿<i>标签主要用于发音、技术词汇等。
13 对齐
.text-left 左对齐
.text-right 右对齐
.text-center 中心对齐
.text-justify 文本过多换行
.text-nowrap 文本过多不换行
14 改变大小写
.text-lowercase 全部小写
.text-uppercase 全部大小
.text-capitalize 首字母大写
15 缩略语
当鼠标悬停在缩写和缩写词上时就会显示完整内容,bootstrap实现了对html的<abbr>元素的增强样式。缩略语元素带有title属性,外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有“问号”的指针。如想查看完整的内容可把鼠标悬停在缩略语上(对使用辅助技术的用户也可见),但需要包含title属性。
16 基本缩略语
<abbr>
17 首字母缩略语
.initialism 可以让缩略语的font-size变得稍微小些。
18 地址
<address> 在每行结尾添加<br>可以保留需要的样式
19 引用
<blockquote> 引用样式,文本左侧会出现一个竖线
20 引用----命名来源
<footer> <cite> footer标明引用来源,来源的名称在cite标签中
21 引用-----另一种展示风格
.blockquote-reverse 可以让引用呈现右对齐的效果
22 列表-----无序列表,有序列表
<ul><li> <ol><li>
23 列表------无样式列表
.list-unstyled
24 列表-----内联列表
.list-inline 将所有元素放置于同一行
25 描述
<dl><dt></dt><dd></dd></dl>
26 水平排列的描述
.dl-horizontal 可以让<dl>内的短语及其描述排在一行
代码:
1 内联代码
<code> 代码片段样式,使得标签内文本变红色
2 用户输入
<kbd> 增加键盘输入的样式,黑窗口的样式
3 代码块
<pre> 代码块样式,增加外部框
4 变量
<var> 变量的样式
5 程序输出
<samp> 程序输出的样式
表格:
1 基本实例
.table
2 条纹状表格
.table-striped 给表格每一行增加斑马条纹样式
3 带边框的表格
.table-bordered 增加边框
4 鼠标悬停
.table-hover 增加鼠标悬停状态
5 紧缩表格
.table-condensed 让表格更加紧凑
6 状态类
Class 描述 .active
鼠标悬停在行或单元格上时所设置的颜色 .success
标识成功或积极的动作 .info
标识普通的提示信息或动作 .warning
标识警告或需要用户注意 .danger
标识危险或潜在的带来负面影响的动作
7 响应式表格
.table-responsive 响应式表格,在小屏幕设备上水平滚动。 不加则会换行