BootStrap按钮标签及基本样式
2016-11-23 09:50
716 查看
按钮标签
在<a>,<button>或input元素上使用按钮class。但是为了避免跨浏览器的不一致性,建议使用<button>标签。
<!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta charset="utf-8"> <!-- 引入 Bootstrap --> <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!--记录不同的标签使用bootstrap的btn类--> <a class="btn btn-default" href="#" role="button">链接</a> <button class="btn btn-default" type="submit">按钮</button> <input class="btn btn-default" type="button" value="输入"> <input class="btn btn-default" type="submit" value="提交"> <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <!-- 包括所有已编译的插件 --> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
感觉link标签的不怎么明显,但是还是能够从边距上看出是一个button的,这里只是说明了怎样利用不同的标签来使用btnclass。
可以使用在以上标签的样式
基本样式
btn 为按钮添加基本的按钮样式,一般与下面的类联合只用,这样可以保证按钮大小和边距的统一。
颜色
btn-default默认的按钮样式,就是白底黑字灰框,要跟btn联合使用,下同
btn-primary 原始的按钮样式,蓝底白字
btn-success 成功的样式,绿底白字
btn-info表示点击后会弹出信息,淡蓝色底白字
btn-warning 表示需要谨慎操作的按钮,黄底白字
btn-danger表示危险的操作,红底白字
btn-link让按钮看起来像一个连接,仍然保持按钮的行为
大小
btn-lg 比普通的图标要大的大图标
btn-sm 小图标
btn-xs 超小图标
btn-block 块级按钮,拉伸至父元素100%的宽度
按钮这里并不能构成响应式分布,如果三个都写了,最后一个类会覆盖前面的样式。
状态
active 表示按钮被激活,按钮会比普通的按钮宽一些
disabled disabled属性和disabled类都能将按钮禁用,两者效果相同。对于link,用disabled属性会让link显示出和button相同的效果。鼠标移上去就变成禁止的样式
<!--应用了disabled类的只是禁用了连接--> <a class="btn btn-danger disabled" role="button" href="#">应用disabled类</a> <!--使用了disabled属性则禁用了整个按钮--> <a class="btn btn-danger" role="button" disabled="disabled" href="#">应用disabled标签</a> <button class="btn btn-default btn-danger disabled" type="submit">按钮</button>
以上所述是小编给大家介绍的BootStrap按钮标签及基本样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- Bootstrap基本样式学习笔记之标签(5)
- 基本让input 按钮 和 a标签按钮在不同浏览器统一样式
- Bootstrap学习总结笔记(4)-- 基本样式之按钮
- Bootstrap学习总结笔记(5)-- 基本样式之标签
- Bootstrap基础2——基本标签,样式使用
- Bootstrap 基本样式-按钮
- Bootstrap基本样式学习笔记之按钮(4)
- 满足你使用bootstrap-table的基本需求 列表渲染 a标签的bug 添加按钮
- Bootstrap历练实例:弹出提示信息的样式按钮
- bootstrap表格和按钮样式
- Bootstrap学习总结笔记(2)-- 基本样式之表格
- Flex中通过textAlign样式在一个按钮(Button)控件中设置标签(label)对齐方式的例子
- bootstrap 和 Jquery UI 按钮样式冲突解决办法
- 使用bootstrap进行表格和按钮的基本测试
- bootstrap基本标签总结[转]
- BootStrap基本样式
- bootstrap设置按钮样式
- Bootstrap历练实例:警告样式按钮
- bootstrap基本标签总结2
- bootstrap-进度条--基本样式