使用Bootstrap已经有一段时间了，对于他的特性和用法已经基本掌握了。 为了巩固自己的知识和没有接触过Bootstrap的人开始加入这个家族。写了这边Bootstrap博客。
一、入门
使用Bootstrap推荐使用html5.Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。
<!DOCTYPE html> <html lang="zh-CN"> ... </html>
如果你想开发移动端兼容（响应式布局）的网站。 那么下面两点对你很重要：
为了确保适当的绘制和触屏缩放，需要在 <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呢？ 答案是 善用class Bootstrap有非常多的class 一个标签可以有很多class，不同class用空格分开 比如： <div class="label primary"></div>
那么我们在使用的时候去查阅官方文档就可以了。没必要去记住。 比如我需要用到居中属性，那我就去找。发现网上有实例，如下图：
那么我们就知道了 原来是text-center属性
二、关键知识
2.1栅格系统
关于栅格系统网上有很多教程。 我觉得只要你使用就离不开栅格系统，利用栅格系统可以很方便地做出非常好看的浏览器兼容的页面。
下面是从网上找的一个有关栅格系统的一览图：
<div class="row"> <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div> </div> <div class="row"> <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div> <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div> </div>
三、封装的JavaScript插件
有些东西大家都在用，于是Bootstrap将其封装为插件。供我们使用。如果我的网站只要这一个插件，那就单独引用插件就可以了。如果已经引入了Bootstrap.min.css, Bootstrap.min.js 就没必要引用了。
既然是封装的插件，当然有一些参数了。 我们可以自己去取舍使用什么，不适用什么。
两种方式使用API
1.data-api
2.编程方式的api
$('#myModal').modal() // 以默认值初始化
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // 初始化后立即调用 show 方法
四、打包的样式花哨的CSS组件
这部分的东西大都是对基本控件的扩展。
按钮组合输入组
导航
进度条等等
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
