Bootstrap 文本排版与表格

快来打我* 2022-03-22 12:46 262阅读 0赞

具体参考官方文档：[https://v3.bootcss.com/css/][https_v3.bootcss.com_css]

### 一、标题 ###

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

<h4>bootstrap 基本模本<small>text副标题</small></h4>

![20190128144342256.png][]

### 二、页面主体 ###

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

**1、内联文本元素：**

被删除的文本，带下划线的文本，小号文本，斜体等参考官方文档

**2、对齐**

通过文本对齐类，可以简单方便的将文字重新对齐。

<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>

![20190128145305878.png][]

**    3、改变文本的大小写**

<p class="text-lowercase">Lowercased text.</p>
            <p class="text-uppercase">Uppercased text.</p>
            <p class="text-capitalize">Capitalized text.</p>

![20190128145523977.png][]

### 三、表格 ###

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。

**    1、基本设置**

斑马条纹样式：<table> 标签添加 .table-striped 类可以给 <tbody> 之内的每一行

带边框样式：添加 .table-bordered 类为表格和其中的每个单元格增加边框。

鼠标悬停样式：添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

紧缩表格：添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

<div class="container">
            <h4>bootstrap 表格</h4>
            <table class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th>用户名</th>
                        <th>性别</th>
                        <th>年龄</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>张三</td>
                        <td>男</td>
                        <td>18</td>
                    </tr>
                    <tr>
                        <td>李斯</td>
                        <td>男</td>
                        <td>28</td>
                    </tr>
                    <tr>
                        <td>小白</td>
                        <td>女</td>
                        <td>17</td>
                    </tr>
                </tbody>
            </table>
        </div>

![20190128150848991.png][]

**    2、状态类**

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

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

![20190128151243353.png][]

**3、响应式表格**

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格。

区别：当表格有固定宽度的时候：

有table-responsive，表格有滚动条

没有table-responsive，网页有滚动条

[https_v3.bootcss.com_css]: https://v3.bootcss.com/css/
[20190128144342256.png]: /images/20220322/350000d4bc214de0a464e93bd17e7c7b.png
[20190128145305878.png]: /images/20220322/c4ce6c4619374d09a5e0046c30f200c8.png
[20190128145523977.png]: /images/20220322/06a966f66d0342d399b14fd9395212a6.png
[20190128150848991.png]: /images/20220322/140cc37183b649df8deebf9b9fb6cecc.png
[20190128151243353.png]: /images/20220322/5906b1e4a7d8445fbb65d7a19f8a1440.png