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 >
<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>

相关文章: