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();

导航

Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式

普通样式示例：标签页

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

胶囊式标签页

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

• 胶囊垂直方向折叠
  • .nav-stacked
• 两端对齐标签页
  • .nav-justified
• 禁用链接
  • 对任何导航组件（标签页、胶囊式标签页），都可以添加 .disabled 类，从而实现链接为灰色且没有鼠标悬停效果。

下拉菜单示例：

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

导航条

务必使用 <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>