|
1
2
3
4
5
6
|
header1small标记的副标题header2small标记的副标题header3small标记的副标题header4small标记的副标题header5small标记的副标题header6small标记的副标题 |
所有标题元素里的内容的字体颜色都是灰色（#999999），行间距都为1。
内的文本字体在h1、h2、h3内是当前元素所对应字体大小的65%；而在h4、h5、h6下则是75%。
A. 字体大小为14px，间距为20px。p元素的margin-bottom为行间距一半（10px）。
B. 突出显示
立即学习“前端免费学习笔记（深入）”；
当你有一段文字，想高亮显示，又不想获得和h标记一样的权重时，可以class="lead"<br>
|
1
|
email me
|
如图.lead和h1的对比效果：
<br>
| 强调元素 | 表现 |
|
small （可以直接套用.small类） |
小号文本 |
| strong | 着重（加粗） |
| em | 斜体 |
| cite | 引用来源，字体大小为85% |
两者都可以实现下划虚线悬停手型效果 需要搭配title属性使用。
用来包裹和联系方式有关的信息。样式差别是间距和底部样式稍微有点不同。
|
1
2
3
4
5
6
7
8
9
10
|
Twitter, Inc.<br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
P:(123) 456-7890
汤姆大叔<br>
|
效果如图
引用的一般格式是
|
1
2
3
4
|
爱情不是你想买想买就能买 出自爱情买卖 |
当然，small换成footer也是一样的效果。
默认是左对齐的，想要右对齐可以对blockquote使用.pull-right类。整体飘到了右边。
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
|
|
<br>
更换了字体，显示更加柔和
定义列表包括了描述信息，bootstrap下的dl-dt-dd定义列表通常也是纵向排列的。
|
1
2
3
4
5
6
7
8
|
|
我想在横向展示一个商品列表，包括描述信息。如果给dl加上class="dl-horizontal"
包括code单行代码，kbd用户输入代码和pre多行代码块。
代码样式的用法示例如下：
|
1
2
3
|
<br>@@######@@
|
code内联代码可以在行间引用。原理是给code标记定义背景色，文字颜色
kbd表示需要用户输入，可以配合input元素使用。
|
1
|
请输入ctrl+c来复制代码，然后使用ctrl+v来粘贴代码
|
pre是预编译的意思。bootstrap实现基本方法是背景-边框，高度，圆角，竖向滚动。
粘贴进去会有空格。
类似还有可以格式化代码。用较为标准的字体和行间距显示
（1）,也可以使用.mark
|
1
|
this is mark text |
<br>
|
1
|
|
|
1
2
3
4
5
6
7
8
|
I am afraid William Shakespeareyou say that you love rain, but you open your umbrella when it rains.You say that you love the sun, but you find a shadow spot when the sun shines.You say that you love the wind, but you close your windows when wind blows. This is why I am afraid, you say that u love me too. 译文
你说烟雨微芒，兰亭远望；后来轻揽婆娑，深遮霓裳。你说春光烂漫，绿袖红香；后来内掩西楼，静立卿旁。你说软风轻拂，醉卧思量；后来紧掩门窗，漫帐成殇。 你说情丝柔肠，如何相忘；我却眼波微转，兀自成霜。 |
表格实现是给table加上.table类
|
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
|
|
秒变高富帅了有木有？
table-striped：斑马线<br>
使用CSS3的:nth-child实现。
使用.table-bordered可以为所有单元格添加1px的边框。
使用.table:hover可以让当前行悬停高亮
table-condensed:压缩，稍微小一点——减少单元格的内边距。全部应用后是这样的。<br>
<br>
代码清单
|
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
|
|
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1018
