大佬教程收集整理的这篇文章主要介绍了HTML – 如何使用bootstrap 3制作漂亮的按钮矩阵?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="container"> <div class="row"> <div class="col-sm-6"> <div class="btn-group"> <button type="button" class="btn btn-default">Button 1</button> <button type="button" class="btn btn-default">Button 2</button> <button type="button" class="btn btn-default">Button 3</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">Button 4</button> <button type="button" class="btn btn-default">Button 5</button> <button type="button" class="btn btn-default">Button 6</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">Button 7</button> <button type="button" class="btn btn-default">Button 8</button> <button type="button" class="btn btn-default">Button 9</button> </div> </div> <div class="col-sm-6"> </div> </div> </div>
我想有3×3按钮矩阵.还有一件事,左侧和右侧必须看起来像这个例子(直线):
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="container"> <div class="btn-group-vertical"> <button type="button" class="btn btn-default">button</button> <button type="button" class="btn btn-default">button</button> <button type="button" class="btn btn-default">button</button> </div> </div>
我怎么能做到的?也许我需要添加一些引导类或编辑css文件?
>仅使用.btn-group类的一个块.
>使用伪类应用一组CSS属性:
> :first-child
> :last-child
> :nth-child()
> :nth-last-child()
>明确:左;属性强制按钮开始矩阵的新行.这是因为.btn类有float:left;属性.
>以与bootstrap.css文件中描述的btn-group类类似的方式设置border-radius和margin属性.
3×3矩阵
请检查结果:
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); /* The heart of the matter */ .btn-matrix > .btn:nth-child(3n+4) { clear: left; margin-left: 0; } .btn-matrix > .btn:nth-child(n+4) { margin-top: -1px; } .btn-matrix > .btn:first-child { border-bottom-left-radius: 0; } .btn-matrix > .btn:nth-child(3) { border-top-right-radius: 4px !important; } .btn-matrix > .btn:nth-last-child(3) { border-bottom-left-radius: 4px !important; } .btn-matrix > .btn:last-child { border-top-right-radius: 0; } /* Decorations */ .btn-matrix { margin: 20px; }
<div class="btn-group btn-matrix"> <button type="button" class="btn btn-default">Button 1</button> <button type="button" class="btn btn-default">Button 2</button> <button type="button" class="btn btn-default">Button 3</button> <button type="button" class="btn btn-default">Button 4</button> <button type="button" class="btn btn-default">Button 5</button> <button type="button" class="btn btn-default">Button 6</button> <button type="button" class="btn btn-default">Button 7</button> <button type="button" class="btn btn-default">Button 8</button> <button type="button" class="btn btn-default">Button 9</button> </div>
X×Y矩阵
代码仅依赖于X:
.btn-matrix > .btn:nth-child(Xn+X+1) { clear: left; margin-left: 0; } .btn-matrix > .btn:nth-child(n+X+1) { margin-top: -1px; } .btn-matrix > .btn:first-child { border-bottom-left-radius: 0; } .btn-matrix > .btn:nth-child(X) { border-top-right-radius: 4px !important; } .btn-matrix > .btn:nth-last-child(X) { border-bottom-left-radius: 4px !important; } .btn-matrix > .btn:last-child { border-top-right-radius: 0; }
以上是大佬教程为你收集整理的HTML – 如何使用bootstrap 3制作漂亮的按钮矩阵?全部内容,希望文章能够帮你解决HTML – 如何使用bootstrap 3制作漂亮的按钮矩阵?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。