《深入理解bootstrap》读书笔记：第三章 CSS布局
一. 概述一下理念
二. 文字基础排版（全局设置）
1.标题（h标记和small标记）
|
1
2
3
4
5
6
|
|
所有标题元素里的内容的字体颜色都是灰色（#999999），行间距都为1。
内的文本字体在h1、h2、h3内是当前元素所对应字体大小的65%；而在h4、h5、h6下则是75%。
A. 字体大小为14px，间距为20px。p元素的margin-bottom为行间距一半（10px）。
B. 突出显示
当你有一段文字，想高亮显示，又不想获得和h标记一样的权重时，可以class="lead"
|
1
|
|
如图.lead和h1的对比效果：
2. 强调文本
| 强调元素 | 表现 |
|
small （可以直接套用.small类） |
小号文本 |
| strong | 着重（加粗） |
| em | 斜体 |
| cite | 引用来源，字体大小为85% |
3. 缩略语abbr和.initialism
两者都可以实现下划虚线悬停手型效果 需要搭配title属性使用。
4. 地址address
用来包裹和联系方式有关的信息。样式差别是间距和底部样式稍微有点不同。
|
1
2
3
4
5
6
7
8
9
10
|
795 Folsom Ave, Suite 600
San Francisco, CA 94107
address>
address>
|
效果如图
5. 引用blockquote
引用的一般格式是
|
1
2
3
4
|
出自爱情买卖
|
当然，small换成footer也是一样的效果。
默认是左对齐的，想要右对齐可以对blockquote使用.pull-right类。整体飘到了右边。
6. 列表
（1）ul-li无序列表
bootstrap下，普通列表的ul-li框架和默认基本是一样的。
A. ul-li列表的样式是由list-style决定的。在bootstrap框架使用.list-unstyle类。源码样式无非是padding-left:0;list-style:none。
注意：如果是列表嵌套列表，对祖父级的ul应用.list-unstyle类，孙代li是不会继承的。
B. 内联列表：正常的ul-li是竖着显示的。在很多场合，最典型的就是导航，需要把li打横排列。这时可以使用内联列表的.list-inline类
|
1
2
3
4
5
|
ul>
|
（2）有序列表ol-li
更换了字体，显示更加柔和
（3）dl-dt-dd定义列表
定义列表包括了描述信息，bootstrap下的dl-dt-dd定义列表通常也是纵向排列的。
|
1
2
3
4
5
6
7
8
|
dl>
|
我想在横向展示一个商品列表，包括描述信息。如果给dl加上class="dl-horizontal"
7. 代码
包括code单行代码，kbd用户输入代码和pre多行代码块。
代码样式的用法示例如下：
|
1
2
3
|
|
（1）code
code内联代码可以在行间引用。原理是给code标记定义背景色，文字颜色
（2）kbd
kbd表示需要用户输入，可以配合input元素使用。
|
1
|
请输入ctrl+c来复制代码，然后使用ctrl+v来粘贴代码 |
（3）多行代码块pre
pre是预编译的意思。bootstrap实现基本方法是背景-边框，高度，圆角，竖向滚动。
粘贴进去会有空格。
类似还有可以格式化代码。用较为标准的字体和行间距显示
8.其它H5标记补充
（1）,也可以使用.mark
|
1
|
|
（2）del标记和s标记
|
1
|
|
（3）ins标记和u标记
（4）对齐相关
（5）大小写相关：
【例3.1】文本排版练习
|
1
2
3
4
5
6
7
8
|
div>
|
三. 表格相关css
表格实现是给table加上.table类
【例3.2】做一个5行5列的表格，记录信息
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
tr>thead>
tr>
tr>
tr>
tr>
tbody>
table>
|
1.table基础样式
（1） 给table标签加上class="table"，效果就变为：
秒变高富帅了有木有？
（2）隔行变色.table-striped
table-striped：斑马线
使用CSS3的:nth-child实现。
（3）添加边框
使用.table-bordered可以为所有单元格添加1px的边框。
（4）悬停高亮
使用.table:hover可以让当前行悬停高亮
（5）紧凑型表格
table-condensed:压缩，稍微小一点——减少单元格的内边距。全部应用后是这样的。
代码清单
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
tr>thead>
tr>
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。 相关文章 相关视频 专题推荐
作者信息
|
推荐阅读
-
《深入理解bootstrap》读书笔记：第4章 CSS组件（下）
-
[Bootstrap]7天深入Bootstrap(3)CSS布局_html/css_WEB-ITnose
-
《深入理解bootstrap》、： CSS组件
-
《深入理解bootstrap》读书笔记：第4章 CSS组件（上）
-
《深入理解bootstrap》读书笔记：第二章 整体架构
-
[Bootstrap]7天深入Bootstrap(3)CSS布局_html/css_WEB-ITnose
-
《深入理解bootstrap》读书笔记：第一章 入门准备
-
《深入理解bootstrap》、： CSS组件
-
《深入理解bootstrap》读书笔记：第三章 CSS布局
-
《深入理解bootstrap》读书笔记：第三章 CSS布局
网友评论
文明上网理性发言，请遵守 新闻评论服务协议
我要评论