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

　　运行效果图

转载于:https://www.cnblogs.com/qingyuan/p/4598606.html

Bootstrap系列 -- 11. 基础表单相关推荐

Bootstrap系列 -- 41. 带表单的导航条
有的导航条中会带有搜索表单,在Bootstrap框架中提供了一个"navbar-form",使用方法很简单,在navbar容器中放置一个带有navbar-form类名的表单.nav ...
Flask开发系列之Web表单
Flask开发系列之Web表单简单示例 from flask import Flask, request, render_templateapp = Flask(__name__) @app.rou ...
bootstrap html5 表单验证,基于Bootstrap+jQuery.validate实现表单验证
这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤 ...
基于elementUI封装了基础表单组件
开头先BB两句 elementUI的表单组件,自带表单验证规则.虽然已经很方便了,但是我还是想封装一下. 通常用到的表单类型,主要包括:Radio 单选框,输入框,下拉框. 我封装了一个基础组件.把这 ...
SAP PM 初级系列11 - 为维修工单触发采购申请
SAP PM 初级系列11 - 为维修工单触发采购申请执行事务代码IW32,输入维修工单号,进入维修工单的修改界面,进入components选项卡,可以为维修工单增加备品备件(non-stock i ...
struts2官方中文教程系列六：表单验证
先贴个本帖的地址,以免被爬:struts2教程官方系列六:表单验证即 http://www.cnblogs.com/linghaoxinpian/p/6906720.html 下载本章节代码介 ...
7Python全栈之路系列之Django表单
Python全栈之路系列之Django表单从Request对象中获取数据 HttpRequest对象包含当前请求URL的一些信息: 熟悉/方法描述例如 request.path 除域名以外的请求 ...
HTML标签汇总（基础表单部分）
HTML标签汇总(基础表单部分) <form> 用于用户输入创建的HTML表单表单包含<input>元素,比如文本字段,复选框,单选框,提交按钮等等表单还可以包含menus ...
python-flask(二)集成bootstrap、集成web表单、集成邮件发送
文章目录一.flask集成bootstrap 1. 什么是Bootstrap? 2. Flask中如何集成Bootstrap? 3. Flask-Bootstrap实现了什么? 二.Flask中集成 ...

Bootstrap系列 -- 11. 基础表单

Bootstrap系列 -- 11. 基础表单相关推荐

最新文章

热门文章