boostrap按钮
- bootstrap按钮
- 对应链接：http://v3.bootcss.com/css/#buttons
- 使用时添加基础类class:btn
- 默认样式class=btn-default，控制大小class=btn-(lg | sm | xs)，没有btn-md，默认即为中等大小
- 一些简单的demo以及demo效果如下所示
-
View Code<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.css"> <style> .glyphicon-heart {font-size: 100px; color: red;} </style> </head> <body> <div class="container"> <input type="button" value="按钮" class="btn" /> <input type="button" value="按钮" class="btn btn-default" /> <input type="button" value="按钮" class="btn btn-link" /> <br> <input type="button" value="按钮" class="btn btn-primary" /> <input type="button" value="按钮" class="btn btn-primary btn-lg" /> <input type="button" value="按钮" class="btn btn-primary btn-sm" /> <input type="button" value="按钮" class="btn btn-primary btn-xs" /> <br><br> <input type="button" value="按钮" class="btn btn-primary" /> <input type="button" value="按钮" class="btn btn-primary active" /> <input type="button" value="按钮" class="btn btn-primary disabled" /> <br><br> <a href="#" value="按钮" class="btn btn-primary">按钮</a> <button class="btn btn-primary">按钮</button> <br><br> <button class="btn btn-primary btn-block">按钮</button> </div> </body> <script src="js/jquery-2.1.3.js"></script> <script src="js/bootstrap.js"></script> </html>
- 按钮组
- class=btn-group
- 若希望按钮组的宽度和容器宽度一样，则可设置class=btn-group-justified，需要注意的是在按钮组中只有a标签的可以和容器宽度一样，button和input标签均不能和容器同宽度
- 若希望按钮组垂直排列，则可设置class=btn-group-vertical
- btn-group一般不与btn-group-vertical同时使用
- 表示箭头上下的可以设置class=dropdown dropup
- 控制按钮组的大小class=btn-group-(lg | sm | xs)，以上的demo及demo效果如下所示
-
View Code
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.css"> <style> .glyphicon-heart {font-size: 100px; color: red;} </style> </head> <body> <div class="container"> <div class="btn-group"> <button class="btn btn-primary">按钮1</button> <button class="btn btn-primary">按钮2</button> <button class="btn btn-primary">按钮3</button> </div> <br><br> <div class="btn-group btn-group-justified"> <button href="#" class="btn btn-primary">按钮1</button> <button href="#" class="btn btn-primary">按钮2</button> <button href="#" class="btn btn-primary">按钮3</button> </div> <br><br> <div class="btn-group btn-group-justified"> <a href="#" class="btn btn-primary">按钮1</a> <a href="#" class="btn btn-primary">按钮2</a> <a href="#" class="btn btn-primary">按钮3</a> </div> <br> <div class="btn-group-vertical"> <button class="btn btn-primary">按钮1</button> <button class="btn btn-primary">按钮2</button> <button class="btn btn-primary">按钮3</button> </div> <div class="btn-group-vertical btn-group-lg"> <button class="btn btn-primary">按钮1</button> <button class="btn btn-primary">按钮2</button> <button class="btn btn-primary">按钮3</button> </div> <div class="btn-group-vertical btn-group-sm"> <button class="btn btn-primary">按钮1</button> <button class="btn btn-primary">按钮2</button> <button class="btn btn-primary">按钮3</button> </div> <div class="btn-group-vertical btn-group-xs"> <button class="btn btn-primary">按钮1</button> <button class="btn btn-primary">按钮2</button> <button class="btn btn-primary">按钮3</button> </div> <br><br> <a href="#" class="btn btn-primary">按钮<span class="caret"></span></a> <br><br> <a href="#" class="btn btn-primary dropup">按钮<span class="caret"></span></a> <br><br> <div class="btn-group dropup"> <button class="btn btn-primary">按钮</button> <button class="btn btn-primary"><span class="caret"></span></button> </div> </div> </body> <script src="js/jquery-2.1.3.js"></script> <script src="js/bootstrap.js"></script> </html>
