美文网首页
bootstrap-button

bootstrap-button

作者: LYF闲闲闲闲 | 来源:发表于2017-02-09 10:59 被阅读35次

    1.定义button

    <a>, <button>, <input>均可以定义按钮

      <a class="btn btn-default" href="#" role="button">Link</a>
      <button class="btn btn-default" type="submit">Button</button>
      <input class="btn btn-default" type="button" value="Input">
    

    2.button分类

    <button type="button" class="btn btn-primary">原始按钮</button>
    <button type="button" class="btn btn-success">成功按钮</button>
    <button type="button" class="btn btn-default">默认按钮</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">链接按钮</button>
    

    3.button大小

    • btn-lg (大按钮)Large button
    • btn-default (默认尺寸)Default button
    • btn-sm (小按钮)Small button
    • btn-xs (超小尺寸)Extra small button
    • btn-block (块级元素)Block level button,可以将按钮拉伸至父元素100%的宽度,变为块级(block)元素
    <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>
    

    4.button状态

    • 禁用状态
      表现颜色变淡,无法点击,为按钮添加 disabled="disabled" 实现
       <button type="button" class="btn btn-default">默认按钮</button>
       <button type="button" class="btn btn-default" disabled="disabled">禁用按钮</button>
       <br/><br/>
       <button type="button" class="btn btn-primary">原始按钮</button>
       <button type="button" class="btn btn-primary" disabled="disabled">禁用的原始按钮</button>
    
    • 激活状态
      表现为 底色更深、边框夜色更深、向内投射阴影。通过 active 实现
    <button type="button" class="btn btn-default ">默认按钮</button>
    <button type="button" class="btn btn-default active">激活按钮</button>
    <br/>
    <button type="button" class="btn btn-primary ">原始按钮</button>
    <button type="button" class="btn btn-primary active">激活的原始按钮</button>
    ```
    
    
    ![](https://img.haomeiwen.com/i3488005/443b0356ac41532b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    ###5.按钮组
    将一组按钮放在同一行里
    
    ```
    <div class="btn-group">
        <button type="button" class="btn btn-default"> 1</button>
        <button type="button" class="btn btn-default"> 2</button>
        <button type="button" class="btn btn-default"> 3</button>
    </div>
    ```
    
    ![](https://img.haomeiwen.com/i3488005/011cf3137141def8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
      
    > 参考:http://v3.bootcss.com/css/#buttons
    http://www.runoob.com/bootstrap/bootstrap-buttons.html
    http://v3.bootcss.com/components/#btn-groups

    相关文章

      网友评论

          本文标题:bootstrap-button

          本文链接:https://www.haomeiwen.com/subject/tzciittx.html