我与Bootstrap的故事（一）

初识Bootstrap

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

GitHub上这样介绍 bootstrap：简单灵活可用于架构流行的用户界面和交互接口的html,css,javascript工具集。基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档，自定义JQuery插件，完整的类库，基于Less等。本系列教程遵循官方文档结构来介绍bootstrap，包括手脚架（Scaffolding),基础CSS,组件,javascript插件，使用LESS与自定义.本文主要介绍Bootstrap的基础布局--Scaffolding.

Bootstrap建立了一个响应式的12列格网布局系统，它引入了fixed和fluid-with两种布局方式。

你可以通过http://getbootstrap.com.来下载最新版本的Bootstrap。

解压文件夹后，可以看到Bootstrap的文件分布结构如下，包含3个文件夹：

• css

• fonts

• js    

css文件夹中包含了4个.css文件和2个.map文件。我们只需要将bootstrap.css文件包含到项目里这样就能将Bootstrap应用到我们的页面中了。bootstrap.min.css即为上述css的压缩版本。

.map文件不必包含到项目里，你可以将其忽略。这些文件被用来作为调试符号（类似于Visual Studio中的.pdb文件），最终能让开发人员在线编辑预处理文件。

Bootstrap使用Font Awesome（一个字体文件包含了所有的字形图标，只为Bootstrap设计）来显示不同的图标和符号，fonts文件夹包含了4类的不同格式的字体文件：

• Embedded OpenType (glyphicons-halflings-regular.eot)

• Scalable Vector Graphics (glyphicons-halflings-regular.svg)

• TrueType font (glyphicons-halflings-regular.ttf)

• Web Open Font Format (glyphicons-halflings-regular.woff)

建议将所有的字体文件包含在你的Web应用程序中，因为这能让你的站点在不同的浏览器中显示正确的字体。

js文件夹包含了3个文件，所有的Bootstrap插件被包含在boostrap.js文件中，bootstrap.min.js即上述js的压缩版本，npm.js通过项目构建工具Grunt自动生成。

在引用boostrap.js文件之前，请确保你已经引用了JQuery库因为所有的Bootstrap插件需要JQuery。

<!-- 新 Bootstrap 核心 CSS 文件 --> 
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 <!-- 可选的Bootstrap主题文件（一般不用引入） --> 
 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

本文标签： Bootstrap , 前端 , 框架

除非注明，文章均为( 冰镇宝贝321 )原创，转载请保留链接: https://bkqv5.com/archives/137.html