一按钮的基本样式
Bootstrap提供一组标准的按钮配色和大小调整方案，只需要简单的应用的按钮类即可。BootStrap3提供了按钮的标准样式如图。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> </head> <body>
<!- 表示标准的按钮样式 -> <button type="button" class="btn btn-default" >默认</button>
<!- 表示主要的按钮样式 -> <button type="button" class="btn btn-primary" >主要</button>
<!- 表示成功的按钮样式 -> <button type="button" class="btn btn-success" >成功</button>
<!- 表示信息的按钮样式 -> <button type="button" class="btn btn-info" >信息</button>
<!- 表示警告的按钮样式 -> <button type="button" class="btn btn-warning" >警告</button>
<!- 表示危险的按钮样式 -> <button type="button" class="btn btn-danger" >危险</button>
<!- 使它看起来想一个链接，同事保持按钮的行为 -> <button type="button" class="btn btn-link" >Link</button> <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script> </body> </html>
按钮类的总结参见表
|
意义 |
按钮类 |
颜色和样式 |
|
标准按钮 |
btn btn-default |
白色 |
|
主要按钮 |
btn btn-pri |
深蓝色 |
|
成功按钮 |
btn btn-success |
绿色 |
|
消息按钮 |
btn btn-info |
浅蓝色 |
|
警告按钮 |
btn btn-warning |
橙黄色 |
|
危险操作按钮 |
btn btn-danger |
红色 |
|
链接按钮 |
btn btn-link |
和链接的样式一样 |
注意：按钮类不经可以用于<button>标签，还可以用于<a> 或 <input>标签，它们的样式表现是一致的，不过出于浏览器表现一致性的考虑，Bootstrap推荐使用<button>标签。
二调节按钮大小
Bootstrap还提供了 .btn-lg, .btn-sm, .btn-xs 3个类对按钮的大小进行标准化的调节。下面代码分别显示了大按钮(.btn-lg) , 标准按钮， 小按钮(.btn-sm)，超小按钮(.btn-xs).
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> </head> <body> <p> <button type="button" class="btn btn-primary btn-lg" >大号按钮</button> <button type="button" class="btn btn-default btn-lg" >大号按钮</button> </p> <p> <button type="button" class="btn btn-primary" >默认按钮</button> <button type="button" class="btn btn-default" >默认按钮</button> </p> <p> <button type="button" class="btn btn-primary btn-sm" >小号按钮</button> <button type="button" class="btn btn-default btn-sm" >小号按钮</button> </p> <p> <button type="button" class="btn btn-primary btn-xs" >超小按钮</button> <button type="button" class="btn btn-default btn-xs" >超小按钮</button> </p> <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script> </body> </html>
三 块状按钮
<button>, <a> 标签默认都是内联元素，对于移动端来说，一个占据一整行的大按钮非常常见，这中情况使用 .btn-block类。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> </head> <body> <p> <button type="button" class="btn btn-primary btn-lg btn-block" >此按钮为块级元素</button> <button type="button" class="btn btn-default btn-lg btn-block" >此按钮为块级元素</button> </p> <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script> </body> </html>
4 为按钮设置不可点击样式
Bootstrap通过将按钮的背景色做 50%的褪色处理以呈现出无法点击的效果。只需要为按钮添加 disabled属性。代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> </head> <body> <p> <button type="button" class="btn btn-lg btn-primary disabled" >主要按钮</button> <button type="button" class="btn btn-default btn-lg disabled" >链接</button> </p> <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script> </body> </html>
对于装成按钮样式的<a>标签， 则需要添加.dsabled类。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> </head> <body> <p> <a href="#" class="btn btn-lg btn-primary disabled" >主要链接</a> <a href="#" class="btn btn-lg btn-primary disabled" >链接</a> </p> <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script> </body> </html>
注意：
<a>标签加了 .disabled类后只是样式发生了变化，点击后任然可以正常工作，所以一般情况下可以使用JavaScript来进行<a> 标签的禁用。