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,图片截图粘贴拖拽都可以自动上传。