大佬教程收集整理的这篇文章主要介绍了Bootstrap按钮组,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时,这就显得非常有用。
<!DOCTYPE html> <html> <head> <Meta charset = "utf-8"> <title>demo</title> <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> body{padding: 20px;} </style> </head> <body> <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> <button class="btn btn-priMary">按钮4</button> <button class="btn btn-=priMary">按钮5</button> </div> </body> </html>
<body> <div class="btn-toolbar"> <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> <button class="btn btn-priMary">按钮4</button> <button class="btn btn-priMary">按钮5</button> </div> <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> <button class="btn btn-priMary">按钮4</button> <button class="btn btn-priMary">按钮5</button> </div> <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> <button class="btn btn-priMary">按钮4</button> <button class="btn btn-priMary">按钮5</button> </div> </div> </body>
给btn-group 加上.btn-group-lg,.btn-group-sm,.btn-group-xs可以调整整个按钮组的按钮大小
<body> <div class="btn-toolbar"> <div class="btn-group 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 class="btn-group btn-group-lg"> <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> </div> </body>
时,就会用到这个。
<body> <div class="btn-toolbar"> <div class="btn-group btn-group-lg"> <button class="btn btn-priMary">按钮1</button> <button class="btn btn-priMary">按钮2</button> <button class="btn btn-priMary">按钮3</button> <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>
感觉嵌套并没有什么作用,于是去掉btn-group,显示效果变成如下。
审查元素,发现.dropdown-menu使用的是绝对定位,而.btn-group是相对定位,因为就不难理解为什么我们去掉嵌套的
btn-group之后,效果变成了上图所示。
<body> <div class="btn-toolbar"> <div class="btn-group 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"> <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 btn-group-lg 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> </body>
以上是大佬教程为你收集整理的Bootstrap按钮组全部内容,希望文章能够帮你解决Bootstrap按钮组所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。