Bootstrap网格的默认样式

时间:2014-10-10 20:01:53

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

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

但是我想使用bootstrap提供的一些样式,例如可用于此first example的表格。这是可能的还是可用的?

现在我刚刚获得布局,但行之间没有分离(例如边框),就像表格示例一样。我是以错误的方式去做的,还是实际上有一种方法可以在时尚的表格中设置这个网格的样式,我将如何做到这一点?

3 个答案:

答案 0 :(得分:0)

如果您想为您的boostrap添加更多样式,请在HTML中添加一个额外的样式表,并为您的HTML元素添加一个额外的类,其中添加了样式表中添加的样式。在调用它时将你的类放在bootstrap类之后。

所以,你的HTML将是

<div class="row my_special_style_class">

答案 1 :(得分:0)

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

我喜欢去 http://getbootstrap.com/css/#tables 并使用Chrome DevTools或Firebug检查他们在页面上的表格示例。这比通过阅读他们的解释更加精确和重点:)

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

希望有所帮助。

答案 2 :(得分:0)

在询问之后我真的发现了很快,如何实现我想要的。

您可以使用常规html <table class="table">(及相关)标记进行布局,并将col-md-6类型类应用于标头标记。这样它的样式就像一个表,但它的行为就像一个引导网格。

我认为需要为布局使用div标签,因为我在互联网上看到的所有示例都使用(并且说使用)div标签而不是表标签。