Bootstrap3 | 任先生的笔记库

# Bootstrap3

官方介绍

Bootstrap 3 (opens new window) 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

简单的说：

支持 less
响应式布局
移动端设备优先
依赖 jQuery

# 一、入门

# 1、下载

①CDN

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
/>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

②npm

npm install bootstrap@3.4.1

main.js

// 导入Bootstrap样式文件
import 'bootstrap/dist/css/bootstrap.min.css'

③ 引入源码的 dist 文件夹内容（预编译版）

bootstrap/
├── dist/     ✔
    ├── css/
    ├── js/
    └── fonts/

# 2、基本模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!-- [if lt IE 9]>
      <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif] -->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </body>
</html>

# 代码分析：

使用当前浏览器的最高版本的内核渲染

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

使用移动设备优先且禁止缩放功能

<meta name="viewport" content="width=device-width, initial-scale=1" />

解决 IE 9 以下版本对html 5新增标签、css 3Media Query 的不识别问题。

<!-- 条件注释 -->
<!-- [if lt IE 9]>
  <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif] -->

# 3、Bootstrap3.4.1 源码

https://github.com/twbs/bootstrap/archive/v3.4.1.zip

源码结构：

bootstrap/
├── less/      源码文件
│   ├── variables.less (变量定义)
│   ├── normalize.less (规范化样式)
│   └── scaffolding.less (基本全局样式 🚩)
├── js/
├── fonts/
├── dist/      预编译文件
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/      所有源码文件夹
    └── examples/

# 二、全局 CSS 样式

# 1、栅格系统

行(row)必须放在 container 布局容器中
列(column)必须小于 12，并且每列默认有padding: 0px 15px
实现方式：添加类名col-*-*

# 2、全局默认内容

最好是下载==Bootstrap3.4.1 源码==去源码 less 目录中查看对应组件、基础配置。

重点关注的几个.less 文件

variables.less ：例如@font-size-base: 14px
normalize.less
scaffolding.less
等等

# 3、拓展

① .sr-only：全称是 screen reader only，意为：（仅供）屏幕阅读器。

<!-- 例如： -->
<div class="alert alert-danger" role="alert">
  <!-- 普通用户 -->
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true">
    Enter a valid email address</span
  >
  <!-- 特殊人士 -->
  <span class="sr-only">Enter a valid email address</span>
</div>

仅仅为残障人士准备的，残障专用设备读取到备注信息，但是不会在普通设备上显示，不影响正常人的阅读。

② HTML5 针对 html tag 增加的属性：role 和 aria-。

<div role="checkbox" aria-checked="checked"></div>

role: html 辅助工具就可以认出这里的 div 实际上是个 button。
aria-: tag 辅助工具就会知道，这个 div 实际上是个 checkbox 的角色，为选中状态。

# 三、类名汇总

# 1、基本类名

.container
.col-xs-3
.col-md-offset-3
.row
.col-md-push-3

<div class="container"></div>

# 2、排版类名

list-unstyle
dl-horizontal

# 3、表格类名

响应式表格

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

①table 标签前提： .table

.table-striped
.table-bordered
.table-hover
.table-condensed

② tr、td 标签

.active 灰色
.success 绿色
.info 蓝色
.warning 黄色
.danger 红色

# 4、表单类名

基础类名

.form-control 对<input>、<textarea> 和 <select> 元素默认设置宽度属性为 width: 100%;
.form-control-static 静态控件，针对于<p>标签的纯文本内容
.form-group <label>标签和<input>、<textarea> 和 <select> 元素组成

①form 标签

.form-inline

内联表单:

<form class="form-inline">
  <div class="form-group">
    <label for="example">Amount</label>
    <!-- .input-group类 -->
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" placeholder="金额" />
      <div class="input-group-addon">.00</div>
    </div>
  </div>
</form>

.form-horizontal 此时内部的.form-group类似于.row

Bootstrap 默认情况下，control-label 的文本采用右对齐方式。

<form class="form-horizontal">
  <div class="form-group">
    <!-- 1、 -->
    <!-- 加上control-label后可以使用col-sm-3 -->
    <label for="inputEmail" class="col-sm-3 control-label">Email</label>
    <!-- 外套一个🚩div来使用col-sm-9 -->
    <div class="col-sm-9">
      <input type="email" class="form-control" id="inputEmail" placeholder="Email" />
    </div>
  </div>
  <!-- 2、 -->
  <div class="form-group">
    <!-- 列偏移 -->
    <div class="col-sm-offset-3 col-sm-9">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
  <!-- 3、 -->
  <div class="form-group">
    <label class="col-sm-3 control-label">Email</label>
    <div class="col-sm-9">
      <!-- 静态控件 -->
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
</form>

② .checkbox 、.radio 和 selec 标签的使用

<form>
  <!-- 常规 -->
  <div class="form-group">
    <label for="example">Amount</label>
    <input type="text" class="form-control" placeholder="金额" />
  </div>

  <!-- checkbox演示 -->
  <div class="checkbox">
    <label>
      <input type="checkbox" value="" />
      why it's great
    </label>
  </div>

  <!-- radio演示 -->
  <div class="radio">
    <label class="radio-inline">
      <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" />
      男
    </label>
    <label class="radio-inline">
      <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" />
      女
    </label>
  </div>

  <!-- select演示 -->
  <select class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</form>

# 5、按钮

按钮标签前提：.bt

① 样式

.btn-default 白色
.btn-primary 蓝色
.btn-success 绿色
.btn-info 蓝色
.btn-warning 黄色
.btn-danger 红色
.btn-link 链接

② 尺寸

.btn-block 可以将其拉伸至父元素 100%的宽度，而且按钮也变为了块级（block）元素。

# 6、图片

响应式图片

.img-responsive

图片形状

img-rounded
img-rounded
img-thumbnail

# 其他

① 关闭按钮

<button type="button" class="close">
  <span>&times;</span>
</button>

② 上下三角符号

<button type="button" class="btn btn-default">
  <span class="caret"></span>
</button>

③ 清除浮动

<div class="clearfix">...</div>

相当于：

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: ' ';
    display: table;
  }
  &:after {
    clear: both;
  }
}

④ 显示或隐藏

<div class="show">...</div>
<div class="hidden">...</div>

相当于：

.show {
  display: block !important;
}
.hidden {
  display: none !important;
}

⑤ 图标

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

# 四、Bootstrap 组件、JavaScript 插件

其实，通过上面的基础内容，我们已经可以使用 Bootstrap 了，但是使用 Bootstrap 组件、JavaScript 插件会使我们的开发更加便捷、高效。

①Bootstrap 组件：静态的

②JavaScript 插件：动态交互 ✨ 的

其中，data-toggle 指以什么事件触发，data-target 指事件的目标

学习建议：结合项目使用

← 格式化上下文【Bootstrap4】 →