首页
前端开发
如何使用 Bootstrap 3 制作漂亮的按钮矩阵?

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

查看：14 发布时间：2021/12/28 15:06:26 html css twitter-bootstrap twitter-bootstrap-3 buttongroup

本文介绍了如何使用 Bootstrap 3 制作漂亮的按钮矩阵?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有类似的东西:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><div class="容器"><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 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 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 class="col-sm-6">

我想要一个 3x3 的按钮矩阵.还有一件事，左边和右边必须像这个例子(直线):

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><div class="容器"><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>

我怎样才能做到?也许我需要添加一些 Bootstrap 类或编辑 CSS 文件?

解决方案

一组按钮+少量伪类

在 .btn-group 类中只使用一个块.
使用伪类应用一组 CSS 属性:

clear: left; 属性强制按钮开始矩阵的新行.这是因为 .btn 类具有 float: left; 属性.
设置border-radius 和margin 属性的方式与btn-group 类在<一个 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="nofollow noreferrer">bootstrap.css 文件.

带有 Bootstrap 3 的三列按钮矩阵

https://codepen.io/glebkema/pen/bGWWMRz

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css";/* 排列按钮 */.btn-矩阵>.btn{宽度:33%；/* 无论内容如何，都强制按钮具有相同的宽度 */}.btn-matrix>.btn:nth-child(3n + 4) {清除:左；/* 强制按钮开始矩阵的新行(因为 .btn 添加了 `float: left;` 属性)*/左边距:0；/* 因为 .btn-group 将 `margin-left: -1px;` 添加到所有按钮 */}.btn-matrix>.btn:nth-child(n + 4) {边距顶部:-1px；/* 叠加相邻行按钮的边框 */}/* 修复边界半径 */.btn-matrix>.btn:first-child {边框左下角半径:0；}.btn-matrix>.btn:nth-child(3) {边框右上角半径:4px！重要；}.btn-matrix>.btn:nth-last-child(3) {边框左下角半径:4px！重要；}.btn-matrix>.btn:last-child {边框右上角半径:0；}/* 装饰 */.btn-矩阵{边距:20px；}


<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><button type="button" class="btn btn-default">Button 10</button><button type="button" class="btn btn-default">Button 11</button><button type="button" class="btn btn-default">Button 12</button><button type="button" class="btn btn-default">Button 13</button><button type="button" class="btn btn-default">Button 14</button><button type="button" class="btn btn-default">Button 15</button>

使用 Bootstrap 3 的 X×Y 矩阵

代码只依赖于X:

.btn-matrix >.btn {宽度:(100/X)%；}.btn-矩阵>.btn:nth-child(Xn+X+1) {清除:左；左边距:0；}.btn-矩阵>.btn:nth-child(n+X+1) {边距顶部:-1px；}.btn-矩阵>.btn:第一个孩子{边框左下角半径:0；}.btn-矩阵>.btn:nth-child(X) {边框右上角半径:4px！重要；}.btn-矩阵>.btn:nth-last-child(X) {边框左下角半径:4px！重要；}.btn-矩阵>.btn:最后一个孩子{边框右上角半径:0；}

带 Bootstrap 4 或 5 的三列按钮矩阵

https://codepen.io/glebkema/pen/ZEKKoJG

@import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css";/* 排列按钮 */.btn-矩阵{flex-wrap: 包裹;/* 允许按钮跳到另一行 */}.btn-矩阵>.btn {宽度:33%；/* 无论内容如何，都强制按钮具有相同的宽度 */}.btn-矩阵>.btn:nth-child(3n + 4) {左边距:0；/* 因为 .btn-group 将 `margin-left: -1px;` 添加到所有按钮 */}.btn-矩阵>.btn:nth-child(n + 4) {边距顶部:-1px；/* 叠加相邻行按钮的边框 */}/* 修复边界半径 */.btn-矩阵>.btn:第一个孩子{边框左下角半径:0；}.btn-矩阵>.btn:nth-child(3) {边框右上角半径:4px！重要；}.btn-矩阵>.btn:nth-last-child(3) {边框左下角半径:4px！重要；}.btn-矩阵>.btn:最后一个孩子{边框右上角半径:0；}/* 装饰 */.btn-矩阵{边距:20px；最大宽度:500px；}

<div class="btn-group btn-matrix" role="group" aria-label="三列按钮矩阵"><button type="button" class="btn btn-outline-primary">按钮1</button><button type="button" class="btn btn-outline-primary">Button 2</button><button type="button" class="btn btn-outline-primary">Button 3</button><button type="button" class="btn btn-outline-primary">Button 4</button><button type="button" class="btn btn-outline-primary">Button 5</button><button type="button" class="btn btn-outline-primary">Button 6</button><button type="button" class="btn btn-outline-primary">Button 7</button><button type="button" class="btn btn-outline-primary">Button 8</button><button type="button" class="btn btn-outline-primary">Button 9</button><button type="button" class="btn btn-outline-primary">Button 10</button><button type="button" class="btn btn-outline-primary">Button 11</button><button type="button" class="btn btn-outline-primary">Button 12</button><button type="button" class="btn btn-outline-primary">Button 13</button><button type="button" class="btn btn-outline-primary">按钮14</button><button type="button" class="btn btn-outline-primary">Button 15</button>

使用 Bootstrap 4 或 5 的 X×Y 矩阵

代码只依赖于X:

.btn-matrix {flex-wrap: 包裹;}.btn-矩阵>.btn {宽度:(100/X)%；}.btn-矩阵>.btn:nth-child(Xn+X+1) {左边距:0；}.btn-矩阵>.btn:nth-child(n+X+1) {边距顶部:-1px；}.btn-矩阵>.btn:第一个孩子{边框左下角半径:0；}.btn-矩阵>.btn:nth-child(X) {边框右上角半径:4px！重要；}.btn-矩阵>.btn:nth-last-child(X) {边框左下角半径:4px！重要；}.btn-矩阵>.btn:最后一个孩子{边框右上角半径: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 a 3x3 matrix of buttons. 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 the CSS file?

解决方案

One group of buttons + few pseudo-classes

Use only one block with the .btn-group class.
Apply a set of CSS properties by using of pseudo-classes:

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.
Set up border-radius and margin properties in a similar way as the btn-group class is described in the bootstrap.css file.

Three column button matrix with Bootstrap 3

https://codepen.io/glebkema/pen/bGWWMRz

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css";

/* Arrange buttons */
.btn-matrix>.btn {
  width: 33%; /* force buttons to have the same width regardless of content */
}
.btn-matrix>.btn:nth-child(3n + 4) {
  clear: left; /* force the button to start a new row of the matrix
                  (because .btn adds the `float: left;` property) */
  margin-left: 0; /* because .btn-group adds `margin-left: -1px;` to all buttons */
}
.btn-matrix>.btn:nth-child(n + 4) {
  margin-top: -1px; /* superimpose borders of the buttons from adjacent rows */
}

/* Fix border radius */
.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>
  <button type="button" class="btn btn-default">Button 10</button>
  <button type="button" class="btn btn-default">Button 11</button>
  <button type="button" class="btn btn-default">Button 12</button>
  <button type="button" class="btn btn-default">Button 13</button>
  <button type="button" class="btn btn-default">Button 14</button>
  <button type="button" class="btn btn-default">Button 15</button>
</div>

X×Y matrix with Bootstrap 3

The code depends only on X:

.btn-matrix > .btn {
  width: (100/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;
}

Three column button matrix with Bootstrap 4 or 5

https://codepen.io/glebkema/pen/ZEKKoJG

@import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css";

/* Arrange buttons */
.btn-matrix {
   flex-wrap: wrap; /* allow buttons to jump to another row */
}
.btn-matrix > .btn {
   width: 33%; /* force buttons to have the same width regardless of content */
}
.btn-matrix > .btn:nth-child(3n + 4) {
   margin-left: 0; /* because .btn-group adds `margin-left: -1px;` to all buttons */
}
.btn-matrix > .btn:nth-child(n + 4) {
   margin-top: -1px; /* superimpose borders of the buttons from adjacent rows */
}

/* Fix border radius */
.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;
   max-width: 500px;
}

<div class="btn-group btn-matrix" role="group" aria-label="Three Column Button Matrix">
  <button type="button" class="btn btn-outline-primary">Button 1</button>
  <button type="button" class="btn btn-outline-primary">Button 2</button>
  <button type="button" class="btn btn-outline-primary">Button 3</button>
  <button type="button" class="btn btn-outline-primary">Button 4</button>
  <button type="button" class="btn btn-outline-primary">Button 5</button>
  <button type="button" class="btn btn-outline-primary">Button 6</button>
  <button type="button" class="btn btn-outline-primary">Button 7</button>
  <button type="button" class="btn btn-outline-primary">Button 8</button>
  <button type="button" class="btn btn-outline-primary">Button 9</button>
  <button type="button" class="btn btn-outline-primary">Button 10</button>
  <button type="button" class="btn btn-outline-primary">Button 11</button>
  <button type="button" class="btn btn-outline-primary">Button 12</button>
  <button type="button" class="btn btn-outline-primary">Button 13</button>
  <button type="button" class="btn btn-outline-primary">Button 14</button>
  <button type="button" class="btn btn-outline-primary">Button 15</button>
</div>

X×Y matrix with Bootstrap 4 or 5

The code depends only on X:

.btn-matrix {
  flex-wrap: wrap;
}
.btn-matrix > .btn {
  width: (100/X)%;
}
.btn-matrix > .btn:nth-child(Xn+X+1) {
  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屋！

查看全文

登录关闭

扫码关注1秒登录

发送“验证码”获取 | 15天全站免登陆