bootstrap框架的基本使用

一、概述

①当下最流行的前端UI框架（有预制界面组件），组件简洁大方，代码规范精简，界面自定义性强，可以有效提高web开发效率

②有自己的生态圈，不断的更新迭代。提供了一套简洁、直观、强悍的组件。标准化的html+css编码规范。让开发更简单，提高了开发的效率。

③虽然界面组件样式已经定义好了，但是扩展性相对较强，也就是说我们还可以自定义，修改默认样式

二、版本

①2.x.x 停止维护，兼容性好，但是代码不够简洁，功能不够完善。

②3.x.x 目前使用最多，稳定，但是放弃了IE6-IE7，对IE8支持但是界面效果不好，偏向用于开发响应式布局、移动设备优先的 WEB 项目。

③4.x.x 测试阶段，更偏响应式，移动设备。

三、文档

①英文文档：https://getbootstrap.com/docs/4.1/getting-started/introduction/

②中文文档：bootstrap中文网、菜鸟教程、css88

四、基本模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <!--要求当前网页使用浏览器最高版本的内核来渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1，user-scalable=0">
    <!-- 优先加载和浏览器解析：上述3个meta标签*必须*放在最前面，任何其他内容都必须跟随其后！ -->
    <title>Bootstrap基本模板</title>

    <!-- 引入Bootstrap css文件 ：Bootstrap 核心样式-->
    <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">

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

    <!-- 引入jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="lib/jquery/jquery.js"></script>
    <!-- 引入 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="lib/bootstrap/js/bootstrap.js"></script>
  </body>
</html>

五、normalize.css

①bootstrap为了增强跨浏览器表现的一致性，我们使用了Normalize（是一个css样式重置库）

②normalize.css和自己写的reset.css的异同：

都是重置样式库，都是为了增强浏览器的表现一致性
但是normalize不会重置已经一致的元素
比如：ul，reset.css 因为需求会设置list-style:none ，但是normalize.css 不会重置ul样式，因为本身已经在每个浏览器表现一致的元素

六、布局容器

①响应式容器：固定宽度

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

②流式布局容器：全屏幕宽度的容器使用，填满你视口的整个宽度

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