zoukankan      html  css  js  c++  java
  • Bootstrap4.x学习笔记【十一】

        按钮和按钮组

    一、按钮样式

    1.使用.btn 和.btn-*实现按钮的预设样式;.btn 不单单在<button>元素下使用,也可以在<a>、<input>下使用

        <button type="button" class="btn btn-primary">Bootstrap4.x</button>
        <button type="button" class="btn btn-secondary">Bootstrap4.x</button>
        <button type="button" class="btn btn-success">Bootstrap4.x</button>
        <button type="button" class="btn btn-danger">Bootstrap4.x</button>
        <button type="button" class="btn btn-warning">Bootstrap4.x</button>
        <button type="button" class="btn btn-info">Bootstrap4.x</button>
        <button type="button" class="btn btn-light">Bootstrap4.x</button>
        <button type="button" class="btn btn-dark">Bootstrap4.x</button>
        <button type="button" class="btn btn-link">Bootstrap4.x</button>
        <br>
        <a href="#" class="btn btn-success">Bootstrap4.x</a>
    
        <input type="submit" class="btn btn-danger" value="Bootstrap4.x">
        <br>

    2.使用.btn .btn-outline-*可以实现按钮的轮廓效果

    <button type="button" class="btn btn-outline-secondary">Bootstrap4.x</button>
    <button type="button" class="btn btn-outline-danger">Bootstrap4.x</button>
    <button type="button" class="btn btn-outline-warning">Bootstrap4.x</button>

    3.使用.active 启用按钮(默认),使用.disabled 禁用按钮,特别注意<a>的禁用

     添加 data-toggle="button"实现按钮切换效果,使用.active 可以默认按下

        <button type="button" class="btn btn-secondary active">Bootstrap4.x</button>
        <button type="button" class="btn btn-secondary " disabled>Bootstrap4.x</button>
        <a href="#" class="btn btn-success disabled">Bootstrap4.x</a>
        <input type="submit" class="btn btn-danger" disabled value="Bootstrap4.x">
    
        <button type="button" class="btn btn-secondary active" data-toggle="button">Bootstrap4.x</button>

    二、按钮组样式

    1. 使用.btn-group 实现传统方案的复选框和单选框样式

        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-secondary active">
                <input type="checkbox" checked>PHP
            </label>
            <label class="btn btn-secondary">
                <input type="checkbox" >JAVA
            </label>
            <label class="btn btn-secondary">
                <input type="checkbox">Python
            </label>
        </div>
        <br>
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-secondary active">
                <input type="radio" name="options"checked>PHP
            </label>
            <label class="btn btn-secondary">
                <input type="radio"name="options">JAVA
            </label>
            <label class="btn btn-secondary">
                <input type="radio"name="options">Python
            </label>
        </div>
        <br>

    2.使用.btn-group .btn-group-toggle 实现全新方案的复选框和单选框

        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-secondary active">
                <input type="checkbox" checked>PHP
            </label>
            <label class="btn btn-secondary">
                <input type="checkbox" >JAVA
            </label>
            <label class="btn btn-secondary">
                <input type="checkbox">Python
            </label>
        </div>

  • 相关阅读:
    九度OJ题目1137:浮点数加法 (JAVA)使用BigDecimal四个案例都通过了,但是超时了。
    九度OJ题目1080:进制转换(java)使用BigInteger进行进制转换
    九度OJ题目1076:N的阶乘 (java)运用BigInteger的例子。
    九度OJ题目1443:Tr A (JAVA)
    九度oj题目1207:质因数的个数
    pg 比mysql 强的数据库
    mysql8 sql_mode=only_full_group_by问题解决
    mysql 8.0.19 安装
    springboot + mybatis plus强大的条件构造器queryWrapper、updateWrappe
    Elasticsearch 学习
  • 原文地址:https://www.cnblogs.com/Small-Windmill/p/13415042.html
Copyright © 2011-2022 走看看