Bootstrap4前台框架思维导图模板_ProcessOn思维导图、流程图

容器

container：用于固定宽度并支持响应式布局的居中块级容器

container-fluid：类用于 100% 宽度，占据全部视口（viewport）的容器

网格系统

响应式、移动设备优先的流式网格系统，系统会自动分为最多 12 列

网格 5 个类

.col-数字   针对所有设备

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

.col-md-数字   桌面显示器 - 屏幕宽度等于或大于 768px)

.col-lg-数字   大桌面显示器 - 屏幕宽度等于或大于 992px)

.col-xl-数字   超大桌面显示器 - 屏幕宽度等于或大于 1200px)

网格系统规则

网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距

使用行(row)来创建水平的列组

内容需要放置在列(col-*-*)中，并且只有列可以是行的直接子节点

预定义的类如 row 和 col-sm-4 可用于快速制作网格布局

列通过填充创建列内容之间的间隙。这个间隙是通过 row 类上的负边距设置第一行和最后一列的偏移

网格列是通过跨越指定的 12 个列来创建。例如，设置三个相等的列，需要使用用三个.col-sm-4 来设置

Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子）而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列

设备界线

超小设备 <576px

类前缀：.col-数字

列数总和 12

平板 ≥576px

.col-sm-数字

列数总和 12

桌面显示器 ≥768px

.col-md-数字

列数总和 12

大桌面显示器 ≥992px

.col-lg-数字

列数总和 12

超大桌面显示器 ≥1200px

.col-xl-数字

列数总和 12

网格基本结构

第一个星号 (*) 表示响应的设备: sm, md, lg 或 xl, 第二个星号 (*) 表示一个数字, 同一行的数字相加为 12

不在每个 col 上添加数字，让 bootstrap 自动处理布局，同一行的每个列宽度相等

偏移列

 .offset-md-* 类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11

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

文字排版

默认

font-size 为 16px, line-height 为 1.5，所有的元素 margin-top: 0 、 margin-bottom: 1rem (16px)

标题

h1~h6

Display 标题

供了四个 Display 类可以输出更大更粗的字体样式 display-1,display-2,display-3,display-4

.small

创建字号更小的颜色更浅的文本(在标题内声明的副标题)

.mark

黄色背景及有一定的内边距

.abbr

元素的样式为显示在文本底部的一条虚线边框

.blockquote

引用的内容可以在<blockquote>上添加 .blockquote 类

dl

数据列表

dt 标题信息1

dd 数据内容1

dt 标题信息2

dd 数据内容2

... ...

.code

代码片段

.kbd

键盘标志

.pre

原码输出，大块代码

文本对齐

text-(left|center|right|justify)

.lead

让段落更突出

.text-nowrap

段落中超出屏幕部分不换行

设定文本大小写

text-(uppercase|lowercase)

设定单词首字母大写

text-capitalize

颜色

文本

背景

表格

基础表格

<table class="table"><br>    <thead><br>        <tr><th>表头标题</th></tr><br>        ... ... ...<br>    </thead><br>    <tbody><br>        <tr><td>单元格内容</td></tr><br>        ... ... ...<br>    </tbody><br>    <tfoot><td colspan="3">这是表格底部</td></tfoot><br></table><br>

table

.table-striped：条纹表格

.table-bordered：为表格添加边框,相反 table-borderless

.table-hover：为表格的每一行添加鼠标悬停效果（灰色背景）

.table-active：表格激活状态

.table-sm：减少内边距来设置较小的表格

.table-responsive：创建响应式表格

.table-responsive-sm

< 576px

.table-responsive-md

< 768px

.table-responsive-lg 

< 992px

.table-responsive-xl 

< 1200px

tr或td

thead

.thead-dark 类用于给表头添加黑色背景

.thead-light 类用于给表头添加灰色背景

.thead-inverse 类用于给表头添加黑色背景

.thead-default 类用于给表头添加灰色背景

图像形状

.rounded：图片显示圆角效果

.rounded-circle：设置椭圆形图片

.img-thumbnail：设置图片缩略图(图片有边框)

.float-right：设置图片右对齐，.float-left 设置图片左对齐

.img-fluid：设置了 max-width: 100%; 、 height: auto;

超大屏幕Jumbotron

基本结构

会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息

创建一个没有圆角的全屏幕，可以在 .jumbotron-fluid 类里头的 div添加 .container 或 .container-fluid 类来实现

信息提示框

基本结构

背景色

添加链接

.alert-link<br>

关闭提示框

.alert-dismissible

提示框动画

.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果

按钮

基本结构

修饰样式

尺寸：btn-(lg|sm)

块级按钮：btn-block

激活和禁用：active/disabled

按钮组:<br><div class="btn-group"><br>    <div class="btn">...</div><br>    <div class="btn">...</div><br>    .... ....<br></div>

尺寸：btn-group-(sm|lg)

垂直： btn-group-vertical

徽章

基本结构

修饰样式

药丸形状：badge-pill

进度条

基本结构

修饰样式

颜色：bg-(success|info|warning|danger)

尺寸：style="width: 百分比宽度; height: 30px;"

条纹：progress-bar-striped

动画：progress-bar-animated

<b>混合色彩：</b><br><div class="progress"><br>    <div class="progress-bar bg-success" style="width: 30%">Free Space</div><br>    <div class="progress-bar bg-warning" style="width: 50%">Warning</div><br>    <div class="progress-bar bg-danger" style="width: 20%">Danger</div><br></div><br>

分页

基本结构

修饰样式

激活： active

禁用： disabled

尺寸：pagination(-lg|sm)

列表组

基本结构

修饰样式

激活： active

禁用： disabled

链接列表项：list-group-item-action

卡片

基本结构

修饰样式

card-img-top：图片位于顶部

card-img-bottom：图片位于底部

<b>卡片背景图片：</b><br><div class="card" style="width: 400px;"><br>    <img src="..." /><br>    <div class="card-img-overlay"><br>        <h4 class="card-title">...</h4><br>        <p class="card-text">...</p><br>        <a href="#" class="card-link">...</a><br></div>

card-img-overlay：图片设置成内容的背景

下拉菜单

基本结构

修饰样式

下拉菜单中的标题：dropdown-header

激活： active

禁用： disabled

下拉菜单定位：dropdown-menu-right 右对齐打开， 默认为左侧打开

下拉菜单弹出方向：右边(dropright)  左边(dropleft) 上边(dropup) ,默认为下边弹出

按钮中设置下拉菜单： dropdown-toggle-split

折叠

基本结构

在 <a> 或 <button> 元素上添加 data-toggle="collapse" 属性

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

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

修饰样式

<b>默认显示：show</b><br><div id="demo3" class="collapse show">Lorem ipsum dolor text....</div><br>

手风琴效果：data-parent="#父类ID号"<br>

导航

基本结构

修饰样式

对齐方式：居中(justify-content-center)  右对齐(justify-content-end),默认左对齐 

垂直导航：flex-column

激活： active

选项卡：nav-tabs

胶囊导航：nav-pills

导航等宽：nav-justified

<b>动态导航选项卡：</b><br><ul class="nav nav-tabs"><br>    <li class="nav-item"><br>        <a class="nav-link active" data-toggle="tab" href="#home">Home</a><br>    </li><br>    <li class="nav-item"><br>        <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a><br>    </li><br>    <li class="nav-item"><br>        <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a><br>    </li><br> </ul><br> <br> <div class="tab-content"><br>    <div class="tab-pane active container" id="home">Home主体内容</div><br>    <div class="tab-pane container" id="menu1">menu 1 主体内容</div><br>    <div class="tab-pane container" id="menu2">menu 2 主体内容</div><br> </div><br>

导航栏

基本结构

修饰样式

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

激活：active

禁用：disabled

<b>折叠导航栏：</b><br><nav class="navbar navbar-expand-md bg-dark navbar-dark"><br>    <br>    <a class="navbar-brand" href="#"><img src="../images/jenny.jpg" alt="Logo" style="width: 40px;"></a><br>    <br>    <button class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavbar"><br>        <span class="navbar-toggler-icon"></span><br>    </button><br>    <div class="collapse navbar-collapse" id="collapsibleNavbar"><br>         <br>          <ul class="navbar-nav"><br>              <li class="nav-item"><br>                   <a class="nav-link" href="#">首页</a><br>              </li><br>               ... ... ...<br>            </ul><br>    </div><br> </nav><br>

导航栏的表单与按钮：form-inline

导航栏文本：navbar-text

固定导航栏：顶部(fixed-top)  底部(fixed-bottom)

面包屑导航

基本结构

<nav class="breadcrumb"><br>    <a class="breadcrumb-item" href="#">Home</a><br>    <span class="breadcrumb-item active">Bootstrap</span><br> </nav>

修饰样式

激活：active

表单

基本结构

<form class="card padded"><br>    <div class="form-group"><br>        <label for="email">用户名:</label><br>        <input type="email" class="form-control" id="email" placeholder="输入用户名"><br>    </div><br>    <div class="form-group"><br>        <label for="pwd">密码:</label><br>        <input type="password" class="form-control" id="pwd" placeholder="输入密码"><br>    </div><br>    <div class="form-check"><br>        <label class="form-check-label"><input class="form-check-input" type="checkbox"> Remember me</label><br>    </div><br>    <button type="submit" class="btn btn-primary">Submit</button><br> </form>

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

修饰样式

内联表单：form-inline

表单控件

input

textarea

select

checkbox

radio

输入框组

基本结构

<form><br>    <div class="input-group mb-3"><br>        <div class="input-group-prepend"><br>            <span class="input-group-text">@</span><br>        </div><br>        <input type="text" class="form-control" placeholder="Username"><br>    </div><br> <br>    <div class="input-group mb-3"><br>        <input type="text" class="form-control" placeholder="Your Email"><br>        <div class="input-group-append"><br>             <span class="input-group-text">@runoob.com</span><br>        </div><br>    </div><br></form>

修饰样式

前缀：input-group-prepend

后缀：input-group-append

文本：input-group-text

尺寸：input-group-(sm|lg)

自定义表单

基本结构

复选框

<form><br>    <div class="custom-control custom-checkbox"><br>        <input type="checkbox" class="custom-control-input" id="customCheck" name="example1"><br>        <label class="custom-control-label" for="customCheck">自定义复选框</label><br>    </div><br></form>

单选框

<form><br>    <div class="custom-control custom-radio"><br>         <input type="radio" class="custom-control-input" id="customRadio" name="example1" value="customEx"><br>         <label class="custom-control-label" for="customRadio">自定义单选框</label><br>    </div> <br></form>

控件显示在同一行：custom-control-inline

选择菜单

<form><br>    <select name="cars" class="custom-select-sm"><br>        <option selected>自定义选择菜单</option><br>        <option value="Google">Google</option><br>        <option value="Runoob">Runoob</option><br>        <option value="Taobao">Taobao</option><br>    </select><br></form>

滑块控件

<form><br>    <label for="customRange">自定义滑块控件</label><br>    <input type="range" class="custom-range" id="customRange" name="points1"><br></form>

文件上传

修饰样式

选择菜单大小：custom-select-(sm|lg)

轮播

基本结构

<div id="demo" class="carousel slide" data-ride="carousel"><br>    <br>    <ul class="carousel-indicators"><br>        <li data-target="#demo" data-slide-to="0" class="active"></li><br>        <li data-target="#demo" data-slide-to="1"></li><br>         ...... ......<br>    </ul><br>    <br>    <div class="carousel-inner"><br>        <div class="carousel-item active"><br>          <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg"><br>          <div class="carousel-caption"><br>              <h3>第一张图片描述标题</h3><br>              <p>描述文字!</p><br>          </div><br>     </div><br>     ...... ......<br>    </div><br>    <br>    <a class="carousel-control-prev" href="#demo" data-slide="prev"><br>        <span class="carousel-control-prev-icon"></span><br>    </a><br>    <a class="carousel-control-next" href="#demo" data-slide="next"><br>        <span class="carousel-control-next-icon"></span><br>    </a><br></div>

<b> </b>修饰样式

.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 切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类

模态框

基本结构

<br> <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">打开模态框</button><br><br> <br> <div class="modal fade" id="myModal"><br>    <div class="modal-dialog"><br>        <div class="modal-content"><br>            <br>            <div class="modal-header"><br>                <h4 class="modal-title">模态框头部</h4><br>                <button type="button" class="close" data-dismiss="modal">×</button><br>            </div><br>            <br>            <div class="modal-body">模态框内容..</div><br>           <br>           <div class="modal-footer"><br>               <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button><br>           </div><br>        </div><br>    </div><br> </div>

修饰样式

模态框尺寸： modal-(sm|lg)

动画：fade

提示框

基本结构

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

初始化：$('[data-toggle="tooltip"]').tooltip();

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

修饰样式

位置：data-placement

top：顶部

bottom：底部

left：左边

right：右边

支持HTML： data-html="true"

禁用：disabled

弹出框

基本结构

修饰样式

位置(data-placement)

top：顶部

bottom：底部

left：左边

right：右边

在鼠标点击元素外部区域来关闭弹出框

data-trigger="focus"

在鼠标移动到元素上显示，移除后消失的效果

data-trigger="hover"

滚动监听

基本结构设置步骤

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

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

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

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

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

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

修饰样式

小工具

基本结构

边框

添加或移除

border-0  无边框

border-top-0  顶部无边框

border-bottom-0   底部无边框

border-right-0  右边无边框

border-left-0  左边无边框

圆角：rounded/rounded-0/rounded-(circle|top|bottom|left|right)

响应式浮动： float-(sm|md|lg|xl)-(left|right)

浮动：float-(left|right)

居中对齐：mx-auto

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

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

修饰样式

flex布局

基本结构

<b>d-flex 类创建一个弹性盒子容器，并设置三个弹性子元素</b><br><div class="d-flex p-3 bg-secondary text-white"><br>    <div class="p-2 bg-info">Flex item 1</div><br>    <div class="p-2 bg-warning">Flex item 2</div><br>    <div class="p-2 bg-primary">Flex item 3</div><br></div><br>

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

修饰样式

水平方向(默认)：flex-row

垂直方向：flex-column，flex-column-reverse 用于翻转子元素

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

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

扩展：flex-grow-1 用于设置子元素使用剩下的空间，flex-shrink-1 用于设置子元素的收缩规则

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

<b>外边距：</b><br>.mr-auto 类可以设置子元素右外边距为 auto，即 margin-right: auto!important;<br>.ml-auto 类可以设置子元素左外边距为 auto，即 margin-left: auto!important;<br>

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

<b>内容对齐：</b><br>.align-content-* 来控制在垂直方向上如何去堆叠子元素，包含的值有：<br>.align-content-start (默认), <br>.align-content-end, <br>.align-content-center, <br>.align-content-between, <br>.align-content-around 和 .align-content-stretch<br>

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

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

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

响应式 flex 类

弹性容器

.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 据不同屏幕设备，延展一个单独子元素

多媒体对象

基本结构

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

修饰样式

多媒体对象嵌套(把新的 .media 容器放到 .media-body 容器中)

多媒体对象图片显示在右边(在 media-body 容器后添加图片)

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

定位多媒体图片位置：align-self-start(垂直顶部) align-self-center(垂直居中) align-self-end(垂直底部)