Html5之Bootstrap框架介绍

ootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC的Breaking News都使用了该项目。

Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。

Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等。

Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了“生命”。其中包括：模式对话框、标签页、滚动条、弹出框等。

Bootstrap Less是一个 CSS 预处理器，让 CSS 具有动态性。另一方面，Bootstrap 是一个快速开发 Web App 和站点的工具包。这样，您可以在 CSS 中使用 Bootstrap 的 Less 变量、mixins（混合

）和 nesting（嵌套）。

更多内容和资讯或者问题，更多干货分享，尽在我的个人微信公众号，微信名：非著名程序员，微信号：smart_android（←长按复制）。个人微信号：loonggg微博：涩郎

ootstrap是一个非常好的前端框架，在前端时间的小项目中需要使用Bootstrap做前端，于是就学习了一下，觉得非常好用，推荐给新手。

一. 什么是Bootstrap？

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。同时，Bootstrap 还是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。作为一个框架，它和jQuery EasyUI、WeUI一样，助力于前端开发。简而言之，使用Bootstrap让前端开发变得简洁高效。

注释：

1. jQuery EasyUI：jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。

2. WeUI：WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。

二. Bootstrap入门

使用Bootstrap框架，必须具备 HTML 、 CSS 和 JavaScript 的基础知识。如果没有掌握，可以前往【菜鸟教程】学习。

2.1 环境配置

你有两种方式可以使用Bootstrap，本地调用和网络调用。

本地调用需要从网络上下载[用于生产环境的Bootstrap]，下载地址：http://v3.bootcss.com/getting-started 。

下载完成后，解压文件，得到如下图所示的三个文件夹，这三个文件夹分别用于存放样式文件、字体文件、js脚本文件。

网络调用只需使用 BootCDN 提供的免费 CDN 加速服务。在你的网页文件中写入以下link即可。

2.2 了解Bootstrap

2.2.1 Bootstrap是html5的文档

Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。

<!DOCTYPE html> <html lang="zh-CN"> ... </html>

2.2.2 移动设备优先

Bootstrap 3是对移动设备友好的。不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。

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

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

2.2.3 栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100%

宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

通过“行（row）”在水平方向创建一组“列（column）”。

你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin也可以用来创建语义化的布局。

通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值

margin 从而抵消掉为 .container 元素设置的

padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何

.col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何

.col-lg-*不存在，也影响大屏幕设备。

通过研究后面的实例，可以将这些原理应用到你的代码中。

下面这幅图有助于理解Bootstrap的栅格系统。

三. 在线学习的网站推荐

Bootstrap V3版本官网：http://v3.bootcss.com

菜鸟教程Bootstrap专栏：http://www.runoob.com/bootstrap/bootstrap-tutorial.html

腾讯课堂：http://ke.qq.com

慕课网：http://www.imooc.com

ootstrap这个前端工具包，可以快速开发WEB应用程序。Bootstrap使用最新版本的浏览器技术，它也是HTML以及CSS的集合，可以为WEB开发贡献更加时尚的网格系统、表格、表单、板式。如果身为程序员的你，到现在还没有开始用Bootstrap模板，那简直是很落伍。W3Cschool小师妹为大家收集了最值得收藏的Bootstrap资源网站，你千万不要错过。

1.模板资源

W3Cschool小师妹为大家收集了Bootstrap模板资源，这些网站很漂亮，还可以下载Bootstrap模板。唯一的缺点，应该就是几乎都是英文版的，阅读起来不太方便。但是对于程序大牛来说，英语根本不是问题。

2.工具

Bootstrap不仅仅是一个框架，它改变了整个游戏规则。Bootstrap使得更多应用以及网站设计开发更贱简便。Bootstrap工具很多，像可视化制作工具、在线设计工具等，W3Cschool小师妹为大家收集的这些站点，都可以下载Bootstrap工具，需要的话可以去123点W3Cschool点cn看一下。

3.站点/主题网站

Bootstrap基于jQuery框架而开发，但是和jQuery框架相比，Bootstrap更加人性化以及个性化。Bootstrap可以兼容绝大多数的jQuery插件，有自己独特的网站风格。W3Cschool小师妹为大家收集的Bootstrap站点或主题网站很多，都很实用。想要资源的话，可以自行去123点W3Cschool点cn下载。

当前最热门的前端框架，要属Bootstrap。它来自于Twitter，具有简洁、直观、强悍等特点。Bootstrap把大量HTML框架普及成产品，它的功能相当强大。作为程序员的你，快来收藏这些Bootstrap资源网站吧。

学编程技术，就到W3Cschool，如果你喜欢我们的文章，可以点击右上角关注我们;如果你想看到更多IT界的资讯，可以加我们的公众号。

公众号：w3cschoolcn

在线咨询

上一篇：轻松学会AI自动文案排版，让您的文字独具风采
下一篇：前端入门教程之 JS 「switch」语句 javascript学习

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Html5之Bootstrap框架介绍

您的项目需求