Bootstrap框架按钮

撰写日期：2019年04月12日

Bootstrap框架是一个用于快速开发 Web 应用程序和网站的前端框架。里面有许多自定义好的类可以直接使用，这样可以大大加快我们编程效率，也减少了代码量。

按钮是大多数网站都会用到的，甚至有些网站还需要大小不一，颜色各异的按钮，这样每个按钮都要加一些不同样式，不仅增加了开发时间，而且还增加了代码量。这个情况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>

效果如下：

二、 Bootstrap框架的边框按钮：

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

效果如下：

三、 Bootstrap框架的边框按钮：

<button type="button" class="btn btn-primary btn-lg">较大的按钮</button>
<button type="button" class="btn btn-secondary btn-lg">较大的按钮</button>
<button type="button" class="btn btn-primary">正常的按钮</button>
<button type="button" class="btn btn-secondary">正常的按钮</button>
<button type="button" class="btn btn-primary btn-sm">较小的按钮</button>
<button type="button" class="btn btn-secondary btn-sm">较小的按钮</button>

效果如下：

如有错漏，感谢纠正！