Bootstrap

1. 介绍

传统开发模式下，bootstrap 是一个配合 jQuery 使用的前端UI框架。可以帮助我们快速的构建前端WEB项目。

主要提供了以下功能

• 全局的CSS样式
• web项目中常见的组件
• 提供了常用的插件

bootstrap官网: Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网

2. 引入bootstrap

bootstrap 是依赖于 jQuery的，所以也需要引入 jQuery。

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

3. 全局 CSS 样式

其实就是 bootstrap 预先定义了很多类(class)，并对这些类赋予了特定样式，我们可以使用这些类，制作想要的页面效果。我们所学习的也无非就是 了解每个类的特定样式是什么。

3.1 样式初始化 Normalize.css

为了增强跨浏览器渲染的一致性，使用了 Normalize.css，进行页面样式的初始化。Normalize.css是一个 CSS 重置样式库

3.2 布局容器

.container 类用于固定宽度并支持响应式布局的容器。

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

3.3 栅格化系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，系统会自动将每一行分为12列，使用特定的类，让网页布局随着屏幕或视口（viewport）尺寸的变化而变化。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，行（row）必须包含在 .container 中，只有列（column）可以作为行（row）的直接子元素，你的内容应当放置于列（column）内。

/*col-xs-6 代表在视口宽度(<768px)时, 该元素占据6列(也就是 50%)*/
/*col-md-4 代表在视口宽度(992px--1200px)时, 该元素占据4列(也就是 33.3%)*/
<div class="container">
  <div class="row">
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  </div>
</div>

3.3.1 屏幕尺寸划分

• xs：超小屏幕 手机 小于768px
• sm：小屏幕 平板 (≥768px)
• md：中等屏幕 桌面显示器 (≥992px)
• lg：大屏幕 大桌面显示器 (≥1200px)

3.4 表格

• .table-striped 条纹状表格

• .table-bordered 带边框表格

• .table-hover 鼠标悬停效果

<table class="table">
  ...
</table>

3.5 表单

单独的表单控件会被自动赋予一些全局样式。
所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。
将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

3.6 其他

除此之外，还提供了很多的类，用于控制样式，可以参考官方文档。

4. 组件

Bootstrap 自带了大量可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

常用组件其实就是 bootstrap 利用标签和类，为我们实现了网页当中常见的效果，比如下拉菜单、导航、警告框等，供我们参考使用。

4.1 字体图标

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

4.2 导航

<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>

4.3 分页

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><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="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

5. 插件

jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以认为就是具备了交互能力的组件。

5.1 模态框

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <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" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </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>
  </div>
</div>