BootStrap 入门

  • 带有 min 的文件为压缩文件，所有代码在一行，为了减小文件所占大小。
  • .map 文件的作用，在调试的时候，可以将压缩的代码映射成未压缩的代码，方便调试。
  • 官方模板 
    <!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 href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.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://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>
  • 简化模板 
    <!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">
    <title>Bootstrap 101 Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>

响应式布局

  • 同一套页面可以兼容不同分辨率的设备。

  • 响应式布局依赖于栅格系统：将一行平均分成 12 个格子，可以指定元素占几个格子。

  • 步骤：

    1. 定义容器。样式：
      • container：两边留白
      • container-fluid：每一种设备都是 100% 宽度，两边没有留白
    2. 定义行。样式：row
    3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
    • xs：超小屏幕 手机 (<768px)
    • sm：小屏幕 平板 (≥768px)
    • md：中等屏幕 桌面显示器 (≥992px)
    • lg：大屏幕 大桌面显示器 (≥1200px)

  • 一行中如果格子数目超过 12，则超出部分自动换行。

  • 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。例如设置 col-sm-3 ，则在 md 设备上也是占 3 个格子。

  • 栅格类属性不向下兼容，如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行(即 12 个格子)。

  • 例子：

    <!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">
    <title>Bootstrap 101 Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
        .inner{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <!--   在lg大屏幕上占一行     -->
        <!--   在md屏幕上占一行     -->
        <!--   当宽度小于md最小宽度,但大于等于sm最小宽度的时候，占两行 -->
        <!--   宽度小于sm最小宽度的时候，占4行，每个元素都占12个格子  -->
        <div class="col-md-3 col-sm-6 inner">格子</div>
        <div class="col-md-3 col-sm-6 inner">格子</div>
        <div class="col-md-3 col-sm-6 inner">格子</div>
        <div class="col-md-3 col-sm-6 inner">格子</div>
    </div>
</div>
</body>
</html>

CSS 全局样式

  • 按钮
    • 可以为 <a>、<button>、<input> 添加按钮类
    • <!--如果a被于在当前页面触发某些功能，而不是用于链接其他页面或链接当前页面中的其他部分-->
<!--那么，务必为其设置 role="button" 属性。-->
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
  • 图片
    • 响应式：
      • 让其在小屏幕上也能占 100%，样式： .img-responsive
      • 如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类(没有屏幕大的图片居中显示)
      • <img src="img/logo.jpg" class="img-responsive center-block">
    • 图片形状
      • <img src="..." class="img-rounded">：方形
      • <img src="..." class="img-circle"> ： 圆形
      • <img src="..." class="img-thumbnail"> ：相框
  • 表格
    • .table：基本表格
    • .table-bordered：带边框的表格
    • .table-hover ：鼠标悬停
    • 可以通过状态类来为表格的每行设置颜色
    • 将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于 768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。 
      <div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
  • 表单
    • .form-control：在 input、select 等元素上使用
    • 将 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>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

组件

  • 导航条
  • 分页条

JS 插件

  • 轮播图：Carousel