
Bootstarp 4 入门按钮
html+css / 发布于 8个月前 / 更新于 1天前 / 本文字数: 3.9k 字 /教程集数: 13
标签: boostrap 按钮 / bootstrap btn
本文目录
boostrap 按钮
使用 Bootstrap 自定义按钮样式到表单、对话框等操作,并支持多种按钮大小、状态等。
语法
class="btn btn-类型"
类型
- primary
- secondary
- success
- danger
- warning
- info
- light
- dark
- link
以上对应下颜色
禁用文字换行.text-nowrap
外框按钮 btn btn-outline-类型
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
尺寸大小 .btn-lg
,.btn-sm
<button type="button" class="btn btn-primary mb-4">button</button>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
选中按钮active
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
禁用按钮disabled
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
链接注意
本 .disabled
类使用 pointer-events: none
尝试禁用的链路功能<a>
,但CSS属性尚不规范。此外,即使在支持的浏览器中 pointer-events: none
,键盘导航也不会受到影响,这意味着有视力的键盘用户和辅助技术用户仍将能够激活这些链接。为安全起见,请tabindex="-1"
在这些链接上添加一个属性(以防止它们获得键盘焦点),并使用自定义JavaScript禁用其功能。
复选框和单选按钮
Bootstrap的 .button
样式可以应用于 <label>
等其他元素,以提供复选框或单选样式按钮切换。添加 data-toggle="button"
到.btn-group
包含这些修改后的按钮以通过JavaScript启用其切换行为,并在按钮内添加.btn-group-toggle
样式。请注意,您可以创建单个输入驱动的按钮或它们的组。
这些按钮的选中状态仅通过click按钮上的事件进行更新。如果您使用其他方法来更新输入(例如,通过 <input type="reset"
>或通过手动应用输入的checked属性来进行更新),则需要手动.active
打开<label>
。
请注意,预先检查的按钮需要您手动将 .active
类添加到输入的<label>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked autocomplete="off"> Checked
</label>
</div>
js方法
方法 | 描述 |
---|---|
$().button('toggle') |
切换状态。使按钮具有已被激活的外观。 |
$().button('dispose') |
销毁元素的按钮。 |
版权提示
1.除了标识原创之外,其他可能来源于网友的分享,仅供学习使用2.如您发现侵犯了您的权利,请联系我们删除
3.转载必须带本文链接,否则你将侵权
4.关于会员或其发布的相关内容均由会员自行提供,会员依法应对其提供的任何信息承担全部责任,本站不对此承担任何法律责任
0 人点赞
评论区 (0)
公告通知
关于网站广告,由于需要营运成本,所以增加了广告联盟。
如果你觉得本站帮助到您,麻烦您帮点个小广告,感谢不尽。
最新视频教程
-
-
黑白课堂
- Laravel6 全套入门实战
- 1404 0
-
-
-
黑白课堂
- Laravel6 全套入门实战
- 921 2
-
-
-
黑白课堂
- Laravel6 全套入门实战
- 840 0
-
-
-
黑白课堂
- Laravel6 全套入门实战
- 758 0
-
-
-
黑白课堂
- Laravel6 全套入门实战
- 666 0
-
最新视频课程
-
Laravel 消息通知使用
黑白课堂混元大罗金仙
4801 03个月前
-
微信小程序等比例图片压缩上传,100%可用,非官方压缩方法
黑白课堂混元大罗金仙
4519 12年前
-
Laravel 的 PhpSpreadsheet 包入门
黑白课堂混元大罗金仙
3004 02年前
-
ace.js 打造一款属于你的 Web 编辑器,入门文档。
黑白课堂混元大罗金仙
2939 02年前
-
Laravel 表格操作 Maatwebsite/Laravel-Excel 3.1 最新版本的操作指南
黑白课堂混元大罗金仙
2929 01年前
-
wap2App 入门讲解,100%速成,全面为你讲解。
黑白课堂混元大罗金仙
2593 02年前
-
Laravel Permission 中文文档
黑白课堂混元大罗金仙
2546 02年前
-
Laravel 设置请求头 header 参数
黑白课堂混元大罗金仙
2515 01年前
-
Laravel 实现 RBAC 权限管理功能 Permission 包操作
黑白课堂混元大罗金仙
2477 02年前
-
解释 OAuth 2.0 认证 和使用场景说明
黑白课堂混元大罗金仙
2038 02年前
-
KongQi Laravel Admin2.0 文档安装
黑白课堂混元大罗金仙
566 27个月前
-
KongQi Laravel admin2.0 layui admin 版本序言
黑白课堂混元大罗金仙
386 06个月前
-
黑白课堂社区使用如何购买元宝和开通 VIP
黑白课堂混元大罗金仙
1027 01年前
-
易语言入门拖入文件导入到超级列表框表格内
空气太乙真仙
1025 011个月前
-
易语言入门易语言定时任务模块
空气太乙真仙
967 09个月前
-
Visual Studio Code 入门和使用教程安装下载
空气太乙真仙
882 01年前
-
Visual Studio Code 入门和使用教程插件安装使用
空气太乙真仙
766 11年前
-
易语言入门TAB 标签页制作
空气太乙真仙
637 011个月前
-
Visual Studio Code 入门和使用教程快捷键使用
空气太乙真仙
624 01年前
-
黑白课堂社区使用社区规范说明
黑白课堂混元大罗金仙
555 01年前
