【前端框架】bootstrap框架：

这是一款开源免费的前端框架，能够帮助我们很快速的搭建一个页面，优化代码，符号w3c标准，并且兼容IE6及以下浏览器。

为什么要使用框架：会少消耗点带宽

一、Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

二、首先进入bootstrap官网，可以看到有几种下载引入代码的方式

java 引用bootstrap 启动 如何引用bootstrap_html5

1.可以选择下载Bootstrap，下载后解压可看到 css是样式文件夹，里面包含了所有构造样式类，js是基于jQuery的行为文件夹，font用于存储图标。使用的时候再将 需要的文件引入,需要注意的是 在引入js文件前需要先引入jQuery的js文件，因为Bootstrap 的所有 JavaScript 插件都依赖 jQuery，如果顺序引反则会没有效果。这种在没有网络的情况下也可以使用

java 引用bootstrap 启动 如何引用bootstrap_java 引用bootstrap 启动_02

2.为了兼容手机端，在自己编写的html文件里还需要添加一条

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

在bootstrap中文文档中，有很多已经编写完成，使用时直接调用类 即可。

3.如果不想下载bootstrap,也可以直接在线引入网络链接，

至少需要引入三个文件

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https:///npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https:///npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https:///npm/bootstrap@3.3.7/dist/js/bootstrap.min.js">

以下是一个最简单的例子 Bootstrap 页面

<!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:///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:///npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https:///npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

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