# 第 4 章 表单和图片
**学习要点:**
1.表单
2.图片
主讲教师:李炎恢
本节课我们主要学习一下 Bootstrap 表单和图片功能,通过内置的 CSS 定义,显示各种丰富的效果。
**一.表单**
Bootstrap 提供了一些丰富的表单样式供开发者使用。
**1.基本格式**
//实现基本的表单样式
```
<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>
```
注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式。支持的输入框控件包括:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
**2.内联表单**
//让表单左对齐浮动,并表现为 inline-block 内联块结构
```
<form class="form-inline">
```
注:当小于 768px,会恢复独占样式
**3.表单合组**
//前后增加片段
```
<div class="input-group">
<div class="input-group-addon">¥</div>
<input type="text" class="form-control">
<div class="input-group-addon">.00</div>
</div>
```
**4.水平排列**
//让表单内的元素保持水平排列
```
<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>
```
注:这里用到了 col-sm 栅格系统,后面章节会重点讲解,而 control-label 表示和父元素样式同步。
**5.复选框和单选框**
//设置复选框,在一行
```
<div class="checkbox">
<label> <input type="checkbox">体育 </label>
</div>
<div class="checkbox">
<label> <input type="checkbox">音乐 </label>
</div>
```
//设置禁用的复选框
```
<div class="checkbox disabled">
<label> <input type="checkbox" disabled>音乐 </label>
</div>
```
//设置内联一行显示的复选框
```
<label class="checkbox-inline"> <input type="checkbox">体育</label>
<label class="checkbox-inline disabled"> <input type="checkbox" disabled>音乐</label>
```
//设置单选框
```
<div class="radio disabled">
<label> <input type="radio" name="sex" disabled>男</label>
</div>
```
**6.下拉列表**
//设置下拉列表
```
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
```
**7.校验状态**
//设置为错误状态
```
<div class="form-group has-error">
```
注:还有其他状态如下:
样式说明
has-error错误状态
has-success成功状态
has-warning警告状态
//label 标签同步相应状态
```
<label class="control-label">Input with success</label>
```
**8.添加额外的图标**
//文本框右侧内置文本图标
```
<div class="form-group has-feedback">
<label>电子邮件</label>
<input type="email" class="form-control">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
```
注:除了 glyphicon-ok 外,还有几个如下表:
样式说明
glyphicon-ok成功状态
glyphicon-warning-sign警告状态
glyphicon-remove错误状态
**9.控制尺寸**
//从大到小
```
<input type="password" class="form-control input-lg">
<input type="password" class="form-control">
<input type="password" class="form-control input-sm">
```
注:也可以设置父元素 form-group-lg、form-group-sm,来调整。
**二.图片**
Bootstrap 提供了一些丰富的图片样式供开发者使用。
**1.图片形状**
//三种形状
```
<img src="img/pic.png" alt="图片" class="img-rounded">
<img src="img/pic.png" alt="图片" class="img-circle">
<img src="img/pic.png" alt="图片" class="img-thumbnail">
```
//响应式图片
```
<img src="img/pic.png" alt="图片" class="img-responsive">
```
- 介绍
- HTML/CSS 教程
- 第 1 章 HTML5 概述
- 第 2 章 基本格式
- 第 3 章 文本元素
- 第 4 章 超链接和路径
- 第 5 章 分组元素
- 第 6 章 表格元素
- 第 7 章 文档元素
- 第 8 章 嵌入元素
- 第 9 章 音频和视频
- 第 10 章 表单元素[上]
- 第 10 章 表单元素[中]
- 第 10 章 表单元素[下]
- 第 11 章 全局属性和其他
- 第 12 章 CSS 入门
- 第 13 章 CSS 选择器[上]
- 第 14 章 CSS 颜色与度量单位
- 第 15 章 CSS 文本样式[上]
- 第 15 章 CSS 文本样式[下]
- 第 16 章 CSS 盒模型[上]
- 第 16 章 CSS 盒模型[下]
- 第 17 章 CSS 边框与背景[上]
- 第 17 章 CSS 边框与背景[下]
- 第 18 章 CSS 表格与列表
- 第 19 章 CSS 其他样式
- 第 20 章 CSS3 前缀和 rem
- 第 21 章 CSS3 文本效果
- 第 21 章 CSS3 文本效果
- 第 23 章 CSS3 边框图片效果
- 第 24 章 CSS3 变形效果[下]
- 第 25 章 CSS3 过渡效果
- 第 26 章 CSS3 动画效果
- 第 27 章 CSS 传统布局[上]
- 第 27 章 CSS 传统布局[下]
- 第 28 章 CSS3 多列布局
- 第 29 章 CSS3 弹性伸缩布局[上]
- 第 29 章 CSS3 弹性伸缩布局[中]
- 第 29 章 CSS3 弹性伸缩布局[下]
- 第 30 章 使用 Emmet 插件
- Bootstrap 教程
- 第 1 章 Bootstrap 介绍
- 第 2 章 排版样式
- 第 3 章 表格和按钮
- 第 4 章 表单和图片
- 第 5 章 栅格系统
- 第 6 章 辅组类和响应式工具
- 第 7 章 图标菜单按钮组件
- 第 8 章 输入框和导航组件
- 第 9 章 路径分页标签和徽章组件
- 第 10 章 巨幕页头缩略图和警告框组件
- 第 11 章 进度条媒体对象和 Well 组件
- 第 12 章 列表组面板和嵌入组件
- 第 13 章 模态框插件
- 第 14 章 下拉菜单和滚动监听插件
- 第 15 章 标签页和工具提示插件
- 第 16 章 弹出框和警告框插件
- 第 17 章 按钮和折叠插件
- 第 18 章 轮播插件
- 第 19 章 附加导航插件
- 第 20 章 项目实战--响应式导航[1]
- 第 20 章 项目实战--响应式轮播图[2]
- 第 20 章 项目实战--首页内容介绍[上][3]
- 第 20 章 项目实战--首页内容介绍[下][4]
- 第 20 章 项目实战--资讯内容[5,6]
- 第 20 章 项目实战--案例和关于[7]
- javaScript 教程
- javascript快速入门1--JavaScript前世今生,HelloWorld与开发环境
- javascript快速入门2--变量,小学生数学与简单的交互
- javascript快速入门3--分支判断与循环
- javascript快速入门4--函数与内置对象
- javascript快速入门5--数组与对象
- javascript快速入门6--Script标签与访问HTML页面
- javascript快速入门7--ECMAScript语法基础
- javascript快速入门8--值,类型与类型转换
- javascript快速入门9--引用类型
- javascript快速入门10--运算符,语句
- javascript快速入门11--正则表达式
- javascript快速入门12--函数式与面向对象
- javascript快速入门13--BOM——浏览器对象模型(Browser Object Model)
- javascript快速入门14--DOM基础
- javascript快速入门15--节点
- javascript快速入门15--表单
- javascript快速入门16--表格
- javascript快速入门17--事件
- javascript快速入门18--样式
- javascript快速入门19--定位
- javascript快速入门20--Cookie
- javascript快速入门21--DOM总结
- javascript快速入门22--Ajax简介
- javascript快速入门23--XHR—XMLHttpRequest对象
- javascript快速入门24--XML基础
- javascript快速入门25--浏览器中的XML
- javascript快速入门26--XPath
- javascript快速入门27--XSLT基础
- PHP 教程
- 第一章 如何加载运行已发布的PHP项目
- 第二章 PHP基础
- 第三章 操作符与控制结构
- 第四章 数学运算
- 第五章 数组
- 第六章 目录与文件
- 第七章 自定义函数
- 第八章 字符串处理
- 第九章 正则表达式
- 第十章 日期与时间
- 第十一章 表单与验证
- 第十二章 会话控制
- 第十三章 上传文件
- 第十四章 处理图像
- 第十五章 MySQL 数据库
- 第十六章 PHP 操作MySQL
- 第十七章 面向对象基础
- 第十八章 面向对象的特性
- 第十九章 面向对象的工具