Bootstrap、(全局CSS之表单&按钮&图片&辅助类&响应式工具)

1.表单

 1.1.基本表单
        1、class=”form-control”：可以给<input>、<textarea>、<select>元素设置宽度为100%

示例代码：

	<h3 class="mark">1.1 基本表单</h3>
					<form >
						<label>用户名</label>
						<input type="text" class="form-control" />
						
					</form>
					
					<form>
						<div class="form-group">
							<label>用户名</label>
							<input type="text" placeholder="请输入用户名"class="form-control" />
						</div>
						<div class="form-group">
							<label>密码</label>
							<input type="text" placeholder="请输入密码"class="form-control" />
						</div>
					</form>

1.2.内联表单：class=”form-inline”
什么是内联表单呢，就是让我们的所有表单元素都在一行
示例代码：

<h3 class="mark">1.2 内联表单</h3>
					
					<form class="form-inline">
						<label>用户名</label>
						<input type="text"  />
						<select >
							<option >哈哈</option>
						</select>
					</form>

1.3.表单组合
class=”input-group”、class=”input-group-addon”
表单组合就是把几个元素组合在一起，我们一起来看一下代码:

<h3 class="mark">1.3 表单组合</h3>
					
					<div class="form-group">
						<label>工资</label>
					    <div class="input-group">
							<span class="input-group-addon">$</span>
						<input type="text" class="form-control" />
						</div>
					</div>

1.4.水平排列表单，设计到栅格

<h3 class="mark">1.4 水平排列表单(结合栅格)</h3>
					<div class="container">
						<form class="form-horizontal">
							<div class="form-group">
								<label class="