【掌握Bootstrap组件的添加：按钮】

最新推荐文章于 2024-06-03 20:31:46 发布

TechLens

最新推荐文章于 2024-06-03 20:31:46 发布

阅读量1.8k

点赞数

分类专栏： Bootstrap&jQuery 文章标签： bootstrap html javascript

本文链接：https://blog.csdn.net/qq_43596041/article/details/123477793

版权

Bootstrap&jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

掌握Bootstrap组件的添加：按钮

使用Bootstrap的按钮样式

使用Bootstrap的按钮样式

使用Bootstrap的按钮样式非常简单，只需要在button中引入对应的class即可

Bookstores准备

引入Bootstrap的css样式

 <!-- 引入Bootstrap的css样式 -->
    <link rel="stylesheet" href="css/bootstrap.min.css"/>

引入jQuery

<!-- 引入jQuery -->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

一、效果图

（一）普通引入
在这里插入图片描述

（二）设置大小

.btn-lg
.btn-sm
,bt-xs
在这里插入图片描述
（三）设置 role

二、实现代码

（一）普通引入

   <!--    使用Bootstrap的按钮样式非常简单，只需要在button中引入对应的class即可-->
    <button class="btn">普通按钮.btn</button>
    <button class="btn btn-default"> .but-default</button>
    <button class="btn btn-primary">.btn-primary</button>
    <button class="btn btn-success">.btn-success</button>
    <button class="btn btn-info">.btn-info</button>
    <button class="btn btn-warning">.btn-warning</button>
    <button class="btn btn-danger">.btn-danger</button>
    <button class="btn btn-link">.btn-link</button>

（二）设置大小

<!--    按钮的大小-->
    <button class="btn">普通按钮.btn</button>
    <button class="btn btn-default btn-lg">普通按钮.btn</button>
    <button class="btn btn-primary btn-sm">.btn-primary</button>
    <button class="btn btn-success btn-xs">.btn-success</button>

（三）设置 role

 <br>
    <button type="button" class="btn btn-primary btn-lg">默认状态</button>
    <button type="button" class="btn btn-primary btn-lg active">默认状态</button>
    <button type="button" class="btn btn-primary btn-lg" disabled="disabled">默认状态</button>
    <br/>
    <hr/>
    <a href="#" class="btn btn-primary btn-lg" role="button">默认状态</a>
    <a href="#" class="btn btn-primary btn-lg active" role="button">活动状态</a>
    <a href="#" class="btn btn-primary btn-xs disabled" role="button">禁用状态</a>

三、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap组件的添加</title>
    <!-- 引入Bootstrap的css样式 -->
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        .btn {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
        }
        .btn-primary {
            color: #fff;
            background-color: #337ab7;
            border-color: #2e6da4;
        }
    </style>
    <!-- 引入jQuery -->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

</head>
<body>
<br>
<br>
<br>
<div class="container">
    <!--    使用Bootstrap的按钮样式非常简单，只需要在button中引入对应的class即可-->
    <button class="btn">普通按钮.btn</button>
    <button class="btn btn-default"> .but-default</button>
    <button class="btn btn-primary">.btn-primary</button>
    <button class="btn btn-success">.btn-success</button>
    <button class="btn btn-info">.btn-info</button>
    <button class="btn btn-warning">.btn-warning</button>
    <button class="btn btn-danger">.btn-danger</button>
    <button class="btn btn-link">.btn-link</button>
    <br/>
    <br/>
    <br/>
    <br/>
    <hr/>
    <!--    按钮的大小-->
    <button class="btn">普通按钮.btn</button>
    <button class="btn btn-default btn-lg">普通按钮.btn</button>
    <button class="btn btn-primary btn-sm">.btn-primary</button>
    <button class="btn btn-success btn-xs">.btn-success</button>
    <br>
    <br>
    <br>
    <button type="button" class="btn btn-primary btn-lg">默认状态</button>
    <button type="button" class="btn btn-primary btn-lg active">默认状态</button>
    <button type="button" class="btn btn-primary btn-lg" disabled="disabled">默认状态</button>
    <br/>
    <hr/>
    <a href="#" class="btn btn-primary btn-lg" role="button">默认状态</a>
    <a href="#" class="btn btn-primary btn-lg active" role="button">活动状态</a>
    <a href="#" class="btn btn-primary btn-xs disabled" role="button">禁用状态</a>
</div>
</body>
</html>

TechLens

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【掌握Bootstrap组件的添加：按钮】

掌握Bootstrap组件的添加：按钮使用Bootstrap的按钮样式Bookstores准备一、效果图二、实现代码三、完整代码使用Bootstrap的按钮样式使用Bootstrap的按钮样式非常简单，只需要在button中引入对应的class即可Bookstores准备引入Bootstrap的css样式  <link rel="stylesheet" href="css/bootstrap.min.css"/>
复制链接

扫一扫