因为在实际应用中,我们可能经常会遇到除了主标题外,之后紧跟着一个副标题的情况。Bootstrap人性化的为我们设置了这样一个效果。使用方式也特别简单,如下:
Bootstrap标题一我是副标题
当然毋庸置疑的是,从
到 都可以使用该设置。副标题 有着自己一些独特的样式:
行高全部都设置为了1,而且字体粗细变成了常规效果(不加粗),同时颜色被设置为灰色( #999 )。
在h1~h3内的 标签文本,其大小都设置为当前字号的65%;而在h4~h6内的字号都设置为当前字号的75%;
2. 正文文本
Bootstrap中的文本全局样式如下:
字体大小为14px
行高为1.42867143(约等于20px)
字体颜色为 #333
p标签外部有着10个像素的下外边距 margin-bottom:10px;
当然,你是可以自行设置重置样式的。^_^
3. 强调
字体风格相关
i
small
h3
em
强调相关的类
在Bootstrap中定义了一系列的这样的类,用于不同的情景,出去text外,还有bg(背景颜色)等等。使用方法类似,只是前面的文本进行了一些改变!所以。 记住这6个单词吧
4. 文本对齐风格
在Bootstrap中,为了简化操作,方便使用,使用了上面这四个类分别对应我们在CSS中常常使用 text-align 来实现文本的对齐风格的设置。
5. 列表
在Bootstrap中对于列表的设置与原生的html基本一致,需要注意的有:
在列表之间有10px的下外边距
在嵌套列表中,不含有下边距
Bootstrap当然不会就这么简单做一点点修改,它定义了一些关于列表的类给我们使用。
去点列表 .list-unstyled
从源码中,我们可以看到这样的信息,它除了将项目编号去除之外,还将默认的左边距也清除掉了。
带有项目编号
带有项目编号
在这样一段代码中,三个列表项会整齐的 排列在一起 ,且都没有 项目符号
内联列表 .list-inline
除了去点列表之外,Bootstrap还可以通过添加类名“.list-inline”来实现内联列表,简单点说就是 把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示。 也可以说内联列表就是为制作水平导航而生。
水平定义列表 .dl-horizontal
现有代码如下:
标题一:
描述内容,我很喜欢前端,也很喜欢响应式布局,它能在个不同大小的屏幕下提供很好的体验,我现在是初学者,但是我会越来强的
标题二:标题二:标题二:标题二:
描述内容
在浏览器全屏显示中可以看到效果如下:

我们来把屏幕大小进行改变,在遇到一个临界值时(小屏),水平定义列表将回复到原始的状态,如下改变:

这是为什么呢?我们去看看源码吧!
原来在这里添加了一个媒体查询,只有 屏幕大于768px 的时候,添加类名 .dl-horizontal 才具有水平定义列表效果。其实现主要方式:
将dt设置了一个左浮动,并且设置了一个宽度为160px
将dd设置一个margin-left的值为180px,达到水平的效果
当标题宽度超过160px时,将会显示三个省略号
现在再看看上面的效果是不是和这里的描述都是一样的呢?答案当然是肯定的 ^ ^
6. 代码
在Bootstrap主要提供了三种代码风格:
使用
来显示单行内联代码——针对于 单个单词或单个句子 的代码
使用
来显示多行块代码——针对于 多行代码 (也就是成块的代码)
使用
来显示用户输入代码——表示 用户要通过键盘输入的内容
直接来看效果吧!

代码如下:(需要注意的是,**不管使用哪种代码风格,在代码中碰到小于号( < )和大于号( > )都需要使用转义字符来替代)
code风格: