轻松查看Bootstrap网格？

Question

我正在玩一个使用Bootstrap的简单HTML页面,我希望有一种可视化列的方法,就像在"下面"将实际内容看作不同的阴影,例如像Frameless那样.有没有办法让这个功能变得简单？

Answer 1

更新了Sherbrow对Bootstrap 3的回答:

div[class="row"] {
    outline: 1px dotted rgba(0, 0, 0, 0.25);
}

div[class^="col-"] {
    background-color: rgba(255, 0, 0, 0.2);
    outline: 1px dotted rgba(0, 0, 0, 0.5);
}

Answer 2

您可以使用一些CSS background来查看网格:

[class*="span"] { background: #EEF; }
[class*="span"] [class*="span"] { background: #FEE; }

演示1(jsfiddle)

正如Pavlo建议的那样,您也可以使用半透明颜色,根据嵌套(rgba浏览器支持),它会为您提供不同的阴影:

[class^="span"] { background-color: rgba(255, 0, 0, 0.3); }

演示2(jsfiddle)

这同样与.row或网格的任何元素.

注意:在这种情况下选择*=或^=不重要,请参阅此(w3.org)以获取更多信息

Answer 3

如果您使用的是Firefox,Chrome,Safari或其他webkit浏览器,请转到下面的页面并通过将书签拖到书签来"安装"书签.

然后,您可以通过单击书签并选择框架,使用基础或引导程序查看任何页面的网格.

http://alefeuvre.github.io/foundation-grid-displayer/