Boostrap技能点整理之【按钮样式】

末蓝、 2022-12-25 01:56 178阅读 0赞

![format_png][]

![format_png 1][]

昨天我们看了看bootstrap的网（栅）格系统，想必都对bootstrap网格系统有个大致的了解，今天我们再来看看bootstrap的按钮组合。

按钮的样式

在boostrap中，任何带有 class **.btn** 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：

以下样式可用于**超链接，表单以及button上**

<table> 
 <tbody> 
  <tr> 
   <th>类</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>.btn</td> 
   <td>为按钮添加基本样式</td> 
  </tr> 
  <tr> 
   <td>.btn-default</td> 
   <td>默认/标准按钮（默认）</td> 
  </tr> 
  <tr> 
   <td>.btn-primary</td> 
   <td>原始按钮样式（未被操作）</td> 
  </tr> 
  <tr> 
   <td>.btn-success</td> 
   <td>表示成功的动作（成功）</td> 
  </tr> 
  <tr> 
   <td>.btn-info</td> 
   <td>该样式可用于要弹出信息的按钮（信息）</td> 
  </tr> 
  <tr> 
   <td>.btn-warning</td> 
   <td>表示需要谨慎操作的按钮（警告）</td> 
  </tr> 
  <tr> 
   <td>.btn-danger</td> 
   <td>表示一个危险动作的按钮操作</td> 
  </tr> 
  <tr> 
   <td>.btn-link</td> 
   <td>让按钮看起来像个链接 (仍然保留按钮行为)</td> 
  </tr> 
  <tr> 
   <td>.btn-lg</td> 
   <td>制作一个大按钮</td> 
  </tr> 
  <tr> 
   <td>.btn-sm</td> 
   <td>制作一个小按钮</td> 
  </tr> 
  <tr> 
   <td>.btn-xs</td> 
   <td>制作一个超小按钮</td> 
  </tr> 
  <tr> 
   <td>.btn-block</td> 
   <td>块级按钮(拉伸至父元素100%的宽度)</td> 
  </tr> 
  <tr> 
   <td>.active</td> 
   <td>按钮被点击</td> 
  </tr> 
  <tr> 
   <td>.disabled</td> 
   <td>禁用按钮</td> 
  </tr> 
 </tbody> 
</table>

上面列出了这么多的按钮样式，下面我们来通过一段代码的运行结果让大家对各个按钮有个基本的照面：

<button type="button" class="btn btn-default">默认按钮</button>
    
    <button type="button" class="btn btn-primary">原始按钮</button>
    
    <button type="button" class="btn btn-success">成功按钮</button>
    
    <button type="button" class="btn btn-info">信息按钮</button>
    
    <button type="button" class="btn btn-warning">警告按钮</button>
    
    <button type="button" class="btn btn-danger">危险按钮</button>
    
    <button type="button" class="btn btn-link">链接按钮</butto

运行结果：

![format_png 2][]

上面按钮的样式大家也都看到了，那么问题来了，按钮只能是这么大吗？按钮的大小能否进行更改？——按钮的大小可以更改。

按钮的大小

改按钮大小之前，我们先看看如何进行更改，改按钮的大小需要遵循那些规范呢？我们可以通过一个表格来说明这个问题：

<table> 
 <tbody> 
  <tr> 
   <th>Class</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>.btn-lg</td> 
   <td>这会让按钮看起来比较大。</td> 
  </tr> 
  <tr> 
   <td>.btn-sm</td> 
   <td>这会让按钮看起来比较小。</td> 
  </tr> 
  <tr> 
   <td>.btn-xs</td> 
   <td>这会让按钮看起来特别小。</td> 
  </tr> 
  <tr> 
   <td>.btn-block</td> 
   <td>这会创建块级的按钮，会横跨父元素的全部宽度。</td> 
  </tr> 
 </tbody> 
</table>

class：需要写的class名字（类样式）

关于按钮的大小，下面请看一段代码：

<p>
      <button type="button" class="btn btn-primary btn-lg">大的原始按钮</button>
      <button type="button" class="btn btn-default btn-lg">大的按钮</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary">默认大小的原始按钮</button>
      <button type="button" class="btn btn-default">默认大小的按钮</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary btn-sm">小的原始按钮</button>
      <button type="button" class="btn btn-default btn-sm">小的按钮</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary btn-xs">特别小的原始按钮</button>
      <button type="button" class="btn btn-default btn-xs">特别小的按钮</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary btn-lg btn-block">块级的原始按钮</button>
      <button type="button" class="btn btn-default btn-lg btn-block">块级的按钮</button>
    </p>

运行结果：

![format_png 3][]

下面在介绍几种按钮的状态：

激活按钮

<p>
      <button type="button" class="btn btn-default btn-lg ">默认按钮</button>
      <button type="button" class="btn btn-default btn-lg active">激活按钮</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary btn-lg ">原始按钮</button>
      <button type="button" class="btn btn-primary btn-lg active">激活的原始按钮</button>
    </p>

运行结果：

![format_png 4][]

禁用按钮

<p>
      <button type="button" class="btn btn-default btn-lg">默认按钮</button>
      <button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按钮</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary btn-lg ">原始按钮</button>
      <button type="button" class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按钮</button>
    </p>
    <p>
      <a href="#" class="btn btn-default btn-lg" role="button">链接</a>
      <a href="#" class="btn btn-default btn-lg disabled" role="button">禁用链接</a>
    </p>
    <p>
      <a href="#" class="btn btn-primary btn-lg" role="button">原始链接</a>
      <a href="#" class="btn btn-primary btn-lg disabled" role="button">禁用的原始链接</a>
    </p>

运行结果：

![format_png 5][]

按钮标签

运行结果：

![format_png 6][]

按钮组

<div class="container">
      <h2>按钮组</h2>
      <p>.btn-group 类用于创建按钮组：</p>
      <div class="btn-group">
        <button type="button" class="btn btn-primary">苹果</button>
        <button type="button" class="btn btn-success">橘子</button>
        <button type="button" class="btn btn-warning">香蕉</button>
      </div>
    </div>

运行结果：

![format_png 7][]

**关于按钮组的内容我们已经整理完毕，关于bootstrap其他内容，请关注后续文章。**

往期推荐

[Boostrap技能点整理之【网格系统】][Boostrap]

[2020-05-26][Boostrap]

[![format_png 8][] ][Boostrap] [Boostrap技能点整理之【bootstrap简介】

2020-05-25

![format_png 9][] ][Boostrap_bootstrap_ 2020-05-25 _format_png 9_] [C\#基础知识详解之【文件的输入与输出】

2020-05-23

![format_png 10][] ][C_ 2020-05-23 _format_png 10_] [C\#基础知识详解之【字段与属性】

2020-05-24

![format_png 11][] ][C_ 2020-05-24 _format_png 11_] [C\#基础知识详解之【异常处理】

2020-05-22

![format_png 12][] ][C_ 2020-05-22 _format_png 12_] [C\#基础知识详解之【值类型和引用类型】

2020-05-21

![format_png 13][] ][C_ 2020-05-21 _format_png 13_]

![format_png 14][]

欢

迎

关

注

**公众号：雄雄的小课堂**

**CSDN：穆雄雄的博客**

[format_png]: /images/20221120/fe4dec3c75504e5e8756bf554fa6fe14.png
[format_png 1]: /images/20221120/7c037aee97c54ba6b6465abb3f8a2d62.png
[format_png 2]: /images/20221120/aab5cd20dad0445b9e70fc794d8dd30a.png
[format_png 3]: /images/20221120/e58a2edd24c44dcdb64708156d17e8b7.png
[format_png 4]: /images/20221120/2d2f0699d2b841afbc8de6ebcd089ed9.png
[format_png 5]: /images/20221120/7d90eab5b99a40b19975c04fccc529f4.png
[format_png 6]: /images/20221120/29613d376fff432193909f732117feab.png
[format_png 7]: /images/20221120/03f8416f5c0a4cb8836da78ae192d797.png
[Boostrap]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978c1d6aa0fb947c1fcb473ac896b27c51d1fcb7b9fa93a6651622b1d873041630cc56c6c86e&idx=1&mid=2247485323&scene=21&sn=b026ea8a3f45791efdd8f5b3230e432d#wechat_redirect
[format_png 8]: /images/20221120/b65d1bc47c95472aacd8951fe6ea36b3.png
[format_png 9]: /images/20221120/0d53e48b9dca4788b52383105eedad3f.png
[Boostrap_bootstrap_ 2020-05-25 _format_png 9_]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978c1d86a0fb9490a6df8c9d4d2786599b916c697e4fd4b55631cf52e9441027c9d35625deca&idx=1&mid=2247485287&scene=21&sn=845f2138205cabff1a2c7f07c9045ddf#wechat_redirect
[format_png 10]: /images/20221120/52105e8422ff4aeba201c7d5193a3e0d.png
[C_ 2020-05-23 _format_png 10_]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978c1db6a0fb94a0dcad9ba081873d30c920f025b97b94898ebf57af08267313cc5a4569233c&idx=1&mid=2247485271&scene=21&sn=271dccd7f12c9c2dcf932c4643c39a89#wechat_redirect
[format_png 11]: /images/20221120/fa813b68d05a48448669fa63a5dc6596.png
[C_ 2020-05-24 _format_png 11_]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978c1dbda0fb94abfb0de880f7d7b132b66d84af33d57e11fdd19f4510631f8a19a802603eda&idx=1&mid=2247485276&scene=21&sn=27d2b95fd83d8fbd330e2acbfb7faf01#wechat_redirect
[format_png 12]: /images/20221120/82d1a895d32844669caa3fe83f755950.png
[C_ 2020-05-22 _format_png 12_]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978c1dd1a0fb94c7fd14c0d37cfc1d1f7ab63ff6ae1a71762cf98dc1573b941db23622f5703b&idx=1&mid=2247485232&scene=21&sn=f5409bfaadac2d223b1ed6c1810d2d3b#wechat_redirect
[format_png 13]: /images/20221120/087734140f8b484b8804c9e3fc57ba89.png
[C_ 2020-05-21 _format_png 13_]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978c1c0fa0fb9519dcfef17fbfb83864b69da926879f85f64d222407e813193a46cc6c171392&idx=1&mid=2247485166&scene=21&sn=d97b42f49b3a8eeca9f0e9673c7bfbe0#wechat_redirect
[format_png 14]: /images/20221120/cfb864af999f456cafadf549bccdc537.png