引导程序网格的默认样式

Default styling for a Bootstrap Grid

本文关键字：样式 默认 网格 引导程序      更新时间：2023-09-26

首先，我使用一个表来布局页面中的一些元素，带有<table> <thead>等标签。然后我发现bootstrap有一个网格系统，我想用它来布置我的元素。这对于布局来说是可以的，每个<tr>标签使用<div class="row">，每个<td>标签使用<div class="col-md-12">。

然而，我想使用bootstrap提供的一些样式，例如第一个示例中的表。这可能吗？

现在我只得到了布局，但没有像表示例那样在行之间进行分隔（例如边界）。我是不是走错了方向，或者真的有一种方法可以把这个网格设计成类似桌子的时尚，我该怎么做？

如果您想在boostrap中添加更多样式，请在HTML中包含一个额外的样式表，并为HTML元素提供一个在添加的样式表中列出样式的额外类。调用引导程序类时，将类放在引导程序类之后。

所以，你的html应该是

<div class="row my_special_style_class">

在询问如何实现我想要的目标后，我很快就发现了这一点。

您只需为布局使用常规的html<table class="table">（及相关）标记，并将col-md-6类型类应用于标头标记。通过这种方式，它被设置为一个表，但它的行为就像一个引导网格。

我认为布局需要使用div标记，因为我在互联网上看到的所有例子都使用（并说要使用）div标记，而不是表标记。

如果您希望从Bootstrap中使用您喜欢的行和样式显示表格数据，请使用一个表并应用Bootstrap提供的类（例如<table class="table table-striped">）。

我喜欢去http://getbootstrap.com/css/#tables并使用Chrome DevTools或Firebug检查页面上的表格示例。这比有时通读他们的解释要准确得多，也更切中要害：）

然而，如果你只是有点喜欢线条和条纹，但只是在布局一个页面（但不使用表），那么答案是你必须在自己的CSS中自己实现这些边界。

希望能有所帮助。

相关文章：