Bootstrap概述

时间 2019-11-11

原文原文链接

前面的话

　　Bootstrap是简单、灵活的用于搭建WEB页面的HTML、CSS、Javascript的工具集。Bootstrap基于HTML5和CSS3，具备漂亮的设计、友好的学习曲线、卓越的兼容性，还有12列响应式栅格结构，丰富的组件等等。按照官网的宣传来讲，Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。本文将介绍Bootstrap概述css

引入

　　在传统前端开发过程当中，经常出现重复、复杂、无心义地命名，结构冗余、胡乱嵌套，页面错乱等问题html

　　2011年，twitter的“一小撮”工程师为了提升他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所设计和创建，在github上开源以后，迅速成为该站上最多人watch&fork的项目。大量工程师踊跃为该项目贡献代码，社区惊人地活跃，代码版本进化很是快速，官方文档质量极其高(能够说是优雅)，同时涌现了许多基于Bootstrap建设的网站：界面清新、简洁，要素排版利落大方前端

　　Bootstrap最新版本是Bootstrap4，稳定版本是Bootstrap3，兼容低版本IE的版本是Bootstrap2　html5

　　Bootstrap基于HTML5和CSS3，其大量的JavaScript插件都依赖 jQuery，且jQuery的版本不能低于1.9.1版本jquery

特性

　　Bootstrap主要具备如下特性：git

　　响应式设计github

　　栅格布局web

　　完整的类库chrome

　　jQuery插件bootstrap

　　不一样的使用场景

包含文件

　　Bootstrap 提供了两种形式的压缩包，在下载下来的压缩包内能够看到如下目录和文件，这些文件按照类别放到了不一样的目录内，而且提供了压缩与未压缩两种版本。

【预编译版】

　　下载压缩包以后，将其解压缩到任意目录便可看到如下（压缩版的）目录结构：

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

　　上面展现的就是 Bootstrap 的基本文件结构：预编译文件能够直接使用到任何 web 项目中。提供了编译好的 CSS 和 JS (bootstrap.*) 文件，还有通过压缩的 CSS 和 JS (bootstrap.min.*) 文件。同时还提供了 CSS 源码映射表 (bootstrap.*.map) ，能够在某些浏览器的开发工具中使用。同时还包含了来自 Glyphicons 的图标字体，在附带的 Bootstrap 主题中使用到了这些图标

【Bootstrap 源码】

　　Bootstrap 源码包含了预先编译的 CSS、JavaScript 和图标字体文件，而且还有 LESS、JavaScript 和文档的源码。具体来讲，主要文件组织结构以下：

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

　　less/、js/ 和 fonts/ 目录分别包含了 CSS、JS 和字体图标的源码。dist/ 目录包含了上面所说的预编译 Bootstrap 包内的全部文件。docs/ 包含了全部文档的源码文件，examples/ 目录是 Bootstrap 官方提供的实例工程。除了这些，其余文件还包含 Bootstrap 安装包的定义文件、许可证文件和编译脚本等。

基本模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <!-- utf-8编码-->
    <meta charset="utf-8">
    <!-- 在IE运行最新的渲染模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口viewport设置-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其余内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- 引入Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- 在IE8-浏览器中，支持HTML5新标签和媒体查询@media-->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- 先引入jQurey，再引入bootstrap插件 -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>