Bootstrap学习笔记（二）

7.响应式表单

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

.form-control表单元素样式：常用于<input>、<textarea>、<select>元素

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

.form-inline内联表单样式（用于form表单）：可以使元素一行显示

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

.input-group-addon 在一侧加入附加内容

<div class="input-group">
            <span class="input-group-addon"> 搜索</span>
            <input type="search" class="form-control" id="password" placeholder="输入搜索内容">
        </div>

.checkbox-inline 或.radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

.btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

.btn-success等可以设置按钮样式 — 如下图

按钮样式

 <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"></textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <button type="submit" class="btn btn-success btn-group-sm">提交</button>
            </div>
        </div>
    </form>

8.柵格系统

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

<div class="container">
    <div class="row">
        <div class="col-md-12" style="height: 300px;background: gray">
        </div>
    </div>
    <div class="row">
        <div class="col-md-8" style="height: 500px;background: mediumpurple">
            <div class="row">
                <div class="col-md-4" style="height: 500px;background: deepskyblue">
                </div>
                <div class="col-md-4" style="height: 500px;background: hotpink">
                </div>
                <div class="col-md-4" style="height: 500px;background: palegoldenrod">
                </div>

            </div>
        </div>
        <div class="col-md-4" style="height: 500px; background: paleturquoise">
        </div>
    </div>
    <div class="row">
        <div class="col-md-12" style="height: 100px;background: black">
        </div>
    </div>
</div>

9.图片样式

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

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

<div class="container" style="background-color: white;padding: 50px;">
    <div>
        ![](img/img.jpg)
        ![](img/img.jpg)
        ![](img/img.jpg)
    </div>
</div>

10.辅助类

1.情境文本颜色

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

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

2.情境背景色

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

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

3.快速浮动

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

  <div class="pull-left bg-danger">...</div>
<div class="pull-right bg-info">...</div>

11.下拉菜单

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

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

.dropdown-menu 给<ul>指定下拉菜单的样式

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

<div class="dropdown">
       <button type="button" class="btn btn-success" data-toggle="dropdown">
           菜单按钮 <span class="caret"></span>
       </button>
       <ul class="dropdown-menu">
           <li><a href="#">javaEE</a></li>
           <li><a href="#">html设计</a></li>
           <li><a href="#">mysql应用</a></li>
           <li><a href="#">php应用</a></li>
           <li class="divider"></li>
           <li><a href="#">c++应用</a></li>
           <li><a href="#">软件测试</a></li>
       </ul>
   </div>

12.按钮组

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

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

<div class="btn-toolbar">
        <div class="btn-group btn-group-sm">
            <button type="button" class="btn-success btn">按钮</button>
            <button type="button" class="btn-primary btn">按钮</button>
            <button type="button" class="btn-danger btn">按钮</button>
        </div>
        <div class="btn-group ">
            <button type="button" class="btn-success btn">按钮</button>
            <button type="button" class="btn-success btn">按钮</button>
            <button type="button" class="btn-success btn">按钮</button>
        </div>
        <div class="btn-group btn-group-lg btn-group-vertical">
            <button type="button" class="btn-success btn">按钮</button>
            <button type="button" class="btn-success btn">按钮</button>
            <button type="button" class="btn-success btn">按钮</button>
        </div>
    </div>

上篇：Bootstrap学习笔记（一）