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

这次学的CSS样式如标题所述，我们会一个个进行学习，首先我们先看看大纲。

第一种是基本表单，效果如下

基本表单样式就是一个内容占一行。代码如下，

<h3 class="mark">1.1 基本表单</h3>
			<form>
				<div class="form-group">
					<label>name:</label>
					<input type="text" class="form-control" />
				</div>
			</form>

第二个内联表单就是所有内容占一行，效果如下

 代码如下（不懂的可以看最上面的解析图）

<h3 class="mark">1.2 内联表单</h3>
			<form>
				<div class="form-inline">
					<label>姓名：</label>
					<input type="text" />
				</div>
			</form>

接下来就是表单结合

 代码如下

<h3 class="mark">1.3 表单组合</h3>
			<form>
				<div class="input-group">
					<div class="input-group-addon">$</div>
					<input type="text">
					<div class="input-group-addon">.00</div>
				</div>
			</form>

然后是多选框

 代码如下

<h3 class="mark">1.5 表单之多选框</h3>
			<h4 class="mark">1.5.1 多行</h4>
			<form>
				<div class="checkbox disabled">
					<label>
						<input type="checkbox" />恰飯
					</label>
				</div>
				<div class="checkbox disabled">
					<label>
						<input type="checkbox" />睡覺
					</label>
				</div>
				<div class="checkbox disabled">
					<label>
						<input type="checkbox" />打豆豆
					</label>
				</div>
			</form>
			<h4 class="mark">1.5.2 单行</h4>
			<form>
				<div class="checkbox disabled">
					<label>
						<input type="checkbox" />恰飯
					</label>
					<label>
						<input type="checkbox" />睡覺
					</label>
					<label>
						<input type="checkbox" />打豆豆
					</label>
				</div>
			</form>

多行是另外添加2个盒子装内容，单行则是一个盒子（也就是DIV属性）

剩下的内容敬请期待！