第四章之BootStrap表单与图片

发布时间：2020-12-18 00:56:46 所属栏目：安全来源：网络整理

导读：Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。学习要点： 1.表单2.图片本节课我们主要学习一下 Bootstrap 表单和图片功能，通过内置的 CSS 定义，显示各种丰富的

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

学习要点：

1.表单 2.图片

本节课我们主要学习一下 Bootstrap 表单和图片功能，通过内置的 CSS 定义，显示各种丰富的效果。

一．表单

Bootstrap 提供了一些丰富的表单样式供开发者使用。

1.基本格式

电子邮件　　　　　　

密码　　　　

注：只有正确设置了输入框的 type 类型，才能被赋予正确的样式。支持的输入框控件包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

2.内联表单

注：当小于 768px，会恢复独占样式

3.表单合组

4.水平排列

注：这里用到了 col-sm 栅格系统，后面章节会重点讲解，而 control-label 表示和父元素样式同步。

5.复选框和单选框

//设置禁用的复选框

音乐

//设置内联一行显示的复选框音乐 //设置单选框

男

6.下拉列表

7.校验状态

注：还有其他状态如下:

8.添加额外的图标

电子邮件

注：除了 glyphicon-ok 外，还有几个如下表：

9.控制尺寸

注：也可以设置父元素 form-group-lg、form-group-sm，来调整。

二．图片

Bootstrap 提供了一些丰富的图片样式供开发者使用。

1.图片形状

以上所述是小编给大家介绍的Bootstrap表单与图片的相关内容，希望对大家有所帮助！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!