精髓：
1. 把屏幕一行分为12格，子元素的最大宽度由其嵌套的父class指定宽度为准
2. Bootstrap3一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
为了确保适当的绘制和触屏缩放，需要在 <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">
3. 对于不同宽度的自适应
4 注：一定要先引入jQuery 1.7以上的js文件再引入Bootstrap的js文件
基本实例
<!DOCTYPE html> <html> <head> <title>01_Base.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <link rel="stylesheet" media="screen" href="../css/bootstrap.min.css"> <link rel="stylesheet" media="screen" href="../css/bootstrap-theme.min.css"> <script src="../js/jquery-1.11.2.js"></script> <script src="../js/bootstrap.min.js"></script> </head> <body style="font-size: 14px; line-height: 1.428;"> <div class="container"> <h1 class="page-header">页面主体</h1> <div style="border:1px solid "> <p class="text-left">Left aligned text.</p> <p class="text-center lead">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-muted">Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <p class="text-primary">Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <p class="text-success">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna..</p> <p class="text-warning">Maecenas sed diam eget risus varius blandit sit amet non magna..</p> <p class="text-danger">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <p> <abbr title="attribute">鼠标悬停加强提示title设置的内容</abbr> </p> <p> <abbr title="HyperText Markup Language" class="initialilg">调小字体并且悬停加强</abbr> </p> </div> <div class="row"> <div class="col-lg-6"> <small>副级字体</small> </div> <div class="col-lg-6"> <em>This line of text is meant to be treated as fine print.</em> </div> <div class="col-lg-7">占位7格</div> <div class="col-lg-5 col-lg-pull-3"> <em>em斜体增强，pull向左缩进</em> </div> <div class="col-lg-6 col-lg-push-3"> <strong>strong粗体增强，push向右缩进</strong> </div> </div> <h6 class="page-header"></h6> <div> <div class="row"> <div class="col-lg-4"> <h3>内联列表</h3> <ul class="list-inline"> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ul> </div> <div class="col-lg-4"> <h3>无样式列表</h3> <ul class="list-unstyled"> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ul> </div> <div class="col-lg-4" class="dl-horizontal"> <h3>带描述的短语列表</h3> <dl> <dt>.Lorem ipsum dolor sit amet</dt> <dd>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet</dd> <dd>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet</dd> </dl> </div> <div class="clearfix visible-lg"></div> <div class="col-lg-4"> <h4>内联代码</h4> For example, <code><section></code> should be wrapped as inline.<br> <h4>基本代码块</h4> <pre><p>Sample text here...</p></pre> </div> <div class="col-lg-4"> <h3>地址类型</h3> <address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Athrun Null</strong><br> <a href="mailto:#">Athrun29@126.com</a> </address> </div> <div class="col-lg-4"> <h3>滚动条代码块</h3> <div class="pre-scrollable"> 什么鬼<br> 什么鬼<br> 最大高度350px<br> 什么鬼<br> 什么鬼<br> </div> </div> <div class="clearfix visible-lg"></div> <div class="col-lg-6"> <h3>引用</h3> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <small>Someone famous in <cite title="Source Title">悬停增强建议放引用来源</cite> </small> </blockquote> </div> <div class="col-lg-6"> <h3>右置引用</h3> <blockquote class="pull-right"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <small>Someone famous in <cite title="Source Title">悬停增强建议放引用来源</cite> </small> </blockquote> </div> </div> </div> </div> </body> </html>
