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

bootstrap(1)关于排版

2024-09-21 01:11:04   216人阅读

关于标题

我们在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)关于排版


联系
我们