如何使用Twitter Bootstrap创建网格标题？

Question

如何使用简单的标题样式为引导网格添加样式，就像下面的图片一样？

当我尝试更改第一行的背景颜色时，由于网格的填充，颜色不会延伸到网格的边缘。当我删除左/右网格填充时，会破坏圆角。

HTML看起来像这样：

<div class="container-fluid" style="border: solid 1px black; border-radius: 10px; max-width: 400px">
<div class="row-fluid">
    <div class="span3">Name</div>
    <div class="span3">Count</div>
</div>
<div class="row-fluid">
    <div class="span3">Joe</div>
    <div class="span3">10</div>
</div>
<div class="row-fluid">
    <div class="span3">Bob</div>
    <div class="span3">7</div>
</div>
</div>

- whitneyland

Answer 1

这篇文章有助于你理解如何给带背景颜色的

元素实现圆角效果，具体信息请访问此链接。

<div class="container-fluid" style="border: solid 1px black; border-radius: 10px; max-width: 400px; padding: 0px">
    <div class="row-fluid" style="background-color: #f0f0f0; border-top-left-radius: 10px; border-top-right-radius: 10px;">
        <div class="span3">Name</div>
        <div class="span3">Count</div>
    </div>
    <div class="row-fluid">
        <div class="span3">Joe</div>
        <div class="span3">10</div>
    </div>
    <div class="row-fluid">
        <div class="span3">Bob</div>
        <div class="span3">7</div>
    </div>
</div>

- timhc22

Answer 2

这是一个应该使用表格的情况，屏幕阅读器用户会很感激，并且Bootstrap内置了一些样式可以帮助你。请参考http://twitter.github.com/bootstrap/base-css.html#tables。

- isherwood

---

一个有趣的想法，但我找不到任何关于何时使用表格比网格更好的经验准则在Bootstrap中。 - whitneyland

Bootstrap没有定律。这是良好的网络实践，就这样。表格数据通常应放在表格中。 - isherwood

我想表达的是，为什么这么多人在使用 Bootstrap 栅格来呈现表格数据，而不是使用表格？我并不是在与您辩论，只是想梳理一下使用情况。 - whitneyland

我认为@LeeWhitney可能对网格的概念感到困惑。Bootstrap的网格是设计学中的逻辑布局，而表格的网格是矩阵数据的物理表示。使用Bootstrap的网格来布置逻辑UI组件。使用表格来为屏幕结构化矩阵数据。 - Virmundi

@Virmundi 很好的区分。我想说的是，如果你正在为设计网格创建标题，那么你做错了。（言过其实，但你明白我的意思。如果你有一个定义了所有相同“类型”的列，那么问问自己是否在布局页面或呈现表格数据。） - ruffin