必赢亚洲手机app下载


联机日志苹果电脑

Jobs:关于苹果电脑 Flash 的沉思

BootStrap学习

一 BootStrap 最新版本 v3.x 那么V二.x和V三.x的区分重如若何许呢 ?

更改了一些组件;改变了1些标签;

V第22中学扩充了对活动装备友好的体裁,而在V三中,则再次了百分之百框架,使BootStrap三.x对运动装备是预先友好的;

BootStrap提供了壹套响应式
移动装备优先的流式栅格系统,随着显示器尺寸的充实,系统会将界面自动的浮动1二等份;

栅格参数

因而下表能够详细查看 Bootstrap 的栅格系统是哪些在多样显示屏设备上行事的。

 

超小显示屏 手提式有线电话机 (<76八px)

小屏幕 平板 (≥768px)

个中显示屏 桌面显示屏 (≥9玖二px)

大显示器 大桌面显示屏 (≥1200px)

栅格系统作为

连日来水平排列

伊始是堆叠在协同的,当不止这个阈值时将变成水平排列C

.container 最大开间

苹果电脑,None (自动)

750px

970px

1170px

类前缀

.col-xs-

.col-sm-

.col-md-

.col-lg-

列(column)数

12

最大列(column)宽

自动

~62px

~81px

~97px

槽(gutter)宽

30px (每列左右均有 一伍px)

可嵌套

偏移(Offsets)

列排序

 

文书档案地址 http://v3.bootcss.com/css/\#grid-options

 贰 水平排列的表单   form-horizontal

<div class=”form-horizontal”>

        <div class=”container”>

            <div class=”row”>

                <div class=”form-group”>

                    <label class=”col-lg-四 col-md-四 col-sm-四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 是一个由苹果集团成本和公布的手提式无线电话机操作系统。最初是于 二〇〇六 年第一次透露红米、iPod Touch 和 Apple
电视。iOS 派生自 OS X,它们共享 达尔文 基础。OS X
操作系统是用在苹果电脑上,iOS 是苹果的活动版本。
</p>
</div>
<div class=”tab-pane fade” id=”id222″>
<p>jMeter 是1款开源的测试软件。它是 百分百 纯 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 导航成分 1章中介绍过。通过整合一些 data
属性,您可以轻松地创建1个标签页界面。通过那一个插件您能够把内容放置在标签页只怕是胶囊式标签页甚至是下拉菜单标签页中。
</p>
</div>
</div>

 

 

02-2七 内联表单  使input和label处于同1行

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