Bootstrap4
1.网络系统
规则
- 1.屏幕最多分为12列（同一行数字相加应为12）
- 2.用行来创建水平的列组
- 3.为自动设置外边距内边距，需将网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中
- 4.预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
5大网络类：
col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
如：
<div class="row"> <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 bg-success"> RUNOOB </div> <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 bg-warning"> 菜鸟教程 </div> </div>
偏移列：
<div class="container-fluid"> <div class="row"> <div class="col-md-4 bg-success">.col-md-4</div> <div class="col-md-4 offset-md-4 bg-warning">.col-md-4 .offset-md-4</div> </div> <div class="row"> <div class="col-md-3 offset-md-3 bg-success">.col-md-3 .offset-md-3</div> <div class="col-md-3 offset-md-3 bg-warning">.col-md-3 .offset-md-3</div> </div> <div class="row"> <div class="col-md-6 offset-md-3 bg-success">.col-md-6 .offset-md-3</div> </div> </div>
即：
偏移列通过 offset-- 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。
例如：.offset-md-4 是把.col-md-4 往右移了四列格。
2.图像形状
.rounded类 让图片有圆角
.rounded-circle类 椭圆形图片
.img-thumbnail 类 用于设置图片缩略图即图片有边框
float-right float-left 图片对齐
.mx-auto (margin:auto) 和 .d-block (display:block) 类 设置图片居中对齐
.img-fluid类 （max-width: 100%; 、 height: auto;）根据屏幕大小自动调节
3.轮播（carousel）
提示符
<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>
class=“carousel slide”---- 整个div是轮播，轮播动画方式是slide
data-ride=“carousel”----页面加载就开始轮播，如果删除就不会轮播
class=“active”----当前位置
data-slide-to=“2”---- 轮播的位置 ，将小长方形移到第二块，索引从0开始
.carousel-indicators----代表轮播时候的指标（就是一列小长方形）轮播时可显示目前是第几张图。
轮播图片
<!-- 轮播图片 --> <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>
.carousel-inner----添加要切换的图片
.carousel-item----指定每个图片的内容
class=“carousel-item active”----轮播的第一张图 ，，，，两个active会卡住只能一个div有一个active
在每个 <div class="carousel-item">内添加 <div class="carousel-caption">来设置轮播图片的描述文本``
<div class="carousel-item"> <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg"> <div class="carousel-caption"> <h3>第一张图片描述标题</h3> <p>描述文字!</p> </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>
.carousel-control-prve----添加左侧按钮
.carousel-control-next—添加右侧按钮
.carousel-control-prev-icon----与 .carousel-control-prev 一起使用，设置左侧的按钮
.carousel-control-next-icon----与 .carousel-control-next 一起使用，设置右侧的按钮
4.滚动监听(scrollspy)：内容跟随滚动条而滚动
方法：
首先要确定监听对象一般为body,所以给其设置相对定位position-relative,为实现滚动监听要添加data-spy="scroll",然后添加 data-target 属性，它的值为导航栏的 id 或 class (.navbar)
其次，创建导航栏(导航栏和滚动内容在同一个div中)可滚动项元素上的 id (<div id="section1"> )必须匹配导航栏上的链接选项 （<a href="#section1">)
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Section 4 </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#section41">Link 1</a> <a class="dropdown-item" href="#section42">Link 2</a> </div> </li> </ul> </nav>
5.下拉菜单
指定下拉菜单：.dropdown类
大体方法：
如下例子：
<div class="container"> <div class="dropdown"> <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div>
分割线:将其中的<a>前重新放入入一个新盒子中并在该<div>中添加.dropdown-divider 类来创建分割线
<div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Another link</a>
标题：用.dropdown-header来添加标题
<a class="dropdown-item" href="#">Link 3</a> <h5 class="dropdown-header">Dropdown header</h5> <a class="dropdown-item" href="#">Another link</a>
下拉菜单弹出方向：在总<div>中添加(默认弹出方向为下)
右弹出:.dropright类
左弹出：.dropleft类
上弹出：.dropup类
定位：在元素 .dropdown-menu 类后添加.dropdown-menu-right类----右对齐
禁用、高亮选项在子元素中添加.disabled类为禁用选项，添加.active类高亮（蓝色背景）
6.导航
在<ul>元素上添加.nav类，在每个<li>选项上添加.nav-item类，在每个链接上添加.nav-link类可创建简单的水平导航栏
<div class="container"> <h2>导航</h2> <p>简单的水平导航:</p> <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>
上述其中disabled为禁选
居中对齐：在<ul>中添加.justify-content-center类
导航右对齐：在<ul>中添加.justify-content-end类
垂直导航：在<ul>中添加.flex-column类
选项卡:在<ul>中添加<.nav-tabs>类,然后对所选中的选项用.active类来标记
动态选项卡(选项卡动态可切换):
在每个链接上添加 data-toggle=“tab” 属性。 然后在每个选项对应的内容的上添加 .tab-pane 类，对应选项卡内容的 div 元素使用 .tab-content 类 。淡入效果可以在 .tab-pane 后添加 .fade类:
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a> </li> <div id="menu2" class="container tab-pane fade"><br> <h3>Menu 2</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> </div>
胶囊导航：在<ul>中添加.nav-pills类
齐行等宽：添加.nav-justified类
7.导航栏一般在页面顶部
大体方法：要先创建一个导航栏.navbar类，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠，可通过删除此类来创建垂直导航栏)，然后创建导航栏选项即在<ul>元素中添加.navbar-nav类，在<li>元素上添加.nav-item类，<a>元素上使用.nav-link类
<nav class="navbar navbar-expand-sm bg-light"> <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>
即
品牌/Logo:在<a>元素中添加.navbar-brand类高亮显示
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Brand/logo --> <a class="navbar-brand" href="#">Logo</a> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li>
固定导航栏:.fixed-top类----页面头部、.fixed-bottom类----页面底部
折叠导航栏：点击来显示导航栏
创建折叠导航栏：在按钮上添加class="navbar-toggler", data-toggle="collapse" 与 data-target="#thetarget"类，然后在设置了class="collapse navbar-collapse" 类的div上包裹包裹导航内容（链接）, div 元素上的 id 匹配按钮 data-target 的上指定的 id:
<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>
导航栏文本:.navbar-text类来设置非链接文本，水平对齐，颜色与内边距一样
</ul> <!-- Navbar text--> <span class="navbar-text"> Navbar text </span> </nav>
8.多媒体对象
创建：在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果:
基础多媒体对象：
<div class="media border p-3"> <img src="https://static.runoob.com/images/mobile-icon.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;"> <div class="media-body"> <h4>菜鸟教程</h4> <p>学的不仅是技术，更是梦想！！！</p> </div> </div>
多媒体对象嵌套：一个多媒体对象中包含另外一个多媒体对象
<div class="container mt-3"> <h2>多媒体对象嵌套</h2> <p>多媒体对象可以多个嵌套（一个多媒体对象中包含另外一个多媒体对象）:</p><br> <div class="media border p-3"> <img src="https://static.runoob.com/images/mobile-icon.png" alt="John Doe" 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="https://static.runoob.com/images/mobile-icon.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;"> <div class="media-body"> <h4>菜鸟教程</h4> <p>学的不仅是技术，更是梦想！！！</p> </div> </div> </div> </div> </div>
在.media-boby容器后添加图片，头像图片显示在右侧，若要让其在左侧，则相反
.align-self-*相关类：设置多媒体对象的图片显示位置
- align-self-start:头部
- align-self-center:居中
- align-end:底部
9.按钮组：在div元素中添加.btn-group类来创建按钮组
<div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div>
- btn-group-vertical设置垂直按钮组
- .btn-group-lg/sm设置按钮组大小
内嵌按钮组：将要嵌入下拉菜单的按钮放入一个div，并在该div中添加.btn-group类，然后在该div加入第二层div来设置下拉菜单
<div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Sony </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Tablet</a> <a class="dropdown-item" href="#">Smartphone</a> </div> </div> </div>
