Bootstrap 4（上）

已于 2022-04-23 11:17:05 修改
阅读量1k 收藏 1
点赞数 1
分类专栏： Bootstrap 4 文章标签： bootstrap html 前端
于 2022-04-18 16:50:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HTML_Z/article/details/124252711
版权

Bootstrap 4

Bootstrap4 是什么？

  • Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。
  • Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin 、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。
  • 在学习之前，您必须具备 HTML 、 CSS 和 JavaScript 的基础知识。如果您还不了解这些概念，那么建议您先阅读我们的这些教程:
    • HTML 教程
    • CSS 教程
    • JavaScript 教程

Bootstrap4 安装使用

注意引入js的时候，jquery.js必须放在bootstrap.js前面

https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.css
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js
https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.js

或者

https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js
https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js

网格系统

  • Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
  • 我们也可以根据自己的需要，定义列数

网格类

  • Bootstrap 4 网格系统有以下 5 个类:

    • .col- 针对所有设备

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
    <style>
      .row > div {
        border: 1px solid red;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-1">1</div>
        <div class="col-1">2</div>
        <div class="col-1">3</div>
        <div class="col-1">4</div>
        <div class="col-1">5</div>
        <div class="col-1">6</div>
        <div class="col-1">7</div>
        <div class="col-1">8</div>
        <div class="col-1">9</div>
        <div class="col-1">10</div>
        <div class="col-1">11</div>
        <div class="col-1">12</div>
      </div>
      <div class="row">
        <div class="col-4">1</div>
        <div class="col-4">2</div>
        <div class="col-4">3</div>
      </div>
      <div class="row">
        <div class="col-6">1</div>
        <div class="col-6">2</div>
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

      在这里插入图片描述

    • .col-sm- 平板 - 屏幕宽度等于或大于 576px

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
    <style>
      .row > div {
        border: 1px solid red;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-1">1</div>
        <div class="col-sm-1">2</div>
        <div class="col-sm-1">3</div>
        <div class="col-sm-1">4</div>
        <div class="col-sm-1">5</div>
        <div class="col-sm-1">6</div>
        <div class="col-sm-1">7</div>
        <div class="col-sm-1">8</div>
        <div class="col-sm-1">9</div>
        <div class="col-sm-1">10</div>
        <div class="col-sm-1">11</div>
        <div class="col-sm-1">12</div>
      </div>
      <div class="row">
        <div class="col-sm-4">1</div>
        <div class="col-sm-4">2</div>
        <div class="col-sm-4">3</div>
      </div>
      <div class="row">
        <div class="col-sm-6">1</div>
        <div class="col-sm-6">2</div>
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

      在这里插入图片描述

    • .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 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。

网格的基本结构

  • 第一个例子：创建一行(<div class="row">)。然后， 添加需要的列( .col-*-* 类中设置)。 第一个星号 (*) 表示响应的设备: sm, md, lg 或 xl, 第二个星号 (*) 表示一个数字, 同一行的数字相加为12。

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
    <style>
      .row > div {
        border: 1px solid red;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-12">col-sm-12</div>
      </div>
      <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
      </div>
      <div class="row">
        <div class="col-lg-6">col-lg-6</div>
        <div class="col-lg-6">col-lg-6</div>
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 第二个例子: 不在每个col上添加数字，让 bootstrap 自动处理布局

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
    <style>
      .row > div {
        border: 1px solid red;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 同一行的每个列宽度相等： 两个 “col” ，每个就为50%的宽度。三个"col"每个就为33.33% 的宽度，四个"col"每个就为25%的宽度，以此类推。同样，你可以使用 .col-sm|md|lg|xl 来设置列的响应规则。

等宽列，自动布局

  • 创建相等宽度的列，Bootstrap自动布局

      <body>
    <div class="container">
      <div class="row">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
      </div>
    </div>
  </body>

等宽响应式列

  • 在平板及更大屏幕上创建等宽度的响应式列。

  • 在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版:

      <body>
    <div class="container">
      <div class="row">
        <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</div>
      </div>
    </div>
  </body>

    在这里插入图片描述

不等宽响应式列

  • 在平板及更大屏幕上创建不等宽度的响应式列。

  • 在移动设备上，即屏幕宽度小于 576px 时，两个列将会上下堆叠排版:

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

    在这里插入图片描述

平板和桌面端

  • 在桌面设备的显示器上两个列的宽度各占 50%，如果在平板端则左边的宽度为 25%，右边的宽度为 75%, 在移动手机等小型设备上会堆叠显示。

      <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-3 col-md-6">
          <p>click369.com</p>
        </div>
        <div class="col-sm-9 col-md-6">
          <p>网星软件</p>
        </div>
      </div>
    </div>
  </body>

平板、桌面、大桌面显示器、超大桌面显示器

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

      <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
          <p>click369.com</p>
        </div>
        <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
          <p>网星软件</p>
        </div>
      </div>
    </div>
  </body>

偏移列

  • 偏移列通过offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是1到 11的数字。

  • 为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从1到11。

  • 例如：.offset-md-4 是把.col-md-4 往右移了四列格。

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
    <style>
      .row {
        margin-top: 30px;
      }
      .row > div {
        border: 1px solid red;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <!-- 列偏移需要计算在总列数 不能超过12  -->
    <div class="container">
      <div class="row">
        <div class="col-md-3">col-md-3</div>
        <div class="col-md-3 offset-md-3">col-md-3</div>
        <div class="col-md-3">col-md-3</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>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

文字排版

  • Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。
  • 默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif。
  • 此外，所有的 <p> 元素 margin-top: 0 、 margin-bottom: 1rem (16px)

<h1> - <h6>

  • Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <div class="container">
        <h1>h1 Bootstrap 标题 (2.5rem = 40px)</h1>
        <h2>h2 Bootstrap 标题 (2rem = 32px)</h2>
        <h3>h3 Bootstrap 标题 (1.75rem = 28px)</h3>
        <h4>h4 Bootstrap 标题 (1.5rem = 24px)</h4>
        <h5>h5 Bootstrap 标题 (1.25rem = 20px)</h5>
        <h6>h6 Bootstrap 标题 (1rem = 16px)</h6>
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

display 标题类

  • Bootstrap 还提供了四个Display类来控制标题的样式: .display-1, .display-2, .display-3, .display-4

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <h1>Display 标题</h1>
      <p>Display 标题可以输出更大更粗的字体样式。</p>
      <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>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

<small>

  • 在Bootstrap 4中 HTML <small>元素用于创建字号更小的颜色更浅的文本

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <h1>更小文本标题</h1>
      <p>small 元素用于字号更小的颜色更浅的文本:</p>
      <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>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

<pre>

  • Bootstrap 4定义 HTML<pre>元素的样式如下:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <h1>Multiple Code Lines</h1>
      <p>For multiple lines of code, use the pre element:</p>
      <!-- 可以达到有效的换行 -->
      <pre>
      Text in a pre element
      is displayed in a fixed-width
      font, and it preserves
      both spaces and
      line breaks.
      </pre>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

更多排版类（一）

  • Bootstrap4更多排版类的实例：

    • .font-weight-bold 加粗文本
    • .font-weight-normal 普通文本
    • .font-weight-light 更细的文本
    • .font-italic 斜体文本
    • .lead 让段落更突出
    • .small 指定更小文本 (为父元素的 85% )
    • .text-left左对齐
    • .text-center 居中
    • .text-right 右对齐
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <!-- 加粗文本 -->
      <p class="font-weight-bold">加粗文本</p>
      <!-- 普通文本 -->
      <p class="font-weight-normal">普通文本</p>
      <!-- 更细的文本 -->
      <p class="font-weight-light">更细的文本</p>
      <!-- 斜体文字 -->
      <p class="font-italic">斜体文字</p>
      <!-- 让段落更加突出 -->
      <p class="lead">让段落更加突出</p>
      <!-- 指定更小文本 (为父元素的 85% ) -->
      <p class="small">指定更小文本</p>
      <!-- 左对齐 -->
      <p class="text-left">左对齐</p>
      <!-- 居中 -->
      <p class="text-center">居中</p>
      <!-- 右对齐 -->
      <p class="text-right">右对齐</p>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

更多排版类（二）

  • .text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行

  • .text-nowrap 段落中超出屏幕部分不换行

  • .text-lowercase 设定文本小写

  • .text-uppercase 设定文本大写

  • .text-capitalize 设定单词首字母大写

  • .list-unstyled 移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)

  • .list-inline 将所有列表项放置同一行,结合.list-inline-item一起使用

  • .pre-scrollable 使 <pre> 元素可滚动，代码块区域最大高度为 340px,一旦超出这个高度,就会在Y轴出现滚动条

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <p class="text-justify">设定文本对齐,段落中超出屏幕部分文字自动换行</p>
      <p class="text-nowrap">段落中超出屏幕部分不换行</p>
      <!-- 设定文本小写    -->
      <p class="text-lowercase">ABCDEFG</p>
      <!-- 设定文本大写 -->
      <p class="text-uppercase">abcdefg</p>
      <!-- 设定单词首字母大写 -->
      <p class="text-capitalize">list</p>
      <!-- 移除默认的列表样式 -->
      <ul class="list-unstyled">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
      </ul>
      <ul class="list-unstyled">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
      </ul>
      <!-- 将所有列表项放置同一行,结合 .list-inline-item一起使用 -->
      <div class="list-inline">
        <div class="list-inline-item">1</div>
        <div class="list-inline-item">2</div>
        <div class="list-inline-item">3</div>
        <div class="list-inline-item">4</div>
        <div class="list-inline-item">5</div>
      </div>
      <pre class="pre-scrollable">
        hello world
        hello world
        hello world
        hello world
        hello world
        hello world
        hello world
        hello world
        hello world
        hello world
        hello world
        hello world
        hello world
        hello world
        hello world
        hello world
        hello world 
      </pre>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

文本颜色

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

  • 在链接中使用也可以使用

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <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>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

背景颜色

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

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

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <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>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

表格（一）

  • 基础表格

    • .table类来设置基础表格的样式
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <table class="table">
        <tbody>
          <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
          </tr>
          <tr>
            <td>张三</td>
            <td>88</td>
            <td>67</td>
            <td>95</td>
          </tr>
          <tr>
            <td>李四</td>
            <td>46</td>
            <td>83</td>
            <td>38</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 条纹表格

    • .table-striped 类， <tbody>内的行上添加条纹
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <table class="table table-striped">
        <tbody>
          <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
          </tr>
          <tr>
            <td>张三</td>
            <td>88</td>
            <td>67</td>
            <td>95</td>
          </tr>
          <tr>
            <td>李四</td>
            <td>46</td>
            <td>83</td>
            <td>38</td>
          </tr>
          <tr>
            <td>王五</td>
            <td>43</td>
            <td>84</td>
            <td>58</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 带边框表格

    • .table-bordered 类可以为表格添加边框
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <table class="table table-striped table-bordered">
        <tbody>
          <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
          </tr>
          <tr>
            <td>张三</td>
            <td>88</td>
            <td>67</td>
            <td>95</td>
          </tr>
          <tr>
            <td>李四</td>
            <td>46</td>
            <td>83</td>
            <td>38</td>
          </tr>
          <tr>
            <td>王五</td>
            <td>43</td>
            <td>84</td>
            <td>58</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 鼠标悬停状态表格

    • .table-hover类可以为表格的每一行添加鼠标悬停效果（灰色背景）
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <table class="table table-striped table-bordered table-hover">
        <tbody>
          <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
          </tr>
          <tr>
            <td>张三</td>
            <td>88</td>
            <td>67</td>
            <td>95</td>
          </tr>
          <tr>
            <td>李四</td>
            <td>46</td>
            <td>83</td>
            <td>38</td>
          </tr>
          <tr>
            <td>王五</td>
            <td>43</td>
            <td>84</td>
            <td>58</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 黑色背景表格

    • .table-dark类可以为表格添加黑色背景
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <table class="table table-striped table-bordered table-hover table-dark">
        <tbody>
          <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
          </tr>
          <tr>
            <td>张三</td>
            <td>88</td>
            <td>67</td>
            <td>95</td>
          </tr>
          <tr>
            <td>李四</td>
            <td>46</td>
            <td>83</td>
            <td>38</td>
          </tr>
          <tr>
            <td>王五</td>
            <td>43</td>
            <td>84</td>
            <td>58</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

表格（二）

  • 鼠标悬停效果 - 黑色背景表格

    • 联合使用 .table-dark 和 .table-hover 类可以设置黑色背景表格的鼠标悬停效果

  • 指定意义的颜色类

    • .table-primary 蓝色: 指定这是一个重要的操作

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <table class="table table-primary">
        <tbody>
          <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
          </tr>
          <tr>
            <td>张三</td>
            <td>88</td>
            <td>67</td>
            <td>95</td>
          </tr>
          <tr>
            <td>李四</td>
            <td>46</td>
            <td>83</td>
            <td>38</td>
          </tr>
          <tr>
            <td>王五</td>
            <td>43</td>
            <td>84</td>
            <td>58</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

      在这里插入图片描述

    • .table-success 绿色: 指定这是一个允许执行的操作

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <table class="table table-success">
        <tbody>
          <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
          </tr>
          <tr>
            <td>张三</td>
            <td>88</td>
            <td>67</td>
            <td>95</td>
          </tr>
          <tr>
            <td>李四</td>
            <td>46</td>
            <td>83</td>
            <td>38</td>
          </tr>
          <tr>
            <td>王五</td>
            <td>43</td>
            <td>84</td>
            <td>58</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

      在这里插入图片描述

    • .table-danger 红色: 指定这是可以危险的操作

    • .table-info 浅蓝色: 表示内容已变更

    • .table-warning 橘色: 表示需要注意的操作

    • .table-active 灰色: 用于鼠标悬停效果

    • .table-secondary 灰色: 表示内容不怎么重要

    • .table-light 浅灰色，可以是表格行的背景

    • .table-dark 深灰色，可以是表格行的背景

表格（三）

  • 表头颜色

    • 在 Bootstrap v4.0.0-beta.2 中.thead-dark 类用于给<thead >添加黑色背景， .thead-light 类用于给表头添加灰色背景

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <table class="table table-success">
        <thead class="thead-dark">
          <tr>
            <th>name</th>
            <th>chinese</th>
            <th>math</th>
            <th>english</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
          </tr>
          <tr>
            <td>张三</td>
            <td>88</td>
            <td>67</td>
            <td>95</td>
          </tr>
          <tr>
            <td>李四</td>
            <td>46</td>
            <td>83</td>
            <td>38</td>
          </tr>
          <tr>
            <td>王五</td>
            <td>43</td>
            <td>84</td>
            <td>58</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

      在这里插入图片描述

    • 在Bootstrap v4.0.0-beta 这个版本中，.thead-inverse类用于给表头添加黑色背景，.thead-default类用于给表头添加灰色背景。

  • 较小的表格

    • .table-sm类用于通过减少内边距来设置较小的表格

  • 响应式表格

    • .table-responsive类用于创建响应式表格：在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）

  • 通过以下类设定在指定屏幕宽度下显示滚动条

    • .table-responsive-sm < 576px
    • .table-responsive-md < 768px
    • .table-responsive-lg < 992px
    • .table-responsive-xl < 1200px

图像形状

  • 圆角图片

    • .rounded

  • 椭圆图片

    • .rounded-circle

  • 缩略图

    • .img-thumbnail

  • 图片对齐方式

    • .float-right和.float-left

  • 响应式图片

    • 图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应
    • 通过在<img>标签中添加.img-fluid类来设置响应式图片
    • .img-fluid类设置了max-width: 100%;、height: auto;
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
    <style>
      .container > img {
        height: 200px;
        width: 200px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img class="rounded" src="./01.webp" alt="" />
      <img class="rounded-circle" src="./01.webp" alt="" />
      <img class="img-thumbnail" src="./01.webp" alt="" />
    </div>
    <div class="container">
      <img class="float-right" src="./01.webp" alt="" />
      <img class="float-left" src="./01.webp" alt="" />
    </div>
    <div style="width: 200px; height: 200px">
      <img class="img-fluid" src="./01.webp" alt="" />
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Jumbotron

  • Jumbotron（超大屏幕）会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。

  • 提示: Jumbotron 里头可以放一些HTML标签，也可以是Bootstrap的元素。

        <div class="jumbotron">
      <h1>网星软件</h1>
      <p>学的不仅是技术，更是梦想！！！</p>
    </div>

    在这里插入图片描述

  • 在 <div> 元素 中添加.jumbotron类来创建 jumbotron

        <div class="jumbotron jumbotron-fluid">
      <div class="container">
        <h1>网星软件</h1>
        <p>学的不仅是技术，更是梦想！！！</p>
      </div>
    </div>

    在这里插入图片描述

信息提示框（一）

  • 可以在div中添加 .alert类，通过.alert-*添加背景色

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <h2>提示框</h2>
      <p>提示框可以使用 .alert 类, 后面加上指定特定意义的颜色类来实现:</p>
      <div class="alert alert-success">
        <strong>成功!</strong> 指定操作成功提示信息。
      </div>
      <div class="alert alert-info">
        <strong>信息!</strong> 请注意这个信息。
      </div>
      <div class="alert alert-warning">
        <strong>警告!</strong> 设置警告信息。
      </div>
      <div class="alert alert-danger"><strong>错误!</strong> 失败的操作</div>
      <div class="alert alert-primary">
        <strong>首选!</strong> 这是一个重要的操作信息。
      </div>
      <div class="alert alert-secondary">
        <strong>次要的!</strong> 显示一些不重要的信息。
      </div>
      <div class="alert alert-dark">
        <strong>深灰色!</strong> 深灰色提示框。
      </div>
      <div class="alert alert-light">
        <strong>浅灰色!</strong>浅灰色提示框。
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

信息提示框（二）

  • 关闭提示框

    • 可以在提示框中的 div 中添加 .alert-dismissible类，然后在关闭按钮的链接上添加 class="close"和data-dismiss="alert"类来设置提示框的关闭操作。
    • 提示:&times;(×) 是 HTML 实体字符，来表示关闭操作，而不是字母 “x”。
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <h2>提示框</h2>
      <p>提示框可以使用 .alert 类, 后面加上指定特定意义的颜色类来实现:</p>
      <div class="alert alert-success alert-dismissible">
        <button type="button" class="close" data-dismiss="alert">
          &times;
        </button>
        <strong>成功!</strong> 指定操作成功提示信息。
      </div>
      <div class="alert alert-info alert-dismissible">
        <button type="button" class="close" data-dismiss="alert">
          &times;
        </button>
        <strong>信息!</strong> 请注意这个信息。
      </div>
      <div class="alert alert-warning alert-dismissible">
        <button type="button" class="close" data-dismiss="alert">
          &times;
        </button>
        <strong>警告!</strong> 设置警告信息。
      </div>
      <div class="alert alert-danger alert-dismissible">
        <button type="button" class="close" data-dismiss="alert">
          &times;
        </button>
        <strong>错误!</strong> 失败的操作
      </div>
      <div class="alert alert-primary alert-dismissible">
        <button type="button" class="close" data-dismiss="alert">
          &times;
        </button>
        <strong>首选!</strong> 这是一个重要的操作信息。
      </div>
      <div class="alert alert-secondary alert-dismissible">
        <button type="button" class="close" data-dismiss="alert">
          &times;
        </button>
        <strong>次要的!</strong> 显示一些不重要的信息。
      </div>
      <div class="alert alert-dark alert-dismissible">
        <button type="button" class="close" data-dismiss="alert">
          &times;
        </button>
        <strong>深灰色!</strong> 深灰色提示框。
      </div>
      <div class="alert alert-light alert-dismissible">
        <button type="button" class="close" data-dismiss="alert">
          &times;
        </button>
        <strong>浅灰色!</strong>浅灰色提示框。
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 提示框动画

    • .fade和.show类用于设置提示框在关闭时的淡出和淡入效果（关闭时有个过渡动画）：
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <h2>提示框</h2>
      <p>提示框可以使用 .alert 类, 后面加上指定特定意义的颜色类来实现:</p>
      <div class="alert alert-success alert-dismissible fade show">
        <button type="button" class="close" data-dismiss="alert">
          &times;
        </button>
        <strong>成功!</strong> 指定操作成功提示信息。
      </div>
      <div class="alert alert-info alert-dismissible fade show">
        <button type="button" class="close" data-dismiss="alert">
          &times;
        </button>
        <strong>信息!</strong> 请注意这个信息。
      </div>
      <div class="alert alert-warning alert-dismissible fade show">
        <button type="button" class="close" data-dismiss="alert">
          &times;
        </button>
        <strong>警告!</strong> 设置警告信息。
      </div>
      <div class="alert alert-danger alert-dismissible fade show">
        <button type="button" class="close" data-dismiss="alert">
          &times;
        </button>
        <strong>错误!</strong> 失败的操作
      </div>
      <div class="alert alert-primary alert-dismissible fade show">
        <button type="button" class="close" data-dismiss="alert">
          &times;
        </button>
        <strong>首选!</strong> 这是一个重要的操作信息。
      </div>
      <div class="alert alert-secondary alert-dismissible fade show">
        <button type="button" class="close" data-dismiss="alert">
          &times;
        </button>
        <strong>次要的!</strong> 显示一些不重要的信息。
      </div>
      <div class="alert alert-dark alert-dismissible fade show">
        <button type="button" class="close" data-dismiss="alert">
          &times;
        </button>
        <strong>深灰色!</strong> 深灰色提示框。
      </div>
      <div class="alert alert-light alert-dismissible fade show">
        <button type="button" class="close" data-dismiss="alert">
          &times;
        </button>
        <strong>浅灰色!</strong>浅灰色提示框。
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

Bootstrap4 按钮（一）

  • Bootstrap 4提供了不同样式的按钮。

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <button type="button" class="btn">基本按钮</button>
    <button type="button" class="btn btn-primary">主要按钮</button>
    <button type="button" class="btn btn-secondary">次要按钮</button>
    <button type="button" class="btn btn-success">成功</button>
    <button type="button" class="btn btn-info">信息</button>
    <button type="button" class="btn btn-warning">警告</button>
    <button type="button" class="btn btn-danger">危险</button>
    <button type="button" class="btn btn-dark">黑色</button>
    <button type="button" class="btn btn-light">浅色</button>
    <button type="button" class="btn btn-link">链接</button>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 按钮类可用于<a>, <button>, 或 <input> 元素上

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <a href="#" class="btn btn-info" role="button">链接按钮</a>
    <button type="button" class="btn btn-info">按钮</button>
    <input type="button" class="btn btn-info" value="输入框按钮" />
    <input type="submit" class="btn btn-info" value="提交按钮" />
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

在这里插入图片描述

Bootstrap4 按钮（二）

  • 按钮设置边框

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <button type="button" class="btn btn-outline-primary">主要按钮</button>
    <button type="button" class="btn btn-outline-secondary">次要按钮</button>
    <button type="button" class="btn btn-outline-success">成功</button>
    <button type="button" class="btn btn-outline-info">信息</button>
    <button type="button" class="btn btn-outline-warning">警告</button>
    <button type="button" class="btn btn-outline-danger">危险</button>
    <button type="button" class="btn btn-outline-dark">黑色</button>
    <button type="button" class="btn btn-outline-light text-dark">浅色</button>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 不同大小的按钮

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <button type="button" class="btn btn-primary btn-lg">大号按钮</button>
    <button type="button" class="btn btn-primary">默认按钮</button>
    <button type="button" class="btn btn-primary btn-sm">小号按钮</button>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

在这里插入图片描述

Bootstrap4 按钮（三）

  • 块级按钮

    • 通过添加.btn-block类可以设置块级按钮
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <button type="button" class="btn btn-primary btn-block">按钮 1</button>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 激活和禁用的按钮

    • 按钮可设置为激活或者禁止点击的状态
    • .active类可以设置按钮是可用的，disabled属性可以设置按钮是不可点击的。 注意<a> 元素不支持disabled属性，你可以通过添加.disabled类来禁止链接的点击。
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <button type="button" class="btn btn-primary active">点击后的按钮</button>
    <button type="button" class="btn btn-primary" disabled>
      禁止点击的按钮
    </button>
    <a href="#" class="btn btn-primary disabled">禁止点击的链接</a>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 按钮组（一）

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

  • 可以在<div>元素上添加.btn-group类来创建按钮组。

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <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>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

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

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="btn-group btn-group-lg">
      <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>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 按钮组（二）

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

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <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>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 拆分按钮下拉菜单

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <h2>拆分按钮下拉菜单</h2>
      <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>
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.bundle.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 按钮组（三）

  • 内嵌按钮组及下拉菜单

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="btn-group">
      <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>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.bundle.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 按钮组（三）

  • 垂直按钮组及下拉菜单

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <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>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.bundle.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 徽章（Badges）(一)

  • 徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将.badge类加上带有指定意义的颜色类。(如.badge-secondary) 添加到<span>元素上即可。 徽章可以根据父元素的大小的变化而变化

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <h2>徽章</h2>
      <h1>测试标题 <span class="badge badge-secondary">New</span></h1>
      <h2>测试标题 <span class="badge badge-secondary">New</span></h2>
      <h3>测试标题 <span class="badge badge-secondary">New</span></h3>
      <h4>测试标题 <span class="badge badge-secondary">New</span></h4>
      <h5>测试标题 <span class="badge badge-secondary">New</span></h5>
      <h6>测试标题 <span class="badge badge-secondary">New</span></h6>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 徽章（Badges）(二)

  • 各种颜色类型的徽章

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <span class="badge badge-primary">主要</span>
      <span class="badge badge-secondary">次要</span>
      <span class="badge badge-success">成功</span>
      <span class="badge badge-danger">危险</span>
      <span class="badge badge-warning">警告</span>
      <span class="badge badge-info">信息</span>
      <span class="badge badge-light">浅色</span>
      <span class="badge badge-dark">深色</span>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 药丸形状徽章

    • 使用.badge-pill类来设置药丸形状徽章:
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <span class="badge badge-primary badge-pill">主要</span>
      <span class="badge badge-secondary badge-pill">次要</span>
      <span class="badge badge-success badge-pill">成功</span>
      <span class="badge badge-danger badge-pill">危险</span>
      <span class="badge badge-warning badge-pill">警告</span>
      <span class="badge badge-info badge-pill">信息</span>
      <span class="badge badge-light badge-pill">浅色</span>
      <span class="badge badge-dark badge-pill">深色</span>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 徽章插入到元素内

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <button type="button" class="btn btn-primary">
        Messages <span class="badge badge-light">4</span>
      </button>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 进度条（一）

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

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

  • 添加一个带有.progress类的<div>。

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

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

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="progress">
      <div class="progress-bar" style="width: 70%"></div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 进度条（二）

  • 进度条高度

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

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <h2>进度条高度</h2>
      <p>进度条高度默认为 16px。我们可以使用 CSS 的 height 属性来修改它：</p>
      <div class="progress" style="height: 10px">
        <div class="progress-bar" style="width: 40%"></div>
      </div>
      <br />
      <div class="progress" style="height: 20px">
        <div class="progress-bar" style="width: 50%"></div>
      </div>
      <br />
      <div class="progress" style="height: 30px">
        <div class="progress-bar" style="width: 60%"></div>
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 进度条（三）

  • 进度条标签

  • 可以在进度条内添加文本，如进度的百分比：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <div class="progress">
        <div class="progress-bar" style="width: 70%">70%</div>
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 不同颜色的进度条

  • 默认情况下进度条为蓝色，Bootstrap4 还提供了以下颜色的进度条：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
        <div class="progress">
          <div class="progress-bar" style="width: 30%"></div>
        </div>
        <br />
        <div class="progress">
          <div class="progress-bar bg-success" style="width: 40%"></div>
        </div>
        <br />
        <div class="progress">
          <div class="progress-bar bg-info" style="width: 50%"></div>
        </div>
        <br />
        <div class="progress">
          <div class="progress-bar bg-warning" style="width: 60%"></div>
        </div>
        <br />
        <div class="progress">
          <div class="progress-bar bg-danger" style="width: 70%"></div>
        </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 进度条（四）

  • 条纹的进度条

  • 使用.progress-bar-striped类来设置条纹进度条

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <div class="progress">
        <div class="progress-bar progress-bar-striped" style="width: 40%"></div>
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 动画进度条

  • 使用.progress-bar-animated类可以为进度条添加动画

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <div class="progress">
        <div
          class="progress-bar progress-bar-striped progress-bar-animated"
          style="width: 40%"
        ></div>
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 混合色彩进度条

  • 进度条可以设置多种颜色

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.css" />
  </head>
  <body>
    <div class="container">
      <div class="progress">
        <div class="progress-bar bg-success" style="width: 40%">Free Space</div>
        <div class="progress-bar bg-warning" style="width: 10%">Warning</div>
        <div class="progress-bar bg-danger" style="width: 20%">Danger</div>
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

在这里插入图片描述

BloggerM
关注
专栏目录
Bootstrap4 安装使用
shengyin714959的博客
08-16 345
我们可以通过以下两种方式来安装 Bootstrap4：使用 Bootstrap 4 CDN。从官网下载 Bootstrap 4。
Bootstrap 4 安装使用教程
最新发布
lsx202406的博客
06-27 731
Bootstrap 4 是一个流行的开源前端框架，用于快速开发响应式和移动设备优先的网站。它由 Twitter 开发，并得到了全球开发者的广泛使用。本教程将指导您如何安装和使用 Bootstrap 4，以便您能够利用其强大的功能来构建现代网页。
Bootstrap 4 CDN
qq_42449963的博客
09-23 1147
如果大家在学习bootstrap4的时候不想下载相应的jar包，那就去使用bootstrap的cdn，上菜： <!-- 新 Bootstrap4 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> &l
Bootstrap4知识(1)
airar的博客
09-24 1351
1.Bootstrap简介 Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目 Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利 用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大 的插件系统，能够快速为你的想法开发出原型或者构建整个 app Sass--CSS扩展语言 Mixin--包含一段合法Sass代码，类似...
Bootstrap4(二)
shi199434的博客
12-16 611
Bootstrap4 安装使用 我们可以通过以下两种方式来安装 Bootstrap4： 使用 Bootstrap 4 CDN。 从官网 getbootstrap.com 下载 Bootstrap 4。 Bootstrap 4 CDN 国内推荐使用 BootCDN 上的库： Bootstrap4 CDN 新 Bootstrap4 核心 CSS 文件
bootstrap-4.6.1-examples.zip
12-16
bootstrap-4.6.1-examples.zip
bootstrap-4-login-page：Bootstrap 4登录页面模板
01-30
Bootstrap 4登录页面模板 我的登录名是Bootstrap 4登录页代码段，您可以根据需要使用它，并且可以免费用于个人或商业用途。 安装 让我们轻松一点！ 只需下载此模板，然后在您的项目中使用它即可。 演示版 产品特点 ...
bootstrap4实现购物商城
06-18
在"bootstrap4实现购物商城"这个项目中，我们将会探讨如何利用Bootstrap 4的强大功能来创建一个功能完备、视觉吸引人的在线购物平台。 首先，Bootstrap 4 提供了一套完整的网格系统，允许开发者轻松地创建多列布局...
select2-bootstrap4-theme：Bootstrap4的Select2 v4主题
01-29
select2-bootstrap4-主题 Bootstrap4的 v4主题（与boostrap 4.0.0+兼容） 现场演示 :backhand_index_pointing_right: 安装 CDN < link rel =" stylesheet " href =" /path/to/select2.css " > < link ...
Bootstrap4 for Axure9
12-29
Bootstrap 4 是一个广泛使用的前端开发框架，专为构建响应式和移动优先的网站而设计。它提供了丰富的组件、样式和JavaScript插件，使得...总的来说，"Bootstrap4 for Axure9"是提升原型设计效率和质量的有力资源。
bootstrap4-editable.7z
08-02
而“bootstrap4-editable.7z”这个压缩包正是为增强BootstrapTable的功能而设计的，特别是针对行内编辑的需求。 在BootstrapTable中实现行内编辑，通常会用到x-editable库，这是一个轻量级的解决方案，允许用户直接...
BootstrapV5:Bootstrap版本5练习
05-07
BootstrapV5 Bootstrap版本5练习
Bootstrap（6）前端
jayden
05-07 359
对封装了css和javascirpt的主流库Bootstrap进行了详细的讲解，让学习者快速入门bootStap，每一个核心内容都有代码实例讲解，最后授人以渔，后续方便自学。
bootstrapV4.6.0之flex布局与float布局：对比
草巾冒小子的博客
02-07 430
bootstrapV4.6.0之flex布局与float布局：对比 flex布局：https://v4.bootcss.com/docs/utilities/flex/ float浮动布局：https://v4.bootcss.com/docs/utilities/float/
UE4 iOS Packaged Game Size
痞子龙3D编程
11-11 1273
Unreal Engine 4.9 iOS Game Development There are a number of things that affect the size of a packaged iOS game, from the content it references to the build configuration you choose.
Bootstrap4 安装方式
zhoushuizhang的博客
05-13 2520
可以通过两种方式来安装 Bootstrap4： 使用 Bootstrap 4 CDN。 从官网 getbootstrap.com 下载 Bootstrap 4。 一、Bootstrap4 CDN 库： 国内推荐使用 :https://www.staticfile.org/ <!-- 新 Bootstrap4 核心 CSS 文件 --> <link re...
bootstrap4 和之前版本相比有哪些变动或新特性？
qq_27009517的博客
05-04 847
作者：关中刀客在青岛 链接：https://www.zhihu.com/question/293444132/answer/485693589 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 目录 浏览器支持 全局变化 栅格系统 组件 按钮组 重构 排版 图片 表格 表单 按钮 按钮组 下拉菜单 栅格系统 列表组 Modal 导航 导航栏 分页 面包屑 标签和徽章 面板，缩略图 面板 进度条 轮放组件 仪表盘 公用样式
BootStrap---day01
蜗牛的博客
08-24 382
bootstrap是当下最时兴的前端框架（也可以说是 界面工具集）具有移动端优先的设计理念特点就是灵活简洁，代码优雅，美观大方其目的是为了让web开发更敏捷学习bootstrap的第一天，总的来说，学习到了一些bootstrap中常用的插件、布局和使用bootstrap的方式方法。在之后的项目开发中，会对各种类名更加熟练，提升开发速度。
html4三种版本,bootstrap4有哪些版本？
weixin_39647977的博客
06-15 3065
Bootstrap4 是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集，与之前的版本相比，拥有更强大的功能。利用提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。bootstrap4有哪些版本？bootstrap4当前的主要版本有 v4.0...
Bootstrap4 中文文档资源压缩包
这样的设计使得Bootstrap 4 在各种设备上都能提供良好的浏览体验。 最后，Bootstrap 4 在性能上也进行了优化。它对JavaScript插件进行了模块化处理，用户可以根据需要引入特定的插件，而不是引入整个库，这样既节省...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值