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方法