全面解析Bootstrap表单使用方法(表单按钮)
作者:傻籽 时间:2024-05-10 14:08:49
一、多标签支持
一般制作按钮除了使用<button>标签元素之外,还可以使用<input type="submit">和<a>标签等。
同样,在Bootstrap框架中制作按钮时,除了刚才所说的这些标签元素之外,还可以使用在其他的标签元素上,唯一需要注意的是,要在制作按钮的标签元素上添加类名“.btn”。
<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="##" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>
二、定制风格
在Bootstrap框架中不同的按钮风格都是通过不同的类名来实现。
<button class="btn" type="button">基础按钮.btn</button>
<button class="btn btn-default" type="button">默认按钮.btn-default</button>
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
<button class="btn btn-success" type="button">成功按钮.btn-success</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
<button class="btn btn-link" type="button">链接按钮.btn-link</button>
三、按钮大小
在Bootstrap框架中,对于按钮的大小,也是可以定制的。
在Bootstrap框架中提供了三个类名来控制按钮大小:
<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>
四、块状按钮
Bootstrap框架中提供了一个类名“.btn-block”。按钮使用这个类名就可以让按钮充满整个容器,并且这个按钮不会有任何的padding和margin值。在实际当中,常把这种按钮称为块状按钮。
<button class="btn btn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary btn-block" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button>
<button class="btn btn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>
五、按钮禁用状态
在Bootstrap框架中,要禁用按钮有两种实现方式:
方法1:在标签中添加disabled属性
方法2:在元素标签中添加类名“disabled”
两者的主要区别是:
“.disabled”样式不会禁止按钮的默认行为,比如说提交和重置行为等.
在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。
<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
<button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>
今天再为大家补充一点新知识:Bootstrap表单提示信息
平常在制作表单验证时,要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"help-block"样式,将提示信息以块状显示,并且显示在控件底部。
<form role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess1">成功状态</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
<span class="help-block">你输入的信息是正确的</span>
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<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="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>
如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程
标签:bootstrap,表单
0
投稿
猜你喜欢
JavaScript实现alert弹框效果
2024-05-10 10:57:40
利用Golang解析json数据的方法示例
2024-04-27 15:36:04
利用Python实现好看的水波特效
2023-05-26 22:23:53
使用python写一个自动浏览文章的脚本实例
2023-11-10 10:52:52
从两个方面讲解SQL Server口令的脆弱性
2009-01-08 13:40:00
oracle 删除重复数据
2009-07-23 14:46:00
Python 函数绘图及函数图像微分与积分
2021-07-13 22:53:14
python获取网页中所有图片并筛选指定分辨率的方法
2021-07-28 04:57:23
一个简单的JS显示日期代码
2009-02-10 12:34:00
十几行的超简日历组件(兼容FF)js源码
2010-08-08 08:49:00
TensorFlow在MAC环境下的安装及环境搭建
2023-09-14 10:32:23
Mysql查询时间区间日期列表实例代码
2024-01-17 16:17:32
pandas DataFrame 交集并集补集的实现
2023-05-02 12:03:27
Python实现url长短链接的转换
2022-07-21 14:05:58
浅谈django中的认证与登录
2023-02-22 18:18:03
Django debug为True时,css加载失败的解决方案
2022-05-07 01:17:53
mysql清除log-bin日志的方法
2024-01-15 08:22:30
python清理子进程机制剖析
2021-08-10 22:05:19
python smtplib模块自动收发邮件功能(一)
2021-04-16 07:11:18
python opencv 图像拼接的实现方法
2021-06-21 19:11:51