zoukankan      html  css  js  c++  java
  • Bootstrap Buttons

    Button Styles
    Bootstrap provides different styles of buttons:
     
    To achieve the button styles above,Bootstrap has the following classes:
    • .btn
    • .btn-default
    • .btn-primary
    • .btn-success
    • .btn-info
    • .btn-warning
    • .btn-danger
    • .btn-link                     
    The following example shows the code for the different button styles:
    <button type="button" class="btn">Basic</button>
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-link">Link</button>
     
    the class btn provides the display style,the btn-* provides the different color
     
     
    The button classes can be used on an <a>,<button>,or<input> element:
     
    <a href="#" class="btn btn-info" role="button">Link Button</a>
     
    <button type="button" class="btn btn-info">Button</button>
    <input type="button" class="btn btn-info" value="Input Button">
    <input type="submit" class="btn btn-info" value="Submit Button">
     
    Why do we put a # in the href attribute of the link?

    Since we do not have any page to link it to, and we do not want to get a "404" message, we put # as the link in our examples. It should be a real URL to a specific page.
     
    Button Sizes
    Bootstrap provides four button sizes:
     

    The classes that define the different sizes are:

    • .btn-lg
    • .btn-md
    • .btn-sm
    • .btn-xs
    Block level Buttons
    A block level button spans the entire width of the parent element.
    Add class .btn-block to create a block level button.
     
    Active/Disabled Buttons
    A button can be set to an active(appear pressed) or a disables(unclickable) state:
    The class .active makes a button appear pressed,and the class .disabled makes a button unclickable
     
      <button type="button" class="btn btn-primary">Primary Button</button>
      <button type="button" class="btn btn-primary active">Active Primary</button>
      <button type="button" class="btn btn-primary disabled">Disabled Primary</button>
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
  • 相关阅读:
    android之AlertDialog 点击其它区域自己主动消失
    leetCode191/201/202/136 -Number of 1 Bits/Bitwise AND of Numbers Range/Happy Number/Single Number
    CEF 框架使用集锦
    Qt WebEngine Debugging and Profiling
    Qt内置浏览器引擎WebEngine调试和分析方法
    QWebEngine踩坑记录
    带外(out of band)数据
    碰撞检测算法:点和矩形碰撞、点和圆形碰撞、矩形碰撞、圆形碰撞
    windows 7 安装visual studio 2019 闪退问题解决
    最小二乘法
  • 原文地址:https://www.cnblogs.com/jianglijs/p/7390061.html
Copyright © 2011-2022 走看看