博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
表单控件
阅读量:5958 次
发布时间:2019-06-19

本文共 2506 字,大约阅读时间需要 8 分钟。

复选框和单选按钮水平排列

1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”

2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”

按钮

 

多标签制作按钮

 

a标签按钮span标签按钮
div标签按钮

 

注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮。

按钮大小

有时候在制作按钮的时候需要按钮宽度充满整个父容器(width:100%)。Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器,并且这个按钮不会有任何的padding和margin值。

<button class="btn btn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button>

按钮状态

Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover)点击状态(:active)焦点状态(:focus)几种

 

在Bootstrap框架中,要禁用按钮有两种实现方式:

 

方法1:在标签中添加disabled属性(disabled="disabled")

 

方法2:在元素标签中添加类名“disabled”

 

两者的主要区别是:

 

“.disabled”样式不会禁止按钮的默认行为,比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为,则需要通过JavaScript这样的语言来处理。对于<a>标签也存在类似问题,如果通过类名“.disable”来禁用按钮,其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

 

表单控件大小

高度处理:

1、input-sm:让控件比正常大小更小

2、input-lg:让控件比正常大小更大

 

 

宽度处理:

表单控件状态

 焦点状态:<input class="form-control input-lg" type="text" placeholder="焦点状态">

禁用状态:只需要在需要禁用的表单控件上加上“disabled”即可

注:如果legend中有输入框的话,这个输入框是无法被禁用

验证状态:

1、.has-warning:警告状态(黄色)

2、.has-error:错误状态(红色)
3、.has-success:成功状态(绿色)

带图标:

表单提示信息

 

你输入的信息是正确的

<div class="form-group has-warning has-feedback">

<label class="control-label" for="inputWarning1">警告状态</label>
<input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
<span class="help-block">请输入正确信息</span>
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError1">错误状态</label>
<input type="text" class="form-control" id="inputError1" placeholder="错误状态">
<span class="help-block">你输入的信息是错误的</span>
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

 

 

你输入的信息是正确的

也可使用类名“help-inline”

.help-inline{  display:inline-block;  padding-left:5px;  color: #737373;}

 

转载于:https://www.cnblogs.com/family-626-77/p/5775015.html

你可能感兴趣的文章
Sqlserver2008日志压缩
查看>>
linux更改语言
查看>>
centos7 修改mac地址
查看>>
<script>标签的加载解析执行
查看>>
恢复rm删除的文件(ext3
查看>>
账户注销完自动登录账户,并且不需要再点击屏幕的账户头像
查看>>
【Interface&navigation】按钮(29)
查看>>
Extjs4.x (MVC)Controller中refs以及Ext.ComponentQuery解析
查看>>
Server-01 How to Find the Remote Desktop Port
查看>>
Java--接口、抽象与继承
查看>>
通过IP判断登录地址
查看>>
Oracle闪回技术
查看>>
利用单壁路由实现vlan间路由
查看>>
hello world
查看>>
CentOS 7 配置yum本地base源和阿里云epel源
查看>>
python 学习导图
查看>>
生成树
查看>>
(MYSQL) Unknown table 'a' in MULTI DELETE的解决办法
查看>>
作为一个程序员必备的素质
查看>>
Webpack入门教程十四
查看>>