Bootstrap中行类的用法是什么?

时间:2012-04-14 19:03:20

标签: css twitter-bootstrap

我认为这可能是一个愚蠢的问题,但我不明白Twitter Bootstrap中.row类的用法。那么,它用于什么?

我正试图在这个结构中做这样的事情:

LOGO
SUB-MESSAGE
MENU 1  | MENU 2  | MENU 3  | MENU ...
CONTENT                                            | ADS
CONTENT                                            | ADS
CONTENT                                            | ADS
CONTENT                                            | ADS
...                                                | ...

这应该是什么基本结构以及需要哪一行?

1 个答案:

答案 0 :(得分:9)

引导程序将普通表行<tr>的使用转换为更加语义的构建块,您可以使用它来布局设计,并且还可以转换表数据块<td> ,用于分隔内容的.span*类,称为网格。基本上,您可以将行视为一个水平容器,您可以使用构建块填充span标记,以后可以在其他行的上方或下方堆叠以创建布局。

因此,为了说明您的布局,您可以使用这样的一堆行:

<row>
    <span>LOGO</span>
    SUB-MESSAGE
</row>

<row>
    <span>MENU 1  | MENU 2  | MENU 3  | MENU ...</span>
</row>

<row>
    <span>CONTENT</span>                               | <span>ADS</span>
    <span>CONTENT</span>                               | <span>ADS</span>
    <span>CONTENT</span>                               | <span>ADS</span>
    <span>CONTENT</span>                               | <span>ADS</span>
</row>

注意行如何分隔您希望分隔的不同级别的内容。您可以在bootstrap脚手架documentation上找到有关网格系统使用情况的更多信息,它们还有一个堆叠网格,您可以查看源,以了解行如何堆叠以及如何内容被放在一起。