bootstrap在reset.css文件中设置margin为0，因此其他的标签需要重新设计margin。

Bootstrap文本与列表样式

最新推荐文章于 2021-06-07 11:07:55 发布

转载最新推荐文章于 2021-06-07 11:07:55 发布 · 159 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yeqifei/p/5006204.html

本文介绍了Bootstrap框架中标题、段落、列表等元素的样式设置方法。包括如何使用不同的类来改变文本样式、如何调整列表的显示效果等内容。

bootstrap在reset.css文件中设置margin为0，因此其他的标签需要重新设计margin。

1.h

<h>标签和普通使用方法一样。

定义了.h1~.h6六个类名，样式和标题样式一样。

副标题用<small>标签指出，必须包含在h标签内。

<h1>Bootstrap标题一</h1>

<div class="h1">Bootstrap标题一</div>

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

2.p

定义<body>的字体库、字号、行高、颜色，<p>标签继承这些设置，单独设置margin-bottom为10px，使用方法同普通方法。

强调内容

增大：.lead;

加粗：<strong>; <b>（设置font-weight: bold）

斜体：<em>;<i> （设置font-style: italic）

不变：<cite>

变小：<small>,.small

强调类（颜色）

• .text-muted：提示，使用浅灰色（#999）

• .text-primary：主要，使用蓝色（#428bca）

• .text-success：成功，使用浅绿色(#3c763d)

• .text-info：通知信息，使用浅蓝色（#31708f）

• .text-warning：警告，使用黄色（#8a6d3b）

• .text-danger：危险，使用褐色（##a94442）

文本对齐

（设置text-align：center、left、right、justify）

☑   .text-left：左对齐

☑   .text-center：居中对齐

☑   .text-right：右对齐

☑   .text-justify：两端对齐

3.列表（ul ol dl）

Bootstrap对于列表，只是在 margin 上做了一些调整

margin-top: 0;

  margin-bottom: 10px;

去除项目符号

.list-unstyled

（padding-left: 0;

list-style: none;）

内联列表，制作水平导航

.list-inline

代码

<code> <pre> <kbd>

<pre class=“.pre-scrollable”> 设置最大代码区域