Bootstrap 4 （四）

最新推荐文章于 2024-07-27 06:15:27 发布

亐㔓832

最新推荐文章于 2024-07-27 06:15:27 发布

阅读量477

点赞数

文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/weixin_55685975/article/details/116151780

版权

本文详细介绍了Bootstrap 4的模态框、提示框、弹出框、滚动监听、小工具、Flex布局和多媒体对象的用法，包括尺寸设置、触发行为、内容对齐和响应式设计。

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

Bootstrap 4 模态框

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

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

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

  <!-- 按钮：用于打开模态框 --> <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">
          模态框内容..
        </div>
        <!-- 模态框底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>

Bootstrap 4 提示框

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

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

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

  <a href="#" data-toggle="tooltip" title="我是提示内容!">鼠标移动到我这</a>
  <script>
    // 初始化调用
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
  </script>

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

  <a href="#" data-toggle="tooltip" data-placement="top" title="我是提示容!">鼠标移动到我这</a>
  <a href="#" data-toggle="tooltip" data-placement="bottom" title="我是提示内容!">鼠标移动到我这</a>
  <a href="#" data-toggle="tooltip" data-placement="left" title="我是提示内容!">鼠标移动到我这</a>
  <a href="#" data-toggle="tooltip" data-placement="right" title="我是提示内容!">鼠标移动到我这</a>

Bootstrap 4 弹出框

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

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

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

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

  <a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框内容">多次点我</a>
  <script>
    // 初始化调用
    $(document).ready(function () {
      $('[data-toggle="popover"]').popover()
    })
  </script>

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

  <a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">点我</a>
  <a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">点我</a>
  <a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">点我</a>
  <a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">点我</a>

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

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

Bootstrap 4 滚动监听(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” 才能起作用。

  <!-- 可滚动区域 -->
  <body data-spy="scroll" data-target=".navbar" data-offset="50">
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#section1">Section 1</a>
        </li>
      </ul>
    </nav>
    <!-- 第一部分内容 -->
    <div id="section1">
      <h1>Section 1</h1>
      <p>Try to scroll this page and look at the navigation bar while scrolling!</p>
    </div>
    ...
  </body>

  <style>
    body {
      position: relative;
    }

    ul.nav-pills {
      top: 20px;
      position: fixed;
    }

    div.col-8 div {
      height: 500px;
    }
  </style>

  <body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
    <div class="container-fluid">
      <div class="row">
        <nav class="col-sm-3 col-4" id="myScrollspy">
          <ul class="nav nav-pills flex-column">
            <li class="nav-item">
              <a class="nav-link active" href="#section1">Section 1</a>
            </li>
            ...
          </ul>
        </nav>
        <div class="col-sm-9 col-8">
          <div id="section1">
            <h1>Section 1</h1>
            <p>Try to scroll this page and look at the navigation list while scrolling!</p>
          </div>
          ...
        </div>
      </div>
    </div>
  </body>

Bootstrap 4 小工具

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

边框

添加或移除边框

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

浮动

.float-right 类用于设置元素右浮动

.float-left 设置元素左浮动

.clearfix 类用于清除浮动

  <div class="clearfix">
    <span class="float-left">左浮动</span>
    <span class="float-right">右浮动</span>
  </div>

响应式浮动

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

  <div class="float-sm-right">在大于小屏幕尺寸上右浮动</div><br>
  <div class="float-md-right">在大于中等屏幕尺寸上右浮动</div><br>
  <div class="float-lg-right">在大于大屏幕尺寸上右浮动</div><br>
  <div class="float-xl-right">在大于超大屏幕尺寸上右浮动</div><br>
  <div class="float-none">没有浮动</div>

居中对齐

使用 .mx-auto 类来设置居中对齐

<div class="mx-auto bg-warning" style="width:150px">居中显示</div>

宽度

元素上使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 来设置宽度

  <div class="w-25 bg-warning">宽度 25%</div>
  <div class="w-50 bg-warning">宽度 50%</div>
  <div class="w-75 bg-warning">宽度 75%</div>
  <div class="w-100 bg-warning">宽度 100%</div>
  <div class="mw-100 bg-warning">最大宽度 100%</div>

高度

元素上使用 h-* 类 (.h-25, .h-50, .h-75, .h-100, .mh-100) 来设置高度

  <div style="height:200px;background-color:#ddd">
    <div class="h-25 bg-warning">高度 25%</div>
    <div class="h-50 bg-warning">高度 50%</div>
    <div class="h-75 bg-warning">高度 75%</div>
    <div class="h-100 bg-warning">高度 100%</div>
    <div class="mh-100 bg-warning" style="height:500px">最大高度 100%</div>
  </div>

Bootstrap 4 Flex（弹性）布局

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

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

  <div class="d-flex p-3 bg-secondary text-white">
    <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>

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

  <div class="d-inline-flex p-3 bg-secondary text-white">
    <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>

水平方向

.flex-row 可以设置弹性子元素水平显示，这是默认的。

使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反

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

垂直方向

.flex-column 类用于设置弹性子元素垂直方向显示,

.flex-column-reverse 用于翻转子元素

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

内容排列

.justify-content-* 类用于修改弹性子元素的排列方式，* 号允许的值有：start (默认), end, center, between 或 around

  <div class="d-flex justify-content-start">...</div>
  <div class="d-flex justify-content-end">...</div>
  <div class="d-flex justify-content-center">...</div>
  <div class="d-flex justify-content-between">...</div>
  <div class="d-flex justify-content-around">...</div>

等宽

.flex-fill 类强制设置各个弹性子元素的宽度是一样的

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

扩展

.flex-grow-1 用于设置子元素使用剩下的空间。以下实例中前面两个子元素只设置了它们所需要的空间，最后一个获取剩余空间

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

排序

.order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高( .order-1 排在 .order-2 之前)

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

外边距

.mr-auto 类可以设置子元素右外边距为 auto，即 margin-right: auto!important;，

.ml-auto 类可以设置子元素左外边距为 auto，即 margin-left: auto!important;

  <div class="d-flex bg-secondary">
    <div class="p-2 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>
  <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>

包裹

弹性容器中包裹子元素可以使用以下三个类： .flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse。设置 flex 容器是单行或者多行

  <div class="d-flex flex-wrap">..</div>
  <div class="d-flex flex-wrap-reverse">..</div>
  <div class="d-flex flex-nowrap">..</div>

内容对齐

.align-content-* 控制在垂直方向上如何去堆叠子元素，包含的值有：.align-content-start (默认), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。

这些类在只有一行的弹性子元素中是无效的。

  <div class="d-flex flex-wrap align-content-start">..</div>
  <div class="d-flex flex-wrap align-content-end">..</div>
  <div class="d-flex flex-wrap align-content-center">..</div>
  <div class="d-flex flex-wrap align-content-around">..</div>
  <div class="d-flex flex-wrap align-content-stretch">..</div>

子元素对齐

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

  <div class="d-flex flex-wrap align-items-start">..</div>
  <div class="d-flex flex-wrap align-items-end">..</div>
  <div class="d-flex flex-wrap align-items-center">..</div>
  <div class="d-flex flex-wrap align-items-around">..</div>
  <div class="d-flex flex-wrap align-items-stretch">..</div>

指定子元素对齐

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

  <div class="d-flex bg-light" style="height:150px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border align-self-start">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
  </div>

Bootstrap 4 多媒体对象

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

基础多媒体对象

要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果

想将头像图片显示在右侧，可以在 .media-body 容器后添加图片

  <div class="media border p-3">
    <img src="mobile-icon.png" class="mr-3 mt-3 rounded-circle" style="width:60px;">
    <div class="media-body">
      <h4>菜鸟教程</h4>
      <p>学的不仅是技术，更是梦想！！！</p>
    </div>
  </div>

多媒体对象嵌套

多媒体对象可以多个嵌套（一个多媒体对象中包含另外一个多媒体对象）

要嵌套多媒体对象，可以把新的 .media 容器放到 .media-body 容器中

  <div class="media border p-3">
    <img src="mobile-icon.png" 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="mobile-icon.png" class="mr-3 mt-3 rounded-circle" style="width:45px;">
        <div class="media-body">
          <h4>网星软件</h4>
          <p>学的不仅是技术，更是梦想！！！</p>
        </div>
      </div>
    </div>
  </div>

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

  <!-- 头部 -->
  <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>