如何使用bootstrap 3制作漂亮的矩阵按钮？ [英] How I can make nice looking matrix of buttons with bootstrap 3?

问题描述

我有类似的东西：

< link rel = stylesheethref =// 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 =buttonclass =btn btn-default> Button 1< / button> < button type =buttonclass =btn btn-default> Button 2< / button> < button type =buttonclass =btn btn-default> Button 3< / button> < / DIV> < div class =btn-group> < button type =buttonclass =btn btn-default> Button 4< / button> < button type =buttonclass =btn btn-default> Button 5< / button> < button type =buttonclass =btn btn-default> Button 6< / button> < / DIV> < div class =btn-group> < button type =buttonclass =btn btn-default> Button 7< / button> < button type =buttonclass =btn btn-default>按钮8< /按钮> < button type =buttonclass =btn btn-default>按钮9< /按钮> < / DIV> < / DIV> < div class =col-sm-6> < / DIV> < / div>< / div>

喜欢有3×3按钮矩阵。还有一件事，左侧和右侧必须看起来像这个例子（直线）：

 < link rel =stylesheethref =// maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\"> ;<div class =container> < div class =btn-group-vertical> < button type =buttonclass =btn btn-default> button< / button> < button type =buttonclass =btn btn-default> button< / button> < button type =buttonclass =btn btn-default> button< / button> < / div>< / div>  

做了？也许我需要添加一些引导类或编辑css文件？

解决方案

一组按钮+几个伪类

1. 仅对 .btn-group 类使用一个块。




2. 通过使用伪类来应用一组CSS属性： ：第一个孩子



3. ：最后孩子


4. ：n-child （）


5. ：nth-​​last-child（）




6. clear：left; 属性强制按钮启动矩阵的新行。这是因为 .btn 类具有 float：left; 属性。




7. 设置 border-radius 和 margin 属性，方法与 btn-group class在 bootstrap.css 档案。
   
   

   请检查结果：
   
   

   @import url （'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');/*问题的核心* /。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-right-right-radius：0;} / * Decorations * /。btn-matrix {margin：20px;}

    < div class =btn-group btn-matrix> < button type =buttonclass =btn btn-default> Button 1< / button> < button type =buttonclass =btn btn-default> Button 2< / button> < button type =buttonclass =btn btn-default> Button 3< / button> < button type =buttonclass =btn btn-default> Button 4< / button> < button type =buttonclass =btn btn-default> Button 5< / button> < button type =buttonclass =btn btn-default> Button 6< / button> < button type =buttonclass =btn btn-default> Button 7< / button> < button type =buttonclass =btn btn-default>按钮8< /按钮> < button type =buttonclass =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：第一个孩子{
border-bottom-left-radius：0;
}
.btn-matrix> .btn：nth-​​child（X）{
border-right-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;
}


   
   

   I have something like that:

   <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>

   And I would like to have matrix of buttons 3x3. One more thing, left and right side must look like this example (straight lines):

   <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>

   How I can make it? Maybe I need to add some bootstrap class or edit css file?

   解决方案

   One group of buttons + few pseudo-classes

   1. Use only one block with the .btn-group class.

   2. Apply a set of CSS properties by using of pseudo-classes:

      • :first-child
      • :last-child
      • :nth-child()
      • :nth-last-child()

   3. The clear: left; property forces the button to start a new row of the matrix. It's because the .btn class has the float: left; property.

   4. Set up border-radius and margin properties in a similar way as the btn-group class is described in the bootstrap.css file.

   3×3 matrix

   Please check the result:

   @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 matrix

   The code depends only on 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;
   }
   

   这篇关于如何使用bootstrap 3制作漂亮的矩阵按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！