如何使用引导程序4创建此特定用户界面

Question

我想创建上述UI。

最外面的矩形框是屏幕，在里面，我总共有三个矩形（容器），一个容器带有一种特定类型的信息，在右侧，我有两个小容器，它们大约占一半长度和大致相同的尺寸。

我希望它具有响应性，但我不知道任何CSS框架，而且我只有语义HTML，不知道如何前进。我已经看到了flex，grid，但是仍然不清楚如何设计。

非常感谢您的帮助！

Answer 1

.parent{
  display:flex;
  flex-direction:row;
  justify-content:center;
}

.parent > div {
width: 100%
}

<div class='parent' >
 <div></div>
 <div></div>
</div>

我认为您不应该在初次尝试使用任何框架或库时使用css网格和flexbox做出响应，这会让您大吃一惊，但将来您可以选择诸如boostrap之类的东西，否则会遇到麻烦

Answer 2

您可以使用bootstrap4轻松完成此操作。

HTML结构类似于下面的代码：

<div class="container">
        <div class="row">
            <div class="col-sm-6">
                <!-- Information -->
            </div>
            <div class="col-sm-6">
                <div class="row">
                    <div class="col-sm-12">
                        <!-- ScoreSheet -->
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <!-- Stats -->
                    </div>
                </div>
            </div>
        </div>
    </div>

您需要使用自己的自定义CSS添加样式，因为引导程序无法提供样式。另外，您可以看一下Bootstraps“ Card Component”，以简化样式。