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>
</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学习笔记（一）
