Bootstrap学习(二)

留坑待用

---

二、表单

文本输入框
下拉选择框
单选按钮
文本域和按钮

<form role="form" class="form-horizontal">
    <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>

属性	属性值	作用标签	说明
role=	“form”	<form>	告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色是个表单
class=	“form-control”	<input> <select> <textarea>	1、宽度变成了100% 2、设置了一个浅灰色（#ccc）的边框 3、具有4px的圆角 4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化 5、设置了placeholder的颜色为#999
for=	“male”	<label>	for 属性规定 label 与哪个表单元素绑定。

1.水平表单内联表单

属性	属性值	作用标签	说明
class=	“form-horizontal”	<form>	标签居左，表单控件居右
class=	“form-inline”	<form>	将表单的控件都在一行内显示
class=	“sr-only”	<label>	在label标签运用了一个类名“sr-only”，标签没显示就是这个样式将标签隐藏了。

如果你要在input前面添加一个label标签时，会导致input换行显示。如果你必须添加这样的一个label标签，并且不想让input换行，你需要将label标签也放在容器“form-group”中，如：

<div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
</div>
<div class="form-group">
    <inputtype="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>

2.表单控件

</

表单控件	type=