css - 如何布局一个相当简单的引导场景？

Question

我是引导程序的新手，并试图使用他们的网格系统布局一些相当简单的东西，但我遇到了困难。这是我想要的：

所以基本上，左边是报告的标题。一个登录按钮向右浮动。下方有报告标准的面板。侧边栏包含报告列表，右侧是报告的实际内容。

我无法对齐面板等。另一个问题是，在宽屏幕上，面板的宽度在某个宽度处最大。

我正在寻找关于如何做这类事情的提示或示例或好的教程。

Answer 1

这是一个快速的模型，可以帮助您入门：http: //jsfiddle.net/panchroma/hjhtF/

正如@isherwood 提到的，请查看脚手架文档。

HTML

<div class="container">
<div class="row-fluid">
    <div class="span12">
        <h3>Report Criteria ....</h3>
        <span class="pull-right btn">login</span>
    </div><!-- end span12 -->
</div> <!-- end row -->

<div class="row-fluid">
    <div class="span3">
        <h3>Category</h3>
        <ul class="side-nav">
            <li>a</li>
        </ul>
    </div><!-- end span3 -->

    <div class="span9">
    <table class="table">
    <!-- table details -->
    </table>
    </div><!-- end span9 -->
</div> <!-- end row -->


</div><!-- end container -->

希望这能让你开始！