如何使用Bootstrap 按钮实例详解

Bootstrap 按钮本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：以下样式可用于<a>, <button>, 或 <input> 元素上：

图片：1.png

700)this.width=700;" style="max-width:700px;" title="点击查看原图" onclick="if(this.parentNode.tagName!='A') window.open('https://www.javascriptcn.com/attachment/1704/thread/14_1_92b5b98f25b8653.png');" />下面的实例演示了上面所有的按钮 class：&lt;!-- 标准的按钮 --&gt; &lt;button type="button" class="btn btn-default"&gt;默认按钮&lt;/button&gt; &lt;!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --&gt; &lt;button type="button" class="btn btn-primary"&gt;原始按钮&lt;/button&gt; &lt;!-- 表示一个成功的或积极的动作 --&gt; &lt;button type="button" class="btn btn-success"&gt;成功按钮&lt;/button&gt; &lt;!-- 信息警告消息的上下文按钮 --&gt; &lt;button type="button" class="btn btn-info"&gt;信息按钮&lt;/button&gt; &lt;!-- 表示应谨慎采取的动作 --&gt; &lt;button type="button" class="btn btn-warning"&gt;警告按钮&lt;/button&gt; &lt;!-- 表示一个危险的或潜在的负面动作 --&gt; &lt;button type="button" class="btn btn-danger"&gt;危险按钮&lt;/button&gt; &lt;!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 --&gt; &lt;button type="button" class="btn btn-link"&gt;链接按钮&lt;/button&gt;

无相关信息