02_Bootstrap基础组件02

桃扇骨 2023-10-16 11:27 55阅读 0赞

### 4 排版 ###

使用 Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素，实际上它是把大部分在HTML的基本标签加了样式。所以这部分相对比较简单。

#### 4.1 标题 ####

h1-h6 重新定义样式，HTML 中的所有标题标签，`<h1>` 到 `<h6>` 均可使用。

增加了 `.h1` 到 `.h6` 类，为的是给内联（inline）属性的文本赋予标题的样式。

*  .h1 字体大小 36px
 *  .h2 字体大小 30px
 *  .h3 字体大小 24px
 *  .h4 字体大小 18px
 *  .h5 字体大小 14px
 *  .h6 字体大小 12px

#### 4.2 内联子标题 ####

在标题中可以使用 small 标签包裹副标题的内容，或者使用 `.small` 类，可以得到一个字号更小的颜色更浅的文本。

<h1>我是h1标题<small>我是小标题</small></h1>
    <h2>我是h2标题<small>我是小标题</small></h2>
    <h3>我是h3标题<small>我是小标题</small></h3>
    <h4>我是h4标题<small>我是小标题</small></h4>
    <h5>我是h5标题<small>我是小标题</small></h5>
    <h6>我是h6标题<small>我是小标题</small></h6>
    
    <h1>我是h1标题<span class="small">我是小标题</span></h1>
    <h2>我是h2标题<span class="small">我是小标题</span></h2>
    <h3>我是h3标题<span class="small">我是小标题</span></h3>
    <h4>我是h4标题<span class="small">我是小标题</span></h4>
    <h5>我是h5标题<span class="small">我是小标题</span></h5>
    <h6>我是h6标题<span class="small">我是小标题</span></h6>

#### 4.3 引导主体副本 ####

为了给段落添加强调文本，则可以添加 `.lead`，将得到更大更粗，行高更高的文本，它的作用相当于是文章摘要。

<p class="lead">我是文章摘要</p>
    <p>我是文章内容</p>
    <p>我是文章内容</p>

#### 4.4 文本元素 ####

用于文本样式的元素

<p>我是<mark>标记文本</mark></p>
    <p>我是<del>删除文本</del>（被视为已删除的文本）</p>
    <p>我是<s>无用文本</s>（被视为不再准确）</p>
    <p>我是<ins>插入文本</ins>（被视为文档的附加内容）</p>
    <p>我是<u>下划线文本</u></p>
    <p>我是<small>小号文本</small></p>
    <p>我是<strong>着重文本</strong></p>
    <p>我是<em>斜体文本</em></p>

#### 4.5 对齐类 ####

简单方便将文字对齐的类，它们一般应用在 p 标签上（用在 div 上不符合规范，用在 span 标签则不能生效）。

<p class="text-left">我是居左</p>
    <p class="text-center">我是居中</p>
    <p class="text-right">我是居右</p>
    <p class="text-justify">我是两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐</p>
    <p class="text-nowrap">我是不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行</p>

#### 4.6 大小写 ####

通过这几个类可以改变文本的大小写。

<p class="text-lowercase">Lowercase 单词全小写</p>
    <p class="text-uppercase">uppercase 单词全大写</p>
    <p class="text-capitalize">capitalize 单词首字母大写</p>

#### 4.7 提示语 ####

当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 `<abbr>` 元素的增强样式。缩略语元素带有 `title` 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性。

<p>我是<abbr title="提示文字">提示语</abbr></p>
    <p><abbr title="提示文字" class="initialism">提示语</abbr>字体大小变小</p>

#### 4.8 引用类 ####

表示在你的文档中引用其他来源的内容。用 `<blockquote>` 标签实现，包裹内容建议用 p 标签。

添加 `<footer>` 用于标明引用来源。来源的名称可以包裹进 `<cite>` 标签中。

`.blockquote-reverse` 类可以让引用呈现内容右对齐的效果。

<blockquote>
        <p>我是引用内容</p>
        <footer>来源于<cite title="来源标题">来源标题</cite></footer>
    </blockquote>
    
    
    <blockquote class="blockquote-reverse">
        <p>我是引用内容</p>
        <footer>来源于<cite title="来源标题">来源标题</cite></footer>
    </blockquote>

#### 4.9 列表 ####

**无样式列表**

移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。

<ul class="list-unstyled">
        <li>无样式列表</li>
        <li>无样式列表</li>
        <li>无样式列表</li>
        <li>
            <ul>
                <li>不生效</li>
                <li>不生效</li>
                <li>不生效</li>
            </ul>
        </li>
        <li>
            <ul class="list-unstyled">
                <li>单独设置生效</li>
                <li>单独设置生效</li>
                <li>单独设置生效</li>
            </ul>
        </li>
    </ul>

**内联列表**

通过设置 `display: inline-block;` 并添加少量的内补（padding），将所有元素放置于同一行。

<ul class="list-inline">
        <li>我是内联列表</li>
        <li>我是内联列表</li>
        <li>我是内联列表</li>
        <li>我是内联列表</li>
    </ul>

**水平排列的描述**

`.dl-horizontal` 可以让 `<dl>` 内的短语及其描述排在一行。开始是像 `<dl>` 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。

<dl class="dl-horizontal">
        <dt>我是标题我是标题我是标题我是标题我是标题</dt>
        <dd>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</dd>
        <dt>我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题</dt>
        <dd>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</dd>
        <dt>我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题</dt>
        <dd>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</dd>
    </dl>

注意：水平排列的描述列表将会截断左侧太长的短语。在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。

#### 4.10 强调类 ####

这些强调类，通过颜色来表示强调。一般是给 p 元素加这些类名，会显示不同的颜色。

<p class="text-muted">我是默认</p>
    <p class="text-warning">我是警告</p>
    <p class="text-info">我是提示</p>
    <p class="text-danger">我是失败</p>
    <p class="text-success">我是成功</p>
    
    
    <p class="bg-primary">我是首选</p>
    <p class="bg-success">我是成功</p>
    <p class="bg-info">我是提示</p>
    <p class="bg-warning">我是警告</p>
    <p class="bg-danger">我是错误</p>

#### 4.11 关闭按钮 ####

通过使用一个象征关闭的图标，可以让模态框和警告框消失。

#### 4.12 三角符号 ####

通过 CSS 实现三角符号

#### 4.13 左右浮动 ####

添加一个类 `.pull-left` 或 `.pull-right`，可以将任意元素向左或向右浮动

<div class="pull-left">我是左浮动</div>
    <div class="pull-right">我是右浮动</div>

#### 4.14 内容居中 ####

为元素设置类 `.center-block` ，等于设置了以下样式

display: block;
    margin-left: auto;
    margin-right: auto;

#### 4.15 清除浮动 ####

为父元素添加 `.clearfix` 类可以很容易地清除浮动

<div class="clearfix">
        <div class="pull-left">我是左浮动</div>
        <div class="pull-right">我是右浮动</div>
    </div>

#### 4.16 显示或隐藏内容 ####

`.show` 和 `.hidden` 类可以强制任意元素显示或隐藏，注意，这些类只对块级元素起作用

<div class="show">我是显示内容</div>
    <div class="hidden">我是隐藏内容</div>

使用 `.text-hide` 类可以用来将元素的文本内容替换为一张背景图

<h1 class="text-hide">我是隐藏文本</h1>

### 5 字体图标 ###

*  所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。
 *  为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。
 *  不要和其他组件混合使用（应该创建一个嵌套的 span 标签，并将图标类应用到这个span标签上）
 *  只对内容为空的元素起作用（图标类只能应用在不包含任何文本内容或子元素的元素上）

### 6 表格 ###

#### 6.1 默认样式 ####

添加 `.table` 类名，使用表格样式

#### 6.2 可选样式 ####

.table-striped  为表格提供了斑马线的样式
    .table-bordered  为表格增加边框(border)
    .table-hover 为表格中的每一行赋予鼠标悬停样式。鼠标划过后会添加一个背景色。
    .table-condensed 每个单元格的内补(padding)减半，可使表格更紧凑。

#### 6.3 状态类 ####

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

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

<table class="table table-bordered table-hover">
        <tr class="active">
            <td>active</td>
            <td>active</td>
            <td>active</td>
            <td>active</td>
            <td>active</td>
        </tr>
        <tr class="success">
            <td>success</td>
            <td>success</td>
            <td>success</td>
            <td>success</td>
            <td>success</td>
        </tr>
        <tr class="warning">
            <td>warning</td>
            <td>warning</td>
            <td>warning</td>
            <td>warning</td>
            <td>warning</td>
        </tr>
        <tr class="danger">
            <td>danger</td>
            <td>danger</td>
            <td>danger</td>
            <td>danger</td>
            <td>danger</td>
        </tr>
        <tr class="info">
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <td class="active">active</td>
            <td class="success">success</td>
            <td class="warning">warning</td>
            <td class="danger">danger</td>
            <td class="info">info</td>
        </tr>
    </table>

#### 6.4 响应式表格 ####

将 `.table` 元素包裹在 `.table-responsive` 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

<div class="table-responsive">
        <table class="table table-bordered table-hover">
            <tr class="active">
                <td>active</td>
                <td>active</td>
                <td>active</td>
                <td>active</td>
                <td>active</td>
            </tr>
            <tr class="success">
                <td>success</td>
                <td>success</td>
                <td>success</td>
                <td>success</td>
                <td>success</td>
            </tr>
            <tr class="warning">
                <td>warning</td>
                <td>warning</td>
                <td>warning</td>
                <td>warning</td>
                <td>warning</td>
            </tr>
            <tr class="danger">
                <td>danger</td>
                <td>danger</td>
                <td>danger</td>
                <td>danger</td>
                <td>danger</td>
            </tr>
            <tr class="info">
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
            </tr>
            <tr>
                <td class="active">active</td>
                <td class="success">success</td>
                <td class="warning">warning</td>
                <td class="danger">danger</td>
                <td class="info">info</td>
            </tr>
        </table>
    </div>