Bootstrap学习小结

1.Bootstrap简介

Bootstrap由Twitter的Mark Otto和Jacob Thornton开发的。Bootstrap是2011年八月在GitHub上发布的开源产品。Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于 HTML、CSS、JAVASCRIPT技术开发的前端框架。

 

2.Bootstrap框架内容

（1）基本结构

Bootstrap提供了一个带有网格系统、链接样式、背景的基本结构。

（2）CSS

Bootstrap自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。

（3）组件

Bootstrap包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。

（4）JavaScript 插件

Bootstrap包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。

另外，也可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到自己的版本。

 

3.Bootstrap的使用方法

（1）下载Bootstrap的js和ccs文件到本地，然后在自己的HTML文档中引用

（2）直接使用网络或CDN中的Bootstrap的js和css的链接

如下是应用Bootstrap前端框架的模板：

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

备注，bootstrap.css和bootstrap.min.css，bootstrap.js和bootstrap.min.js，以及jquery.js和jquery.min.js的区别是*.min.js是经过压缩处理的，没有空格和换行，是没有可读性的代码。

4.自结

需要什么样的网页元素到http://www.runoob.com/bootstrap/bootstrap-tutorial.html中获取。也可以使用可视化布局工具http://www.runoob.com/try/bootstrap/layoutit/来在线可视化设计，然后生成代码，再加上引用Bootstrap库的代码以及基本的html元素就行了。