BootStrap 按钮和按钮组

内容选自李炎恢的Bootstrap v4.x教程笔记

一．按钮样式

1. 使用.btn 和.btn-*实现按钮的预设样式；

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

2. .btn 不单单在<button>元素下使用，也可以在<a>、<input>下使用；

<a href="#" class="btn btn-success">Bootstrap4.x</a>
<input type="submit" class="btn btn-danger" value="Bootstrap4.x">

 

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

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

 

4. 使用.btn-lg .btn-sm 可以实现按钮尺寸的大和小；

<button type="button" class="btn btn-lg btn-success">Bootstrap4.x</button>
<button type="button" class="btn btn-sm btn-danger">Bootstrap4.x</button>

 

5. 使用.btn-block 将按钮进行 block 区块设置；

<button type="button" class="btn btn-success btn-block">Bootstrap4.x</button>
<button type="button" class="btn btn-danger btn-block">Bootstrap4.x</button>

 

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

<button type="button" class="btn btn-success active">Bootstrap4.x</button>
<button type="button" class="btn btn-success" disabled>Bootstrap4.x</button>
<a href="#" class="btn btn-success disabled">Bootstrap4.x</a> //写在 class 里
<input type="submit" class="btn btn-danger" disabled value="Bootstrap4.x">

 

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

<button type="button" class="..." 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"> Python
    </label>
    <label class="btn btn-secondary">
        <input type="checkBox"> GO
    </label>
</div>
<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"> Python
    </label>
    <label class="btn btn-secondary">
        <input type="radio" name="options"> GO
    </label>
</div>

 

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

<div class="btn-group btn-group-toggle" data-toggle="buttons">

 

3. 使用.btn-group 构建普通的按钮组；

<div class="btn-group">
　　<button type="button" class="btn btn-secondary">左</button>
　　<button type="button" class="btn btn-secondary">中</button>
　　<button type="button" class="btn btn-secondary">右</button>
</div>

 

4. 使用.btn-toolbar 构建分页工具类；

<div class="btn-toolbar">
    <div class="btn-group mr-2">
        <button type="button" class="btn btn-secondary">1</button>
        <button type="button" class="btn btn-secondary">2</button>
        <button type="button" class="btn btn-secondary">3</button>
        <button type="button" class="btn btn-secondary">4</button>
        <button type="button" class="btn btn-secondary">5</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-secondary">7</button>
        <button type="button" class="btn btn-secondary">8</button>
        <button type="button" class="btn btn-secondary">9</button>
    </div>
</div>

 

5. 使用.btn-group-lg 和.btn-group-sm 实现大尺寸和小尺寸；

<div class="btn-group btn-group-lg">
<div class="btn-group btn-group-sm">

 

6. 使用.btn-group-vertical 设置垂直按钮组；

<div class="btn-group-vertical">