Question

我知道可以添加到标签中的类，但是如何使之响应，例如我网站上的按钮？例如，我想减小按钮的大小。我该如何与布尔玛做到这一点？我想使用一些现成的东西，例如类is-small或is-medium，而不是以标准方式设置每个参数的样式。

在这里，我将减小移动设备中按钮的大小。我用布尔玛的课程is-primary样式化的按钮封装了简单的图库。

顺便说一句，是否有任何选择可以直接由布尔玛添加边距或填充（例如在Bootstrap中）？我没有在文档中找到它。

function show(index) {
  document
    .querySelectorAll(".custom-image")
    .forEach(item => (item.style.display = "none"));

  document.querySelectorAll(".custom-image")[index].style.display =
    "block";
}
document.querySelectorAll(".custom-image")[0].style.display = "block";

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: grey;
}

body .box {
  max-width: 70vw;
  box-shadow: 26px 25px 55px -4px #413e41;
}

body .box:not(:first-child) {
  margin-top: 2rem;
}

body .custom-image {
  width: 100%;
  display: none;
}

body button:not(:first-child) {
  margin-left: 1rem;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />

<div class="box">
  <div class="custom-image ">
    <img src="https://cdn.pixabay.com/photo/2017/02/01/22/02/mountain-landscape-2031539_960_720.jpg" alt="" />
  </div>
  <div class="custom-image">
    <img src="https://cdn.pixabay.com/photo/2013/10/02/23/03/dawn-190055_960_720.jpg" alt="" />
  </div>
  <div class="custom-image">
    <img src="https://cdn.pixabay.com/photo/2018/12/29/23/49/rays-3902368_960_720.jpg" alt="" />
  </div>
</div>
<div class="box">
  <button onclick="show(0)" class="button is-primary ">1</button>
  <button onclick="show(1)" class="button is-primary ">2</button>
  <button onclick="show(2)" class="button is-primary ">3</button>
</div>

Answer 1

布尔玛中未实现响应式按钮。但是您可以执行以下操作：

@media screen and (max-width: 768px) {
  .button.is-small-mobile {
    border-radius: 2px;
    font-size: .75rem
  }
}

function show(index) {
  document
    .querySelectorAll(".custom-image")
    .forEach(item => (item.style.display = "none"));
  document.querySelectorAll(".custom-image")[index].style.display =
    "block";
}
document.querySelectorAll(".custom-image")[0].style.display = "block";

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: grey;
}

body .box {
  max-width: 70vw;
  box-shadow: 26px 25px 55px -4px #413e41;
}

body .box:not(:first-child) {
  margin-top: 2rem;
}

body .custom-image {
  width: 100%;
  display: none;
}

body button:not(:first-child) {
  margin-left: 1rem;
}

@media screen and (max-width: 768px) {
  .button.is-small-mobile {
    border-radius: 2px;
    font-size: .75rem
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
<div class="box">
  <div class="custom-image ">
    <img src="https://cdn.pixabay.com/photo/2017/02/01/22/02/mountain-landscape-2031539_960_720.jpg" alt="" />
  </div>
  <div class="custom-image">
    <img src="https://cdn.pixabay.com/photo/2013/10/02/23/03/dawn-190055_960_720.jpg" alt="" />
  </div>
  <div class="custom-image">
    <img src="https://cdn.pixabay.com/photo/2018/12/29/23/49/rays-3902368_960_720.jpg" alt="" />
  </div>
</div>
<div class="box">
  <button onclick="show(0)" class="button is-primary is-small-mobile">1</button>
  <button onclick="show(1)" class="button is-primary is-small-mobile">2</button>
  <button onclick="show(2)" class="button is-primary is-small-mobile">3</button>
</div>

没有可添加边距或填充的助手。 Bulma的开发人员不想让助手夸大Bulma。 as mentioned here

但是有一个图书馆bulma-helpers：

https://github.com/jgthms/bulma/issues/451

响应式按钮和间距助手

1 个答案: