《深入理解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 >
相关文章 相关视频 专题推荐
|
推荐阅读
-
《深入理解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布局
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论