在Bootstrap中显示具有标题和标签的两列多行,可以使用Bootstrap的网格系统和组件来实现。
首先,使用Bootstrap的网格系统创建一个包含两列的容器。可以使用<div class="container">
来创建一个容器,然后在容器内部使用<div class="row">
来创建行,再在行内使用<div class="col">
来创建列。
接下来,在每一列中添加内容。每一行中的每一列都可以包含一个标题和多个标签。可以使用<h3>
标签来创建标题,使用<span>
或<label>
标签来创建标签。
以下是一个示例代码:
<div class="container">
<div class="row">
<div class="col">
<h3>列1标题</h3>
<span class="badge badge-primary">标签1</span>
<span class="badge badge-secondary">标签2</span>
<span class="badge badge-success">标签3</span>
</div>
<div class="col">
<h3>列2标题</h3>
<span class="badge badge-primary">标签4</span>
<span class="badge badge-secondary">标签5</span>
<span class="badge badge-success">标签6</span>
</div>
</div>
<div class="row">
<div class="col">
<h3>列1标题</h3>
<span class="badge badge-primary">标签7</span>
<span class="badge badge-secondary">标签8</span>
<span class="badge badge-success">标签9</span>
</div>
<div class="col">
<h3>列2标题</h3>
<span class="badge badge-primary">标签10</span>
<span class="badge badge-secondary">标签11</span>
<span class="badge badge-success">标签12</span>
</div>
</div>
</div>
在上述示例中,每个列都包含一个标题和三个标签。可以根据需要自定义标题和标签的样式,例如使用Bootstrap的徽章(badge)组件来创建标签样式。
这是一个基本的示例,你可以根据实际需求进行修改和扩展。关于Bootstrap的更多用法和组件,请参考腾讯云的Bootstrap文档:Bootstrap文档
领取专属 10元无门槛券
手把手带您无忧上云