bootstrap实战⼊门教程（⼀）
说起响应式前端框架，⽐较⽽⾔，bootstrap还是不错的，虽然可能很多⽂档都是英⽂的。今天就整理下⾃⼰在学习及使⽤bootstrap3时的重要知识点和使⽤案例
参考资料：
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="cdn.bootcss/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题⽂件（⼀般不⽤引⼊） -->
<link rel="stylesheet" href="cdn.bootcss/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<!--body结尾-->
<!-- jQuery⽂件。务必在bootstrap.min.js 之前引⼊ -->
<script src="cdn.bootcss/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核⼼ JavaScript ⽂件 -->
<script src="cdn.bootcss/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 ⽹格布局
jquery学习在线教程  Bootstrap 提供了⼀套响应式、移动设备优先的流式⽹格系统，随着屏幕或视⼝（viewport）尺⼨的增加，系统会⾃动分为最多12列。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。