Bootstrap系列 -- 11. 基础表单

 

　　表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所起的作用都各不相同，而且不同的浏览器对表单控件渲染的风格都各有不同。

　　

<form role="form">
        <div class="form-group">
            <label for="exampleInputEmail1">邮箱：</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址"/>
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码"/>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"/>
                记住密码
   
            </label>
        </div>
        <button type="submit" class="btn btn-default">进入邮箱</button>
    </form>

 

　　Bootstrap中主要将这些元素的margin、padding和border等进行了细化设置。当然表单除了这几个元素之外，还有input、select、textarea等元素，在Bootstrap框架中，通过定制了一个类名`form-control`，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。

　　1. 宽度变成了100%

　　2. 设置了一个浅灰色（#ccc）的边框

　　3. 具有4px的圆角

　　4. 设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化

　　5. 设置了placeholder的颜色为#999

 

　　运行效果图