bootstrap常用的定义风格

最新推荐文章于 2020-05-26 15:49:20 发布

weixin_30710457

最新推荐文章于 2020-05-26 15:49:20 发布

阅读量82

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hack-ing/p/5891857.html

本文介绍了一种使用不同类名来改变按钮和其他元素样式的HTML和CSS方法。通过为按钮分配如primary、success、info等类名，可以实现不同的视觉效果。此外还展示了如何通过添加特定的类名来更改段落和链接的显示样式。

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

primary() 首选项

success() 成功

info() 一般信息

warning() 警告

danger() 危险

<body>
   <br>
   <input type='button' value="默认样式">
   <input type='button' value="首选项" class="btn btn-primary">
   <input type='button' value="成功" class="btn btn-success">
   <input type='button' value="一般信息" class="btn btn-info">
   <input type='button' value="警告" class="btn btn-warning">
   <input type='button' value="危险" class="btn btn-danger">
</body>

<span>默认文字</span>
    <span class="text-primary">首选项</span>
    <span class="text-success">首选项</span>
    <span class="text-info">首选项</span>
    <span class="text-warning">首选项</span>
    <span class="text-danger">首选项</span>
    <br>
    <a href="#" class="btn btn-primary">连接1</a>
    <a href="#" class="bg-success">连接2</a>
    <a href="#" class="text-danger">连接3</a>
    <br><br>
    <div class="alert alert-warning">我是警告框</div>
    <div class="alert alert-danger">我是危险信息</div>

    <div class="panel panel-primary">
    <div class="panel-heading">
        <h4>我是面板的标题</h4>
        </div>
        <div class="panel-body">
        我是面板的主体内容！
        </div>
    </div>