01 Bootstrap基础环境

Bootstrap 包的内容

1. 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
2. CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的
3. class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
4. 组件：Bootstrap包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
5. 插件：Bootstrap 包含了十几个自定义的 jQuery 插件
6. 定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery插件来得到您自己的版本。

环境

1. css

<link href="bootstrap/bootstrap.min.css" rel="stylesheet">

2. JS

  <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) ，
  	在bootstrp下载里面是不包含的，需要自己重新下载-->
  <script src="bootstrap/jquery.min.js"></script>
  <!-- 包括所有已编译的插件 -->
  <script src="bootstrap/bootstrap.min.js"></script>

3. 其他

<!-- 
width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。
通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。
注意，这种方式我们并不推荐所有网站使用，还是要看您自己的情况而定！
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

4. 响应式图像

<!-- 通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好-->
<img src="..." class="img-responsive" alt="响应式图像">

浏览器兼容