zoukankan      html  css  js  c++  java
  • Bootstrap表单之按钮专题

    按钮:Bootstrap框架的按钮也是一个独立部分,我们同样在不同的版本之中能找到对应的代码:

    LESS版本:查看源文件buttons.less        Sass版本:查看源文件_buttons.scss         已编译版本:查看源文件bootstrap.css文件第1992行~第2353行

    各种按钮代码如下:

    <body>
       <button class="btn" type="button">基础按钮.btn</button>  
       <button class="btn btn-default" type="button">默认按钮.btn-default</button> 
       <button class="btn btn-primary" type="button">主要按钮.btn-primary</button> 
       <button class="btn btn-success" type="button">成功按钮.btn-success</button> 
       <button class="btn btn-info" type="button">信息按钮.btn-info</button> 
       <button class="btn btn-warning" type="button">警告按钮.btn-warning</button> 
       <button class="btn btn-danger" type="button">危险按钮.btn-danger</button> 
       <button class="btn btn-link" type="button">链接按钮.btn-link</button> 
    </body>

    1.基本按钮

    类(.btn)

    <button class="btn" type="button">基本按钮</button>

    2.默认按钮
    在按钮的基础上增加类(.btn-default)

    <button class="btn btn-default" type="button">默认按钮</button>

    3.多标签支持制作按钮

    <button class="btn btn-default" type="button">button标签按钮</button> 
    <input type="submit" class="btn btn-default" value="input标签按钮"/>
    <a href="#" class="btn btn-default">a标签按钮</a>
    <span class="btn btn-default">span标签按钮</span>  
    <div class="btn btn-default">div标签按钮</div>  

    4.定制按钮风格

       <button class="btn" type="button">基础按钮.btn</button>  
       <button class="btn btn-default" type="button">默认按钮.btn-default</button> 
       <button class="btn btn-primary" type="button">主要按钮.btn-primary</button> 
       <button class="btn btn-success" type="button">成功按钮.btn-success</button> 
       <button class="btn btn-warning" type="button">警告按钮.btn-warning</button> 
       <button class="btn btn-danger" type="button">危险按钮.btn-danger</button> 
       <button class="btn btn-link" type="button">链接按钮.btn-link</button> 
       <button class="btn btn-info" type="button">信息按钮.btn-info</button>

    5.按钮的大小

        <button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button> 
        <button class="btn btn-primary" type="button">正常按钮</button>
        <button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>
        <button class="btn btn-primary btn-xs" type="button">超小型按钮.btn-xs</button>

    6.块状按钮(btn-block)

        <button class="btn btn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button> 
        <button class="btn btn-primary btn-block" type="button">正常按钮</button>
        <button class="btn btn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button>
        <button class="btn btn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>   

    7.按钮状态:活动状态(悬浮状态:hover,点击状态:active,焦点状态:focus)

    8.按钮状态:禁用状态

    <button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button> 
    <button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>
    <button class="btn btn-primary btn-sm btn-block" type="button">未禁用的按钮</button>
  • 相关阅读:
    ZYAR20A 亚克力2驱 蓝牙 298寻迹避障机器人 —— 小车按键启动和蜂鸣器报警
    ZYAR20A 亚克力2驱 蓝牙 298寻迹避障机器人 —— 小车指定花式动作
    ZYAR20A 亚克力2驱 蓝牙 298寻迹避障机器人 —— 小车指定花式动作
    ZYAR20A 亚克力2驱 蓝牙 298寻迹避障机器人 —— 小车指定花式动作
    ZYAR20A 亚克力2驱 蓝牙 298寻迹避障机器人 —— 小车前后左右综合实验
    ZYAR20A 亚克力2驱 蓝牙 298寻迹避障机器人 —— 小车前后左右综合实验
    ZYAR20A 亚克力2驱 蓝牙 298寻迹避障机器人 —— 小车前后左右综合实验
    asp中设置session过期时间方法总结
    asp中设置session过期时间方法总结
    ASP.NET关于Session_End触发与否的问题
  • 原文地址:https://www.cnblogs.com/www20081028/p/5152142.html
Copyright © 2011-2022 走看看