“这是我参与8月更文挑战的第27天，活动详情查看： 8月更文挑战”
前言
本篇我们一起来学习Bootstrap的一些样式的使用，比如列表、按钮、导航条等等。
Bootstrap列表
无样式列表
移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。
使用之后就相当于之后换行的效果。
<ul class="list-unstyled">
<li>这是第一列</li>
<li>这是第二列</li>
<li>这是第三列</li>
</ul>
内联列表
通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。
<ul class="list-inline">
<li>这是第一列</li>
<li>这是第二列</li>
<li>这是第三列</li>
</ul>
Bootstrap按钮
可作为按钮使用的标签或元素
<a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
按钮样式
按钮样式我们可以使用的有7种，根据不同需求来选择我们要使用的按钮。
<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
<button type="button" class="btn btn-link">（链接）Link</button>
按钮尺寸
我们还可以改变按钮的大小。使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。
<button type="button" class="btn btn-default btn-lg">（大按钮</button>
<button type="button" class="btn btn-default ">（默认按钮大小</button>
<button type="button" class="btn btn-default btn-sm">小按钮</button>
<button type="button" class="btn btn-default btn-xs">超小按钮</button>
按钮状态
我们还可以改变按钮的状态，分别有激活状态、禁用状态。
激活状态
当按钮处于激活状态时，其表现为被按压下去。对于 <button> 元素，是通过 :active 状态实现的。对于 <a> 元素，是通过 .active 类实现的。然而，你还可以将 .active 应用到 <button> 上（包含 aria-pressed="true" 属性)），并通过编程的方式使其处于激活状态。
<p>
<button type="button" class="btn btn-default ">未激活状态</button>
<button type="button" class="btn btn-default active">激活状态</button>
</p>
<p>
<a href="#" class="btn-primary ">未激活状态</a>
<a href="#" class="btn-primary active">激活状态</a>
</p>
禁用状态
- 为
<button>元素添加disabled属性，使其表现出禁用状态。 - 为基于
<a>元素创建的按钮添加.disabled类。
<p>
<a href="#" class="btn-primary disabled">禁用状态</a>
<button type="button" class="btn btn-primary" disabled="disabled">禁用状态</button>
</p>
使用disabled属性更加的人性化，当鼠标放上去时会改变鼠标的状态给我们提示。大家可以试一试。
写在最后
好了，本篇我们就一起学到这里，下篇我们继续一起学习Bootstrap的样式中的导航条和轮播图。以上内容如有不正之处，欢迎掘友们批评指正！
