Bootstrap学习笔记（二）

7.响应式表单

.form-group表单组样式：将和表单元素包含其中，可以获得更好的排列

.form-control表单元素样式：常用于、、<select>元素</h6> </blockquote> <pre><code><form> <div > <label for="username">用户名</label> <input type="text" class="form-control" id="username" placeholder="请输入用户名"> </div> <div class="form-group"> <label for="password">密码</label> <input type="email" class="form-control" id="password" placeholder="请输入密码"> </div> </form> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 161px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/4d6263bf2377476ca84558a43e282f65.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/4d6263bf2377476ca84558a43e282f65.jpg" width="650" height="89"></a> </div> </div> <div class="image-caption"></div> </div> <blockquote> <h6> <code>.form-inline</code>内联表单样式（用于form表单）：可以使元素一行显示</h6> </blockquote> <pre><code><form class="form-inline"> <div class="form-group"> <label for="username">用户名</label> <input type="text" class="form-control" id="username" placeholder="请输入用户名"> </div> <div class="form-group"> <label for="password">密码</label> <input type="email" class="form-control" id="password" placeholder="请输入密码"> </div> </form> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 589px; max-height: 117px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/da4ee41e11d94351b7d86668b7c7b144.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/da4ee41e11d94351b7d86668b7c7b144.jpg" width="589" height="117" alt="Bootstrap学习笔记（二）_第1张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <blockquote> <h6> <code>.input-group-addon</code> 在一侧加入附加内容</h6> </blockquote> <pre><code><div class="input-group"> <span class="input-group-addon"> 搜索</span> <input type="search" class="form-control" id="password" placeholder="输入搜索内容"> </div> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 288px; max-height: 173px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/dbfd13954171481e937a38217bf1af85.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/dbfd13954171481e937a38217bf1af85.jpg" width="288" height="173" alt="Bootstrap学习笔记（二）_第2张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <blockquote> <h6> <code>.checkbox-inline</code> 或<code>.radio-inline</code> 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。</h6> <h6> <code>.btn-lg</code>、<code>.btn-sm</code> 或 <code>.btn-xs</code> 就可以获得不同尺寸的按钮。</h6> <h6> <code>.btn-success</code>等可以设置按钮样式 — 如下图</h6> </blockquote> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 498px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/cf036f4249a74a42aabd25d4eeb539e3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/cf036f4249a74a42aabd25d4eeb539e3.jpg" width="650" height="385" alt="Bootstrap学习笔记（二）_第3张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> 按钮样式 </div> </div> <pre><code> <form class="form-horizontal"> <div class="form-group"> <label class="col-md-2 control-label" class="col-md-2 control-label" for="username">用户名：</label> <div class="col-md-10"> <input class="form-control" type="text" id="username" placeholder="请输入用户名"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="password">密码：</label> <div class="col-md-10"> <input class="form-control" type="text" id="password" placeholder="请输入密码"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">上传图片：</label> <div class="col-md-10"> <input type="file"> <p class="help-block">上传图片格式：.png</p> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">专业课程：</label> <div class="checkbox col-md-10"> <label class="checkbox-inline"> <input type="checkbox">软件工程 </label> <label class="checkbox-inline"> <input type="checkbox">软件测试 </label> <label class="checkbox-inline"> <input type="checkbox">java程序设计 </label> <label class="checkbox-inline"> <input type="checkbox">计算机网络 </label> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">年级：</label> <div class="radio col-md-10"> <label class="radio-inline"> <input type="radio">大一 </label> <label class="radio-inline"> <input type="radio">大二 </label> <label class="radio-inline"> <input type="radio">大三 </label> <label class="radio-inline"> <input type="radio">大四 </label> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="info">个人简介：</label> <div class="col-md-10"> <textarea rows="8" class="form-control" placeholder="请输入个人简介" id="info">

提交

8.柵格系统

栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

9.图片样式

.img-responsive 类可以让图片支持响应式布局

.img-rounded圆角图片、.img-circle圆图片、.img-thumbnail边框圆角

    

        ![](img/img.jpg)
        ![](img/img.jpg)
        ![](img/img.jpg)
    

10.辅助类

1.情境文本颜色

通过颜色来展示意图，Bootstrap 提供了一组工具类。

...
...
...
...
...
...

2.情境背景色

和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。

...
...
...
...
...

3.快速浮动

通过添加一个类，可以将任意元素向左或向右浮动

  
...
...

11.下拉菜单

.dropdown将下拉菜单触发器和下拉菜单都包裹在其中

.data-toggle属性：下拉菜单触发器，在按钮上，内容取值'dropdown'

.dropdown-menu 给

指定下拉菜单的样式

.divider为下拉菜单添加分隔符

       
           菜单按钮 
       
       

           
javaEE
           
html设计
           
mysql应用
           
php应用
           

           
c++应用
           
软件测试
       
   

12.按钮组

.btn-group:按钮组（可实现将一组按钮放在同一行）

.btn-toolbar按钮工具栏 将多个按钮组放在其中

        

            按钮
            按钮
            按钮
        
        

            按钮
            按钮
            按钮
        
        

            按钮
            按钮
            按钮
        
    

上篇：Bootstrap学习笔记（一）