Bootstrap-按钮相关的class

时间：2024-07-05 22:35:26

.btn          基础class
.btn-default  白底黑字的按钮
.btn-warning  红色按钮
.btn-success  绿色按钮
.btn-info     浅蓝色按钮
.btn-primary  深蓝色按钮
.btn-lg       大号按钮
.btn-sm       小号按钮
.btn-xs       超小号按钮
.btn-block    块级按钮

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <title>Bootstrap 101 Template</title>

     <!-- Bootstrap -->

     <link href="css/bootstrap.css" rel="stylesheet">

     <!--[if lt IE 9]>

     <script src="js/html5shiv.min.js"></script>

     <script src="js/respond.min.js"></script>

     <![endif]-->

 </head>

 <body>

 <div class="container"></div>

 <h1>全局Css样式---按钮</h1>

 <h3>三种形式的按钮</h3>

 <button class="btn btn-default">button按钮</button>

 <input type="button" class="btn btn-default" value="input按钮">

 <a href="#" class="btn btn-default">LINK按钮</a>

 <h3>三种形式的按钮</h3>

 <button class="btn ">button按钮</button>

 <input type="button" class="btn " value="input按钮">

 <a href="#" class="btn ">LINK按钮</a>

 <h3>按钮的常用颜色总共有五中常用颜色</h3>

 <a href="#" class="btn btn-danger">红色按钮-危险色</a>

 <a href="#" class="btn btn-warning">黄色按钮-警告色</a>

 <a href="#" class="btn btn-success">绿色按钮-成功色</a>

 <a href="#" class="btn btn-info">浅蓝色-提示色</a>

 <a href="#" class="btn btn-primary">深蓝色按钮-基础色</a>

 <h3>按钮的四种大小</h3>

 <a href="#" class="btn btn-success btn-lg" >大号按钮</a>

 <a href="#" class="btn btn-success" >默认号按钮</a>

 <a href="#" class="btn btn-success btn-sm" >小号按钮</a>

 <a href="#" class="btn btn-success btn-xs" >超小号按钮</a>

 <h3>块级按钮</h3>

 <a href="#" class="btn btn-primary btn-block" >深蓝色-块级按钮</a>

 <a href="#" class="btn btn-info btn-block" >浅蓝色-块级按钮</a>

 <a href="#" class="btn btn-danger btn-block" >红色-块级按钮</a>

 <a href="#" class="btn btn-warning btn-block" >黄色-块级按钮</a>

 <a href="#" class="btn btn-success btn-block" >绿色-块级按钮</a>

相关文章