Bootstrap 的基本使用方法

使用步骤

第一步：下载

https://v3.bootcss.com/getting-started/#download

第二步：导入
把下载的解压缩，然后把整个文件拷贝到工程目录下。然后再 head 标签引入（这里要看是引用 js 还是 css）

<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/>

按钮

要先写基础类名 “.btn” ，后面再添加其他样式，才好看。

普通类型按钮

btn
- 为按钮添加基本样式
btn-default
- 默认标准按钮样式
btn-primary
- 原始按钮样式
btn-danger
- 危险动作按钮
btn-success
- 成功按钮样式
btn-info
- 弹出信息按钮样式
btn-warning
- 警告按钮样式
btn-link
- a 标签按钮样式

示例：

        <button class="btn"> 按钮 </button><button class="btn btn-default"> 按钮 </button>

标识尺寸类按钮

btn-lg
- 制作一个大按钮
btn-sm
- 制作一个小按钮
btn-xs
- 制作一个超小按钮

示例（可以与之前的普通按钮混合）：

    <!-- 制作一个大的成功按钮 --><button class="btn btn-lg btn-success">按钮</button><button class="btn">按钮</button><button class="btn btn-danger btn-sm">按钮</button><button class="btn btn-xs">按钮</button>

标识状态按钮类名

active
- 按钮被点击样式
btn-block
- 块级元素（宽度为父级的 100% ）
disabled
- 不可点击的样式

示例：

    <button class="btn active">按钮</button>

和 layui 不同
layui 的类名可以定义在任何标签上，不止 button 标签，而 bootstrap 只能用在 button 标签效果，用在其他标签会失去部分标签

表格

注意，这里也是要先写明 table 基础样式

table
- 为标签添加基本样式（只有横向分割线）
table-striped
- 在 tbody 中添加斑马形式条纹
table-bordered
- 为所有表格的单元格添加边框
table-hover
- 在任意一行启用鼠标悬停状态
table-condensed
- 让表格紧凑

示例：

<table class="table table-striped table-bordered table-hover table-condensed"><tr><td class="success">单元格</td><td class="info">单元格</td></tr><!-- warm warning --><tr class="active"><td class="warning">单元格</td><td class="danger">单元格</td></tr><tr><td>单元格</td><td>单元格</td></tr></table>

用于 tr，th，td 的类名

active
- 将悬停的颜色应用在行或者单元格上
success
- 标识成功的颜色
info
- 表示信息的颜色
warning
- 显示警告的颜色
danger
- 显示危险的操作

响应式表格
通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。

分页

普通类名

pagination
- 基础类名

状态类名

active
- 让标签处于活动状态颜色
disabled
- 让标签处于无法点击状态

大小类名

pagination-lg
- 变大
pagination-sm
- 变小

示例：

<ul class="pagination pagination-lg"><li class="disabled"><a href="">prev</a></li><li class="active"><a href="">1</a></li><li><a href="">2</a></li><li><a href="">3</a></li><li><a href="">4</a></li><li><a href="">next</a></li>
</ul>

翻页

pager
- 翻译基础类名
previous
- 把链接指向前
next
- 把链接向后

注意：可以添加 disable 比如（previous disable）来表达禁用

<ul class="pager"><li class="previous disabled"><a href="">上一页：寒假放假通知</a></li><li class="next"><a href="">下一页：五一放假通知</a></li>
</ul>

栅格布局

一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

什么是网格（Grid）？
网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）

广泛应用于打印设计中的设计布局和内容结构。快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。

布局

基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。
渐进增强
随着屏幕大小的增加而添加元素。
响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

dd	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
`.container` 最大宽度	None （自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12	.col-sm-	.col-md-	.col-lg-
最大列（column）宽	自动	.~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

container
- 基础类名
row
- 定于行类名
col-*-*
- 定义每个单元的样式
clearfix visible-*
- 定义该单元只能在哪个页面宽度下可见
col-md-offset-*
- 等份偏移量
在 row 下继续以 row 为类名的，可以嵌套单元格。
col-md-push-*、ol-md-pull-*
- - 范围是从 1 到 11。
- 改变列的顺序

示例：基础框架

<div class="container"><div class="row"><div class="col-xs-1 col-sm-3 col-md-4"><div style="background:red; color:#fff; margin:0 -15px;">第一等份</div></div><!-- <div class="clearfix visible-xs">我只能在移动设备上看到</div> --><div class="col-xs-6 col-sm-5 col-md-4"><div style="background:blue; color:#fff; margin:0 -15px;">第二等份</div></div><div class="col-xs-5 col-sm-4 col-md-4"><div style="background:green; color:#fff; margin:0 -15px;">第三等份</div></div></div></div>

示例：嵌套单元格

<!-- 可以嵌套单元格 --><div class="container" style="margin-top:20px;"><div class="row"><div class="col-xs-1 col-sm-3 col-md-2"><div style="background:red; color:#fff;">第一等份</div></div><!-- <div class="clearfix visible-xs">我只能在移动设备上看到</div> --><div class="col-xs-6 col-sm-5 col-md-4 col-md-offset-2"><div style="background:blue; color:#fff;"><div class="row"><div class="col-md-6" style="background:red">子嵌套层1</div><div class="col-md-6" style="background:gray">子嵌套层2</div></div><div class="row"><div class="col-md-6" style="background:black;">子嵌套层3</div><div class="col-md-6" style="background:blue;">子嵌套层4</div></div></div></div><div class="col-xs-5 col-sm-4 col-md-4"><div style="background:green; color:#fff;">第三等份</div></div></div></div>

轮播图

第一步：导入css和js文件

  <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"><script src="jquery.min.js"></script><!-- <script src="bootstrap-3.3.7-dist/js/popper.js"></script> --><script src="bootstrap-3.3.7-dist/js/bootstrap4.min.js"></script>

第二步：按照 bootstrap 提供的 html 中的 class 类名以及标签属性写

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators --><!-- 指示符 --><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><!-- Wrapper for slides --><!-- 轮播图片 --><div class="carousel-inner" role="listbox"><div class="item active"><img src="..." alt="..."><div class="carousel-caption">...</div></div><div class="item"><img src="..." alt="..."><div class="carousel-caption">...</div></div>...</div><!-- Controls --><!-- 左右切换按钮 --><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>
</div>

弹出框

第一步导入css和js文件

 <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"><script src="jquery.min.js"></script><script src="bootstrap-3.3.7-dist/js/bootstrap4.min.js"></script>

模板代码

<div class="modal fade" tabindex="-1" role="dialog"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header">//关闭按钮<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>//头标题<h4 class="modal-title">Modal title</h4></div><div class="modal-body">//中间文体部分<p>One fine body&hellip;</p></div><div class="modal-footer">//底部关闭按钮<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>//底部保存按钮<button type="button" class="btn btn-primary">Save changes</button></div></div><!-- /.modal-content --></div><!-- /.modal-dialog -->
</div><!-- /.modal -->

js 代码

$('#one').modal();

导航条

务必使用 <nav> 元素，或者，如果使用的是通用的 ``

` 元素的话，务必为导航条设置 role=“navigation” 属性，这样能够让使用辅助设备的用户明确知道这是一个导航区域。

使用 nav 标签

<nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Brand</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</nav>

添加图标

<nav class="navbar navbar-default"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" href="#"><img alt="Brand" src="..."></a></div></div>
</nav>

表单

<form class="navbar-form navbar-left" role="search"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button>
</form>

按钮

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

文本

<p class="navbar-text">Signed in as Mark Otto</p>

固定在顶部

<nav class="navbar navbar-default navbar-fixed-top"><div class="container">...</div>
</nav>

面包屑导航
各路径间的分隔符已经自动通过 CSS 的 :before 和 content 属性添加了。

<ol class="breadcrumb"><li><a href="#">Home</a></li><li><a href="#">Library</a></li><li class="active">Data</li>
</ol>
<style>.breadcrumb > li + li:before {color: #666;font-weight: bold;content: "> ";font-family: "宋体";padding: 0 5px;
}
</style>

选项卡

ID 名字要一一对应

<ul class="nav nav-pills"><li class="active"><a href="#home" data-toggle="tab">高能新闻</a></li><li><a href="#abc" data-toggle="tab">公告</a></li><li><a href="#ios" data-toggle="tab">项目动态</a></li><li class="dropdown"><a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">产品中心<b class="caret"></b></a><ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"><li><a href="#jmeter" tabindex="-1" data-toggle="tab">扫地机器人</a></li><li><a href="#ejb" tabindex="-1" data-toggle="tab">无人飞机</a></li></ul></li></ul><div class="tab-content"><div class="tab-pane fade in active" id="home"><p>高能新闻内容</p></div><div class="tab-pane fade" id="abc"><p>公告内容</p></div><div class="tab-pane fade" id="ios"><p>项目动态内容</p></div><div class="tab-pane fade" id="jmeter"><p>扫地机器人内容</p></div><div class="tab-pane fade" id="ejb"><p>无人机对应内容</p></div></div>