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

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

<form action="" method="">
    <label>用户名:</label>
    <input type="text" class="form-control" />
</form>

---

之前我们写在文本框前面写用户名 一直都是直接写字，在实际开发中一般用文本标签包起来例如 <label> <span> 标签
我们可以看到效果文本框的宽度占满了整行，下拉框的宽度也占满了整行
2、class=”form-group”：可以为<div>设置该属性。如果<div>中包含<label>和<input>表示为一组。层次会更清晰
示例代码：

<form action="" method="">
    <div class="form-group">
        <label>用户名:</label>
        <input type="text" placeholder="请输入用户名" class="form-control" />
    </div>
    <div class="form-group">
        <label>密码:</label>
        <input type="text" class="form-control" />
    </div>
</form>

这个页面效果可能不是很明显
1.2.内联表单：class=”form-inline”
什么是内联表单呢，就是让我们的所有表单元素都在一行

<form action="" method="">
<label>用户名:</label>
<input type="text" class="form-control" />
    <select class="form-control">
        <option value ="">北京</option>
    </select>
</form>

刷新页面，我们可以看到效果，每一个元素都自动换行，总共占了四行。用内联表单我们再来看看

<form class="form-inline" action="" method="">
    <label>用户名:</label>
    <input type="text" />
    <select >
        <option value ="">北京</option>
    </select>
</form>

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

<div class="form-group">
    <label>工资:</label>
    <input type="text" class="form-control" />
</div>

现在的效果就是工资后面跟着一个文本框，如果我们先想在 文本框中的前面一部分来一个$美元符合。看一下怎么写:

<div class="form-group">
    <label>工资:</label>
    <div class="input-group">
        <span class="input-group-addon&