表单和图片 · 99班随堂笔记和管理

## 表单 Bootstrap 提供了一些丰富的表单样式供开发者使用。 ### 基本格式 **实现基本的表单样式** ~~~javascript <form> <div class="form-group"> <label>电子邮件</label> <input type="email" class="form-control" placeholder="请输入您的邮箱..." /> </div> <div class="form-group"> <label>密码</label> <input type="password" class="form-control" placeholder="请输入您的密码..." /> </div> </form> ~~~ 单独的表单控件会被自动赋予一些全局样式。所有设置了` .form-control` 类的 `<input>`、`<textarea>` 和 `<select>` 元素都将被默认设置宽度属性为 `width: 100%`;。将 `label` 元素和前面提到的控件包裹在 `.form-group` 中可以获得最好的排列。 ### 内联表单让表单左对齐浮动，并表现为 inline-block 内联块结构 ~~~html <form class="form-inline"> ~~~ > 注：当小于 768px，会恢复独占样式 ### 表单合组 **前后增加片段** ~~~html <div class="form-group"> <label>价格</label> <div class="input-group"> <div class="input-group-addon">$</div> <input type="text" class="form-control" /> <div class="input-group-addon">.00</div> </div> </div> ~~~ > 不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。 ### 水平排列 **让表单内的元素保持水平排列** ~~~html <form class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">电子邮件</label> <div class="col-sm-10"> <input type="email" class="form-control" placeholder="请输入您的电子邮件"> </div> </div> </form> ~~~ > 注：control-label 表示和父元素样式同步。 ### 复选框和单选框 ~~~html <div class="checkbox disabled"> <label> <input type="checkbox" disabled/>体育 </label> </div> <div class="checkbox"> <label> <input type="checkbox" />音乐 </label> </div> <label class="checkbox-inline"> <input type="checkbox" disabled/>体育 </label> <label class="checkbox-inline"> <input type="checkbox" />音乐 </label> ~~~ ### 下拉列表 ~~~html <select class="form-control"> <option value="">1</option> <option value="">2</option> <option value="">3</option> <option value="">4</option> </select> ~~~ ### 校验状态 **设置为错误状态** ~~~html <div class="form-group has-error"> ~~~ > 注：还有其他状态如下 |样式 |说明| |---|---| |has-error| 错误状态| |has-success|成功状态| |has-warning|警告状态| **label 标签同步相应状态** ~~~html <label class=" control-label">电子邮件</label> ~~~ ### 添加额外的图标 **文本框右侧内置文本图标** ~~~ <div class="form-group has-error has-feedback"> <label class="col-sm-2 control-label">电子邮件</label> <div class="col-sm-10"> <input type="email" class="form-control" placeholder="请输入您的邮箱..." /> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> </div> ~~~ |类名 |含义 | |---|---| |glyphicon-ok|成功状态| |glyphicon-warning-sign|警告状态| |glyphicon-remove|错误状态| ### 控制尺寸 **从大到小** ~~~html <input type="email" class="form-control input-lg" placeholder="请输入您的邮箱..." /> ~~~ > 注：也可以设置父元素 form-group-lg、form-group-sm，来调整。 ## 图片 ~~~html <img src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail"> ~~~