一、Bootstrap排版

1.1标题标签

1.1.1h1-h6标签

Bootstrap中对标题标签（h1-h6）的样式重新做了样式的定义，使用方式和HTML标签中使用方式一样：

例：

1 <!--标题标签-->
2 <h1>h1</h1>
3 <h2>h2</h2>
4 <h3>h3</h3>
5 <h4>h4</h4>
6 <h5>h5</h5>
7 <h6>h6</h6>

View Code

1.1.2内联子标题small标签或.small类

在标题内还可以包含<small>标签或赋予.small类的元素，可以用来设计一个字号更小的颜色更浅的文本（可以用来标记副标题）。

例：

1 <!--使用smal标签或者包含class为small的标签可以将标题标签内部内容设置字体更小颜色更浅的字体-->
2 <h1>
3     h1
4     <small>small标签</small>
5     或者
6     <div class="small">.small类</div>
7 </h1>

View Code

 

 1.1.3段落标签p

 Bootstrap中对段落标签（p）的样式也重新做了样式的定义，使用方式和HTML标签中使用方式一样：

 

1 <!--段落标签-->
2 <p>段落标签中包含的内容</p>

View Code

通过添加 .lead 类可以让段落突出显示，使用方式如下所示：

例：

1 <p class="lead">为段落标签添加.lead类后的内容效果</p>

View Code

1.1.4 文本强调

HTML 的默认强调标签 <small>（设置文本为父文本大小的 85%）、<strong>（设置文本为更粗的文本）、<em>（设置文本为斜体）。

例：

1 <small>本行内容是在标签内</small><br>
2 <strong>本行内容是在标签内</strong><br>
3 <em>本行内容是在标签内，并呈现为斜体</em><br>

View Code

1.1.5 文本对齐方式和字体样式

 1 <h1>文本对齐方式和字体样式</h1>
 2 <hr />
 3 <p class="text-left">向左对齐文本</p>
 4 <p class="text-center">居中对齐文本</p>
 5 <p class="text-right">向右对齐文本</p>
 6 <p class="text-muted">本行内容是减弱的</p>
 7 <p class="text-primary">本行内容带有一个 primary class</p>
 8 <p class="text-success">本行内容带有一个 success class</p>
 9 <p class="text-info">本行内容带有一个 info class</p>
10 <p class="text-warning">本行内容带有一个 warning class</p>
11 <p class="text-danger">本行内容带有一个 danger class</p>

View Code

1.1.6 内联文本元素mark

 

 

 

 1.1.7 被删除的文本

对于被删除的文本使用 <del> 标签

 

 

 1.1.8 无用文本

对于没用的文本使用 <s> 标签。

 

 

1.1.9 插入文本ins

额外插入的文本使用 <ins> 标签。

 

 

 1.1.10 带下划线的文本u

为文本添加下划线，使用 <u> 标签。

 

 

1.1.11 改变大小写

 

text-lowercase：将大写的字母改变为小写字母

text-uppercase：将小写的字母改变为大写字母

text-capitalize：首字母改变为大写字母

 

标签：Code,1.1,样式,标签,本行,CSS,文本,第四章,View
来源： https://www.cnblogs.com/chengyp/p/14470154.html