bootstrap

BOOTSTRAP

​ bootstrap来自Twitter，是目前最受欢迎的前端框架。bootstrap是基于html,css,javascript的，它简单==简洁灵活，使Web开发更加快捷。

优点：

• 标准化是html+css编码规范
• 提供了一套简洁、直观、强悍的组件
• 有自己的生态圈，不断的更新迭代
• 让开发变得更简单，提高了开发效率

响应式开发

​ 响应式开发原理：就是使用媒体查询针对不同宽度的设备进行布局

​ 和样式的设置，从而适配不同设备的目的。

设备划分	尺寸区间
超小屏幕（手机）	<768px
小屏设备（平板）	>=768–<992px
中等屏幕（桌面显示器）	>=992px–<1200px
宽屏设备（大桌面显示器）	>=1200px

响应式布局容器

​ 响应式需要一个父级作为布局容器，来配合子级元素来实现变化 效果。

​ 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同页面布局和样式变化。

平时我们划分响应式尺寸

• 超小屏幕（手机，小于768px）:设置宽度为100%
• 小屏幕（平板，大于等于768px）：设置宽度为750px
• 中等屏幕（桌面显示器，大于等于992px）:宽度设置为970px
• 大屏幕（大桌面显示器，大于等于1200px）:宽度设置为1170px

Bootstrap4

​ Bootstrap4 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。

网格系统

​ Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

网格类：

• .col- 针对所有设备
• .col-sm- 平板 - 屏幕宽度等于或大于 576px
• .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
• .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
• .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

网格系统规则：

• 网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
• 使用行来创建水平的列组。
• 内容需要放置在列中，并且只有列可以是行的直接子节点。
• 预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
• 列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
• 网格列是通过跨越指定的 12 个列来创建。 例如，设置三个相等的列，需要使用三个 .col-sm-4 来设置。
• Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。

	超小设备 <576px	平板 ≥576px	桌面显示器 ≥768px	大桌面显示器 ≥992px	超大桌面显示器 ≥1200px
容器最大宽度	None (auto)	540px	720px	960px	1140px
类前缀	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
列数量和	12	12	12	12	12
间隙宽度	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）

以下为网格的四种基本结构：

1.等宽响应式列：在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版

<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</d
iv>

2.不等宽响应式列：在移动设备上，即屏幕宽度小于 576px 时，两个列将会上下堆叠排版

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

3.平板、桌面、大桌面显示器、超大桌面显示器：以下实例在平板、桌面、大桌面显示器、超大桌面显示器的宽度比例为分别为：25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%, 在移动手机等小型设备上会堆叠显示。

div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>RUNOOB</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>菜鸟教程</p>
    </div>
  </div>
</div>

**4.偏移列：**偏移列通过 offset-*-* 类来设置。

​ 第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。为了在大屏幕显示器上使

​ 用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 ***** 列，其中 ***** 范围是从 1 到 11。

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

文字排版

Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。默认的 font-family 为 “Helvetica Neue”, Helvetica, Arial, sans-serif。此外，所有的

元素 margin-top: 0 、 margin-bottom: 1rem (16px)。

下表提供了 Bootstrap4 更多排版类的实例：

类名	描述
.font-weight-bold	加粗文本
.font-weight-normal	普通文本
.font-weight-light	更细的文本
.font-italic	斜体文本
.lead	让段落更突出
.small	指定更小文本 (为父元素的 85% )
.text-left	左对齐
.text-center	居中
.text-right	右对齐
.text-justify	设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap	段落中超出屏幕部分不换行
.text-lowercase	设定文本小写
.text-uppercase	设定文本大写
.text-capitalize	设定单词首字母大写
.initialism	显示在 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
.list-unstyled	移除默认的列表样式，列表项中左对齐 ( 和 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline	将所有列表项放置同一行
.pre-scrollable	使 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

颜色

文本颜色

Bootstrap 4 提供了一些有代表意义的颜色类：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light:

<div class="container">
  <h2>代表指定意义的文本颜色</h2>
  <p class="text-muted">柔和的文本。</p>
  <p class="text-primary">重要的文本。</p>
  <p class="text-success">执行成功的文本。</p>
  <p class="text-info">代表一些提示信息的文本。</p>
  <p class="text-warning">警告文本。</p>
  <p class="text-danger">危险操作文本。</p>
  <p class="text-secondary">副标题。</p>
  <p class="text-dark">深灰色文字。</p>
  <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
  <p class="text-white">白色文本（白色背景上看不清楚）。</p>
</div>

背景颜色

提供背景颜色的类有: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。

注意背景颜色不会设置文本的颜色，在一些实例中你需要与 .text-* 类一起使用。

<div class="container">
  <h2>背景颜色</h2>
  <p class="bg-primary text-white">重要的背景颜色。</p>
  <p class="bg-success text-white">执行成功背景颜色。</p>
  <p class="bg-info text-white">信息提示背景颜色。</p>
  <p class="bg-warning text-white">警告背景颜色</p>
  <p class="bg-danger text-white">危险背景颜色。</p>
  <p class="bg-secondary text-white">副标题背景颜色。</p>
  <p class="bg-dark text-white">深灰背景颜色。</p>
  <p class="bg-light text-dark">浅灰背景颜色。</p>
</div>

表格

基础表格

通过 .table 类来设置基础表格的样式

<table class="table">
    <thead>
      <tr>
        <th>啊</th>
        <th>吧</th>
        <th>从</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
    </tbody>
</table>

条纹表格

通过添加 .table-striped 类，您将在 内的行上看到条纹，如下面的实例所示：

<table class="table table-striped">
    <thead>
      <tr>
        <th>啊</th>
        <th>吧</th>
        <th>从</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
    </tbody>
</table>

带边框表格

.table-bordered 类可以为表格添加边框将上方table table-striped换成table table-bordered即可。

表格总结：

Bootstrap4 基础表格	通过 .table 类来设置基础表格的样式
条纹表格	通过添加 .table-striped 类，您将在
带边框表格	.table-bordered 类可以为表格添加边框
鼠标悬停状态表格	.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）
黑色背景表格	.table-dark 类可以为表格添加黑色背景
黑色条纹表格	联合使用 .table-dark 和 .table-striped 类可以创建黑色的条纹表格
鼠标悬停效果 - 黑色背景表格	联合使用 .table-dark 和 .table-hover 类可以设置黑色背景表格的鼠标悬停效果
无边框表格	.table-borderless 类可以设置一个无边框的表格
指定意义的颜色类	通过指定意义的颜色类可以为表格的行或者单元格设置颜色

内的行上看到条纹

下表列出了表格颜色类的说明:

类名	描述
.table-primary	蓝色: 指定这是一个重要的操作
.table-success	绿色: 指定这是一个允许执行的操作
.table-danger	红色: 指定这是可以危险的操作
.table-info	浅蓝色: 表示内容已变更
.table-warning	橘色: 表示需要注意的操作
.table-active	灰色: 用于鼠标悬停效果
.table-secondary	灰色: 表示内容不怎么重要
.table-light	浅灰色，可以是表格行的背景
.table-dark	深灰色，可以是表格行的背景

图像形状

圆角图片	.rounded 类可以让图片显示圆角效果
椭圆图片	.rounded-circle 类可以设置椭圆形图片
缩略图	.img-thumbnail 类用于设置图片缩略图(图片有边框)
图片对齐方式	使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐
图片居中	使用 .mx-auto (margin:auto) 和 .d-block (display:block) 类来设置图片居中对齐
响应式图片	图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。我们可以通过在 标签中添加 .img-fluid 类来设置响应式图片。

信息提示框

提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现:

<div class="alert alert-success">
  <strong>成功!</strong> 指定操作成功提示信息。
</div>

1. 提示框添加链接：提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接

   <div class="alert alert-success">
     <strong>成功!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
   </div>
   

2. 关闭提示框：我们可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class=“close” 和 data-dismiss=“alert” 类来设置提示框的关闭操作。

   <div class="alert alert-success alert-dismissible">
     <button type="button" class="close" data-dismiss="alert">&times;</button>
     <strong>成功!</strong> 指定操作成功提示信息。
   </div>
   

3. 提示框动画：.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果

   <div class="alert alert-danger alert-dismissible fade show">
   

   按钮组

   Bootstrap 4 中允许我们将按钮放在同一行上。

   可以在

   元素上添加 .btn-group 类来创建按钮组。

​ 我们可以使用 .btn-group-lg|sm 类来设置按钮组的大小。

<div class="btn-group btn-group-lg">大按钮
<div class="btn-group">默认按钮
<div class="btn-group btn-group-sm">小按钮

1. 可以使用 .btn-group-vertical 类来创建垂直的按钮组：

   <div class="btn-group-vertical">
     <button type="button" class="btn btn-primary">Apple</button>
     <button type="button" class="btn btn-primary">Samsung</button>
     <button type="button" class="btn btn-primary">Sony</button>
   </div>
   

2. 内嵌按钮组及下拉菜单：

   <div class="btn-group">
       <button type="button" class="btn btn-primary">Sony</button>
       <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-       toggle="dropdown">
         <span class="caret"></span>
       </button>
       <div class="dropdown-menu">
         <a class="dropdown-item" href="#">Tablet</a>
         <a class="dropdown-item" href="#">Smartphone</a>
       </div>
   

3. 垂直按钮组及下拉菜单：

   <div class="btn-group-vertical">
     <button type="button" class="btn btn-primary">Apple</button>
     <button type="button" class="btn btn-primary">Samsung</button>
     <div class="btn-group">
       <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
          Sony
       </button>
       <div class="dropdown-menu">
         <a class="dropdown-item" href="#">Tablet</a>
         <a class="dropdown-item" href="#">Smartphone</a>
       </div>
     </div>
   </div>
   

4. 多个按钮组，按钮组可以一个个并列显示在同一行上：

   <div class="btn-group">
     <button type="button" class="btn btn-primary">Apple</button>
     <button type="button" class="btn btn-primary">Samsung</button>
     <button type="button" class="btn btn-primary">Sony</button>
   </div>
    
   <div class="btn-group">
     <button type="button" class="btn btn-primary">BMW</button>
     <button type="button" class="btn btn-primary">Mercedes</button>
     <button type="button" class="btn btn-primary">Volvo</button>
   </div>
   

   进度条

   进度条可以显示用户任务的完成过程。

   创建一个基本的进度条的步骤如下：

   • 添加一个带有 .progress 类的
     。
   • 接着，在上面的
     内，添加一个带有 class .progress-bar 的空的

     。
   • 添加一个带有百分比表示的宽度的 style 属性，例如 style=“width:70%” 表示进度条在 70% 的位置。

   进度条高度默认为 16px。我们可以使用 CSS 的 height 属性来修改他

   <div class="progress" style="height:20px;">
     <div class="progress-bar" style="width:40%;"></div>
   </div>
   

   加载效果

   1. 要创建加载效果可以使用.spinner-border类
   2. 使用 .spinner-grow 类来设置闪烁的加载效果
   3. 使用.spinner-border-sm 或 .spinner-grow-sm 类来创建加载效果的大小
   4. 我们也可以设置一个正在加载的按钮

   <button class="btn btn-primary">
     <span class="spinner-border spinner-border-sm"></span>
   </button>
    
   <button class="btn btn-primary">
     <span class="spinner-border spinner-border-sm"></span>
     Loading..
   </button>
    
   <button class="btn btn-primary" disabled>
     <span class="spinner-border spinner-border-sm"></span>
     Loading..
   </button>
    
   <button class="btn btn-primary" disabled>
     <span class="spinner-grow spinner-grow-sm"></span>
     Loading..
   </button>
   

   分页

   网页开发过程，如果碰到内容过多，一般都会做分页处理。

   要创建一个基本的分页可以在

   • 元素上添加 .pagination 类。然后在
   • 元素上添加 .page-item 类，
   • 元素的 标签上添加 .page-link 类

列表组

要创建列表组，可以在

• 元素上添加 .list-group 类, 在
• 元素上添加 .list-group-item 类

1. 激活状态的列表项：通过添加 .active 类来设置激活状态的列表项

   <ul class="list-group">
     <li class="list-group-item active">Active item</li>
     <li class="list-group-item">Second item</li>
     <li class="list-group-item">Third item</li>
   </ul>
   

2. 禁用的列表项：.disabled 类用于设置禁用的列表项

   <ul class="list-group">
     <li class="list-group-item disabled">Disabled item</li>
     <li class="list-group-item">Second item</li>
     <li class="list-group-item">Third item</li>
   </ul>
   

3. 链接列表项：要创建一个链接的列表项，可以将

   • 替换为
     ， 替换

     • 。如果你想鼠标悬停显示灰色背景就添加**.list-group-item-action** 类

   <div class="list-group">
     <a href="#" class="list-group-item list-group-item-action">First item</a>
     <a href="#" class="list-group-item list-group-item-action">Second item</a>
     <a href="#" class="list-group-item list-group-item-action">Third item</a>
   </div>
   

4. 移除列表边框:使用 .list-group-flush 类来删除列表的边框和圆角

   <ul class="list-group list-group-flush">
     <li class="list-group-item">First item</li>
     <li class="list-group-item">Second item</li>
     <li class="list-group-item">Third item</li>
     <li class="list-group-item">Fourth item</li>
   </ul>
   

5. 水平列表组：我们可以将 .list-group-horizontal 类添加到 .list-group 类后面来创建水平列表组：

   <ul class="list-group list-group-horizontal">
     <li class="list-group-item">First item</li>
     <li class="list-group-item">Second item</li>
     <li class="list-group-item">Third item</li>
     <li class="list-group-item">Fourth item</li>
   </ul>
   

6. 多种颜色列表项：列表项目的颜色可以通过以下列来设置： .list-group-item-success**, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, **list-group-item-dark 和 list-group-item-light

   <ul class="list-group">
     <li class="list-group-item list-group-item-success">成功列表项</li>
     <li class="list-group-item list-group-item-secondary">次要列表项</li>
     <li class="list-group-item list-group-item-info">信息列表项</li>
     <li class="list-group-item list-group-item-warning">警告列表项</li>
     <li class="list-group-item list-group-item-danger">危险列表项</li>
     <li class="list-group-item list-group-item-primary">主要列表项</li>
     <li class="list-group-item list-group-item-dark">深灰色列表项</li>
     <li class="list-group-item list-group-item-light">浅色列表项</li>
   </ul>
   

   卡片

   .card-header类用于创建卡片的头部样式， .card-footer 类用于创建卡片的底部样式

   .card-header类用于创建卡片的头部样式， .card-footer 类用于创建卡片的底部样式
   

   标题、文本和链接

   我们可以在头部元素上使用 .card-title 类来设置卡片的标题 。 .card-text 类用于设置卡片正文的内容。 .card-link 类用于给链接设置颜色。

   <div class="card">
     <div class="card-body">
       <h4 class="card-title">Card title</h4>
       <p class="card-text">Some example text. Some example text.</p>
       <a href="#" class="card-link">Card link</a>
       <a href="#" class="card-link">Another link</a>
     </div>
   </div>
   

   图片卡片

   我们可以给 添加 .card-img-top（图片在文字上方） 或 .card-img-bottom（图片在文字下方 来设置图片卡片：

   <div class="card" style="width:400px">
     <img decoding="async" class="card-img-top" src="img_avatar1.png" alt="Card image">
     <div class="card-body">
       <h4 class="card-title">John Doe</h4>
       <p class="card-text">Some example text.</p>
       <a href="#" class="btn btn-primary">See Profile</a>
     </div>
   </div>
   

   下拉菜单

   下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。

   1. .dropdown 类用来指定一个下拉菜单。

      我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle=“dropdown” 属性。

       元素上添加 .dropdown-menu 类来设置实现下拉菜单，然后在下拉菜单的选项中添加 .dropdown-item 类。

      我们也可以在 标签中使用：

   2. 下拉菜单中的分割线：

      .dropdown-divider 类用于在下拉菜单中创建一个水平的分割线：

   3. 下拉菜单中的可用项与禁用项：

      .active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。

      如果要禁用下拉菜单的选项，可以使用**.disabled** 类。

   4. 下拉菜单的定位：

      如果我们想让下拉菜单右对齐，可以在元素上的 .dropdown-menu 类后添加 .dropdown-menu-right 类。

      折叠

      .collapse 类用于指定一个折叠元素 (实例中的

      ); 点击按钮后会在隐藏与显示之间切换。

      控制内容的隐藏与显示，需要在 或 元素上添加 data-toggle=“collapse” 属性。 data-target=“#id” 属性是对应折叠的内容 (

      )。

      注意: - 元素上你可以使用 href 属性来代替 data-target 属性