Copyright Notice

The original author of this article: Brother Gu’s younger brother
Author blog address: http://blog.csdn.net/lfdfhl

insert image description here

This section of the tutorial introduces the common styles of buttons in Bootstrap and their usage.

three buttons

In Bootstrap, you can use the or <a>element to add button class (button class) to use the styles provided by Bootstrap.<button><input>

Predefined styles for buttons

Bootstrap provides commonly used button styles. For example, buttons for preference, success, general information, warning, danger.

button size

You can use .btn-lg, .btn-sm or .btn-xs in Bootstrap to get large, medium and small buttons in different sizes. Alternatively, the default size can be used.

state of the button

Typically, buttons have an active state and a disabled state.

active state

The active state is also called the available state. When the button is active, it behaves as being pressed (darker background, darker border, cast shadow inward). For <button>elements, this is achieved through the :active state. For <a>elements, this is achieved through the .active class. However, you can also apply .active to <button>a (with the aria-pressed="true" attribute) and make it active programmatically.

Disabled state

Add the disabled attribute to the element in Bootstrap <button>to make it appear disabled.

Add the disabled attribute to the element in Bootstrap <input>to make it appear disabled.

In Bootstrap, you can <a>add the .disabled class to the button created based on the element to make it appear disabled.

button case

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮</title>
    <!--移动设备优先，即获得更好的响应式支持-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--引入Bootstrap的css文件-->
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid">
        <!--3种基本按钮，其默认样式为btn btn-default-->
        <input class="btn btn-default" type="button" value="按钮">
        <button class="btn btn-default" >按钮</button>
        <a href="" class="btn btn-default" >按钮</a>
        <br><br>

        <!--按钮的预定义样式-->
        <button class="btn btn-default">默认按钮</button>
        <button class="btn btn-primary">首选项按钮</button>
        <button class="btn btn-info">一般信息按钮</button>
        <button class="btn btn-success">成功按钮</button>
        <button class="btn btn-warning">警告按钮</button>
        <button class="btn btn-danger">危险按钮</button>
        <button class="btn btn-link">链接按钮</button>
        <br><br>

        <!--不同尺寸的按钮-->
        <button class="btn btn-danger btn-lg">大按钮</button>
        <button class="btn btn-danger">默认大小按钮</button>
        <button class="btn btn-danger btn-sm">小按钮</button>
        <button class="btn btn-danger btn-xs">超小按钮</button>
        <br><br>

        <!--块级按钮-->
        <button class="btn btn-danger btn-block">登录</button>
        <button class="btn btn-info btn-block">注册</button>
        <br><br>

        <!--按钮的状态-->
        <a href="" class="btn btn-primary active">激活状态下的按钮</a>
        <a href="" class="btn btn-primary disabled">禁用状态下的按钮</a>
        <br><br>
        <button class="btn btn-default active" >激活状态下的按钮</button>
        <button class="btn btn-default" disabled="disabled">禁用状态下的按钮</button>
        <br><br>
        <input class="btn btn-default active" type="button" value="激活状态下的按钮">
        <input class="btn btn-default active" type="button" disabled value="禁用状态下的按钮">

    </div>
</body>
</html>