Bootstrap入门书籍之(一)排版

Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。

使用 Bootstrap 的排版特性,您可以创建标题、段落、列表及其他内联元素。

1. 标题

在Bootstrap中使用标题的方式和常规html一样:从 <h1> 到 <h6> 分别从大到小安排标题元素,只不过在Bootstrap中重新设置了其默认样式,从源码中可以看到有如下共性:

字体颜色与字体样式继承自父元素,字体粗细为500,且行高全部设为1.1(也就是font-size的1.1倍)

{ font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; }

在不同大小的标题中有着如下区别:

在Bootstrap中对于不同级别标题字体大小设置为: h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px。

重新设置了 margin-top 和 margin-bottom 的值, h1~h3 重置后的值都是 20px ; h4~h6 重置后的值都是 10px 。

除此之外在Bootstrap中为了 让非标题元素和标题使用相同的样式 ,还特意定义了 .h1~.h6 六个类名。如下所示:

在Bootstrap中,下面的代码,显示效果相同。

<!--Bootstrap中的标题--> <h1>Bootstrap标题一</h1> <h2>Bootstrap标题二</h2> <h3>Bootstrap标题三</h3> <h4>Bootstrap标题四</h4> <h5>Bootstrap标题五</h5> <h6>Bootstrap标题六</h6> <!--Bootstrap中让非标题元素和标题使用相同的样式--> <div>Bootstrap标题一</div> <div>Bootstrap标题二</div> <div>Bootstrap标题三</div> <div>Bootstrap标题四</div> <div>Bootstrap标题五</div> <div>Bootstrap标题六</div>

因为在实际应用中,我们可能经常会遇到除了主标题外,之后紧跟着一个副标题的情况。Bootstrap人性化的为我们设置了这样一个效果。使用方式也特别简单,如下:

<h1>Bootstrap标题一<small>我是副标题</small></h1>

当然毋庸置疑的是,从 <h1> 到 <h6> 都可以使用该设置。副标题 <small> 有着自己一些独特的样式:

行高全部都设置为了1,而且字体粗细变成了常规效果(不加粗),同时颜色被设置为灰色( #999 )。
在h1~h3内的 <small> 标签文本,其大小都设置为当前字号的65%;而在h4~h6内的字号都设置为当前字号的75%;

2. 正文文本

Bootstrap中的文本全局样式如下:

字体大小为14px
行高为1.42867143(约等于20px)
字体颜色为 #333
p标签外部有着10个像素的下外边距 margin-bottom:10px;
当然,你是可以自行设置重置样式的。^_^

3. 强调

字体风格相关

<p>lead</p><!-- 字体变大,行高变大,下外边距变大 --> <i>i</i><!--无特殊意义, 斜体 --> <small>small</small><!-- 小号字体--> <strong>strong</strong><!-- 语气强烈的强调,粗体 --> <em>em</em><!-- 强调,斜体 -->

强调相关的类

在Bootstrap中定义了一系列的这样的类,用于不同的情景,出去text外,还有bg(背景颜色)等等。使用方法类似,只是前面的文本进行了一些改变!所以。 记住这6个单词吧

<p>提示,使用浅灰色(#999)</p> <p>主要,使用蓝色(#428bca)</p> <p>成功,使用浅绿色(#3c763d)</p> <p>通知信息,使用浅蓝色(#31708f)</p> <p>警告,使用黄色(#8a6d3b)</p> <p>危险,使用褐色(#a94442)</p>

4. 文本对齐风格

<p>我居左</p> <p>我居中</p> <p>我居右</p> <p>我两端对齐</p>

在Bootstrap中,为了简化操作,方便使用,使用了上面这四个类分别对应我们在CSS中常常使用 text-align 来实现文本的对齐风格的设置。

5. 列表

在Bootstrap中对于列表的设置与原生的html基本一致,需要注意的有:

在列表之间有10px的下外边距

在嵌套列表中,不含有下边距

Bootstrap当然不会就这么简单做一点点修改,它定义了一些关于列表的类给我们使用。

去点列表 .list-unstyled

.list-unstyled { padding-left: 0; list-style: none; }

从源码中,我们可以看到这样的信息,它除了将项目编号去除之外,还将默认的左边距也清除掉了。

<ol> <li> 项目列表 <ul> <li>带有项目编号</li> <li>带有项目编号</li> </ul> </li> </ol>

在这样一段代码中,三个列表项会整齐的 排列在一起 ,且都没有 项目符号

内联列表 .list-inline

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgypsf.html