推荐阅读
  • Bootstrap4 按钮组

    Bootstrap4 按钮组 Bootstrap 4 中允许我们将按钮放在同一行上。 可以在 <div> 元素上添加 .btn-group 类来创建按钮组。 实例 [mycode3 type='html'] Apple Samsung Sony [/mycode3] 尝试一下 » 提示: 我们可以使用 .

  • Bootstrap4 下拉菜单

    Bootstrap4 下拉菜单 Bootstrap4 下拉菜单依赖于 popper.min.js。 下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。 实例 [mycode3 type='html'] Dropdown button Link 1 Link 2 Link 3 [/mycode3] 尝试一下 &

  • Bootstrap4 小工具

    Bootstrap4 小工具 Bootstrap4 提供了一些小工具,可以让我们不用写 CSS 代码就能实现想要的效果。 边框 使用 border 类可以添加或移除边框: 实例 [mycode3 type='html'] [/mycode3] 尝试一下 » 边框颜色 Bootstrap4 提供了一些类来设置边框颜色: 实例

  • Bootstrap4 模态框

    Bootstrap4 模态框 模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。 如何创建模态框 以下实例创建了一个简单的模态框效果 : 实例 [mycode3 type='html'] 打开模态框

  • Bootstrap4 徽章(Badges)

    Bootstrap4 徽章(Badges) 徽章(Badges)主要用于突出显示新的或未读的项。如需使用徽章,只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 <span> 元素上即可。 徽章可以根据父元素的大小的变化而变化: 实例 [mycode3 type='html'] 测试标题 Ne

  • Bootstrap4 轮播

    Bootstrap4 轮播 轮播是一个循环的幻灯片: 如何创建轮播 以下实例创建了一个简单的图片轮播效果 : 实例 [mycode3 type='html']

  • Bootstrap4 面包屑导航

    Bootstrap4 面包屑导航(Breadcrumb) 面包屑导航是一种基于网站层次信息的显示方式。以博客为例,面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置,是在用户界面中的一种导航辅助。 Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS(bootstrap.min.css)中的 ::b

  • Bootstrap4 网格系统

    Bootstrap4 网格系统 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。 我们也可以根据自己的需要,定义列数: table.grid { width:100%; border:none; background-color:#F6F4F0; padding:0p

  • Bootstrap4 提示框

    Bootstrap4 提示框 提示框是一个小小的弹窗,在鼠标移动到元素上显示,鼠标移到元素外就消失。 如何创建提示框 通过向元素添加 data-toggle='tooltip' 来来创建提示框。 title 属性的内容为提示框显示的内容: [mycode3 type='html'] 鼠标移动到我这 [/mycode3] 注意: 提示框要写

  • Bootstrap4 Jumbotron

    Bootstrap4 Jumbotron Jumbotron(超大屏幕)会创建一个大的灰色背景框,里面可以设置一些特殊的内容和信息。 提示: Jumbotron 里头可以放一些 HTML标签,也可以是 Bootstrap 的元素。 我们可以通过在 <div> 元素 中添加 .jumbotron 类来创建 jumbotron: 实例 [mycode3 type

Bootstrap 4 Flex

Bootstrap4 通过 flex 类来控制页面的布局。

弹性盒子(flexbox)

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

弹性盒子是 CSS3 的一种新的布局模式,更适合响应式的设计,如果你还不了解 flex,可以阅读我们的 CSS3 弹性盒子(Flex Box) 教程

注意:IE9 及其以下版本不支持弹性盒子,所以如果你需要兼容 IE8-9,请使用 Bootstrap 3。

以下实例使用 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>

提示: 使用 .flex-shrink-1 用于设置子元素的收缩规则。

排序

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

响应式 flex 类

我们可以根据不同的设备,设置 flex 类,从而实现页面响应式布局,以下表格中的 * 号可以的值有:sm, md, lg 或 xl, 对应的是小型设备、中型设备,大型设备,超大型设备。
实例 实现
弹性容器
.d-*-flex 根据不同的屏幕设备创建弹性盒子容器
.d-*-inline-flex 根据不同的屏幕设备创建行内弹性盒子容器
方向
.flex-*-row 根据不同的屏幕设备在水平方向显示弹性子元素
.flex-*-row-reverse 根据不同的屏幕设备在水平方向显示弹性子元素,且右对齐
.flex-*-column 根据不同的屏幕设备在垂直方向显示弹性子元素
.flex-*-column-reverse 根据不同的屏幕设备在垂直方向显示弹性子元素,且方向相反
内容对齐
.justify-content-*-start 根据不同屏幕设备在开始位置显示弹性子元素 (左对齐)
.justify-content-*-end 根据不同屏幕设备在尾部显示弹性子元素 (右对齐)
.justify-content-*-center 根据不同屏幕设备在 flex 容器中居中显示子元素
.justify-content-*-between 根据不同屏幕设备使用 "between" 显示弹性子元素
.justify-content-*-around 根据不同屏幕设备使用 "around" 显示弹性子元素
等宽
.flex-*-fill 根据不同的屏幕设备强制等宽
扩展
.flex-*-grow-0 不同的屏幕设备不设置扩展  
.flex-*-grow-1 不同的屏幕设备设置扩展  
收缩
.flex-*-shrink-0 不同的屏幕设备不设置收缩  
.flex-*-shrink-1 不同的屏幕设备设置收缩  
包裹
.flex-*-nowrap 不同的屏幕设备不设置包裹元素
.flex-*-wrap 不同的屏幕设备设置包裹元素
.flex-*-wrap-reverse 不同的屏幕设备反转包裹元素
内容排列
.align-content-*-start 根据不同屏幕设备在起始位置堆叠元素
.align-content-*-end 根据不同屏幕设备在结束位置堆叠元素
.align-content-*-center 根据不同屏幕设备在中间位置堆叠元素
.align-content-*-around 根据不同屏幕设备,使用 "around" 堆叠元素
.align-content-*-stretch 根据不同屏幕设备,通过伸展元素来堆叠
元素对齐
.align-items-*-start 根据不同屏幕设备,让元素在头部显示在同一行。
.align-items-*-end 根据不同屏幕设备,让元素在尾部显示在同一行。
.align-items-*-center 根据不同屏幕设备,让元素在中间位置显示在同一行。
.align-items-*-baseline 根据不同屏幕设备,让元素在基线上显示在同一行。
.align-items-*-stretch 根据不同屏幕设备,让元素延展高度并显示在同一行。
单独一个子元素的对齐方式
.align-self-*-start 据不同屏幕设备,让单独一个子元素显示在头部。
.align-self-*-end 据不同屏幕设备,让单独一个子元素显示在尾部
.align-self-*-center 据不同屏幕设备,让单独一个子元素显示在居中位置
.align-self-*-baseline 据不同屏幕设备,让单独一个子元素显示在基线位置
.align-self-*-stretch 据不同屏幕设备,延展一个单独子元素
关于我们 免责声明 联系我们
Copyright © 2021 爱学习网 浙ICP备18049359号 网站地图 Google地图