bootstrap 实战入门教程（一）

bootstrap 实战入门教程（一）

说起响应式前端框架，比较而言，bootstrap还是不错的，虽然可能很多文档都是英文的。今天就整理下自己在学习及使用bootstrap3时的重要知识点和使用案例

参考资料：

runoob的bootstrap中文教程：http://www.runoob.com/bootstrap/bootstrap-forms.html

bootstrap中文网：http://www.bootcss.com/

bootstrap 各种实用案例(脚本之家)： http://www.jb51.net/Special/769.htm

jquery api : http://www.jquery123.com/

1. 简介

　　Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT。主要是为了支持移动端，所以pc端就很难做得跟以前pc那样复杂漂亮。

　　在之前的 Bootstrap 版本中（直到 2.x），您需要手动引用另一个 CSS，才能让整个项目友好的支持移动设备。

　　现在不一样了，Bootstrap 3 默认的 CSS 本身就对移动设备友好支持。

2. 开发环境及插件支持

　　由于bootstrap是基于jquery的，所以引入jquery插件是必须的。

　　这里都是使用cdn资源，以便减少网站服务器压力　

<!--head中引入-->
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

<!--body结尾-->
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

 　　为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

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

width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。

initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。

在移动设备浏览器上，通过 user-scalable=no 可以禁用其缩放（zooming）功能。

通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。

　　对浏览器/设备的支持

 

	Chrome	Firefox	IE	Opera	Safari
Android	YES	YES	不适用	NO	不适用
iOS	YES	不适用	不适用	NO	YES
Mac OS X	YES	YES	不适用	YES	YES
Windows	YES	YES	YES*	YES	NO

　　

3. 编码规范

　　建议在编码之前先看看 bootstrap的html和css编码规范，对于编写整齐高质量的前端代码很有用！

4. CSS

4.1 网格布局

　　Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。