boot Strap笔记（哈哈哈哈）

已于 2022-10-15 20:32:21 修改
阅读量668 收藏
点赞数
文章标签： bootstrap javascript 前端
于 2022-09-14 23:00:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_49713747/article/details/126862164
版权
这篇笔记详细介绍了BootStrap的使用，包括部署、头部编码、Container容器、栅格系统、表格对齐、提示、按钮、轮播、折叠面板等组件的用法，强调了响应式布局和不同设备的适配，以及各种类的选择和应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

介绍

部署（第一次要联网）

3行 JS

注意头部编码地区

盒尺寸

Container容器

All-in-one（一个容器中定义）

流式布局

栅格

栅格选项

自动布局列

设置一列宽度

可变宽度的弹性空间

等宽多行，拆分新行

响应式的class选择器

覆盖所有设备

行列布局

表格对齐

垂直对齐示例

水平对齐

间隙沟槽(gutters)清除

列换行

换行

重排序

Class顺序重定义

列偏移

列嵌套

布局实施

display块属性定义

图像对齐处理

响应式图片

标题大小

底部备注来源

表格

Head表头处理

条纹状表格

表格边框处理

无边框

行悬停效果

紧缩表格

语义状态化

文字放置在图像下面

提示

链接颜色

额外附加内容

关闭警告

JavaScript行为

标签

带链接效果

按钮

按钮标签

轮廓按钮

尺寸规格与大小定义

启用状态

禁用状态

切换按钮状态

复选框和单选框

方法

按钮组

大小规格和尺寸缩放

嵌套

垂直排列

轮播

原理

哈哈哈是笔记标记，方便本人能直接看到自己的笔记。

介绍

Bootstrap 最基础的形式：直接拖入即用的编译文件，几乎能在所有Web项目中使用。

scss/和js/是CSS和JavaScript的源码

其中bootstrap.*是预编译的文件。

docs/文件夹是开发者文件夹。

bootstrap.min.*是编译过且压缩后的文件，可以直接·引用。 程序目录中，还有bootstrap.*.map格式的文件，这是Source map文件，需要在特定的浏览器开发者工具下才可用式。

默认bootstrap.js（预编译与精简版）都已经包含了util.js，Bootstrap所有JavaScript行为都依赖于util.js函数。

部署（第一次要联网）

1行 CSS 复制下面的 <link> 样式表粘贴到网页 <head> 里面，并放在其它CSS文件之前.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

3行 JS

全局组件运行在 jQuery 组件上，其中包括 Popper.js 以及系统内置 JavaScript 插件. 建议将 <script> 的结束放在页面的 </body> 之前。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

注意头部编码地区

头部定义是首要的，否则会导致样式失真。正确中文站点应该用zh-CN。

<!doctype html>
<html lang="zh-cn">
...
</html>

盒尺寸

更直观地用BootStrap的尺寸规范(而不受各浏览标准影响)，我们把将全局box-sizing的值由默认的content-box重定义为border-box，保证padding不会影响元素的最后计算宽度。

重置盒尺寸:

.selector-for-some-widget {
box-sizing: content-box;
}

Container容器

Container容器是窗口布局的最基本元素，我们推荐所有样式都定义在.container或.container-fluid容器之中-- 这是启用整个栅格系统必不可少的前置条件，它们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式自适应浏览器或容器最大合法宽度的窗口（意味着任何时候它的宽度总是100%）。

Bootstrap原生带三种container宽度规范：

  • .container, 居中，适配所有的 max-width 尺寸。

  • .container-fluid, 全屏，适配屏幕的 width: 100% 尺寸。

  • .container-{断点规格}（见下表，如.container-sm), 在指定规格断上width: 100% 尺寸。

container在不同的屏幕的 max-width 规范，以及 .container 、 .container-fluid 的断点区别。

All-in-one（一个容器中定义）

默认的.container class 是一个响应式容器，它有固定宽度和最max-width 设置，并支持响应式断点，应该用它作为整个DIV的最外层容器，如下。

<div class="container">
  <!-- 网页内容写在这里面 -->
</div>

流式布局

.container-fluid 支持全屏的流式布局，如下使用：

<div class="container-fluid">
  ...
</div>

使用 .container-fluid 类，可以使div宽度扩展到整个宽度（如果没有被其它CSS容器包含，则应是浏览器运行时的宽度，否则应是父容器中允许的最大宽度，一般视为100%宽度）。

栅格

网格如何组合在一起。

<div class="container">
  <div class="row">
      <div class="col-sm">三分之一空间占位</div>
      <div class="col-sm">三分之一空间占位</div>
      <div class="col-sm">三分之一空间占位</div>
  </div>
</div>

上面的例子使用BootStrap预定义的栅格系统，演示了在.container容器内建立了三个等宽的列，并且分别兼容在small(极窄宽度网页)、medium(中等宽度网页)、large(宽网页)、extra large(超宽网页)四种设备类型。

栅格系统提供了集中内容居中、水平填充网页内容的方法

.container实现固定的宽度并居中呈现，.container-fluid实现全宽度，并和其它网格实现对齐

行(.row)是列(.col-*（.col-*后面有不同的数字，如.col-sm-4或.col-xl-12，这些css类后面的数字用于表明定义div空间想要占用列的数量，每行最多有12列。如果你想用三个等宽的列，则取12的三分之一，即.col-sm-4就是正确的）)的横向组合和父容器(它们有效组织在.row下)，每列都有水平的padding值，用于控制它们之间的间隔，同时在负边距的行上抵消，从而实现列中的所有内容在视觉上是左侧对齐的体验。

不可以在.col-*以上添加呈现内容。呈现内容必须放置在列(.col-*中，而且只有列可以是行的直接子元素，否则都是违法的。

在.container中置入初始化的四个.col-sm就能实现各自25%宽度并左对齐形成一行的排列。

.col-*的width属性(即列宽)是用百分比来表现和定义的。

列具有水平padding定义，用于创建列与列之的间隙。

.row上带有margin-left: -15px;margin-right: -15px;属性，可以在.row上上定义.no-gutters属性，从而消除这个属性，使页面不会额外宽出30px，即<div class="row no-gutters"...。

总共有五个栅格等级，每个响应式分界点隔出一个等级：特小.col、小.col-sm-*、中.col-md-*、大.col-lg-*、特大（大、特大也可以称为宽、超宽）.col-xl-*。

.col-sm-4的的定义可以在小型、中型、宽、超宽设备上呈现，但不适用于能在超小型.col-sx上呈现

栅格选项

Bootstrap使用ems或rems来定义大多数属性的规格大小、px用于全局层面网格断点和容器宽度（因为浏览器和设备的宽度是以像素px为单位，且不会随字体大小而变化）。

在Bootstrap 4中，屏幕的大小是真正的“断点”，即如果只定义一个屏幕规格即可向上覆盖所有设备，向下如果没有定义则默认为12栅格占位。

.container 最大宽度None (auto)540px720px960px1140px
类前缀.col-.col-sm-.col-md-.col-lg-.col-xl-
列（column）数1212121212
列间隙30px (每列两侧各15px)

且都可嵌套，都可排序。

自动布局列

利用栅格断点特性进行排版，可以简化列的大小，而不需要自己手动定义大小。

默认自动将12列平均分配

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

设置一列宽度

在Flexbox的布局上一行多列的情况下，特别指定一列并进行宽度定义，同时其它列自动调整大小。无论中心定义列的宽度如何，其他列都将调整大小。

<div class="container">
  <div class="row">
    <div class="col">   1 of 3</div>
    <div class="col-6"> 2 of 3 (更宽-12格中占6格，其它6格另外两列平分</div>
    <div class="col">  3 of 3</div>
  </div>
  <div class="row">
    <div class="col">1 of 3</div>
    <div class="col-5"> 2 of 3 (更宽-12格中占5格,其它7格另外两列平分-不论奇偶都能达成)</div>
    <div class="col"> 3 of 3 </div>
  </div>
</div>

可变宽度的弹性空间

使用 col-{breakpoint}-auto 断点方法，可以实现根据其内容的自然宽度来对列进行大小调整。.

<div class="container">
        <div class="row justify-content-md-center">
          <div class="col col-lg-2"> 1 of 3 </div>
          <div class="col-md-auto"> 可变宽度内容自由伸张，左右宽度不变。 </div>
          <div class="col col-lg-2"> 3 of 3 </div>
        </div>
        <div class="row">
          <div class="col"> 1 of 3 </div>
          <div class="col-md-auto"> 可变宽度内容自由伸张,左列宽度变化(右列绑定co-lg-2栅格数) </div>
          <div class="col col-lg-2"> 3 of 3 </div>
        </div>
      </div>

等宽多行，拆分新行

创建跨多个行的等宽列，方法是插入.w-100要将列拆分为新行。通过混合.w-100一些还可以影响一些显示状态效果,如按钮排序等。

.w100与.clearfix有时可以达到同样的网页效果。

响应式的class选择器

可以根据需要定义在特小.col、小.col-sm-*、中.col-md-*、大.col-lg-*、特大.col-xl-*五种屏幕(设备)下的样式。

覆盖所有设备

一次性定义从最小设备到最大设备相同的网格系统布局表现，请使用.col和.col-*类。后者是用于指定特定大小的(如.col-6)，否则使用.col就可以了。

可以根据需要对每一个列进行不同的设备定义。

<!-- 定义在超小屏幕下1列全宽、1列半宽，而其它场景以8:4比例并行排列 -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

行列布局

使用 .row-cols-* 类能够定义一个row空间中可放的列数，并支持不同的参数如.col-*、 .col-md-4，注意需要要写在 .row空间之中。

定义每行显示两列：

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

每行显示三列（多余的则换行排列）：

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

row-cols-？

行列布局其实是把12列进行平均分配，如果指定了某一列的宽度可能会改变后面的列的位置到下一行

<div class="container">
    定义了每行显示四列
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
      定义这一列宽度为6
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

表格对齐

垂直对齐示例

正在上传…重新上传取消

<div class="container">
        <div class="row align-items-start">
          <div class="col"> 上边贴齐</div>
          <div class="col"> 上边贴齐 </div>
          <div class="col"> 上边贴齐s </div>
        </div>
        <div class="row align-items-center">
          <div class="col"> 上下居中对齐 </div>
          <div class="col"> 上下居中对齐 </div>
          <div class="col"> 上下居中对齐 </div>
        </div>
        <div class="row align-items-end">
          <div class="col"> 下边对齐 </div>
          <div class="col"> 下边对齐 </div>
          <div class="col"> 下边对齐 </div>
        </div>
      </div>

正在上传…重新上传取消

<div class="container">
        <div class="row">
          <div class="col align-self-start"> 上边对齐 </div>
          <div class="col align-self-center"> 上下居中对齐  </div>
          <div class="col align-self-end"> 下边对齐 </div>
        </div>
      </div>

水平对齐

正在上传…重新上传取消

<div class="container">
        <div class="row justify-content-start">
          <div class="col-4"> 左贴齐对齐 </div>
          <div class="col-4"> 左贴齐对齐 </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-4"> 居中贴齐 </div>
          <div class="col-4"> 居中贴齐 </div>
        </div>
        <div class="row justify-content-end">
          <div class="col-4"> 右贴齐对齐 </div>
          <div class="col-4"> 右贴齐对齐 </div>
        </div>
        <div class="row justify-content-around">
          <div class="col-4"> 间隔相等对齐帖齐 </div>
          <div class="col-4"> 间隔相等对齐帖齐 </div>
        </div>
        <div class="row justify-content-between">
          <div class="col-4"> 两端对齐帖齐 </div>
          <div class="col-4"> 两端对齐帖齐 </div>
        </div>
      </div>

间隙沟槽(gutters)清除

Boot Strap默认的栅格和列间有间隙沟槽，一般是左右-15px的margin或padding处理，可以使用.no-gutters类来消除它，这将影响到.row行、列平行间隙及所有子列。

列换行

如果在一行内子DIV定义的栅格总数超过12列，BootStrap会在保留列完整的前提下，将无法平行布局的多余列，重置到下一行，并占用一个完整的新行。

换行

一般换行推荐使用添加多个.row来达成，也可以使用系统提供的.w-100方法处理，思路是强行插入一个width:100%的DIV进行隔离。

<div class="row">
     <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
     <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
      在这里插入一个.w-100    
    <div class="w-100"></div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

重排序

Class顺序重定义

使用 .order-* class选择符，可以对DIV空间进行 可视化排序,系统提供了.order-1到.order-1212个级别的顺序，在五种浏览器和设备宽度上都能生效。

<div class="container">
        <div class="row">
          <div class="col"> 1号空间-未定义序号，位置不变。 </div>
          <div class="col order-12"> 2号空间-排最后。 </div>
          <div class="col order-1"> 3号空间-放第1但受1号空间不变影响居第2位。 </div>
            后面的到前面来，需要前面的与后面的顺序同时改变。
        </div>
      </div>

正在上传…重新上传取消

也可以使用.order-first，快速更改一个顺序到最前面，同时其它元素也相应的获得了order:减1的属性，这个属性也可以与。.order-*混合使用。

列偏移

可以使用两种方式进行列偏应： 1、使用响应式的.offset-*栅格偏移方法。 2、使用边界处理实用程序，它内置了像.ml-*、.p-*、.pt-*等实用排工具。

class偏移选择器

使用.offset-md-*类可以使列向右偏移，通过定义*的数字，则可以实现列偏移，如.offset-md-4则是向右偏移四列。

<div class="bd-example">
      <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
      </div>
      <div class="row">
        <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
        <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
      </div>
      <div class="row">
        <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
      </div>
    </div>

正在上传…重新上传取消

列嵌套

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的.row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）数量推荐不要超过12个。

正在上传…重新上传取消

<div class="row">
        <div class="col-sm-9"> Level 1: .col-sm-9
          <div class="row">
            <div class="col-8 col-sm-6"> Level 2: .col-8 .col-sm-6 </div>
            <div class="col-4 col-sm-6"> Level 2: .col-4 .col-sm-6 </div>
          </div>
        </div>
      </div>

布局实施

display块属性定义

display 属性的定义，与系统的栅格系统结合，来决定模块是否显示，甚至进一步属性如 .display-* ，其中*是可以1-12的任意数字。

图像对齐处理

对于.block属性的块状图片，可以使用 浮动定义规范或 文字对齐规范，来实现对图像的对齐、浮动控制.带.block块属性的图片，可以自动获得 .mx-auto 的位置对齐属性.

浮动对齐

<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">

带d-block属性的块自动获得对齐属性

<img src="..." class="rounded mx-auto d-block" alt="...">

文字对齐

<div class="text-center">
  <img src="..." class="rounded" alt="...">
  </div>

响应式图片

在Bootstrap中，给图片添加.img-fluid样式，或定义max-width: 100%、height:auto;样式，即可赋得响应式特性，图片大小会随着父元素大小同步缩放。

<img src="..." class="img-fluid" alt="图片不加载时，显示的文字">

标题大小

bootstrap设置标题字体大小

正在上传…重新上传取消

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

底部备注来源

<footer class="blockquote-footer"> 用于标识来源，一般用于页脚（所以有*-footer)，然后配合 <cite>使用。

正在上传…重新上传取消

<blockquote class="blockquote">
  <p class="mb-0">爱上一个地方，就应该背上包去旅游，走得更远。</p>
  <footer class="blockquote-footer">出自商务印书馆的 <cite title="Source Title">《新华字典》</cite></footer>
</blockquote>

如果需要居中对齐或右对齐，可使用.text-center、`.text-right。

表格

要加入的表格类。只需要向某个<table>添加一个基类.table，然后通过自定义样式或系统提供的class来起作用。

Bootstrap 4继承所有表格样式，任何嵌套表格都将以与父类型相同的方式进行样式化。

正在上传…重新上传取消

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

可使用.table-darkclass选择器来产生颜色反转对比效果，即深色背景和浅色文本。

正在上传…重新上传取消

<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Head表头处理

与预设的反转样式相似，使用.thead-light 或.thead-dark 中的一个样式，就能使 <thead>区显示出浅黑或深灰。

正在上传…重新上传取消

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

条纹状表格

使用 .table-striped 样式定义 <tbody>，可以产生逐行颜色强烈对比的表格样式（以及增加反转）。

正在上传…重新上传取消

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

正在上传…重新上传取消

<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

表格边框处理

添加 .table-bordered 类可以产生表格边框与间隙系统。

colspan属性，可以跨列。值为要跨越的列数

正在上传…重新上传取消

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

无边框

添加.table-borderless无边界表格

正在上传…重新上传取消

<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

行悬停效果

将 .table-hover 定义到 <tbody>上，可以产生行悬停效果（鼠标移到行上会出现状态提示）。

正在上传…重新上传取消

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

紧缩表格

添加 .table-sm 可以将表格的padding值缩减一半，使表格更加紧凑。

正在上传…重新上传取消

<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

语义状态化

使用语义状态样式对表格逐行或单个单元格进行着色表达。

正在上传…重新上传取消

<!-- On rows -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>
  
  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

深色表格上没有固定的背景，你可以使用 文字或背景通用样式获得类似的样式：

#Column headingColumn headingColumn heading
1Column contentColumn contentColumn content
2Column contentColumn contentColumn content
3Column contentColumn contentColumn content
4Column contentColumn contentColumn content
5Column contentColumn contentColumn content
6Column contentColumn contentColumn content
7Column contentColumn contentColumn content
8Column contentColumn contentColumn content
9Column contentColumn contentColumn content

正在上传…重新上传取消

<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>

  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>

文字放置在图像下面

正在上传…重新上传取消

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

.figure以及.figure-caption类，为HTML5的<figure>以及<figcaption>元素提供了一个基准样式处理。默念认的图片系统不会定义明确的大小，因此请务必将该.img-fluid类添加到您的<img>标签中才能实现与响应式的完美结合。 说明文字的位置可以使用.text-*方法

提示

警报是一组颜色控件（共八个颜色样式），可用于任何长度的文本，以及可选的关闭按钮，系统提供8个可用的正确的样式（如，.alert-success）

正在上传…重新上传取消

<div class="alert alert-success" role="alert">成功弹窗 </div>
<div class="alert alert-danger" role="alert">错误弹窗</div>

链接颜色

使用 .alert-link 类可以为带颜色的警告文本框中的链接加上合适的颜色

正在上传…重新上传取消

<div class="alert alert-success" role="alert">
  This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

额外附加内容

警报还可以包含其他HTML元素，如标、段落和分隔符。

正在上传…重新上传取消

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

关闭警告

使用.alert结合JavaScript，可以实现警报效果，贴在页面上，并可以自由关闭，其要点如下：

可以在右上角定义一个.close关闭按钮效果，则需要在容器中引用 .alert-dismissible 类。

警告按钮上要增加data-dismiss="alert"触发 JavaScript 动作，同时使用<button>元素，以确保在所有设备上都能获得正确的行为响应。

正在上传…重新上传取消

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

JavaScript行为

###

使用JavaScript插件解除警报:

$(".alert").alert()

或者使用 警报控件中的data 属性，如下所示:

Copy

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

标签

带链接效果

以下的 Class 样式来定义.badge的变化颜色、大小等。

正在上传…重新上传取消

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

使用 .badge-pill样式，可以使标签更加圆润。

.badge-* 也可以在 <a> 元素上使用，并实现悬停、焦点、状态等效果。

正在上传…重新上传取消

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>

按钮

正在上传…重新上传取消

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

按钮标签

.btn 可以在<button>元素上使用，也可以在 <a>、 或 <input> 元素上使用这些类。

正在上传…重新上传取消

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

在<a>上使用按钮元素，用于触发页内功能的元素（如折叠内容），不会跳转到新页面。

轮廓按钮

.btn 在引用中需要一个按钮，不需要背景颜色，用默认修饰符类替换.btn-outline-*任何按钮上的所有背景颜色和图像。

.btn 在引用中，如果需要一个按钮，但不需要带来的巨大的背景颜色（背景边框缩小）？用默认修饰符类替换.btn-outline-*（主要、次要、成功、危险、警告、信息、灯（Primary Secondary Success Danger Warning Info Light ））

任何按钮上的所有背景颜色和图像。

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

尺寸规格与大小定义

.btn-lg 、 .btn-sm 两个邻近元素，可分别实现大规格按钮、小规格按钮的定义。

.btn-block样式可以创建百分百充满空间的全屏按钮：

正在上传…重新上传取消

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

启用状态

.btn样式定义的按钮，默认就是启用状态（背景较深、边框较暗、带内阴影），如果你一定要使按钮固定为启用状态、不需要点击反馈，可以增加.active样式，并包括aria-pressed="true" 属性，则状态显示为启用状态。

正在上传…重新上传取消

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

禁用状态

直接将disabled布尔属性添加到任何<button>元素（直接嵌套在html标签中，使按钮看起来处于非活动的禁用状态（点击不会有响应和弹性）。

正在上传…重新上传取消

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

<a>标签不支持disabled属性，所以你必须增加.disabled` 属性，aria-disabled="true"使之达到视觉禁用的效果。

<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

切换按钮状态

添加 data-toggle="button" 属性，可以切换按钮的 active 状态，如果你预先需要切换按钮，必须将.active 样式 、 aria-pressed="true"属性添加到 <button>标签中。

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

复选框和单选框

复选框

添加 data-toggle="buttons" 到.btn-group 下的元素里，来启用它们的样式切换。

正在上传…重新上传取消

这些按钮的检查状态，只能通过 click 事件 进行更新，如果使用其它方法更新输入，用<input type="reset"> 或手动应用输入 checked 属性，人为的在<label> 上增加 .active 状态。

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-secondary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-secondary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

单选框

正在上传…重新上传取消

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

方法

方法属性
$().button('toggle')切换状态，给予按钮已经启用的外观。
$().button('dispose')销毁元素按钮的状态。

按钮组

将一系列的 .btn 包裹在.btn-group内，可以实现选择按钮、选取块状区的行为功能。

正确的标签并引用合法的 role属性

role 需要定义适当的属性，对于按钮组，引用的样式应该是 role="group", 如果是工具栏则应是 role="toolbar"。

正在上传…重新上传取消

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

大小规格和尺寸缩放

定义大小缩放，不需要将按钮中每个子元素都逐一定义，只需在.btn-group-* 中增加.btn-group-*，就能作用于组下的每个子按钮，实现样式缩放。

正在上传…重新上传取消

<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
      <button type="button" class="btn btn-secondary">Left</button>
      <button type="button" class="btn btn-secondary">Middle</button>
      <button type="button" class="btn btn-secondary">Right</button>
    </div>
<div class="btn-group" role="group" aria-label="Default button group">
      <button type="button" class="btn btn-secondary">Left</button>
      <button type="button" class="btn btn-secondary">Middle</button>
      <button type="button" class="btn btn-secondary">Right</button>
    </div>
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
      <button type="button" class="btn btn-secondary">Left</button>
      <button type="button" class="btn btn-secondary">Middle</button>
      <button type="button" class="btn btn-secondary">Right</button>
    </div>
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>

嵌套

将.btn-group 放在另一个 .btn-group 里，可以实现按钮组与下拉菜单的组合。

正在上传…重新上传取消

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

垂直排列

将一组按钮垂直排列，而不是水平排列，不支持分割式下拉菜单的定义。

<div class="btn-group-vertical">
  ...
</div>

正在上传…重新上传取消

<div class="bd-example">
    <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
      <button type="button" class="btn btn-secondary">Button</button>
      <button type="button" class="btn btn-secondary">Button</button>
      <button type="button" class="btn btn-secondary">Button</button>
      <button type="button" class="btn btn-secondary">Button</button>
      <button type="button" class="btn btn-secondary">Button</button>
      <button type="button" class="btn btn-secondary">Button</button>
    </div>
  </div>

正在上传…重新上传取消

    <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
      <button type="button" class="btn btn-secondary">Button</button>
      <button type="button" class="btn btn-secondary">Button</button>
      <div class="btn-group" role="group">
        <button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
        <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 38px, 0px);"> <a class="dropdown-item" href="#">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a> </div>
      </div>
      <button type="button" class="btn btn-secondary">Button</button>
      <button type="button" class="btn btn-secondary">Button</button>
      <div class="btn-group" role="group">
        <button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
        <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2"> <a class="dropdown-item" href="#">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a> </div>
      </div>
      <div class="btn-group" role="group">
        <button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
        <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3"> <a class="dropdown-item" href="#">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a> </div>
      </div>
      <div class="btn-group" role="group">
        <button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
        <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4"> <a class="dropdown-item" href="#">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a> </div>
      </div>
    </div>

轮播

原理

轮播效果是一个幻灯片效果，使用CSS 3D变形转换和一些JAvaScript构建一内容循环播放，适用于一系列图像、文本或自定义标记

.carousel 命名样式引入轮播组件，同时为此控件设置唯一的ID-尤其是当在同一页面使用多个轮播效果时必须这样。

在实现轮播时需要定义有效的初始状态元素

将 .active 样式添加到其中一个幻灯片（一般第一张），否则轮播效果将无法正常运行（展现）。

轮播上的图像引用了 .d-block 、 .w-100两个样式，会占满整个屏幕的宽度。

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

带控制器的效果

加上了上一个/下一个控制器:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="/img/2016instbg_01.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="/img/2016instbg_02.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="/img/2016instbg_03.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

包含姿态指示器

也可以将当前所在幻灯片状态指示器添加到轮播效果控件中：

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="/img/2016instbg_01.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="/img/2016instbg_02.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="/img/2016instbg_03.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

包含字幕的轮播

在 .carousel-item 中使用 .carousel-caption 添加字幕到您的轮播控件中，小的浏览器view port上，会隐藏文字呈现主图片轮播，引用的是.d-none定义，一旦到了中型md浏览设备或屏幕则调用.d-md-block样式使之呈现。

<div class="bd-example">
  <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="/img/2016instbg_01.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>First slide label</h5>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="/img/2016instbg_02.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>Second slide label</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="/img/2016instbg_03.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>Third slide label</h5>
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

轮播滑动变化变成交替变化

加上 .carousel-fade 到你的滑动里，使交替变化代替滑动.

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="/img/2016instbg_01.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="/img/2016instbg_02.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="/img/2016instbg_03.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

更改幻灯片的切换间隔时间 .carousel-item间隔

加上 data-interval="" 到一个 .carousel-item 更改自动循环到下一项之间的延迟时间.

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="/img/2016instbg_01.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-interval="2000">
      <img src="/img/2016instbg_02.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="/img/2016instbg_03.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

JavaScript控制轮播

通过下面方法使用JS控制轮播(实现自动滚动)：

$('.carousel').carousel()

选项

可以通过data-方法，定义此轮播组件的属性，方法是data-interval=""，实现JavaScript属性的注入，订制此组件的各种形态。

名称Type类型默认值描述
intervalnumber5000自动循环项目之间的延迟时间（即滚动时间），如果为false，则整个轮播组件不会自动滚动（仅支持手动滚动）-在调试CSS样式时这很实用。
keyboardbooleantrue是否应对键盘事件作出反应，如果选择true则可以通过键盘上的左<-右->方向键进行切换控制。
pausestring | boolean"hover"如果设置为"hover", 则鼠标移在动画屏幕上暂停旋转，并在移开鼠标后恢复旋转事件（这是默认属性）；如设置为false,则鼠标移上去轮播动画不会暂停。在触摸屏幕上，当设置为"hover"属性时，循环将在触控时暂停（一旦用户完成与旋转事件的交互）两个时间间隔自动恢复。 请注意，这是上述鼠标行为的补充。
ridestringfalse在用户手动循环第一个项目后自动播放传送带， 如果“carousel”则加载时自动播放传送带。
wrapbooleantrue转盘是否应该连续循环或难以停止。

折叠面板

Bootstrap折叠板插件允许你在网页中用一点点JavaScript以及CSS类切换内容，控制内容的可见性。它是一个灵活的插件，使用少量的类（来自必需的过渡插件），以方便切换行为。

插件用于显示和隐藏内容，按钮或锚点用作触发器，映射到您切换的特定元素。 折叠元素会将height 从其当前值设置为0.使用CSS处理动画的方式，您不能在.collapse 上使用padding 相反，使用该类作为独立的包装元素.

点击下面任何一个按钮，通过类更改显示和隐藏另一个class包含的元素：

  • .collapse 隐藏内容

  • .collapsing 带动态效果的切换

  • .collapse.show 显示内容

你可以使用带href 属性的连接,、或者带 data-target 属性的按钮来创建折叠效果-这两种情况下 data-toggle="collapse" 属性都是必须的。

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

多目标控制

可以在<button>或者 <a> 标签上，通过 JQuery选择器来显示和隐藏多个元素（或者多个<button>、 <a>元素来控制显示/隐藏一个元素素）），如果被引用对象的href 或者 data-target 属性定义正确。

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

手风琴折叠范例

结合 card卡片组件使用，可以扩展折叠组件为手风琴效果。

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>
​
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

无障碍浏览提示(易用性)

建议添加 aria-expanded 到控件元素中，该属性能明确将与控件相关的可折叠元素之当前状态传达给屏幕阅读器和类似的辅助技术。如果折叠块元素默认是闭合的，它必须拥有一个 aria-expanded="false"值。如果你用.show类设置则可以定义折叠控件为默认打开，在控制器上设置aria-expanded="true"即可。插件会根据折叠块元素是打开还是关闭的，自动切换这个属性（通过JavaScript，或者因为用户触发的另一个控件元素也绑定到相同的折叠元素）。

此外，如果控件元素只对准一个单个元素——即data-target的值指向一个id选择器，你可以给这个控件元素添加额外的aria-controls属性，容纳这个折叠块元素的id。现代的屏幕阅读器以及类似的辅助技术利用这个属性向用户提供额外的快捷方式，直接导航到折叠块元素本身。

用法

折叠插件使用一些Class类来处理复杂的事务：

  • .collapse 隐藏内容

  • .collapse.show 显示内容

  • .collapsing 在转换开始时被添加，当它完成时则移除。

这些类可以在_transitions.scss文件中查阅。

总结

常用

只引用样式不引用插件，不用引入js插件，但是需要引用样式的核心插件bootstrap.min.css

引用插件，要先引用jquery然后紧接着引入bootstrap.min,js

viewport<meta>标记指定用户是否可以缩放Web页面 width和height与html相同 width指令使用devie-width标记可以指示视区宽度应为设备屏幕宽度 height指令使用device-height标记指示视区高度为设备屏幕高度 initial-scale指令用于设置Web页面的初始缩放比例。通常情况下设备会在浏览器中呈现出整个Web页面，设为1.0则将显示未经缩放的Web文档

拷贝dist/css 中的bootstrap.min.css 到项目 CSS 中 拷贝distjst 中的bootstrap.minjs到项目的js 中

min是指压缩过的文件，想要看源码就引用没压缩的，提及可能会大一点点

布局容器

<!-- 布局容器 1、,container类用于固定宽度并支持响应式布局的容器。

 <div class="container"></div>
用的比较多

两侧会有留白

2、.container-f1uid类用于100%宽度，占据全部视口(viewport)的容器。

<div class="container-fluid"></div>

网格系统 container,row,xs(xsmall phones),sm(small tablets),md(middle desktops),Ig (larger desktops) 即：超小屏（自动），小屏(750px),中屏970px)和大屏(1170px) 数据行(。row)必须包含在容器(。container)中， 以便为其赋予合适的对齐方式和内距(padding). 在行(。row)中可以添加列(。column,只有列（column)才可以作为行容器(。row)的直接子元素，但列数之和不能超过平分的总列数，比如12。如果大于12，则自动换到下一行。 具体内容应当放置在列容器(column)之内

<div class="container">
    <div class="row">
        <!--列元素 co1-xs-数值 co1-sm-数值 co1-md-数值 co1-1g-数值-->
        <!--都写上就行，针对不同的屏幕大小响应式显示-->
        <!--列元素偏移 co1-xs-offset-数值 co1-sm-offset-数值 co1-md-offset-数值 co1-1g-offset-数值-->
        <!--列排序 co1-md-pull-数值   往前移动，左移，会覆盖-->
        <!--列排序 co1-md-push-数值   往后移动，右移，会覆盖-->
        <div class="col-md-4">4列</div>
    </div>
</div>

列元素偏移 co1-xs-offset-数值（总数不要超过12）不会覆盖

列排序 列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。会覆盖 在Bootstrapi框架的网格系统中是通过添加类名·col-md-push-数值,和col-md-pull-数值（往前移动，左移）,·(其中星号代表移动的列

列嵌套 Bootstrapi框架的网格系统还支持列的嵌套。 你可以在一个列中添加一个或者多个行(row)容器，然后在这个行容器中插入列，套娃。与div一样

<!-列嵌套->
<div class="row">
    <div class="col-md-6"style="background-color:navajowhite;">
        <div class="row">
            <div-class="col-md-1"style="background-color:#31708F;">1</div>
            <div class="col-md-9"style="background-color:khaki;">9</div>
        </div>
    </div>
    <div class="col-md-6"style="background-color:teal;">6</div>
</div>

强调 定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来表示强调，具本说明在前面，这个还是很重要的。有七个，最重要的就是成功和危险的那个 .text-muted:提示，使用浅灰色(#999) text-primary:主要，使用蓝色(#428bca) .text-success:成功，使用浅绿色（#3c763d ,text-info:通知信息，使用浅蓝色(#31708f) .text-warning:警告，使用黄色(#8a6d3b) ,text-danger:危险，使用褐色(#a94442)

<div class="text-muted">提示效果</div>
<div classa="text-primary'">主要效果</div>
<div class="text-success">成功效果</div>
<div class="text-info">信息效果</div>
<div class="text-warning">警告效果</div>
<div class=:"text-danger'">危险效果</div>

对齐 Bootstrap通过定义四个类名来控制文本的对齐风格：（重要比html中的center好用） .text-left:左对齐 .text-center:居中对齐 .text-right:右对齐 .text-justify两端对齐。

列表

去点列表class="list-unstyled"
<ul class="list-unstyled">
<1i>无序项目列表一</1>
<1i>无序项目列表二</1>
</u1>
内联列表
classa="ist-inline",把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。制作水平导航常用。
<ul class="list-inline">
<1i>首页</1i>
<1i>java</1i>
<1i>py</1i>
</u1>

4代码 用于显示代码的风格。在Bootstrap主要提供了三种代码风格： (1)使用<code></code>来显示单行内联代码 (2)使用<pre></pre>来显示多行块代码 样式：pre-scrollable(height,max-heighti高度固定，为340px,超过存在滚动条) (3)使用<kbd></kbd>来显示用户输入代码，如快捷键 单行内联代码

<code>this is a simple code</code>
快捷键
<p>使用<kbd>ctr1+s</kbd>保存</p>

多行块代码 <!-代码会保留原本的格式，包括空格和换行-->

<pre>
public class Helloworld
public static void main(string【】args){
system.out.println("helloworld...");
3
3
</pre>
<I-·显示html代码需要使用字符实体
-->
<pre>
&1t;h2&gt;你好&1t;/h2&gt;
</pre>
<!-·当长度超过指定值
可以添加滚动条
-->
<pre class="pre-scrollable">
<o1>
I
<1i>........</1i>
<1i>.......</1i>
<1i>.......</1i>
1i>........</1i>
<1i>.........</1i>
<1i>...
......</1i>
<1i>.....,,.</1i>
<1i>.....</1i>
<1i>.........</1i>
<1i>.........</1i>
<1i>....
...</1i>
<1i>........</1i>
<61>
</pre>

表格样式 基础样式 1).table:基础表格 附加样式类 1).table-striped:斑马线表 2).table-bordered:带边框的表格 3).table-hover:鼠标悬停高亮的表格 4).table-condensed:紧凑型表格，单元格没内距或者内距较其他表格的内距小

tr、th、td的样式类 提供了五种不同的类名，每种类名控制了行的不同背景颜色 .active将悬停的颜色应用在行或者单元格上#f51515 .success表示成功的操作#dffod8 .info表示信息变化的操作#d9edf7

.warning表示一个警告的操作 .danger表示一个危险的操作

输入框text .form-control 表单样式

input-lg 表示大小

<div class="col-sm-3">
<input type="text"name=""id=""class="form-control"/>
<input type="text"name=""id=""class="form-control input-1g"/>
<input type="text"name=""id=""class="form-control input-sm"/>
</div>

<!--下拉框-->

<div class="row">
<div class="col-md-3">
<select class="form-control">
<option>请选择城市</option>
<option>上海</option>
<option>北京</option>
</select><br>
</div>
</div>

<!--文本域-->

<div class="row">
<div class="col-md-3">
<textarea class="form-control">
</textarea>
</div>
</div>

复选框checkbox（单选框的与复选宽的相同，就是把checkbox换成radio） 垂直显示：.checkbox 水平显示：.checkbox-inline <!--垂直显示-->

<div>
<div class="checkbox">
<label><input types="checkbox">游戏</label>:
</div>
<div class="checkbox">
<label><input type="checkbox'">学习</label>:
</div>
</div>

<!--水平显示-->

<div>
<label class="checkbox-inline">
<input type="checkbox'">游戏
</1abe1>
<label class="checkbox-inline">
<input type="checkbox">学习
</1abe1>
</div>
​

按钮 1)使用button实现 基础样式：.btn

<button c1ass="btn">按钮</button>

按钮样式：btn-primary btn-info btn-success btn-warning btn-danger btn--link btn-default sm设置按钮的大小可以使用bth-lg或bth-sm或bth-xs

前面有七种的详细介绍

2)按钮禁用 方法1：在标签中添加disabled,属性

方法2：在元素标签中添加类名"disabled"

<button class="btn btn-danger disab1ed">禁用按钮</button>

在class属性中添加disabled只是样式上禁用了，并不是真正的禁用了此按钮！

4.2.2.表单布局 基本的表单结构是Bootstrap自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的 步骤： .向父<form>元素添加role=form"。 ·把标签和控件放在一个带有class,form-group的<div>中。这是获取最佳间距所必需的。 ·向所有的文本元素<input>、<textarea:>和<select>添加class="form-control"。 水平表单 同一行显示form-horizontal 设置样式：form-horizontal

for 属性规定 label 与哪个表单元素(id)绑定。

.form-inline可以使元素组水平排列

<form action="#"class="form-horizontal"role="form">
<!-表单中的表单元素组->
<div class="form-group">
<label for="uname"class="control-label col-md-2"></label>
<div class="col-md-8">
<input type="text"id="uname"class="form-control"placeholder="请输入姓名"/>
</div>
</div>
</form>

缩略图 缩略图在电商类的网站很常见，最常用的地方就是产品列表页面。缩略图的实现是配合网格系统一起使用。 同时还可以让缩略图配合标题、描述内容，按钮等。

fonts文件夹下面放的是图标

​
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="img/IMG_0131.JPG"alt="...">
                <h3>范冰冰</h3>
                <p>出生于北京市，中国内地影视女演员、模特。</p>
                <button class="btn btn-default">
                <span class="glyphicon glyphicon-heart"></span></button>
                <button class="btn btn-info">
                <span class="glyphicon glyphicon-pencil"></span>
                </button>
            </div>
        </div>
    </div>
</div>

导航 使用下拉与按钮组合可以制作导航 要点： 1、基本样式：.nav与“nav-tabs”、“nav-pi11s”组合制作导航 2、分类： 1）、标签型（nav-tabs）导航 2）、胶囊形（nav-pi11s）导航 3）、堆栈（nav-stacked暑航 4）、自适应（nav-justified导航 5）、面包屑式（breadcrumb）导航，单独使用样式，不与nav一起使用，直接加入到o1、u1中即可，一般用于导 航，主要是起的作用是告诉用户现在所处页面的位置（当前位置） 3、状态： 1）、选中状态active样式 2）、禁用状态：disable 4、二级菜单

<p>分页导航</p>
<ul class="pagination">
<1i><a href="#">&1aquo;</a></1i>
<li class="active"><a href="#">1</a></li>
<1i><a href="#">2</a></1i>
<1i><a href="#">3</a></1>
<1i><a href="#">4</a></1i>
<1i><a href="#">5</a></1i>
<li><a href="#">&raquo;</a></li>
</u1>
<p>翻页导航</p>
<ul class="pager">
<1i><a href="#">上-页</a></1i>
<1i><a href="#">下一页/a></1i>
<u1>

5.3.下拉菜单 在使用Bootstrap框架的下拉菜单时，必须使用两个js <!--如果要使用Bootstrap的js插件，必须先调入jQuery-->

<script src="js/jquery-3.4.1.js"></script>

<!-- 包括所有bootstrapi的js插件或者可以根据需要使用的js插件调用

<script src="js/bootstrap.min.js"></script>

要点： 1、使用一个类名为dropdown或btn-g roup的div包裹整个下拉框：

<div class="dropdown"></div>

2、默认向下dropdown,向上弹起加入·dropup即可 3、使用button作为父菜单，使用类名：dropdown-toggle和自定义data-togglel属性

<button type="button"class="btn btn-default dropdown-toggle"data-toggle="dropdown">
</button>

4、在outton中使用font制作下拉箭头 <span class="caret"></span> 5、下拉菜单项使用一个uI列表，并且定义一个类名为“dropdown--menu 6、分组分割线：<li>添加类名“divider”来实现添加下拉分隔线的功能 7、分组标题：<li>添加类名“dropdown-header'”来实现分组的功能 8、对齐方式： 1)、dropdown-menu-1eft左对齐默认样式 2),dropdown-menu-right 右对齐 9、激活状态(。active)和禁用状态(。disab1ed) <!--使用一个类名为dropdown,默认向下dropdown,向上弹起加入·dropup即可->

<!--S入Bootstrap的核心css文件--> <!--引入Jqueryi核心js文件，需要在bootstrapi的js之前引入--> <!--引入BootStrapi的核心js文件 -->

active类，选中类

<!-- 操作模态框 通过data属性：在控制器元素（比如按钮或者链接）上设置属性data-toggle="modal",同时设置data-target属性值设置为#（对应的按钮或者链接的id） 通过JavaScript:使用这种技术，您可以通过简单的一行JavaScript来调用带有id="identifier"的模态框 打开模态框：$('#identifier'),modal('show') 关闭模态框：$('#identifier').modal('hide') -->

<script type="text/javascript"> //绑定按钮的点击事件 $("#btn").click(function（）{ //手动打开模态框 $("#myModal").modal("show"); }); //关闭模态框 $("#submit_btn").click(function（）{ //手动关闭模态框 $("#myModal")modal("hide"); }); </script >

结束语

总总结，简单的常见的需要记住，需要啥就去网上搜啥，官方文档，菜鸟教程，csdn以及其他论坛。可参考可学习的东西太多了。学无止境，学不完，根本学不完。

现在这个还没搞完

这个会搞完的，有始有终。

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

荒野大票客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值