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>
  • 相关阅读:
    linux socket c : send data when socket close—SIGPIPE, Broken pipe
    (OK) server-client-pthread-c language
    (OK) Linux epoll模型—socket epoll server client chat—pthread
    (OK) pthread—epoll-loops-on-disconnection-of-a-client—server
    (OK) Linux epoll模型—socket epoll server client chat
    (OK) 刘姐实验中的大数据分析—awk—paste—system
    (OK) cBPM-CentOS—wrapped by fastcgi—files—executing commands
    (Not OK) 在CentOS7—编译nginx—for—Android—Makefile
    (Not OK) 在CentOS7—编译nginx—for—Android
    (OK) 在CentOS7—编译OpenSSL 静态库—for—Android
  • 原文地址:https://www.cnblogs.com/www20081028/p/5152142.html
Copyright © 2011-2022 走看看