bootstrap ----- 基本的按钮组件_<a class="btn btn-primary-优快云博客

本文链接：https://blog.youkuaiyun.com/Cg_Companion_Xi/article/details/106040572

本文介绍了如何使用Bootstrap创建基础按钮，包括btn类的应用，以及如何通过添加btn-primary、btn-info等不同类来改变按钮的视觉样式。还提到了大小调整类btn-large、btn-small和btn-mini的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、 btn类
基础按钮类，将a标签、 button标签、button类型的input标签转换成bootstrap下基础按钮样式。

     <div style="margin-bottom:15px"><a href="#">查看评论</a></div>
     <div style="margin-bottom:15px"> <button type="submit">结账</button></div>
     <div style="margin-bottom:15px"> <input type="button" value="设置"></div>

在这里插入图片描述
给a标签、 button标签、button类型的input标签。给以上标签添加bootstrap默认的按钮样式。

    <div style="margin-bottom:15px">
       <a href="#" class="btn" style="background-color: violet;">查看</a>
   </div>
   <div style="margin-bottom:15px">
       <button type="submit" class="btn" style="background-color: violet;">下载</button>
   </div>
   <div style="margin-bottom:15px">
       <input type="button" value="设置" class="btn" style="background-color: violet;">
   </div>

在这里插入图片描述

二、添加 btn-primary类、btn-info类、btn-success类、btn-warning类、btn-danger类、btn-inverse类

       <div style="margin-bottom:15px">
       <a class="btn btn-primary" href="#">.btn .btn-primary</a>
       </div>
       <div style="margin-bottom:15px">
       <button  class="btn btn-info" type="submit">.btn .btn-info</button>
       </div>
       <div style="margin-bottom:15px">
       <input  class="btn btn-success" type="button" value=".btn .btn-success">
       </div>
       <div style="margin-bottom:15px">
       <a class="btn btn-warning" href="#">.btn .btn-warning</a>
       </div>
       <div style="margin-bottom:15px">
       <button  class="btn btn-danger" type="submit">.btn .btn-danger</button>
       </div>
       <div style="margin-bottom:15px">
       <input  class="btn btn-inverse" type="button" value=".btn .btn-inverse">
       </div>

在这里插入图片描述
三、btn-large类、btn-small类、btn-mini类

        <div style="margin-bottom:15px">
        <a class="btn btn-primary btn-large" href="#">.btn .btn-primary</a>
        </div>
        <div style="margin-bottom:15px">
        <button  class="btn btn-info btn-small" type="submit">.btn .btn-info</button>
        </div>
        <div style="margin-bottom:15px">
        <input  class="btn btn-success btn-mini" type="button" value=".btn .btn-success">
        </div>

用 于设置标签大小，貌似不起作用。

在这里插入图片描述