大佬教程收集整理的这篇文章主要介绍了bootstrap按钮组,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
1、基础实例 代码如下
<!DOCTYPE html> <html> <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按钮组</title> <link href="dist/css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery-1.11.2.min.js"></script> <script src="dist/js/bootstrap.min.js"></script> </head> <body> <div class="btn-group" role="group" aria-label=""> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> </body> </html>效果图
按钮工具栏
<!DOCTYPE html> <html> <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按钮组</title> <link href="dist/css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery-1.11.2.min.js"></script> <script src="dist/js/bootstrap.min.js"></script> </head> <body> <div class="btn-toolbar" role="toolbar"> <div class="btn-group"> <button type="button" class="btn btn-default">按钮 1</button> <button type="button" class="btn btn-default">按钮 2</button> <button type="button" class="btn btn-default">按钮 3</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">按钮 4</button> <button type="button" class="btn btn-default">按钮 5</button> <button type="button" class="btn btn-default">按钮 6</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">按钮 7</button> <button type="button" class="btn btn-default">按钮 8</button> <button type="button" class="btn btn-default">按钮 9</button> </div> </div> </body> </html>效果图
尺寸
<!DOCTYPE html> <html> <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按钮组</title> <link href="dist/css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery-1.11.2.min.js"></script> <script src="dist/js/bootstrap.min.js"></script> </head> <body> <div class="btn-toolbar" role="toolbar"> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-default">按钮 1</button> <button type="button" class="btn btn-default">按钮 2</button> <button type="button" class="btn btn-default">按钮 3</button> </div> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default">按钮 4</button> <button type="button" class="btn btn-default">按钮 5</button> <button type="button" class="btn btn-default">按钮 6</button> </div> <div class="btn-group btn-group-xs"> <button type="button" class="btn btn-default">按钮 7</button> <button type="button" class="btn btn-default">按钮 8</button> <button type="button" class="btn btn-default">按钮 9</button> </div> </div> </body> </html>效果图
嵌套
<!DOCTYPE html> <html> <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按钮组</title> <link href="dist/css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery-1.11.2.min.js"></script> <script src="dist/js/bootstrap.min.js"></script> </head> <body> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <div class="btn-group" role="group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div> </body> </html>效果图
垂直排列 <!DOCTYPE html> <html> <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按钮组</title> <link href="dist/css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery-1.11.2.min.js"></script> <script src="dist/js/bootstrap.min.js"></script> </head> <body> <div class="btn-group-vertical"> <button type="button" class="btn btn-default">按钮 1</button> <button type="button" class="btn btn-default">按钮 2</button> <div class="btn-group-vertical"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">下拉链接 1</a></li> <li><a href="#">下拉链接 2</a></li> </ul> </div> </div> </body> </html>效果图
注:更多学习资源尽在java教程网,http://java.662p.com/thread-4517-1-1.html |
以上是大佬教程为你收集整理的bootstrap按钮组全部内容,希望文章能够帮你解决bootstrap按钮组所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。