Question

我想让html页面包含层次结构格式的多个矩形/框（带文本）。我试图从网上搜索一个样本，但没有成功。我正在使用visual studio 2012.顺便说一句，我是html的新手。先感谢您。下面是一个示例格式。

Answer 1

Bootstrap适用于网格。但如果您使用企业应用程序，请不要使用bootstrap，因为它会加载不需要的类（所有类都将在页面呈现时加载）。

<html>
  <head>
  <title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
 </div>
</body>
 </html>

Answer 2

您可能有兴趣查看处理网格的样式表库。

网格使您能够通过不可见（或可见）矩形容器定义列间距，这些容器（通常）可被12列整除。

这允许嵌套，这意味着您可以在列中包含列。

假设我们使用12列网格，嵌套不会改变因子12的任何内容。您总是需要12列才能构成宽度的100％。

网格库的一些很好的例子可能是：

Bootstrap

Materializecss

在HTML中创建多个Rectangle / Boxed

2 个答案: