Bootstarp 4 入门按钮

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') 销毁元素的按钮。
如果你觉得本站帮助到您,麻烦您帮点个小广告支持下本站,感谢不尽。

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。

公告通知

关于网站广告,由于需要营运成本,所以增加了广告联盟。
如果你觉得本站帮助到您,麻烦您帮点个小广告,感谢不尽。

空气

空气

热卖技术,喜欢新东西。

年度VIP 魔童降世
查看更多

最新视频课程

Laravel 消息通知使用

Laravel 的 PhpSpreadsheet 包入门

ace.js 打造一款属于你的 Web 编辑器,入门文档。

wap2App 入门讲解,100%速成,全面为你讲解。

Laravel Permission 中文文档

Laravel 设置请求头 header 参数

Laravel 实现 RBAC 权限管理功能 Permission 包操作

解释 OAuth 2.0 认证 和使用场景说明

KongQi Laravel Admin2.0 文档安装

KongQi Laravel admin2.0 layui admin 版本序言

黑白课堂社区使用如何购买元宝和开通 VIP

易语言入门拖入文件导入到超级列表框表格内

易语言入门易语言定时任务模块

Visual Studio Code 入门和使用教程安装下载

易语言入门TAB 标签页制作

黑白课堂社区使用社区规范说明

钻级赞助商