使用引导程序进行用户界面设计

Question

我想像我在下面提供的链接一样制作 UI。使用Bootstrap或基本的html表怎么可能？

https://i.stack.imgur.com/jviUL.jpg

Answer 1

此布局可以分两行创建 - 一行用于第一列中的前 4 个元素 + 大元素，另一行用于其余 4 个小元素。Bootstrap 中的一行基本上是一个<div class="row">

在第一行中，必须有 2 列具有不同的宽度（以百分比为单位）。第一个可以是<div class="col-xs-3">，而第二个可以是<div class="col-xs-9">。

[注]：col-xs-3 和 col-xs-9 中的数字之和应等于 12。

这同样适用于第二行。有 4 个元素，因此很容易计算：

12 / 4 = 3 - 对于该行中的每个元素，应使用<div class="col-xs-3">。

---

生成的 HTML 将如下所示：

<div>
  <div class="row">
    <div class="col-sm-3">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="col-sm-9"></div>
  </div>
  <div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-3"></div>
    <div class="col-sm-3"></div>
    <div class="col-sm-3"></div>
  </div>
</div>

Answer 2

您可以尝试这样做：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <div class="row">
                <div class="col-md-12">
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-12">
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
        </div>
        <div class="col-md-3">
        </div>
        <div class="col-md-3">
        </div>
        <div class="col-md-3">
        </div>
    </div>
</div>