zoukankan      html  css  js  c++  java
  • Bootstrap_表单_按钮

    一、多标签支持


      一般制作按钮除了使用<button>标签元素之外,还可以使用<input type="submit">和<a>标签等。

      同样,在Bootstrap框架中制作按钮时,除了刚才所说的这些标签元素之外,还可以使用在其他的标签元素上,唯一需要注意的是,要在制作按钮的标签元素上添加类名“.btn”。

    <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>

     

    二、定制风格

      在Bootstrap框架中不同的按钮风格都是通过不同的类名来实现。

    <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>

    三、按钮大小


      在Bootstrap框架中,对于按钮的大小,也是可以定制的。  

      在Bootstrap框架中提供了三个类名来控制按钮大小:

    <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>

    四、块状按钮


      Bootstrap框架中提供了一个类名“.btn-block”。按钮使用这个类名就可以让按钮充满整个容器,并且这个按钮不会有任何的padding和margin值。在实际当中,常把这种按钮称为块状按钮。

    <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>

    五、按钮禁用状态

      在Bootstrap框架中,要禁用按钮有两种实现方式:

      方法1:在标签中添加disabled属性

      方法2:在元素标签中添加类名“disabled”

      两者的主要区别是:

      “.disabled”样式不会禁止按钮的默认行为,比如说提交和重置行为等.

      在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

    <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>

     

  • 相关阅读:
    如何使用WPF用户界面框架编译EasyPlayPro-Win版本网页无插件视频播放器?
    【解决方案】TSINGSEE青犀视频智慧校园解决方案
    TSINGSEE青犀视频开发rtp推流如何使用ffmpeg配置rtp打包模式?
    TSINGSEE青犀视频部署流媒体服务器如何通过分布式存储突破设备接入及存储瓶颈?
    mysql--存储引擎
    数据库-基本操作
    初识数据库
    mysql---索引
    数据类型--mysql
    mysql--权限问题
  • 原文地址:https://www.cnblogs.com/Ryan344453696/p/4990196.html
Copyright © 2011-2022 走看看