Bootstrap 4（上）

其他 2022-04-27 20:44:12 阅读次数: 0

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 自动处理布局

    扫描二维码关注公众号，回复： 14026098 查看本文章 
    <!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>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/HTML_Z/article/details/124252711
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
女程序员是这样被恶搞的
B/S 和 C/S 的优缺点
vector一直申请会怎样？
座头鲸识别比赛(Humpback Whale Identification)总结
Linux高性能服务器编程——I/O复用 select
Mysql连接数据库（当包使用）
通过URI获取的文件路径为null的解决方法
1022-Primes on Interval(素数筛选+二分查找) ZCMU
Python出现： TypeError: expected string or buffer
bzoj2434: [Noi2011]阿狸的打字机 ac自动机+树状数组
每日归档
更多
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022