Bootstrap4组件:按钮(Button)


发布时间:2020-03-18 20:51    作者: Uncle Hui   已过去:4 月,2 周   阅读总量:201 已被赞:0


按钮(Button)

示例

<button class="btn btn-primary">Primary</button>

<button class="btn btn-secondary">Secondary</button>

<button class="btn btn-success">Success</button>

<button class="btn btn-danger">Danger</button>

<button class="btn btn-warning">Warning</button>

<button class="btn btn-info">Info</button>

<button class="btn btn-light">Light</button>

<button class="btn btn-dark">Dark</button>

 

<button class="btn btn-link">Link</button>

按钮标签

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

<a class="btn btn-primary" href="#">Link</a>

<button class="btn btn-primary">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 class="btn btn-outline-primary">Primary</button>

<button class="btn btn-outline-secondary">Secondary</button>

<button class="btn btn-outline-success">Success</button>

<button class="btn btn-outline-danger">Danger</button>

<button class="btn btn-outline-warning">Warning</button>

<button class="btn btn-outline-info">Info</button>

<button class="btn btn-outline-light">Light</button>

<button class="btn btn-outline-dark">Dark</button>

尺寸规格与大小定义

配合.btn-lg  .btn-sm 两个邻近元素,可分别实现大规格按钮、小规格按钮的定义。

<button class="btn btn-primary btn-lg">提交</button>

<button class="btn btn-primary">提交</button>

<button class="btn btn-primary btn-sm">提交</button>

 

<button class="btn btn-primary btn-block">提交</button>

启用与禁用状态

启用.btn样式定义的按钮,默认就是启用状态(背景较深、边框较暗、带内阴影),如果你一定要使按钮固定为启用状态、不需要点击反馈,可以增加.active样式

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

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

  1. <a>标签不支持 disabled 属性,所以你必须增加 .disabled 属性,使之达到视觉禁用的效果。
  2. 未来,将包括更多的友好风格,以禁用按钮上的 pointer-events 属性,在支持该属性的浏览器中,会你看不到禁用的光标。

<button class="btn btn-primary">提交</button>

<button class="btn btn-primary active">提交</button>

<button class="btn btn-primary" disabled>提交</button>

<a href="#" class="btn btn-primary disabled">提交</a>

按钮插件

切换状态

添加 data-toggle="button" 属性,可以切换按钮的 active 状态,如果你预先需要切换按钮,必须将.active 样式

<button class="btn btn-primary" data-toggle="button">Single toggle</button>

复选框和单选框

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

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

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

<div class="btn-group" data-toggle="buttons">

<label class="btn btn-secondary active">

<input type="checkbox" name="checkbox[]" checked> Java

</label>

<label class="btn btn-secondary">

<input type="checkbox" name="checkbox[]"> PHP

</label>

<label class="btn btn-secondary">

<input type="checkbox" name="checkbox[]"> Python

</label>

</div>

 

<div class="btn-group" data-toggle="buttons">

<label class="btn btn-secondary active">

<input type="radio" name="radio" checked> Java

</label>

<label class="btn btn-secondary">

<input type="radio" name="radio"> PHP

</label>

<label class="btn btn-secondary">

<input type="radio" name="radio"> Python

</label>

</div>

上面的实例对应传统使用环境。Bootstrap 4提供了.btn-group-toggle全新的复选与单选 解决方案:

<div class="btn-group-toggle" data-toggle="buttons">

<label class="btn btn-secondary active">

<input type="checkbox"> Checked

</label>

</div>

 

<div class="btn-group btn-group-toggle" data-toggle="buttons">

<label class="btn btn-secondary active">

<input type="checkbox" name="checkbox[]" checked> Java

</label>

<label class="btn btn-secondary">

<input type="checkbox" name="checkbox[]"> PHP

</label>

<label class="btn btn-secondary">

<input type="checkbox" name="checkbox[]"> Python

</label>

</div>

 

<div class="btn-group btn-group-toggle" data-toggle="buttons">

<label class="btn btn-secondary active">

<input type="radio" name="radio" checked> Java

</label>

<label class="btn btn-secondary">

<input type="radio" name="radio"> PHP

</label>

<label class="btn btn-secondary">

<input type="radio" name="radio"> Python

</label>

</div>

JavaScript行为

方法

  1. .button('toggle'):切换状态,给予按钮已经启用的外观。

点赞

0




登陆后方可评论