当前位置：首页 > 资讯 > 技术文档

BootStrap按钮标签及基本样式

时间：2020-12-09 10:22 编辑：来源：阅读：
扫一扫，手机访问

摘要：BootStrap按钮标签及基本样式

[b]按钮标签[/b] 在<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。可以使用在以上标签的样式 [b]基本样式[/b] btn 为按钮添加基本的按钮样式，一般与下面的类联合只用，这样可以保证按钮大小和边距的统一。 [b]颜色[/b] btn-default默认的按钮样式，就是白底黑字灰框，要跟btn联合使用，下同 btn-primary 原始的按钮样式，蓝底白字 btn-success 成功的样式，绿底白字 btn-info表示点击后会弹出信息，淡蓝色底白字 btn-warning 表示需要谨慎操作的按钮，黄底白字 btn-danger表示危险的操作，红底白字 btn-link让按钮看起来像一个连接，仍然保持按钮的行为 [b]大小[/b] btn-lg 比普通的图标要大的大图标 btn-sm 小图标 btn-xs 超小图标 btn-block 块级按钮，拉伸至父元素100%的宽度按钮这里并不能构成响应式分布，如果三个都写了，最后一个类会覆盖前面的样式。 [b]状态[/b] 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按钮标签及基本样式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持！

全部评论(0)

上一篇：jquery入门必备的基本认识及实例(整理)
下一篇：使用jQuery操作DOM的方法小结

资讯排行榜
更多>>