必赢亚洲手机app下载


联手日志苹果电脑

乔布斯(乔布斯(Jobs))

BootStrap学习

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 年首破公布One plus、iPod Touch 和 Apple
苹果电脑,电视。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>

相关文章

No Comments, Be The First!
近期评论
    功能
    网站地图xml地图