Bootstrap按钮

<div class="container">
        <!-- 可以使用a、button、input作为按钮，如果是a，那么必须加btn基础类 -->
        <a class="btn" href="#" role="button">超链接</a>
        <button class="btn btn-default" type="submit">Button</button>
        <input class="btn btn-default" type="button" value="普通按钮-input">
        <input class="btn btn-default" type="submit" value="提交按钮-input">
        <br>

        <!-- 按钮预定义样式类 -->
        <!-- Standard button -->
        <button type="button" class="btn btn-default">（默认样式）Default</button>
        <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
        <button type="button" class="btn btn-primary">（首选项）Primary</button>
        <!-- Indicates a successful or positive action -->
        <button type="button" class="btn btn-success">（成功）Success</button>
        <!-- Contextual button for informational alert messages -->
        <button type="button" class="btn btn-info">（一般信息）Info</button>
        <!-- Indicates caution should be taken with this action -->
        <button type="button" class="btn btn-warning">（警告）Warning</button>
        <!-- Indicates a dangerous or potentially negative action -->
        <button type="button" class="btn btn-danger">（危险）Danger</button>
        <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
        <button type="button" class="btn btn-link">（链接）Link</button>
        <br>

        <!-- 修饰按钮尺寸 -->
        <button class="btn btn-success btn-lg">我是一个大按钮</button>
        <button class="btn btn-success btn-sm">我是一个大按钮</button>
        <button class="btn btn-success btn-xs">我是一个大按钮</button>
        <br>

        <!-- 将按钮变为块元素 -->
        <button class="btn btn-block btn-success">我已经变为了块元素</button>

        <!-- 按钮被激活时的状态（未见效果） -->
        <button type="button" class="btn btn-primary btn-lg active">Primary button</button>
        <button type="button" class="btn btn-default btn-lg active">Button</button>

        <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
        <a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

        <!-- 将按钮设置为禁用状态 -->
        <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
        <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
        <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
        <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
    </div>
</body>
</html>

<!--
    .btn：按钮的基础类

    .btn-default：默认样式
    .btn-primary：首选项
    .btn-success：成功
    .btn-info：休息
    .btn-danger：危险
    .btn-warning：警告
    .btn-link：链接

    .btn-lg：大尺寸
    .btn-sm：小尺寸
    .btn-xs：超小尺寸

    .btn-block：将按钮变为空元素

    .disabled：禁用，适用于超链接做的按钮