快速上手Bootstrap 第三部分常用样式

文章目录

快速上手Bootstrap 第三部分常用样式
3. 常用样式
总结

3. 常用样式

3.1 标题

定义标题都是使用<h1>-<h6>,只不过bootstrap做了其他的样式对默认的样式进行了覆盖,而且还定义了.h1-.h6六个类名,还有small类名和<small>(用于副标题)

3.2 段落

通过.lead这个类来突出强调的内容

<small>:小号字体

<strong>:加粗

<em>:斜体

3.3 强调和对齐

强调

<div class="text-muted">提示 (#999)</div>
<div class="text-primary">主要 (#428bca)</div>
<div class="text-success">成功 (#3c763d)</div>
<div class="text-info">通知 (#31708f)</div>
<div class="text-warning">警告 (#8a6d3b)</div>
<div class="text-danger">危险 (#a94442)</div>

文本对齐方式

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

3.4 列表

去点列表

<ul class="list-unstyled">
	<li>11</li>
	<li>22</li>
</ul>

内联列表

将垂直列表变成水平列表,而且去掉项目符号(编号),保持水平显示.

<ul class="list-inline">
	<li>11</li>
	<li>22</li>
	<li>33</li>
	<li>33</li>
</ul>

3.5 代码

<code></code> 显示单行代码
<kbd></kbd>   快捷键
<pre></pre>  代码块
当代码过长的时候可以使用 .pre-scrollable 这个类添加滚动条

3.6 表格

下面的类可以在同一个表格中一起使用

基本表格 .table

条纹状表格 .table-striped

带边框的表格 .table-bordered

鼠标悬停 .table-hover

紧缩表格 .table-condensed

响应式表格: 使用的时候需要有一个外容器(设置的类名.table-responsive)去包裹带有.table的元素,其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

    <div class="table-responsive">
        <table class="table table-striped table-bordered table-hover table-condensed" style="margin: 0 auto;">
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>19</td>
                <td>男</td>
            </tr>
            <tr>
                <td>2</td>
                <td>张四</td>
                <td>30</td>
                <td>男</td>
            </tr>
            <tr>
                <td>3</td>
                <td>李梅</td>
                <td>35</td>
                <td>女</td>
            </tr>
        </table>
    </div>

状态类 : 通过这些状态类可以为行或单元格设置颜色。

Class	描述
`.active`	鼠标悬停在行或单元格上时所设置的颜色
`.success`	标识成功或积极的动作
`.info`	标识普通的提示信息或动作
`.warning`	标识警告或需要用户注意
`.danger`	标识危险或潜在的带来负面影响的动作

<!-- 对行使用 -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- 对列使用 -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>