在Bootstrap中使用标题的方式和常规html一样：从
字体颜色与字体样式继承自父元素，字体粗细为500，且行高全部设为1.1（也就是font-size的1.1倍）
{ font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit;}在不同大小的标题中有着如下区别：
除此之外在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 class="h1">Bootstrap标题一</div><div class="h2">Bootstrap标题二</div><div class="h3">Bootstrap标题三</div><div class="h4">Bootstrap标题四</div><div class="h5">Bootstrap标题五</div><div class="h6">Bootstrap标题六</div>
因为在实际应用中，我们可能经常会遇到除了主标题外，之后紧跟着一个副标题的情况。Bootstrap人性化的为我们设置了这样一个效果。使用方式也特别简单，如下：
<h1>Bootstrap标题一<small>我是副标题</small></h1>
当然毋庸置疑的是，从
Bootstrap中的文本全局样式如下：
当然，你是可以自行设置重置样式的。^_^
<p class="lead">lead</p><!-- 字体变大，行高变大，下外边距变大 --><i>i</i><!--无特殊意义， 斜体 --><small>small</small><!-- 小号字体--><strong>strong</strong><!-- 语气强烈的强调，粗体 --><em>em</em><!-- 强调，斜体 -->
在Bootstrap中定义了一系列的这样的类，用于不同的情景，出去text外，还有bg（背景颜色）等等。使用方法类似，只是前面的文本进行了一些改变！所以。 记住这6个单词吧
<p class="text-muted">提示，使用浅灰色（#999）</p><p class="text-primary">主要，使用蓝色（#428bca）</p><p class="text-success">成功，使用浅绿色(#3c763d)</p><p class="text-info">通知信息，使用浅蓝色（#31708f）</p><p class="text-warning">警告，使用黄色（#8a6d3b）</p><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>
在Bootstrap中，为了简化操作，方便使用，使用了上面这四个类分别对应我们在CSS中常常使用 text-align 来实现文本的对齐风格的设置。
在Bootstrap中对于列表的设置与原生的html基本一致，需要注意的有：
Bootstrap当然不会就这么简单做一点点修改，它定义了一些关于列表的类给我们使用。
.list-unstyled { padding-left: 0; list-style: none;}从源码中，我们可以看到这样的信息，它除了将项目编号去除之外，还将默认的左边距也清除掉了。
<ol> <li class="list-unstyled"> 项目列表 <ul class="list-unstyled"> <li>带有项目编号</li> <li>带有项目编号</li> </ul> </li></ol>
在这样一段代码中，三个列表项会整齐的 排列在一起 ，且都没有 项目符号
除了去点列表之外，Bootstrap还可以通过添加类名“.list-inline”来实现内联列表，简单点说就是 把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。 也可以说内联列表就是为制作水平导航而生。
现有代码如下：
<dl class="dl-horizontal"> <dt>标题一：</dt> <dd>描述内容，我很喜欢前端，也很喜欢响应式布局，它能在个不同大小的屏幕下提供很好的体验，我现在是初学者，但是我会越来强的</dd> <dt>标题二：标题二：标题二：标题二：</dt> <dd>描述内容</dd></dl>
在浏览器全屏显示中可以看到效果如下：
我们来把屏幕大小进行改变，在遇到一个临界值时（小屏），水平定义列表将回复到原始的状态，如下改变：
这是为什么呢？我们去看看源码吧！
原来在这里添加了一个媒体查询，只有 屏幕大于768px 的时候，添加类名 .dl-horizontal 才具有水平定义列表效果。其实现主要方式：
现在再看看上面的效果是不是和这里的描述都是一样的呢？答案当然是肯定的 ^ ^
在Bootstrap主要提供了三种代码风格：
直接来看效果吧!
代码如下：（需要注意的是，**不管使用哪种代码风格，在代码中碰到小于号（ < ）和大于号（ > ）都需要使用转义字符来替代）
code风格：<div>Bootstrap的代码风格有三种：<code><code></code>、<code><pre class="brush:php;toolbar:false"></code>和<code><kbd></code></div>pre风格：<div><pre class="brush:php;toolbar:false"><ul> <li>...</li></ul>
元素一般用于显示大块的代码，并保证原有格式不变。但有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap也考虑到这一点，你只需要在 <strong>pre标签</strong> 上添加类名 .pre-scrollable ，就可以控制代码块区域 <strong>最大高度为340px</strong> ，一旦超出这个高度，就会在 <strong>Y轴（纵向）出现滚动条。</strong> </p> <p> 当然，你也可以进行自定义配置，例如：只需要在自定义的css中，对于该类添加一个 word-wrap: normal; ，这样的话，在代码块边框横向宽度小于内部代码横向长度时，就会出现横向滚动条。 </p> <h2>7. 表格</h2> <p> 表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了 <strong>1种基础样式</strong> 和 <strong>4种附加样式</strong> 以及 <strong>1个支持响应式的表格</strong> 。 </p> <p>对应上面所说的，Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：</p> <table> <tr> <th> .table </th> <th>基础表格</th> </tr> <tr> <td> .table-striped </td> <td>斑马线表格</td> </tr> <tr> <td> .table-bordered </td> <td>带边框的表格</td> </tr> <tr> <td> .table-hover </td> <td>鼠标悬停高亮的表格</td> </tr> <tr> <td> .table-condensed </td> <td>紧凑型表格</td> </tr> <tr> <td> .table-responsive </td> <td>响应式表格</td> </tr> </table> <p> .table 主要有三个作用： </p> <ul> <li>给表格设置了margin-bottom:20px以及设置单元内距</li> <li>在thead底部设置了一个2px的浅灰实线</li> <li>每个单元格顶部设置了一个1px的浅灰实线</li> </ul> <p> 具体大家可以在源码中查看，后几种附加的样式在这里也不多说，但是下面说一些 <strong>注意事项：</strong> </p> <ol> <li> 后几种表格附加样式，必须在基础样式 .table 之后，例如 <table class="table table-bordered table-hover"> </li> <li> 响应式表格：其原理是在表格 <strong>外部添加容器</strong> 把普通表格 <strong>包裹</strong> 起来，下面进行详细说明： </li> </ol> <p> <p> <pre class="sycode" name="code"><div class="table-responsive"><!-- 关键！容器包裹后实现响应式 --> <table class="table table-bordered"><!-- 设置表格样式，带边框的表格 --> <thead><!-- 一个表格应该有表头，若直接写tr>td这样的结构，浏览器会自动创建一个tbody包裹 --> </thead> <tbody><!--与上同理，即使你不创建，浏览器也会自动添加tbody包裹你的代码 --> </tbody> </table> </div>
下面是宽屏的效果（和普通的表格无区别）：
此处是窄屏的效果（可以看到滚动条的出现）：
在上面已经说到了在Bootstrap中，为不同的情景做了不一样的颜色，用于不同的信息展示。只是在类名上做了一些小小的改变。下面就可以看到：（图片来自 慕课网 ）
只需要在 除此之外，通过源码可以看到，在这些颜色设置之外，Bootstrap还单独设置了 hover效果（悬浮状态） 的 颜色加深 效果（它对于不同的情况单独进行了颜色设置）。 实现也特别简单，只需要像 也正因为这样，如果你想自定义颜色的话， 除了修改 tr 元素的颜色样式外，在 .table-hover 表格中也要做相应的调整! 排版的内容到这里就告一段落了，下面进行表单的学习！加油！ 参考： 标签添加上这些类就可以使用了。 这样，在
标签加上一个 table-hover 的类。（在未对
进行情景颜色设置时，该类依然有效果，只是效果不一样，上面已经说到了，因为它的单独设置，具体请到源码中查看）
Eine Sammlung häufig verwendeter Computerbefehle
Win10 stellt eine Verbindung zum freigegebenen Drucker her
So werden Sie auf TikTok ein enger Freund
Kostenlose Datenwiederherstellungssoftware
Welche Funktionen gibt es zum Erstellen von Websites?
Wie man negative Zahlen binär darstellt
Python konfiguriert Umgebungsvariablen
So öffnen Sie die WeChat-HTML-Datei
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
