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

Bootstrap每天必学之按钮（一）

时间：2020-05-20 03:04 编辑：来源：阅读：
扫一扫，手机访问

摘要：Bootstrap每天必学之按钮（一）

本文主要讲解的是按钮的样式。 1.选项 2.尺寸 3.活动状态 4.禁用状态 5.可做按钮使用的Html标签 [b]选项 [/b] [img]http://files.jb51.net/file_images/article/201511/20151124102306669.png?20151024102321[/img] 使用上面列出的class可以快速创建一个带有样式的按钮。

 <button type="button" class="btn btn-default">Default</button>
 <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-success">Success</button>
 <button type="button" class="btn btn-info">Info</button>
 <button type="button" class="btn btn-warning">Warning</button>
 <button type="button" class="btn btn-danger">Danger</button>
 <button type="button" class="btn btn-link">链接</button>

[img]http://files.jb51.net/file_images/article/201511/20151124102342253.png?20151024102350[/img] [b]尺寸[/b] 需要让按钮具有不同尺寸吗？使用.btn-lg、.btn-sm、.btn-xs可以获得不同尺寸的按钮。

<p>
 <button type="button" class="btn btn-primary btn-lg">Large button</button>
 <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
 <button type="button" class="btn btn-primary">Default button</button>
 <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-sm">Small button</button>
 <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
 <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

[img]http://files.jb51.net/file_images/article/201511/20151124102406291.png?20151024102414[/img] 通过给按钮添加.btn-block可以使其充满父节点100%的宽度，而且按钮也变为了块级（block）元素。

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

[img]http://files.jb51.net/file_images/article/201511/20151124102434007.png?20151024102441[/img] [b][/b] [b]活动状态[/b] 当按钮处于活动状态时，其表现为被按压下（底色更深，边框夜色更深，内置阴影）。对于B<button>元素，是通过:active实现的。对于<a>元素，是通过.active实现的。然而，你还可以联合使用.active <button>并通过编程的方式使其处于活动状态。 [b]按钮元素[/b] 由于:active是伪状态，因此无需添加，但是在需要表现出同样外观的时候可以添加.active。

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

[img]http://files.jb51.net/file_images/article/201511/20151124102517164.png?20151024102524[/img] [b]链接元素[/b] 可以为<a>添加.active class。

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

可以和上面的button进行一下对比。 [img]http://files.jb51.net/file_images/article/201511/20151124102541983.png?20151024102551[/img] [b]禁用状态 [/b] 通过将按钮的背景色做50%的褪色处理就可以呈现出无法点击的效果。 [b]按钮元素 [/b]为<button>添加disabled属性。

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

[img]http://files.jb51.net/file_images/article/201511/20151124102609059.png?20151024102616[/img] 可以把鼠标放在按钮上点击查看效果。跨浏览器的兼容性如果为<button>添加disabled属性，Internet Explorer 9及更低版本的浏览器将会把按钮中的文本绘制为灰色，并带有恶心的阴影，目前还没有办法解决。 [b]链接元素[/b] 为<a>添加.disabled class。

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

[img]http://files.jb51.net/file_images/article/201511/20151124102628386.png?20151024102635[/img] 这是和上面的按钮做一个对比。我们把.disabled作为工具class使用，就像.active class一样，因此不需要增加前缀。链接功能不受影响上面提到的class只是改变<a>的外观，不影响功能。在此文档中，我们通过JavaScript代码禁用了链接的默认功能。 [b]可做按钮使用的Html标签 [/b] 可以为<a>、<button>或<input>元素添加按钮class。

 <a class="btn btn-default" href="#" role="button">Link</a>
 <button class="btn btn-default" type="submit">Button</button>
 <input class="btn btn-default" type="button" value="Input">
 <input class="btn btn-default" type="submit" value="Submit">

[img]http://files.jb51.net/file_images/article/201511/20151124102648577.png?2015102410271[/img] 跨浏览器表现作为最佳实践，我们强烈建议尽可能使用<button>元素以确保跨浏览器的一致性样式。出去其它原因，这个Firefox的bug让我们无法为基于<input>标签的按钮设置line-height，这导致在Firefox上，他们与其它按钮的高度不一致。本节主要讲解的内容是button按钮的样式，大家可以灵活的运行这几个样式进行控制就可以了，希望对大家的学习有所帮助。如果大家还想深入学习，可以点击[url=http://www.1sucai.cn/article/84087.htm]这里[/url]进行学习，再为大家附两个精彩的专题：[url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url] [url=http://www.1sucai.cn/Special/769.htm]Bootstrap实战教程[/url]

全部评论(0)

上一篇：JavaScript计算器网页版实现代码分享
下一篇：js实现点击按钮弹出上传文件的窗口

资讯排行榜
更多>>