Bootstrap按钮和按钮组样式

按钮样式

• 使用.btn和.btn-*实现按钮的预设样式;
• .btn 不单单在<button>元素下使用，也可以在<a>、<input>下使用;
• 使用.btn .btn-outline-*可以实现按钮的轮廓效果;
• 使用.btn-lg或.btn-sm可以实现按钮尺寸的大和小;
• 使用.btn-block将按钮进行block区块设置;
• 使用.active启用按钮(默认)，使用.disabled禁用按钮，注意<a>的禁用（写在class里面，其它写在外面)
• 添加data-toggle=" button”实现按钮切换效果，使用.active可以默认按下;
  任何带有class="btn"的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap提供了一些选项来定义按钮的样式，具体如下表所示:

代码练习：

        <button class="btn btn-primary">按钮</button>
        <button class="btn btn-success">按钮</button>
        <a href="#" class="btn btn-info">超链接</a>
        <input type="button" class="btn btn-danger" value="input按钮" />
        <button class="btn btn-outline-info">按钮</button>
        <button class="btn btn-info btn-lg">大按钮</button>
        <button class="btn btn-info btn-sm">小按钮</button>
        <br />
        <button class="btn btn-primary btn-block">block按钮</button>
        <button class="btn btn-primary" disabled="disabled">按钮</button>
        <a href="#" class="btn btn-info disabled">超链接</a>
        <button class="btn btn-success" data-toggle="button">按钮</button>
        <button class="btn btn-success active">按钮</button>

按钮组样式

• 使用.btn-group实现传统方案的复选框和单选框样式;
• 使用.btn-group .btn-group-toggle实现全新方案的复选框和单选框;
• 使用.btn-group构建普通的按钮组;
• 使用.btn-toolbar构建分页工具类;
• 使用.btn-group-lg和.btn-group-sm 实现大尺寸和小尺寸;
• 使用.btn-group-vertical设置垂直按钮组;
  代码练习：

        <div class="btn-group btn-group-toggle" data-toggle="button">
            <label class="btn btn-warning active ">
                <input type="checkbox" checked="checked" />java
            </label>
            <label class="btn btn-warning">
                <input type="checkbox" />Python
            </label>
            <label class="btn btn-warning">
                <input type="checkbox" />JavaScript
            </label>
        </div>
        <br /><br />
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-warning  ">
                <input type="radio"  name="aa" checked="checked" />java
            </label>
            <label class="btn btn-warning">
                <input type="radio" name="aa" />Python
            </label>
            <label class="btn btn-warning">
                <input type="radio" name="aa" />JavaScript
            </label>
        </div>
        <div class="btn-toolbar">
            <div class="btn-group mt-5 mr-2">
                <button class="btn btn-danger">1</button>
                <button class="btn btn-danger">2</button>
                <button class="btn btn-danger">3</button>
            </div>
            <div class="btn-group mt-5 mr-2">
                <button class="btn btn-danger">4</button>
                <button class="btn btn-danger">5</button>
                <button class="btn btn-danger">6</button>
            </div>
        </div>
        <div class="btn-group mt-5 mr-2 btn-group-lg">
            <button class="btn btn-danger">1</button>
            <button class="btn btn-danger">2</button>
            <button class="btn btn-danger">3</button>
        </div>
        <div class="btn-group mt-5 mr-2 btn-group-sm btn-group-vertical">
            <button class="btn btn-danger">4</button>
            <button class="btn btn-danger">5</button>
            <button class="btn btn-danger">6</button>