一个尴尬的年纪，没有儿时的勇气，年少的冲动，成熟的物质，消融了那些不切实际的臆想，也接受了很多难以为继的事实，一直在路上 。

初识 Bootstrap

Bootstrap 概述

　　Bootstrap 是一个前端框架，使用它可以快速开发响应式页面，还能专门针对 PC 端或移动端快速开发，大大提高了开发效率。

　　Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

　　Bootstrap 来自 Twitter，是目前最流行的前端框架。它是基于 HTML、CSS、JavaScript 的一个简洁、灵活的开源框架。 

　　1、为什么要使用 Bootstrap
　　当需要制作响应式的网页来适配各种终端，我们通过媒体查询，针对要适配的每种终端都得设置相应的样式甚至是改变网页结构，而且开发和维护起来也很麻烦。而 Bootstrap 库中包含很多现成的带有各种样式和功能的代码片段，这些代码可以为你的网站增加更多活力，Web 开发者不必再花费时间、花费精力地编码，只需要找到合适的代码，插入到合适的位置即可。最主要的是这些代码片段是经过封装的，可以适用于不同的终端设备，无论是在 PC 浏览器中还是平板电脑、手机等，都能很好地浏览网页。

　　Bootstrap 框架里的一些效果是使用 HTML5 和 CSS3 开发的，我们都知道 CSS3 有的属性是有兼容性的。 Twitter 当初开发该工具的时候，就考虑到浏览器间表现不一致的情况，所以 Bootstrap 已经对此做了兼容处理，保证了界面在不同平台上的统一性。在 IE、Chrome、Firefox 等浏览器中可以看到统一的界面。

　　目前使用较广的是版本 2.0 和 3.0，我们以 3.0 版本进行讲解。因为从版本 3.0 开始 Bootstrap 移入移动先行的思想，使我们能使用它快速开发移动项目。在 Bootstrap 3.0 中重写整个框架，使其一开始就是对移动设备友好的。这次不是简单地增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。

　　2、Bootstrap 使用场景
　　Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 Web 项目。这是 Bootstrap 的核心理念，从中也可以看出 Bootstrap 的使用场景是制作适配各终端的响应式的页面、制作移动设备项目。

　　实际上 Bootstrap 是个 “万能” 的框架，因为它不只是在上面的两种场景才能使用，它集成了 CSS 样式和 JavaScript 交互特效，只要是有网页的地方都可以使用。

Bootstrap 文件结构

　　在使用 Bootstrap 之前需要下载它的文件，登录 Bootstrap 中文网 http://www.bootcss.com/ 下载 Bootstrap 框架的文件和源码。

　　下载教程：进入 Bootstrap 中文网 >> 点击菜单栏 Bootstrap3中文文档  >>  点击菜单栏的 起步  >>  跳转到下载页面 >> 点击下载 Bootstrap 进行下载即可。

 

 　　➣ Download Bootstrap 。从该链接下载的内容是编译后可以直接使用的文件。默认情况下，下载后的文件分两种：一种是未经历压缩处理的文件 bootstrap.css，一种是经历过压缩处理的文件 bootstrap.min.css。一般网站正式运行的时候使用压缩过的 min 文件以节约网站传输流量；而我们在进行开发调试的时候往往使用原始的、未经压缩的文件，以便进行 debug 跟踪，就像 jQuery 的使用方式一样。
　　➣ Download source 。从该链接下载的是用于编译 CSS 的 Less 源码，以及各个插件的 JS 源码文件。默认情况下，我们将基于未压缩的 bootstrap.css 和 bootstrap.js 文件进行分析使用，不会涉及与 Less 相关的内容。
　　➣ Download Sass 。从该链接下载的是用于编译 CSS 的 Sass 源码，以及各个插件的 JS 源码文件。默认情况下，我们不会涉及与 Sass 相关的内容。
 
　　说明：Less 和 Sass 都是基于 CSS 的高级语言，其目的是使 CSS 开发更灵活、更强大，感兴趣可查阅相关资料进行学习。
　　
　　单击 “Download Bootstrap” 按钮下载相关的 Bootstrap 文件，解压后可以看到结构如下图文件夹和文件（压缩版的目录结构）。


　　说明：
　　　　　1、从文件结构中看到 bootstrap.min.css 和 bootstrap. min.js 是压缩后的文件，用于生产环境使用，而普通的 bootstrap.css 和 bootstrap.js 是用于开发环境进行调试、分析的。可以将该目录结构拖拽到 Web 项目直接使用。
　　　　　2、你可以根据自己的程序结构，对上述的 css、js 文件夹名称进行随意的重命名，但是不能对 fonts 文件夹进行重命名，因为 CSS 文件里的源码使用了相对路径（. ./fonts/），如果重命名，就读取不到这些字体文件了。
　　　　　3、建议大家在学习阶段使用未经压缩的文件，以便进行分析、阅读、学习。

 
HTML 标准模板
　　在项目中如何引用下载的 Bootstrap 框架文件？以下是使用 Bootstrap 框架最基本的 HTML 代码，可以在此基础上进行扩张，只需要确保文件引用顺序一致即可。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minmum-scale=1.0 ">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 基本模板</title>

    <!-- Bootstrap 的 css 文件-->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!--以下两个插件 HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能，如果不用可以删除 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 （即 Respond.js 不支持 file:// 方式访问）-->
    <!--[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>这是一个 Bootstrap 框架的最基本 HTML 模板</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) （即如果要使用 Bootstrap 的 JS 插件，必须引入 jQuery ）-->
    <script src="js/jquery-1.12.4.js"></script>
    <!-- Bootstrap 的 JS 插件 -->
    <script src="js/bootstrap.js"></script>
  </body>
</html>

 

　　由上述模板代码可以看出，从 3.x 版本开始，比起 2.x 一个很大的区别就是多了一行代码：

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minmum-scale=1.0 ">
 　说明：
　　　　1、这就是我们前面提到的，Bootstrap 从版本 3.0 开始全面支持移动平台，并贯彻移动先行（MobileFirst）的宗旨。上述代码的意思是，默认情况下，UI 布局的宽度和移动设备的宽度一致，缩放大小为原始大小，强制让文档的宽度与设备的宽度保持 1:1，文档最大的宽度比例是 1，且不允许用户单击屏幕放大浏览器。
　　　　2、尤其要注意的是，content 里多个属性值的设置一定要用逗号和空格来隔开，如果不规范将不会起作用、现在只要明白它是更好地支持移动设备的代码。
　　　　3、我们讲解的是 3.x 版本，它是在 2.x 的基础上开发的，至于 2.x 的一些用法感兴趣的可以查阅相关文档。

 

移动设备优先

　　在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。

　　为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。

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

　　在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

 

 
 
Bootstrap 整体架构
 　　大多数 Bootstrap 的使用者都认为 Bootstrap 只提供了 CSS 组件和 JavaScript 插件，其实 CSS 组件和 JavaScript 插件只是 Bootstrap 框架的表现形式而已，它们都是构建在基础平台之上的。
 
　　Bootstrap 的整体架构
　　　　　　　　　　　　　　　　　　　　说明：除了 CSS 组件和 JavaScript 插件之外，另外四部分都是基础支撑平台。

　　

 　　1、CSS 12 栅格系统
　　栅格是以规则的网格列阵来指导和规范网页中的版面布局以及信息的分布。Bootstrap 的 12 栅格系统是把网页的总宽度平分为 12 份，开发人员可以自由地按份组合，以便开发出简洁方便的程序。此外，Bootstrap 也提供了更为灵活的栅格系统，即栅格系统所使用的总宽度可以不固定，你可以针对一个 div 元素使用 12 等分的栅格，因为 Bootstrap 是按照百分比进行 12 等分的。12 栅格系统是整个 Bootstrap 的核心功能，也是响应式设计核心理念的一个实现形式。
 
　　2、基础布局组件
　　在 12 栅格系统的基础上，Bootstrap 提供了多种基础布局组件，如排版、代码、表单按钮等。这些基础组件可以随意应用在页面的任何元素上，包括其顶部的 CSS 组件内部也可以任意使用这些基础组件。在有的地方也会称它为 CSS 全局样式，其实它们表示的是相同的内容。

　　3、jQuery
　　Bootstrap 所有的 JavaScript 插件都依赖于 jQuery 1.10+，如果要使用这些插件，就必须用到 jQuery 库。如果你只使用 CSS 组件，那就可以不要用它了。

　　4、响应式设计
　　页面的设计开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面决定，包括弹性网格和布局、图片、CSS 媒体查询的使用等。无论用户使用笔记本电脑还是平板电脑，我们的页面都应该能够自动切换分辨率、图片尺寸及相应脚本功能等，以适应不同设备。
　　响应式设计是一个理念，为什么把它放在左边? 这是因为 Bootstrap 的所有内容都是以响应式设计为设计理念来实现的。

　　5、CSS 组件
　　在最新的 3.x 版本里提供了 20 种 CSS 组件，分别是下拉菜单（Dropdown）、按钮组（Button group）、按钮下拉菜单（Button dropdown）、导航（Nav）、导航条（Navbar）、面包屑导航（Breadcrumb）、分页导航（Pagination）、标签（Label）、徽章（Badge）、缩略图（Thumbnail）、警告框（Alert）、进度条（Progress-bar）、媒体对象（Media-object）......

　　6、JavaScript 插件
　　JavaScript 插件总共有 12 种，分别是动画效果（Transition）、模态框（Modal）、下拉菜单（Dropdown）、滚动侦测（Scrollspy）、弹出框（Popover）、按钮（Button）......


 
 
posted @ 2018-10-13 22:39  斯文败类i  阅读(315)  评论(0)  编辑  收藏  举报