1 BootStrap 最新版本 v3.x 那么V2.x和V3.x的区别主要是什么呢 ？
改动了一些组件；改变了一些标签；
V2中 增加了对移动设备友好的样式，而在V3中，则重新了整个框架，使BootStrap3.x对移动设备是优先友好的；
BootStrap提供了一套响应式 移动设备优先的流式栅格系统，随着屏幕尺寸的增加，系统会将界面自动的生成12等份；
栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 |
None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列（column）数 | 12 | |||
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 | |||
文档地址 http://v3.bootcss.com/css/#grid-options
2 水平排列的表单 form-horizontal
<div class="form-horizontal">
<div class="container">
<div class="row">
<div class="form-group">
<label class="col-lg-4 col-md-4 col-sm-4 control-label">申请单号</label>
<div class="col-lg-8 col-md-8 col-sm-8">
<input type="text" class="input form-control" placeholder="申请单号" />
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-sm-4 control-label">申请人</label>
<div class="col-sm-8">
<input type="text" class="form-control" placeholder="申请人" />
</div>
</div>
</div>
</div>
</div>
3 BootStrap导航元素 nva-tabs 可以创建堆叠的或者垂直的或者水平的导航元素
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#home"data-toggle="tab">Home</a></li>
<li><a href="#id111"data-toggle="tab">111</a></li>
<li><a href="#id222"data-toggle="tab">222</a></li>
<li><a href="#id333"data-toggle="tab">333</a></li>
<li><a href="#id444"data-toggle="tab">444</a></li>
</ul>
</div>
</div>
</div>
内容区域
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>
</div>
<div class="tab-pane fade" id="id111">
<p>
iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。
</p>
</div>
<div class="tab-pane fade" id="id222">
<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
</div>
<div class="tab-pane fade" id="id333">
<p>
Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
</p>
</div>
<div class="tab-pane fade" id="id444" >
<p>
标签页（Tab）在 Bootstrap 导航元素 一章中介绍过。通过结合一些 data 属性，您可以轻松地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。
</p>
</div>
</div>
02-27 内联表单 使input和label处于同一行
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email:</label>
<div class="col-sm-3">
<input type="text" placeholder="Input" class="form-control input"/>
</div>
</div>
</form>