BootStrap按钮、图片

标签：alt   bsp   ring   href   添加   block   额外   color   trap   

• 按钮

1. 可作为按钮的标签和元素：<a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
2. .btn
3. .btn-default
4. .btn-primary
5. .btn-success
6. .btn-waring
7. .btn-danger
8. .btn-link（把按钮做得跟a标签一个样式）
9. .btn-info
10. 代码

    <div class="container">
        <button class="btn">bs按钮</button>
        <button class="btn btn-default">bs按钮</button>
        <button class="btn btn-primary">bs按钮</button>
        <button class="btn btn-success">bs按钮</button>
        <button class="btn btn-warning">bs按钮</button>
        <button class="btn btn-danger">bs按钮</button>
        <button class="btn btn-link">bs按钮</button>
    
    </div>

11. 效果截图
    

     

12. 尺寸：需要让按钮具有不同尺寸，使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

13. 通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
14. 由于 :active 是伪状态，因此无需额外添加，但是在需要让其表现出同样外观的时候可以添加 .active 类。

    <button type="button" class="btn btn-default btn-lg active">Button</button>

     

15. 由a标签创建的按钮：

    <a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

     

16. 为 <button> 元素添加 disabled 属性，使其表现出禁用状态。

    <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
    <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

BootStrap按钮、图片

标签：alt   bsp   ring   href   添加   block   额外   color   trap   

原文地址：https://www.cnblogs.com/PCBullprogrammer/p/10361386.html