网格系统
资源库
<!-- 新 Bootstrap4 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js --> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <!-- 最新的 Bootstrap4 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
移动设备优先
为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
width=device-width 表示宽度是设备屏幕的宽度
initial-scale=1 表示初始的缩放比例
shrink-to-fit=no 自动适应手机屏幕的宽度
容器类
.container 类用于【固定宽度】并支持响应式布局的容器
.container-fluid 类用于 【100% 宽度】，占据全部视口（viewport）的容器
均有一定的内外边距
规则
将container 的宽度划分为12等份，内容放在列（.col-*-*）中，列放在行(.row)中
其中第一个星号表示屏幕设备类型，第二个星号是从1到12的数字
偏移列 offset-*-*第二个星号 表示1到11的数
- .col- 针对所有设备
- .col-sm- 平板 - 屏幕宽度等于或大于 576px
- .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
- .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
- .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
图像形状
.rounded【圆角图片】.rounded-circle【椭圆形图片】.img-thumbnail【略缩图】.float-right【图片右对齐】.mx-auto(margin:auto)和 .d-block (display:block)【图片居中对齐】.img-fluid【设置响应式图片】相当于 max-width:100%;height:auto;
轮播
<!--指示符--> <div id=“” class=”carousel slide” data-ride=”carousel” > <ul class=”carousel-indicators”> <li data-target=”” data-slide-to=”” class=”active”></li> </ul> <!--图片--> <div class=”carousel-inner”> <div class=”carousel-item active”> <img src=”” > </div> </div> <!--左右切换按钮--> <a class="carousel-control-prev" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <div>
.carousel 【创建一个轮播】.slide【切换图片的过渡和动画效果】
data-ride=“carousel” 【触发轮播动作】
.carousel-indicators 【轮播指示符】class=“item active” 【表示轮播一张张图片】
.carousel-inner【添加要切换的图片】 .carousel-item【指定每个图片的内容】
.carousel-control-prev【添加左侧按钮，点击返回上一张】 .carousel-control-next【添加右侧按钮，点击切换到下一张】
.carousel-control-prev-icon,.carousel-control-next-icon（与 .carousel-control-prev 一起使用，设置左侧的按钮）
使用==data-slide-to==来向轮播传递一个原始滑动索引，data-slide-to="2"将把滑块移动到一个特定的索引，索引从 0开始计数
data-toggle指以什么事件类型触发, 一般事件会作用到一个标签对象，如果是其他标签对象，就需要使用data-target指事件的标签目标。所以data-loggle和data-target有时会结合一起使用
扩展
data-ride=“carousel” 属性用于标记轮播在页面加载时就开始动画播放；属性 data-slide接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。
.carousel-inner img { width: 100%; height: 100%; }
滚动监听（scrollspy）
即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。
<body data-spy="scroll" data-target=".navbar" >
data-spy="scroll"监听目标元素
使用 data-spy=“scroll” 的元素需要将其 CSS position 属性设置为 “relative” 才能起作用
data-target属性的值为导航栏的id或class，这样才可以联系上可滚动的区域
小工具
边框
1）添加移除边框
.border【添加】.border【移除四边】.border-left-0 【溢出左边】
2）颜色
例：border-white
3）圆角
rounded
浮动
.float-right【右浮动】.clearfix【清除浮动】
.float-*-left【在不同的屏幕上左浮动】
居中对齐
.mx-auto
宽度
w-*
高度
h-*
进度条
<div class=”progress”> <div class=”progress-bar” style=”width:70%”>可以添加文本</div> </div>
【在第一个大盒子中添加 style=”height:”改变进度条高度】
【第二个盒子 class中添加 bg-* 改变颜色】
.progress-bar-striped【条纹进度条】
.progress-bar-animated 【动画进度条】
【混合色彩】
徽章(badges)
I am a<span class=”badge badge-*”>girl
.badge类加上带有指定意义的颜色类添加到元素上即可，徽章的大小根据父元素大小变化而变化
.badge-pill 【药丸形状徽章】
.spinner-border-【加载中效果，文本颜色类设置不同颜色】.spinner-grow-【闪烁的加载效果】**【创建加载中效果大小（sm）】
下拉菜单
<div class=”dropdown(下拉菜单)”> <button type=”button” class=”btn btn-primary dropdown-toggle（切换，开关）” data-toggle=”dropdown”>Dropdown button </button> <div class=”dropdown-menu【设置实际下拉菜单】”> .dropdown-menu-right【右对齐 】 <a class=”dropdown-item” href=”#”>one</a> … … </div> </div>
使用按钮或链接打开下拉菜单；
.dropdown-divider【水平分割线】
.dropdown-header【下拉菜单中添加标题】
下拉菜单弹出方向设置right/up/bottom/left
<div class=”btn-group dropright”> <button type=”button” class=”btn btn-secondary dropdown-toggle” data-toggle=”dropdown” aria-haspopup=”ture” aria-expanded=”false”> Dropright </button> <div class=”dropdown-menu”> <a class=”dropdown-item” href=”#”></a> … … </div> </div>
.dropdown-item-text【下拉菜单中的文本项】
按钮中的下拉菜单
<div class=”container”> <div class=”btn-group”> <button type=”button” class=”btn btn-primary”>anjiu</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=”#”></a> … … </div> </div> </div>
导航
.nav .nav-item .nav-link
<ul class=”nav”> <li class=”nav-item”> <a class=”nav-link” href=”#”></a> </li> </ul>
.justify-content-center【居中显示】
.flex-colum 【垂直】
.nav-tabs【将导航转化为选项卡】
.nav-pills 【将导航项设置成胶囊形状】
.nav-justified 【导航齐行等宽显示】
动态选项卡
<ul class=”nav nav-tabs”> <li class=”nav-item”> <a class=”nav-link active” data-toggle=”tab” href=”#home”></a> data-toggle=”tab”【选项卡动态切换】 </li> <li>…</li> </ul>
… … … <div class=”tab-content”> .tab-content <div class=”tab-pane active container” id=”home”>…</div> .tab-pane【】 <div>…</div> </div>
选项卡是动态可切换的，在每个链接上添加 data-toggle=“tab” 属性。 在每个选项对应的内容的上添加 .tab-pane 类，对应选项卡内容的
元素使用 .tab-content 类 。。
如果你希望有淡入效果可以在 .tab-pane 后添加 .fade类
导航栏
<ul class=”navbar-nav”> <li class=”nav-item”> <a class=”nav-link” href=”#”></a> </li> </ul>
垂直导航栏即去掉 navbar-expand-sm/md/xl/lg
居中对齐导航栏
.navbar-brand 【高亮显示】.navbar-brand【图片自适应导航栏】
导航栏使用下拉菜单
表单
表单控件(form-control)【input textarea checkbox radio select】
语法
<div class=”form-group”> <label for=””> <input type=”” class=”form-control” id=””> </div>
For与id 的值相同
`
<label for="element_id">l`abel 绑定的元素的 id。聚焦 <div class=”form-check”> <label class=”form-check-label”>【复选框】 <input type=”checkbox” class=”form-check-input” value=””> </label> </div>
.form-check-inline 【复选框显示在同一行】
.radio-inline 【单选框显示在一行】
布局 【堆叠表单（垂直方向），内联表单（水平方向）】
堆叠表单：：
<form> <div class=”form-group”> <label for=””></label> <input type=”” class=”form-control” id=””> </div> </form>
内联表单只需在form 元素上添加 .form-inline
输入框组
<form> <div class=”input-group【输入框组】”> <div class=”input-group-prepend【可以在输入框的前面添加文本信息】”> <span class=”input-group-text【设置文本的样式】”></span> </div> <input type=”text” class=”form-control【表单控件】” placeholder【占位文本】=””> </div> </form>
.input-group-sm输入框大小
自定义表单
复选
<form> <div class=”custom-control custom-checkbox”> <input type=”checkbox” class=”custom-control-input” id=”customCheck” name=””> <label class=”custom-control-label” for=”custom-Check”></lable> </div>
如果要自定义一个复选框，可以设置
为父元素
自定义选择菜单
<select name=”” class=”custom-select-sm/” > <option></option> </seletct> 【自定义滑块控件】 <input type=”range” class=”custom-range” > 【自定义文件上传控件】 <form> <div class=”custom-file”> <input type=”file” class=”custom-file-input id=”customFile”> <label class=”custom-file-label” for=”customFile”><label> </div> </form>
