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中主要将这些元素的marginpaddingborder等进行了细化设置。当然表单除了这几个元素之外,还有inputselecttextarea等元素,在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果。

  1. 宽度变成了100%

  2. 设置了一个浅灰色(#ccc)的边框

  3. 具有4px的圆角

  4. 设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化

  5. 设置了placeholder的颜色为#999

 

  运行效果图

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/397960.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python excel centos_centos中使用python遇到的几个问题

用python搞了一个从excel中读取cobbler节点信息并加入cobbler中的脚本&#xff0c;运行的过程中出了不少问题&#xff0c;这里记录下来&#xff0c;方便日后查找&#xff01;一、yum install python&#xff0c;我通过这个命令安装python&#xff0c;默认安装的是2.6的版本&…

oracle集群监听启动,在RAC中lsnrctl和srvctl操作监听区别

朋友今天询问了一个问题RAC中使用srvctl 操作监听和lsnrctl 操作监听结果不一样&#xff0c;下面我通过实验说明问题0.listener.ora文件内容LISTENER_RAC1 (DESCRIPTION_LIST (DESCRIPTION (ADDRESS (PROTOCOL TCP)(HOST rac1-vip)(PORT 1521)(IP FIRST))(ADDRESS (PROTO…

how to use webpart container in kentico

https://docs.kentico.com/k11/developing-websites/developing-websites-using-the-portal-engine/using-web-part-containers Webpart Container webpart container中的orangebox, SELECT * FROM dbo.CMS_WebPartContainer WHERE ContainerDisplayName LIKE %orange%; 把…

IE通过推理IE陈述的版本号

样例&#xff1a; 1. <!--[if !IE]> 除IE外都可识别 <![endif]--> 2. <!--[if IE]> 全部的IE可识别 <![endif]--> 3. <!--[if IE 5.0]> 仅仅有IE5.0能够识别 <![endif]--> 4. <!--[if IE 5]> 仅IE5.0与IE5.5能够识别 <![endif]--…

自己调试接口遇到的错误记录

200 请求成功500 请求失败 失败原因在http body里面403 未认证404 服务未找到 转载于:https://www.cnblogs.com/ruixin-jia/p/5734767.html

excel如何找到高频词_拟录取后:应届生和往届生档案哪里找;重灾院校区;高频词背诵表...

今日消息1、应届生和往届生档案哪里找&#xff1f;2、重灾院校区3、考研云督学班高频词背诵表汇总1、应届生和往届生档案哪里找&#xff1f;往年这个时候论文答辩、复试已经结束&#xff0c;已经进入毕业季&#xff01;现在你们毕业答辩结束了吗&#xff1f;你们都顺利上岸吗&a…

oracle 中表,oracle中表操作

1.1&#xff1a;创建一表空间 TABLESPACE01,初始大小50MB,允许自动增长数据库文件,每次增长10MBCREATE TABLESPACE TABLESPACE01LOGGINGDATAFILE’F:\TABLESPACE\DATA01.DBF’ SIZE 50MREUSE AUTOEXTEND ON NEXT 10M;1.2:创建用户 (oracle12c)此处创建用户报错&#xff0c;原因…

UDP Ping程序实现--第2关:接收并转发消息

✨创作不易&#xff0c;还希望各位大佬支持一下 &#x1f44d; 点赞&#xff0c;你的认可是我创作的动力&#xff01; ⭐️ 收藏&#xff0c;你的青睐是我努力的方向&#xff01; ✏️ 评论&#xff0c;你的意见是我进步的财富&#xff01; 任务描述 本关任务&#xff1a;在…

JAVA经典题--死锁案例

死锁原理: 两个线程相互等待对方释放同步监视器 例子程序: 1 public class TestDeadLock implements Runnable {2 3 public int flag 1;4 static Object o1 new Object(), o2 new Object();5 6 public void run() {7 if (flag 1) {8 s…

考研编程练习----排名

题目描述&#xff1a;今天的上机考试虽然有实时的Ranklist&#xff0c;但上面的排名只是根据完成的题数排序&#xff0c;没有考虑每题的分值&#xff0c;所以并不是最后的排名。给定录取分数线&#xff0c;请你写程序找出最后通过分数线的考生&#xff0c;并将他们的成绩按降序…

linux下安装dovecot

Dovecot是一个开源的&#xff0c;为Linux/Unix-like系统提供IMAP,POP3服务的软件。主要是为了安全产生的&#xff0c;不管大小应用&#xff0c;Dovecot都是一个非常优秀的选择。它非常快&#xff0c;配置简单&#xff0c;不需要专业的管理员&#xff0c;而且它也非常节省内存。…

放大镜_指甲钳上有放大镜?再也不怕夹到肉了

扒姬说&#xff1a;剪指甲钳最害怕什么&#xff0c;是没注意夹到肉有没有。尤其是近视的人和手脚不便的老人&#xff0c;或者是给较小的宝宝剪指甲时&#xff0c;总是看不清指甲边缘的形状、刀口的位置&#xff0c;一不小心就会夹到手指、脚趾。今天&#xff0c;扒姬推荐一个特…

linux学习规划

转载于:https://www.cnblogs.com/Alight/p/4601510.html

oracle如何在本地建库,oracle在本地建库

oracle数据库本地建库&#xff0c;需要使用oracle安装路径下面的-配置和移植工具-Database Configuration Assistant 通过一次点击下一步进行建库。 在库建好后&#xff0c;使用系统账号 User:sys password:sys Connect as SYSDBA在客户端进行登录 --创建表空间 Create tablesp…

「BZOJ1485」[HNOI2009] 有趣的数列 (卡特兰数列)

「BZOJ1485」[HNOI2009] 有趣的数列 Description 我们称一个长度为2n的数列是有趣的&#xff0c;当且仅当该数列满足以下三个条件&#xff1a; (1)它是从1到2n共2n个整数的一个排列{ai}&#xff1b; (2)所有的奇数项满足a1<a3<…<a2n-1&#xff0c;所有的偶数项满足a2…

wedo2.0编程模块介绍_能量黑科技模块系列十:RFID魔块

RFID魔块RFID此模块可以对套件配套的RFID卡或者空白RFID卡进行读写&#xff0c;用于权限验证的DIY制作。常规的公交卡、地铁卡是无法进行写入&#xff0c;但可以读取UID号。配套RFID卡内存为1K&#xff0c;有16个分区&#xff0c;每个分区有3个数据块可进行写入此模块可以对套件…

Android 6.0权限问题

Android 6.0 open failed: EACCES (Permission denied) 对于6.0权限问题&#xff0c;报错如上&#xff1a; 解决方案&#xff1a; Android 6.0 (Marshmallow). 添加新的权限模型&#xff0c;需要在运行时动态获取所需要的权限。 首先判断手机系统版本是否在6.0然后才是支持运行…

[SoapUI] 通过SoapUI发送POST请求,请求的body是JSON格式的数据

通过SoapUI发送POST请求&#xff0c;请求的body是JSON格式的数据&#xff1a; data{"currentDate":"2015-06-19","reset":true} 而且通过Fiddler抓取页面报文 Content-Type 是 application/x-www-form-urlencoded 一开始我将Content-Type appl…

oracle -239报错,解决: ./check_oracle_health --connect orcl --mode connection-time 报错的问题...

错误提示./check_oracle_health --connect orcl --mode connection-timeCRITICAL - cannot connect to orcl. install_driver(Oracle) failed: Cant locate DBD/Oracle.pm in INC (INC contains: . /usr/local/lib64/perl5 /usr/local/share/perl5 /usr/lib64/perl5/vendor_per…

【python 3.6】调用另一个文件的类的方法

文件1&#xff1a;test12.py 文件2&#xff1a;test13.py 文件1 如下&#xff1a; #!/usr/bin/python # -*- coding: utf-8 -*-class abcd(object):def __init__(self):passdef pr(self):return("KKKKKKK") if __name__"__main__":abcd().pr() 文件2&#…