Bootstrap 4（下）

最新推荐文章于 2023-07-10 17:18:02 发布
最新推荐文章于 2023-07-10 17:18:02 发布
阅读量493 收藏
点赞数 1
分类专栏： Bootstrap 4 文章标签： bootstrap html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HTML_Z/article/details/124361231
版权

Bootstrap 4

Bootstrap4 分页

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

  • Bootstrap 4 可以很简单的实现分页效果。

  • 要创建一个基本的分页可以在<ul>元素上添加.pagination类。然后在<li>元素上添加.page-item类

    <!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">
      <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">Previous</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
      </ul>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 当前页页码状态.active类来高亮显示

  • 不可点击的分页链接.disabled

  • 分页显示大小

    • .pagination-lg类设置大字体的分页条目，.
    • pagination-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="container">
      <ul class="pagination">
        <li class="page-item active">
          <a class="page-link" href="#">Previous</a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item disabled">
          <a class="page-link" href="#">Next</a>
        </li>
      </ul>
      <ul class="pagination pagination-lg">
        <li class="page-item active">
          <a class="page-link" href="#">Previous</a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item disabled">
          <a class="page-link" href="#">Next</a>
        </li>
      </ul>
      <ul class="pagination pagination-sm">
        <li class="page-item active">
          <a class="page-link" href="#">Previous</a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item disabled">
          <a class="page-link" href="#">Next</a>
        </li>
      </ul>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

面包屑导航

  • .breadcrumb和.breadcrumb-item类用于设置面包屑导航

    <!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">
      <ul class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Photos</a></li>
        <li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
        <li class="breadcrumb-item"><a href="#">Italy</a></li>
        <li class="breadcrumb-item active">Rome</li>
      </ul>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 列表组（一）

  • 大部分基础列表组都是无序的。

  • 要创建列表组，可以在<ul>元素上添加.list-group类, 在<li>元素上添加.list-group-item类

    <!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">
      <ul class="list-group">
        <li class="list-group-item">First item</li>
        <li class="list-group-item">Second item</li>
        <li class="list-group-item">Third item</li>
      </ul>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • .active激活状态的列表项

  • .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>
    <div class="container">
      <ul class="list-group">
        <li class="list-group-item active">First item</li>
        <li class="list-group-item">Second item</li>
        <li class="list-group-item disabled">Third item</li>
      </ul>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 列表组（二）

  • 链接列表项

  • 要创建一个链接的列表项，可以将<ul>替换为<div>，<a>替换<li>。如果你想鼠标悬停显示灰色背景就添加.list-group-item-action类

    <!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="list-group">
        <a href="#" class="list-group-item list-group-item-action"
          >First item</a
        >
        <a href="#" class="list-group-item list-group-item-action"
          >Second item</a
        >
        <a href="#" class="list-group-item list-group-item-action"
          >Third item</a
        >
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

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

    <!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">
      <ul class="list-group">
        <li class="list-group-item list-group-item-success">成功列表项</li>
        <li class="list-group-item list-group-item-secondary">次要列表项</li>
        <li class="list-group-item list-group-item-info">信息列表项</li>
        <li class="list-group-item list-group-item-warning">警告列表项</li>
        <li class="list-group-item list-group-item-danger">危险列表项</li>
        <li class="list-group-item list-group-item-primary">主要列表项</li>
        <li class="list-group-item list-group-item-dark">深灰色列表项</li>
        <li class="list-group-item list-group-item-light">浅色列表项</li>
      </ul>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 卡片（一）

  • 可以通过Bootstrap4的.card与.card-body类来创建一个简单的卡片

    <!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="card">
        <div class="card-body">简单的卡片</div>
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 头部和底部

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

    <!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="card">
        <div class="card-header">头部</div>
        <div class="card-body">内容</div>
        <div class="card-footer">底部</div>
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 卡片（二）

  • 多种颜色卡片

  • Bootstrap 4 提供了多种卡片的背景颜色类： .bg-primary,.bg-success,.bg-info,.bg-warning,.bg-danger,.bg-secondary,.bg-dark和.bg-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">
      <div class="card">
        <div class="card-body">Basic card</div>
      </div>
      <br />
      <div class="card bg-primary text-white">
        <div class="card-body">Primary card</div>
      </div>
      <br />
      <div class="card bg-success text-white">
        <div class="card-body">Success card</div>
      </div>
      <br />
      <div class="card bg-info text-white">
        <div class="card-body">Info card</div>
      </div>
      <br />
      <div class="card bg-warning text-white">
        <div class="card-body">Warning card</div>
      </div>
      <br />
      <div class="card bg-danger text-white">
        <div class="card-body">Danger card</div>
      </div>
      <br />
      <div class="card bg-secondary text-white">
        <div class="card-body">Secondary card</div>
      </div>
      <br />
      <div class="card bg-dark text-white">
        <div class="card-body">Dark card</div>
      </div>
      <br />
      <div class="card bg-light text-dark">
        <div class="card-body">Light card</div>
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 卡片（三）

  • 标题、文本和链接

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

    <!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="card">
        <div class="card-body">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">Some example text. Some example text.</p>
          <a href="#" class="card-link">Card link</a>
          <a href="#" class="card-link">Another link</a>
        </div>
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 图片卡片

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

  • 如果图片要设置为背景，可以对内容使用.card-img-overlay类

Bootstrap4 下拉菜单（一）

  • Bootstrap4下拉菜单依赖于popper.min.js

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

    <!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="dropdown">
        <button
          type="button"
          class="btn btn-primary dropdown-toggle"
          data-toggle="dropdown"
        >
          Dropdown button
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../popper.min.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 解析：

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

  • 按钮或链接需要添加.dropdown-toggle和data-toggle="dropdown"属性

  • 添加.dropdown-menu类来设置实际下拉菜单，然后在下拉菜单的选项中添加.dropdown-item类

Bootstrap4 下拉菜单（二）

  • 分割线

    • .dropdown-divider

  • 标题

    • .dropdown-header

  • 可用项

    • .active

  • 禁用项

    • 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>
    <div class="container">
      <div class="dropdown-divider"></div>
      <div class="“dropdown-header”">标题</div>
      <a class="dropdown-item active" href="#">Active</a>
      <a class="dropdown-item disabled" href="#">Disabled</a>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../popper.min.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 下拉菜单的定位

    • 在.dropdown-menu类后添加.dropdown-menu-right类

  • 弹出方向设置

    • dropright 下拉菜单向右弹出
    • dropup 上拉菜单向上弹出
    • dropleft 下拉菜单向左弹出
    <!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>
      body {
        padding: 200px;
      }
      .container {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="dropup">
        <button
          type="button"
          class="btn btn-primary dropdown-toggle"
          data-toggle="dropdown"
        >
          Dropdown button
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="dropleft">
        <button
          type="button"
          class="btn btn-primary dropdown-toggle"
          data-toggle="dropdown"
        >
          Dropdown button
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="dropright">
        <button
          type="button"
          class="btn btn-primary dropdown-toggle"
          data-toggle="dropdown"
        >
          Dropdown button
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../popper.min.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">
      <h2>按钮中的下拉菜单</h2>
      <div class="btn-group">
        <button type="button" class="btn btn-primary">Primary</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="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
        </div>
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../popper.min.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 折叠（一）

  • 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">
      <h2>简单的折叠</h2>
      <p>点击按钮内容会再显示与隐藏之间切换。</p>
      <button
        type="button"
        class="btn btn-primary"
        data-toggle="collapse"
        data-target="#demo"
      >
        简单的折叠
      </button>
      <div id="demo" class="collapse">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../popper.min.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 解析：

  • .collapse类用于指定一个折叠元素 (实例中的<div>); 点击按钮后会在隐藏与显示之间切换。

  • 控制内容的隐藏与显示，需要在<a>或<button>元素上添加data-toggle="collapse"属性。 data-target="#id"属性是对应折叠的内容 (<div id="demo">)。

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

Bootstrap4 折叠（二）

  • 通过扩展卡片组件来显示简单的手风琴

  • 注意:使用data-parent属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏

    <!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 id="accordion">
        <div class="card">
          <div class="card-header">
            <a class="card-link" data-toggle="collapse" href="#collapseOne">
              选项一
            </a>
          </div>
          <div id="collapseOne" class="collapse show" data-parent="#accordion">
            <div class="card-body">
              #1 内容：网星软件 -- 学的不仅是技术，更是梦想！！！
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header">
            <a
              class="collapsed card-link"
              data-toggle="collapse"
              href="#collapseTwo"
            >
              选项二
            </a>
          </div>
          <div id="collapseTwo" class="collapse" data-parent="#accordion">
            <div class="card-body">
              #2 网星软件 -- 学的不仅是技术，更是梦想！！！
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../popper.min.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 导航（一）

  • 如果你想创建一个简单的水平导航，可以在<ul>元素上添加.nav类，在每个<li>选项上添加.nav-item类，在每个链接上添加.nav-link类

    <!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">
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../popper.min.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 导航对齐方式

  • .justify-content-center类设置导航居中显示，.justify-content-end类设置导航右对齐

    <!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">
      <ul class="nav justify-content-center">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <ul class="nav justify-content-end">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../popper.min.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 导航（二）

  • 垂直导航

    • .flex-column

  • 选项卡

    • .nav-tabs类可以将导航转化为选项卡
    • .active类来标记选中

  • 胶囊导航

    • .nav-pills类可以将导航项设置成胶囊形状

  • 导航等宽

    • .nav-justified类可以设置导航项齐行等宽显示
    <!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">
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <ul class="nav nav-tabs">
        <li class="nav-item">
          <a class="nav-link active" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <ul class="nav nav-tabs nav-pills">
        <li class="nav-item">
          <a class="nav-link active" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <ul class="nav nav-tabs nav-pills nav-justified">
        <li class="nav-item">
          <a class="nav-link active" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../popper.min.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>
    <ul class="nav nav-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
          >Dropdown</a
        >
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </body>
  <script src="../jquery.js"></script>
  <script src="../popper.min.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>
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
          >Dropdown</a
        >
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </body>
  <script src="../jquery.js"></script>
  <script src="../popper.min.js"></script>
  <script src="../bootstrap.js"></script>
</html>

在这里插入图片描述

动态选项卡

  • 选项卡是动态可切换的，可以在每个链接上添加data-toggle="tab"属性。 然后在每个选项对应的内容的上添加.tab-pane类。

  • 如果你希望有淡入效果可以在.tab-pane后添加.fade类

    <!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>
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
      </li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane fade active container" id="home">Home</div>
      <div class="tab-pane fade container" id="menu1">Menu 1</div>
      <div class="tab-pane fade container" id="menu2">Menu 2</div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../popper.min.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

胶囊状动态选项卡

  • 胶囊状动态选项卡只需要将以上实例的代码中data-toggle属性设置为data-toggle="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>
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="pill" href="#home">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
      </li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane fade active container" id="home">Home</div>
      <div class="tab-pane fade container" id="menu1">Menu 1</div>
      <div class="tab-pane fade container" id="menu2">Menu 2</div>
    </div>
   </ul>
  </body>
  <script src="../jquery.js"></script>
  <script src="../popper.min.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 导航栏（一）

  • 可以使用.navbar类来创建一个标准的导航栏，后面紧跟:.navbar-expand-xl|lg|md|sm类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。

  • 导航栏上的选项可以使用<ul>元素并添加class="navbar-nav"类。 然后在<li>元素上添加 .nav-item类，<a>元素上使用.nav-link类

    <!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>
    <!-- 小屏幕上水平导航栏会切换为垂直的 -->
    <nav class="navbar navbar-expand-sm bg-light">
      <!-- Links -->
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 3</a>
        </li>
      </ul>
    </nav>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

在这里插入图片描述

Bootstrap4 导航栏（二）

  • 垂直导航栏

    • 通过删除.navbar-expand-xl|lg|md|sm类来创建垂直导航栏

  • 不同颜色导航栏

    • 可以使用以下类来创建不同颜色导航栏：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark和.bg-light
    • 提示: 对于暗色背景需要设置文本颜色为浅色的，对于浅色背景需要设置文本颜色为深色的

  • 激活和禁用状态: 可以在<a>元素上添加.active类来高亮显示选中的选项。.disabled类用于设置该链接是不可点击的。

  • 品牌/Logo

    • .navbar-brand类用于高亮显示品牌/Logo
    <!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>
    <nav class="navbar navbar-expand-md bg-success">
      <a href="" class="navbar-brand">LOGO</a>
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active text-dark" href="#">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active text-dark" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled text-dark" href="#">Link 3</a>
        </li>
      </ul>
    </nav>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 导航栏（三）

  • 折叠导航栏

  • 通常，小屏幕上我们都会折叠导航栏，通过点击来显示导航选项

  • 要创建折叠导航栏，可以在按钮上添加class="navbar-toggler", data-toggle="collapse"与data-target="#thetarget"类。然后在设置了class="collapse navbar-collapse"类的div上包裹导航内容（链接）, div元素上的id匹配按钮data-target的上指定的id:

    <!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>
    <nav class="navbar navbar-expand-md bg-dark navbar-dark">
      <a class="navbar-brand" href="#">Navbar</a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#collapsibleNavbar"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
        </ul>
      </div>
    </nav>
  </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>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <a class="navbar-brand" href="#">Logo</a>
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item dropdown">
          <a
            class="nav-link dropdown-toggle"
            href="#"
            id="navbardrop"
            data-toggle="dropdown"
          >
            Dropdown link
          </a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 2</a>
            <a class="dropdown-item" href="#">Link 3</a>
          </div>
        </li>
      </ul>
    </nav>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 导航栏（五）

  • 导航栏的表单<form>元素使用class="form-inline"类来排版输入框与按钮

    <!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>
    <nav class="navbar fixed-top navbar-expand-sm bg-dark navbar-dark">
      <form class="form-inline">
        <input
          class="“form-control”"
          type="text"
          placeholder="请输入要搜索的内容"
        />
        <button class="btn btn-success" type="submit">搜索</button>
      </form>
    </nav>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

  • .fixed-top类来实现导航栏固定在顶部

  • .fixed-bottom类用于设置导航栏固定在底部

Bootstrap4 表单

  • 表单元素<input>, <textarea>和<select>标签在使用.form-control类的情况下，宽度都是设置为 100%

  • Bootstrap 提供了两种类型的表单布局：

  • 堆叠表单 (全屏宽度)：垂直方向

  • 内联表单：水平方向 在<form>元素上添加.form-inline类

  • 屏幕宽度在大于等于 576px 时才会水平显示。如果小于 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" />
  </head>
  <body>
    <div class="container">
      <form>
        <div class="form-group">
          <label for="email">邮箱:</label>
          <input type="email" class="form-control" id="email" />
        </div>
        <div class="form-group">
          <label for="pwd">密码:</label>
          <input type="password" class="form-control" id="pwd" />
        </div>
        <div class="form-group">
          <label for="city">城市</label>
          <select id="city" class="form-control">
            <option>西安</option>
            <option>宝鸡</option>
            <option>汉中</option>
            <option>咸阳</option>
          </select>
        </div>
        <div class="form-group">
          <input type="checkbox" id="auth" />
          <label for="auto">同意协议</label>
        </div>
        <input type="submit" class="form-control btn-info" value="注册" />
      </form>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 表单控件

  • Bootstrap4 支持以下表单控件
    • input
    • textarea
    • checkbox
    • radio
    • select

Bootstrap4 表单控件input

  • Bootstrap 支持所有的HTML5输入类型:text,password,datetime,datetime-local,date, month, time,week,number,email,url,search,tel, 以及color。

  • 注意：如果input的type属性未正确声明，输入框的样式将不会显示

    <!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="form-group">
        <label for="usr">用户名:</label>
        <input type="text" class="form-control" id="usr" />
      </div>
      <div class="form-group">
        <label for="pwd">密码:</label>
        <input type="password" class="form-control" id="pwd" />
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 表单控件-复选框(checkbox)

  • 使用.form-check-inline类可以让选项显示在同一行上

  • 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>
    <div class="container">
      <div class="form-check form-check-inline">
        <label class="form-check-label">
          <input type="checkbox" class="form-check-input" value="" />吃饭
        </label>
      </div>
      <div class="form-check form-check-inline">
        <label class="form-check-label">
          <input type="checkbox" class="form-check-input" value="" />睡觉
        </label>
      </div>
      <div class="form-check form-check-inline disabled">
        <label class="form-check-label">
          <input
            type="checkbox"
            class="form-check-input"
            value=""
            disabled
          />写代码
        </label>
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 表单控件 单选框（radio）

  • 让选项显示在同一行上取消外边的div

  • 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>
    <div class="container">
      <div class="“radio”">
        <label><input type="radio" name="optradio" />吃饭</label>
      </div>
      <div class="radio">
        <label><input type="radio" name="optradio" />睡觉</label>
      </div>
      <div class="radio disabled">
        <label><input type="radio" name="optradio" disabled />写代码</label>
      </div>
    </div>
    <div class="container">
      <label><input type="radio" name="optradio" />吃饭</label>
      <label><input type="radio" name="optradio" />睡觉</label>
      <label><input type="radio" name="optradio" disabled />写代码</label>
    </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="form-group">
        <label for="sel1">单选下拉菜单:</label>
        <select class="form-control">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

在这里插入图片描述

Bootstrap4 输入框组（一）

  • 可以使用.input-group类来向表单输入框中添加更多的样式，如图标、文本或者按钮。

  • 使用.input-group-prepend类可以在输入框的的前面添加文本信息， .input-group-append类添加在输入框的后面。

  • 最后，我们还需要使用.input-group-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">
      <form>
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text">@</span>
          </div>
          <input type="text" class="form-control" placeholder="Username" />
        </div>
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Your Email" />
          <div class="input-group-append">
            <span class="input-group-text">@runoob.com</span>
          </div>
        </div>
      </form>
    </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="input-group">
        <input
          type="text"
          class="form-control"
          placeholder="Something clever.."
        />
        <div class="input-group-append">
          <button class="btn btn-primary" type="button">OK</button>
          <button class="btn btn-danger" type="button">Cancel</button>
        </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="input-group mt-3 mb-3">
        <div class="input-group-prepend">
          <button
            type="button"
            class="btn btn-outline-secondary dropdown-toggle"
            data-toggle="dropdown"
          >
            选择网站
          </button>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="https://www.google.com">GOOGLE</a>
            <a class="dropdown-item" href="https://www.runoob.com">RUNOOB</a>
            <a class="dropdown-item" href="https://www.taobao.com">TAOBAO</a>
          </div>
        </div>
        <input
          type="text"
          value=""
          class="form-control"
          placeholder="网站地址"
        />
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../popper.min.js"></script>
  <script src="../bootstrap.js"></script>
  <script>
    const dropdownItems = document.querySelectorAll(".dropdown-item");
    const input = document.querySelector("input");
    for (let i = 0; i < dropdownItems.length; i++) {
      dropdownItems[i].onclick = function (e) {
        // 阻止默认行为跳转
        e.preventDefault();
        // console.log(this.href);
        input.value = this.href;
      };
    }
  </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" />
    <style>
      .carousel-item img {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="demo" class="carousel slide" data-ride="carousel">
      <!-- 指示符 -->
      <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
      </ul>
      <!-- 轮播图片 -->
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" />
        </div>
        <div class="carousel-item">
          <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg" />
        </div>
        <div class="carousel-item">
          <img
            src="https://static.runoob.com/images/mix/img_mountains_wide.jpg"
          />
        </div>
      </div>
      <!-- 左右切换按钮 -->
      <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </a>
      <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
      </a>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

在这里插入图片描述

Bootstrap4 轮播（二）

  • 轮播图片上添加描述
    • 在每个<div class="carousel-item">内添加<div class="carousel-caption">来设置轮播图片的描述文本
  • 上述实例的类：
    • .carousel 创建一个轮播
    • .carousel-indicators 为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。
    • .carousel-inner 添加要切换的图片
    • .carousel-item 指定每个图片的内容
    • .carousel-control-prev添加左侧的按钮，点击会返回上一张。
    • .carousel-control-next 添加右侧按钮，点击会切换到下一张。
    • .carousel-control-prev-icon与.carousel-control-prev一起使用，设置左侧的按钮
    • .carousel-control-next-icon与.carousel-control-next一起使用，设置右侧的按钮
    • .slide切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类

Bootstrap4 模态框

  • 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。

  • 可以通过添加.modal-sm类来创建一个小模态框，.modal-lg类可以创建一个大模态框。

  • 尺寸类放在<div>元素的.modal-dialog类后

    <!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"
      data-toggle="modal"
      data-target="#myModal"
    >
      打开模态框
    </button>
    <!-- 模态框 -->
    <div class="modal fade" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <!-- 模态框头部 -->
          <div class="modal-header">
            <h4 class="modal-title">模态框头部</h4>
            <button type="button" class="close" data-dismiss="modal">
              &times;
            </button>
          </div>
          <!-- 模态框主体 -->
          <div class="modal-body">
            <form action="">
              <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" class="form-control" />
              </div>
              <div class="form-group">
                <label for="password">密码</label>
                <input type="text" id="password" class="form-control" />
              </div>
            </form>
          </div>
          <!-- 模态框底部 -->
          <div class="modal-footer">
            <input
              type="submit"
              value="登录"
              class="btn bg-primary text-light"
            />
            <button class="btn btn-danger" data-dismiss="modal">关闭</button>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 提示框

  • 提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。

  • 通过向元素添加data-toggle="tooltip"来来创建提示框。title属性的内容为提示框显示的内容

  • 注意:提示框要写在jQuery的初始化代码里: 然后在指定的元素上调用tooltip()方法

    <!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 data-toggle="tooltip" title="我是提示内容">鼠标引动到我这里</a>
  </body>
  <script src="../jquery.js"></script>
  <script src="../popper.min.js"></script>
  <script src="../bootstrap.js"></script>
  <script>
    // $('[data-toggle="tooltip"]') jQuery 获取DOM对象
    $('[data-toggle="tooltip"]').tooltip();
  </script>
</html>

    在这里插入图片描述

  • 使用data-placement属性来设定提示框显示的方向: top,bottom,left或right

    <a data-toggle="tooltip" data-placement="right" title="我是提示内容">
	鼠标引动到我这里
</a>

Bootstrap4 弹出框

  • 弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。

  • 通过向元素添加data-toggle="popover"来来创建弹出框。

  • title属性的内容为弹出框的标题，data-content属性显示了弹出框的文本内容

  • 注意:弹出框要写在jQuery的初始化代码里: 然后在指定的元素上调用popover()方法

  • 使用data-placement属性来设定提示框显示的方向: top,bottom,left或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" />
    <style>
      body {
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <a
      href="#"
      data-toggle="popover"
      title="弹出框标题"
      data-content="弹出框内容"
      data-placement="right"
      >多次点我</a
    >
  </body>
  <script src="../jquery.js"></script>
  <script src="../popper.min.js"></script>
  <script src="../bootstrap.js"></script>
  <script>
    // 初始化调用
    $(document).ready(function () {
      $('[data-toggle="popover"]').popover();
    });
  </script>
</html>

    在这里插入图片描述

  • 使用data-trigger="focus"属性来设置在鼠标点击元素外部区域来关闭弹出框

        <a
      href="#"
      data-toggle="popover"
      title="弹出框标题"
      data-content="弹出框内容"
      data-placement="right"
      data-trigger="focus"
      >多次点我</a
    >

  • 如果你想实现在鼠标移动到元素上显示，移除后消失的效果，可以使用data-trigger属性，并设置值为"hover"

        <a
      href="#"
      data-toggle="popover"
      title="弹出框标题"
      data-content="弹出框内容"
      data-placement="right"
      data-trigger="hover"
      >多次点我</a
    >

Bootstrap4 滚动监听(Scrollspy)

  • 滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。

  • 想要监听的元素（通常是body）添加data-spy="scroll"

  • 然后添加data-target属性，它的值为导航栏的id或class(.navbar)。这样就可以联系上可滚动区域

  • 注意可滚动项元素上的id（<div id="section1">）必须匹配导航栏上的链接选项（<a href="#section1">)。

  • 可选项data-offset属性用于计算滚动位置时，距离顶部的偏移像素。 默认为10 px。

  • 设置相对定位: 使用data-spy="scroll"的元素需要将其CSS position属性设置为"relative"才能起作用。

    <!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>
      body {
        position: relative;
      }
      #navbar {
        position: fixed;
        right: 0;
        top: 100px;
      }
    </style>
  </head>
  <body data-spy="scroll">
    <nav class="navbar navbar-light bg-light" id="navbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="#option1" class="nav-link">option1</a>
        </li>
        <li class="nav-item">
          <a href="#option2" class="nav-link">option2</a>
        </li>
      </ul>
    </nav>
    <div id="option1">
      <h1>Option1</h1>
      <p>
        Try to scroll this page and look at the navigation bar while scrolling!
      </p>
      <div class="bg-success" style="height: 500px"></div>
    </div>
    <div id="option2">
      <h1>Option2</h1>
      <p>
        Try to scroll this page and look at the navigation bar while scrolling!
      </p>
      <div class="bg-info" style="height: 500px"></div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 小工具（一）

  • Bootstrap4提供了一些小工具，可以让我们不用写CSS代码就能实现想要的效果。

  • 边框

    • 添加或移除边框
    • 边框颜色
    • 边框圆角设置
    <!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>
    <!-- 边框 -->
    <span class="border"></span>
    <span class="border border-0"></span>
    <span class="border border-top-0"></span>
    <span class="border border-right-0"></span>
    <span class="border border-bottom-0"></span>
    <span class="border border-left-0"></span>
    <!-- 边框颜色 -->
    <span class="border border-primary"></span>
    <span class="border border-secondary"></span>
    <span class="border border-success"></span>
    <span class="border border-danger"></span>
    <span class="border border-warning"></span>
    <span class="border border-info"></span>
    <span class="border border-light"></span>
    <span class="border border-dark"></span>
    <span class="border border-white"></span>
    <!-- 边框圆角 -->
    <span class="rounded"></span>
    <span class="rounded-top"></span>
    <span class="rounded-right"></span>
    <span class="rounded-bottom"></span>
    <span class="rounded-left"></span>
    <span class="rounded-circle"></span>
    <span class="rounded-0"></span>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

Bootstrap4 小工具（二）

  • 浮动

    • .float-right类用于设置元素右浮动
    • .float-left设置元素左浮动
    • .clearfix类用于清除浮动
    <!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>
      span {
        width: 100px;
        height: 100px;
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="clearfix">
      <span class="float-left border border-danger">左浮动</span>
      <span class="float-right border border-success">右浮动</span>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 响应式浮动

  • 可以设置浮动 (.float-\*-left|right - *为sm,md,lg或xl)的方向依赖于屏幕的大小

<!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="float-sm-right bg-primary">在大于小屏幕尺寸上右浮动</div>
    <br />
    <div class="float-md-right bg-info">在大于中等屏幕尺寸上右浮动</div>
    <br />
    <div class="float-lg-right bg-success">在大于大屏幕尺寸上右浮动</div>
    <br />
    <div class="float-xl-right bg-warning">在大于超大屏幕尺寸上右浮动</div>
    <br />
    <div class="float-none bg-secondary">没有浮动</div>
    <div class="clearfix">
      <span class="float-left border border-danger">左浮动</span>
      <span class="float-right border border-success">右浮动</span>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

在这里插入图片描述

Bootstrap4 小工具（三）

  • 对齐

    • 使用.mx-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" />
  </head>
  <body>
    <div class="mx-auto bg-warning" style="width: 150px">居中显示</div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 宽度

    • 元素上使用w-*类 (.w-25, .w-50, .w-75, .w-100, .mw-100)来设置宽度
    <!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="w-25 bg-warning">宽度 25%</div>
    <div class="w-50 bg-info">宽度 50%</div>
    <div class="w-75 bg-success">宽度 75%</div>
    <div class="w-100 bg-danger">宽度 100%</div>
    <div class="mw-100 bg-primary">最大宽度 100%</div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 高度

    • 元素上使用h-*类(.h-25, .h-50, .h-75, .h-100, .mh-100)来设置高度
    <!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 style="height: 100px">
      <div class="w-25 h-25 bg-warning">宽度 25%</div>
      <div class="w-50 h-50 bg-info">宽度 50%</div>
      <div class="w-75 h-75 bg-success">宽度 75%</div>
      <div class="w-100 h-100 bg-danger">宽度 100%</div>
      <div class="mw-100 mh-100 bg-primary">最大宽度 100%</div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 Flex（弹性）布局

  • Bootstrap 3与Bootstrap 4最大的区别就是Bootstrap 4使用弹性盒子来布局，而不是使用浮动来布局

  • 以下实例使用d-flex类创建一个弹性盒子容器，并设置三个弹性子元素

  • 创建显示在同一行上的弹性盒子容器可以使用d-inline-flex类

    <!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="d-flex bg-secondary text-white">
      <div class="bg-info">Flex item 1</div>
      <div class="bg-warning">Flex item 2</div>
      <div class="bg-primary">Flex item 3</div>
    </div>
    <br />
    <div class="d-inline-flex bg-secondary text-white">
      <div class="bg-info">Flex item 1</div>
      <div class="bg-warning">Flex item 2</div>
      <div class="bg-primary">Flex item 3</div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 Flex（弹性）布局

  • 水平方向

    • .flex-row可以设置弹性子元素水平显示，这是默认的。
    • 使用.flex-row-reverse类用于设置右对齐显示，即与.flex-row方向相反
    <!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="d-flex flex-row bg-secondary">
      <div class="p-2 bg-info">Flex item 1</div>
      <div class="p-2 bg-warning">Flex item 2</div>
      <div class="p-2 bg-primary">Flex item 3</div>
    </div>
    <br />
    <div class="d-flex flex-row-reverse bg-secondary">
      <div class="p-2 bg-info">Flex item 1</div>
      <div class="p-2 bg-warning">Flex item 2</div>
      <div class="p-2 bg-primary">Flex item 3</div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 垂直方向

    • .flex-column类用于设置弹性子元素垂直方向显示,
    • .flex-column-reverse用于翻转子元素
    <!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="d-flex flex-column">
      <div class="p-2 bg-info">Flex item 1</div>
      <div class="p-2 bg-warning">Flex item 2</div>
      <div class="p-2 bg-primary">Flex item 3</div>
    </div>
    <br />
    <div class="d-flex flex-column-reverse">
      <div class="p-2 bg-info">Flex item 1</div>
      <div class="p-2 bg-warning">Flex item 2</div>
      <div class="p-2 bg-primary">Flex item 3</div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 内容排列

    • .justify-content-*类用于修改弹性子元素的排列方式，*号允许的值有：start(默认),end,center,between或around
    <!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="d-flex justify-content-end bg-secondary mb-3">
      <div class="p-2 bg-info">Flex item 1</div>
      <div class="p-2 bg-warning">Flex item 2</div>
      <div class="p-2 bg-primary">Flex item 3</div>
    </div>
    <div class="d-flex justify-content-center bg-secondary mb-3">
      <div class="p-2 bg-info">Flex item 1</div>
      <div class="p-2 bg-warning">Flex item 2</div>
      <div class="p-2 bg-primary">Flex item 3</div>
    </div>
    <div class="d-flex justify-content-between bg-secondary mb-3">
      <div class="p-2 bg-info">Flex item 1</div>
      <div class="p-2 bg-warning">Flex item 2</div>
      <div class="p-2 bg-primary">Flex item 3</div>
    </div>
    <div class="d-flex justify-content-around bg-secondary mb-3">
      <div class="p-2 bg-info">Flex item 1</div>
      <div class="p-2 bg-warning">Flex item 2</div>
      <div class="p-2 bg-primary">Flex item 3</div>
    </div>
  </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 等宽

    • .flex-fill类强制设置各个弹性子元素的宽度是一样的
    <!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="d-flex">
      <div class="p-2 bg-info flex-fill">Flex item 1</div>
      <div class="p-2 bg-warning flex-fill">Flex item 2</div>
      <div class="p-2 bg-primary flex-fill">Flex item 3</div>
    </div>
  </body>
  <script src=../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 扩展

    • .flex-grow-1用于设置子元素使用剩下的空间。以下实例中前面两个子元素只设置了它们所需要的空间，最后一个获取剩余空间
    <!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="d-flex">
      <div class="p-2 bg-info">Flex item 1</div>
      <div class="p-2 bg-warning">Flex item 2</div>
      <div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 排序

    • .order类可以设置弹性子元素的排序，从.order-1到.order-12，数字越低权重越高(.order-1排在.order-2之前)
    <!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="d-flex bg-secondary">
      <div class="p-2 bg-info order-3">Flex item 1</div>
      <div class="p-2 bg-warning order-2">Flex item 2</div>
      <div class="p-2 bg-primary order-1">Flex item 3</div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 外边距

    • .mr-auto类可以设置子元素右外边距为auto，即margin-right: auto!important;，
    • .ml-auto类可以设置子元素左外边距为auto，即margin-left: auto!important;
    <!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="d-flex bg-secondary">
      <div class="p-2 mr-auto mr-auto bg-info">Flex item 1</div>
      <div class="p-2 bg-warning">Flex item 2</div>
      <div class="p-2 bg-primary">Flex item 3</div>
    </div>
    <br />
    <div class="d-flex bg-secondary">
      <div class="p-2 bg-info">Flex item 1</div>
      <div class="p-2 bg-warning">Flex item 2</div>
      <div class="p-2 ml-auto bg-primary">Flex item 3</div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 包裹

    • 弹性容器中包裹子元素可以使用以下三个类：.flex-nowrap(默认),.flex-wrap或.flex-wrap-reverse。设置flex容器是单行或者多行
    <!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>
      div > div {
        width: 50%;
      }
    </style>
  </head>
  <body>
    <div class="d-flex flex-wrap">
      <div class="bg-success">1</div>
      <div class="bg-info">2</div>
      <div class="bg-warning">3</div>
    </div>
    <br />
    <div class="d-flex flex-nowrap">
      <div class="bg-success">1</div>
      <div class="bg-info">2</div>
      <div class="bg-warning">3</div>
    </div>
    <br />
    <div class="d-flex flex-wrap-reverse">
      <div class="bg-success">1</div>
      <div class="bg-info">2</div>
      <div class="bg-warning">3</div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 内容对齐

    • .align-content-*控制在垂直方向上如何去堆叠子元素，包含的值有：.align-content-start (默认),.align-content-end,.align-content-center,.align-content-between,.align-content-around和.align-content-stretch。
    • 这些类在只有一行的弹性子元素中是无效的。
    <!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>
      .d-flex {
        height: 100px;
        border: 1px solid red;
      }
      .d-flex div {
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div class="d-flex flex-wrap align-content-start">
      <div class="bg-success">1</div>
      <div class="bg-info">2</div>
      <div class="bg-warning">3</div>
    </div>
    <div class="d-flex flex-wrap align-content-end">
      <div class="bg-success">1</div>
      <div class="bg-info">2</div>
      <div class="bg-warning">3</div>
    </div>
    <div class="d-flex flex-wrap align-content-center">
      <div class="bg-success">1</div>
      <div class="bg-info">2</div>
      <div class="bg-warning">3</div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

  • 子元素对齐

    • 要设置单行的子元素对齐可以使用.align-items-*类来控制，包含的值有：.align-items-start,.align-items-end,.align-items-center,.align-items-baseline,和.align-items-stretch(默认)

  • 指定子元素对齐

    • 设置指定子元素对齐对齐可以使用.align-self-*类来控制，包含的值有：.align-self-start,.align-self-end,.align-self-center,.align-self-baseline,和.align-self-stretch(默认)

Bootstrap4 多媒体对象（一）

  • Bootstrap 提供了很好的方式来处理多媒体对象（图片或视频）和内容的布局。应用场景有博客评论、微博等

  • 基础多媒体对象

    • 要创建一个多媒体对象，可以在容器元素上添加.media类，然后将多媒体内容放到子容器上，子容器需要添加.media-body类，然后添加外边距，内边距等效果
    • 想将头像图片显示在右侧，可以在.media-body容器后添加图片
    <!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="media border p-3">
      <img
        src="../图像形状/01.webp"
        class="mr-3 mt-3 rounded-circle"
        style="width: 60px"
      />
      <div class="media-body">
        <h4>菜鸟教程</h4>
        <p>学的不仅是技术，更是梦想！！！</p>
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 多媒体对象（二）

  • 多媒体对象嵌套

    • 多媒体对象可以多个嵌套（一个多媒体对象中包含另外一个多媒体对象）
    • 要嵌套多媒体对象，可以把新的.media容器放到.media-body容器中
    <!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="media border p-3">
      <img
        src="../图像形状/01.webp"
        class="mr-3 mt-3 rounded-circle"
        style="width: 60px"
      />
      <div class="media-body">
        <h4>网星软件</h4>
        <p>学的不仅是技术，更是梦想！！！</p>
        <div class="media p-3">
          <img
            src="../图像形状/01.webp"
            class="mr-3 mt-3 rounded-circle"
            style="width: 45px"
          />
          <div class="media-body">
            <h4>网星软件</h4>
            <p>学的不仅是技术，更是梦想！！！</p>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

Bootstrap4 多媒体对象（三）

  • 可以使用align-self-*相关类来设置多媒体对象的图片显示位置

    <!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>
      .media {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <!-- 头部 -->
    <div class="media">
      <img
        src="https://static.runoob.com/images/mobile-icon.png"
        class="align-self-start mr-3"
        style="width: 60px"
      />
      <div class="media-body">
        <h4>头部 -- 网星软件</h4>
        <p>学的不仅是技术，更是梦想！！！</p>
      </div>
    </div>
    <!-- 居中 -->
    <div class="media">
      <img
        src="https://static.runoob.com/images/mobile-icon.png"
        class="align-self-center mr-3"
        style="width: 60px"
      />
      <div class="media-body">
        <h4>居中 -- 网星软件</h4>
        <p>学的不仅是技术，更是梦想！！！</p>
      </div>
    </div>
    <!-- 底部 -->
    <div class="media">
      <img
        src="https://static.runoob.com/images/mobile-icon.png"
        class="align-self-end mr-3"
        style="width: 60px"
      />
      <div class="media-body">
        <h4>底部 -- 网星软件</h4>
        <p>学的不仅是技术，更是梦想！！！</p>
      </div>
    </div>
  </body>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
</html>

    在这里插入图片描述

BloggerM
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Bootstrap 4框架
weixin_57770903的博客
04-27 1769
1、一个简明的Bootstrap 4框架（只区分pc与手机并基于FlexBox布局）： <div class="container"><div class="row"><div class="col-sm"></div></div></div> Emment语法：div.container>div.row>div.col-sm 2、一个完整的Bootstrap 4全栅格定义框架： <div class="con
Bootstrap 4
ANGWH的博客
05-10 460
Bootstrap 4 的改变:从Bootstrap 3的less 变成 Sass 编写，有5种栅格类，使用rem和em为单位（除部分margin和padding使用px），使用弹性盒模型（flexbox）的布局方式，放弃对IE8及低版本IE的支持。 Bootstrap4的5种栅格： 超小屏幕（col-）(<576px) 小屏幕（col-sm-）(≥576px) 中等屏幕（col-md-）(≥768px) 大屏幕（col-lg-） (≥992px) 超大屏幕（col-xl-）（≥1200px） B
Bootstrap4(一)
shi199434的博客
12-16 422
Bootstrap4 教程 Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为
Bootstrap简介
android开发笔记
04-25 243
什么是 Bootstrap？ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。   Bootstra...
Bootstrap4(七)
shi199434的博客
12-17 577
Bootstrap4 图像形状 圆角图片 .rounded 类可以让图片显示圆角效果： 实例 img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre"> 尝试一下 » 椭圆图片 .rounded-circle 类可以设置椭圆形图片: 实例 im
Bootstrap 4 （四）
weixin_55685975的博客
04-26 372
Bootstrap 4 模态框 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。 可以通过添加 .modal-sm 类来创建一个小模态框，.modal-lg 类可以创建一个大模态框。 尺寸类放在 <div>元素的 .modal-dialog 类后 <!-- 按钮：用于打开模态框 --> <button type="button" class="btn btn-primary"
Bootstrap4（3）
zxcWh的博客
09-27 257
1.Bootstrap4 表单 表单元素<input>,<textarea>, 和<select>elements 在使用.form-control类的情况下，宽度都是 设置为 100% Bootstrap4 表单布局 1.堆叠表单 (全屏宽度)：垂直方向 2.内联表单：水平方向 例如： ​ <!DOCTYPE html> <html> <head> <title>Bootstrap 实例...
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中文整理版文本
04-15
Bootstrap4中文整理版文档。收集整理的Bootstrap4文档，重新排版，支持目录索引。
Bootstrap4模板 unify最新版 unify-v2.4
02-05
unify v2.4 最新网站模板(截止到2018.2.5号),基于bootstrap4 制作,资源压缩后有430多M大,有一小部分缺失(图片什么的),不影响整体使用,也可以直接去官网上下.下载链接失效的话,请多刷新浏览器几次,或者换个浏览器试试,不行的话告诉我声,我更新下O(∩_∩)O哈哈~,以后会发布新版,请关注.搜索微信公众号"Java奇谈"或"javaqitan"获取更多内容.
四种jQuery+bootstrap分页效果插件.rar
08-19
四种jQuery+bootstrap分页效果插件.rar
bootstrap4中文离线手册.zip
12-07
这个"bootstrap4中文离线手册.zip"文件包含了所有关于Bootstrap 4的基础知识、组件、工具和最佳实践，方便开发者在没有网络连接的情况下查阅。 1. **基础知识**：Bootstrap 4 基于 HTML5 和 CSS3，使用 Less 作为预...
bootstrap-slider：Bootstrap 3和Bootstrap 4的滑块控件
01-29
从主要版本11.0.0开始，我们仅支持Bootstrap 4！ 安装 要使用凉亭吗？ bower install seiyria-bootstrap-slider 要使用npm吗？ npm install bootstrap-slider 想要从CDN获得它吗？ 基本设定 从目录中获取已编译...
Bootstrap4总结
weixin_46692492的博客
07-16 572
#Bootstrap4总结 Bootstrap 技术Background 网页前端的一种技术，是Twitter公司发明的样式库(css). 不同的设备访问网页，网页都能完整的显示在设备屏幕上（自动适应页面）。 开发人员借助文档会使用即可。 jquery 在Bootstrap之前，后面依赖前者的文件 什么是 CDN？ 两种引入方式。 第一种是直接从本地文件引入； 第二种是网上引入。网上引入如果没有网络时，不显示效果。 什么是网格系统？ 屏幕分为12列，自己根据需要组合     4
Bootstrap4 总结
最新发布
xiangxiongfly
07-10 1031
Bootstrap 是全球最受欢迎的前端开源工具库，它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件。基于 Bootstrap 提供的强大功能，能够让你快速设计并定制你的网站。
Bootstrap4学习（一）
LJFYYJ的博客
08-21 976
本文主要为http://www.runoob.com/bootstrap4/bootstrap4-tutorial.html 教程前半部分的总结与练习。 1.安装使用 Bootstrap要求使用HTML5文件类型，需要添加HTML5 doctype声明。 为使Bootstrap开发的网站对移动设备友好，确保适当的绘制和缩放，需要添加viewport meta标签。 width=devic...
bootstrap4 入门学习
ysazt的博客
08-04 634
下载 这里有三个版本，初级学习先选择上图的 下载好后，解压，新建一个learn_bootstrap，再建一个其子目录lib ，将解压后的bootstrap-4.5.0 更名为bootstrap ,然后copy 到 lib 目录下，效果如下图 打开brackets , 文件–>打开目录–>learn_bootstarp,如下图： 新建一个文件 index.html 记得brackets 安装插件： 1. HTML Skeleton 可以快速的为你的 HTML 文件插入基本的.
Bootstrap4用法
agg7911的博客
06-26 311
#Bootstrap4## 网格系统- .col- 针对所有设备- .col-sm- 平板 - 屏幕宽度等于或大于 576px- .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)- .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)- .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)##文字排版- Bootstrap 4 默认的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值