欢乐你我 - 按钮(Button)

[组件] 按钮(Button)

大米 2020-5-4 16:24 0 1918

按钮(Button)

使用Bootstrap的自定义按钮样式，并广泛用于表单、对话框等场景中的操作，并支持多种大小、状态等一系列变量定义。

示例

Bootstrap包括多个预定义的按钮样式，每个样式都有自己的语义目的，另外还有一些额外的功能可以用于更多的控制。

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

按钮标签

.btn 可以在<button>元素上使用，您也可以在 <a>、或 <input> 元素上使用這些 Class，同样能带来按钮效果（在少数浏览器下会有不同的渲染变异）。

当在<a>上使用按钮元素，用于触发页内功能的元素（如折叠内容）上使用按钮类时，而不是链接到当前页面中的新页面或部分，应该给这些链接role="button"适当地传达其辅助技术的目的，从而友好的支持屏幕阅读器。

Link

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

轮廓按钮

.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 btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

.btn-block样式可以创建百分百充满空间的全屏按钮：

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

启用状态

.btn样式定义的按钮，默认就是启用状态（背景较深、边框较暗、带内阴影），如果你一定要使按钮固定为启用状态、不需要点击反馈，可以增加.active样式，并包括aria-pressed="true" 属性，则状态显示为启用状态。

Primary link Link

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

禁用状态

直接将disabled布尔属性添加到任何<button>元素（直接嵌套在html标签中，使按钮看起来处于非活动的禁用状态（点击不会有响应和弹性）。

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

使用 <a>标签的禁用有所不同：

<a>标签不支持 disabled 属性，所以你必须增加 .disabled 属性，使之达到视觉禁用的效果。
未来，将包括更多的友好风格，以禁用按钮上的 pointer-events 属性，在支持该属性的浏览器中，会你看不到禁用的光标。
禁用按钮应包括aria-disabled="true" 用于指示辅助技术元素的状态的属性。

Primary link Link

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

链接功能警告

The .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a tabindex="-1" attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.

按钮插件

按钮可以用在网页上的多种场合（做更多的组件），如工具栏、按钮组等。

切换状态

添加 data-toggle="button" 属性，可以切换按钮的 active 状态，如果你预先需要切换按钮，必须将.active 样式、 aria-pressed="true"属性到 <button>标签中。

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

复选框和单选框

Bootstrap的.button 样式也可以使用于其它元素，比如<label>HTML组件上，从而实现单选、复选效果。添加 data-toggle="buttons" 到.btn-group 下的元素里，来启用它们的样式切换。

这些按钮的检查状态，只能通过 click 事件 进行更新，如果你使用其它方法更新输入，用<input type="reset"> 或手动应用输入 checked 属性，人为的在<label> 上增加 .active 状态。

注意：预先选中的按钮需要你手动将 .active 定义上，在 <label>中。

Checkbox 1 (pre-checked) Checkbox 2 Checkbox 3

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-secondary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-secondary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

Radio 1 (preselected) Radio 2 Radio 3

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

上面的两个实例对应传统使用环境。

Bootstrap 4.0正式版提供了全新的复选与单选解决方案，其方案如下：

Checked

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>

Active Radio Radio

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

方法

方法	属性
`$().button('toggle')`	切换状态，给予按钮已经启用的外观。
`$().button('dispose')`	销毁元素按钮的状态。

扫描二维码，手机查看

声明：本文来源于互联网，观点仅代表作者本人，不代表欢乐你我,真实性请妥善甄别。

回复举报