Bootstrap Grid的默认样式[重复]答案

【问题标题】：Default styling for a Bootstrap Grid [duplicate]Bootstrap Grid的默认样式[重复]
【发布时间】：2014-12-06 01:59:03
【问题描述】：

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

但是，我想使用引导程序提供的一些样式，例如可用于此first example 的表格。这可能或可用吗？

现在我只获得了布局，但没有像表格示例那样在行之间进行分隔（例如边框）。我是不是走错了路，或者实际上有没有一种方法可以像时尚的表格一样设置这个网格的样式，我该怎么做？

【问题讨论】：

能否请您发布您的 HTML 代码？网格的外观完全取决于您分配给它的类。

标签： javascript html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

所以，你的 html 会是

<div class="row my_special_style_class">

【讨论】：

【解决方案2】：

在询问后，我实际上很快就发现了，如何实现我想要的。

您可以只使用常规的 html <table class="table">（和相关）标签进行布局，并将 col-md-6 类型类应用于标题标签。这样，它的样式就像一个表格，但它的行为就像一个引导网格。

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

【讨论】：

【解决方案3】：

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

我喜欢去 http://getbootstrap.com/css/#tables 并使用 Chrome DevTools 或 Firebug 检查他们在页面上的表格示例。有时比阅读他们的解释要准确和切中要害:)

但是，如果您只是喜欢线条和条纹，但只是布置页面（但不使用表格），答案是您必须自己在自己的 CSS 中实现这些边框。

希望对您有所帮助。

【讨论】：