BootstrapVue Button 按钮基础

本章将讲解Bootstrap Vue Button的按钮样式风格,快速了解Bootstrap按钮的特性。Bootstrap按钮支持实体按钮、线框按钮、圆形按钮、方块按钮等。

<div id="app">
     <b-button>Button</b-button>
     <b-button variant="danger">Button</b-button>
     <b-button variant="success">Button</b-button>
     <b-button variant="outline-primary">Button</b-button>
     <b-button href="#">Link Button</b-button>
     <b-button variant="outline-success">Success</b-button>
     <b-button pill variant="primary">Button</b-button>
     <b-button squared variant="info">Button</b-button>
 </div>

Button在线例子

Button类型

可以是按钮、链接或者vue-router的to属性。支持type属性设置为 'button', 'submit' 或 'reset'，也可以设置href 或 to 属性，当设置了href 或 to 属性那么type无效。

<div id="app">
     <b-button @click="showMsg()" variant="success">普通按钮</b-button> 
     <b-button href="http://www.itxst.com" variant="warning">链接按钮</b-button> 
     <b-button to="/product" variant="primary">Vue-Router按钮 </b-button>
     <b-button type="submit" variant="info">Submit按钮</b-button>
     <b-button type="reset" variant="danger">Reset按钮</b-button>
  </div>

例子

Button大小

可以设置size属性为sm或lg

<div id="app">
     <b-button  size="sm" variant="success">小按钮</b-button> 
     <b-button variant="warning">默认大小</b-button> 
     <b-button size="lg" variant="primary">大按钮 </b-button> 
</div>

Button主题

variant 属性支持primary, secondary, success, danger, warning, info, light 和 dark.
线框按钮支持outline-primary, outline-secondary, outline-success, outline-danger, outline-warning, outline-info, outline-light and outline-dark.

<div>
  <b-button variant="primary">Primary</b-button>
  <b-button variant="secondary">Secondary</b-button>
  <b-button variant="success">Success</b-button>
  <b-button variant="danger">Danger</b-button>
  <b-button variant="warning">Warning</b-button>
  <b-button variant="info">Info</b-button>
  <b-button variant="light">Light</b-button>
  <b-button variant="dark">Dark</b-button>
</div>
<div style="padding-top:10px;">
  <b-button variant="outline-primary">Primary</b-button>
  <b-button variant="outline-secondary">Secondary</b-button>
  <b-button variant="outline-success">Success</b-button>
  <b-button variant="outline-danger">Danger</b-button>
  <b-button variant="outline-warning">Warning</b-button>
  <b-button variant="outline-info">Info</b-button>
  <b-button variant="outline-light">Light</b-button>
  <b-button variant="outline-dark">Dark</b-button>
</div>

例子

链接效果

把variant属性设置为link 将会把按钮渲染成链接外观风格，同时保留了按钮的默认大小。
<b-button variant="link">Link</b-button>

例子

块级按钮

所谓块级按钮就是按钮的宽度和父容器的宽度一样。
<b-button block variant="primary">Block Button</b-button>

例子

圆角按钮

 <div id="app">
  <b-button pill>Button</b-button>
  <b-button pill variant="primary">Button</b-button>
  <b-button pill variant="outline-secondary">Button</b-button>
  <b-button pill variant="success">Button</b-button>
  <b-button pill variant="outline-danger">Button</b-button>
  <b-button pill variant="info">Button</b-button>
 </div>

例子

直角按钮

  <b-button squared>Button</b-button>
  <b-button squared variant="primary">Button</b-button>
  <b-button squared variant="outline-secondary">Button</b-button>
  <b-button squared variant="success">Button</b-button>
  <b-button squared variant="outline-danger">Button</b-button>
  <b-button squared variant="info">Button</b-button>

例子

禁用按钮

  <b-button disabled size="lg" variant="primary">Disabled</b-button>
  <b-button disabled size="lg">Also Disabled</b-button>

例子