首页 > 代码库 > bootstrap(1)关于排版

bootstrap(1)关于排版

关于标题

我们在html中通过h1 h2,h3...h6来定义标题,同样,在bootstrap中也是通过h1到h6来定义标题,不同的是在bootstrap中重新定义了样式

源码如下:

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}

1字体颜色和样式继承于父元素,字体粗细为500,行高为1.1,是font-size的1.1倍,对于不同标题的字体大小设置为

h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px。

2重新设置了margin-top和margin-bottom的值,h1-h3为20px,h4-h6为10px

在上面的源码中我们也可以看到,对于非标题元素,我们可以通过定义class为h1-h6来i将非标题元素转化为标题元素

对于在主标题后面添加一个副标题的情况,我们使用small元素来包裹副标题

<h1>我是主标题<small>我是副标题</small></h1>

  显示效果small标签内的字体显示为灰色,字体粗细显示为了常规效果

  h1-h3内的文本,small内的文本显示为当前字体的65%,h4-h6显示字体为当前字体的75%;

关于正文

bootstrap将全局样式设置为

font-size:14px;

line-height:1.428;

这些属性设置为body元素和所有的段落元素,另外段落元素被设置为10px

强调文本:

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

关于强调相关的类:

1 <p class="text-muted">提示,使用浅灰色(#999)</p>
2 <p class="text-primary">主要,使用蓝色(#428bca)</p>
3 <p class="text-success">成功,使用浅绿色(#3c763d)</p>
4 <p class="text-info">通知信息,使用浅蓝色(#31708f)</p>
5 <p class="text-warning">警告,使用黄色(#8a6d3b)</p>
6 <p class="text-danger">危险,使用褐色(#a94442)</p>  

文本对齐:

<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">我两端对齐</p>

关于列表:

对于列表有以下几种类:

(1)添加  class="unstyled"将列表的项目上的点号去掉

代码如下

<ul class="unstyled">
      <li>项目1</li>
      <li>项目2</li>
      <li>项目3</li>
</ul>

显示:

项目1

项目2

项目3

通过unstyled我们去掉了选项前面的点号

(2)通过添加class=".list-inline"来使垂直列表转化为水平列表

<ul class="list-inline">
      <li>项目1</li>
      <li>项目2</li>
      <li>项目3</li>
</ul>  

显示:

项目1  项目2 项目3

 

bootstrap(1)关于排版