Question

我希望我的网站能够流畅/响应用户拥有的任何设备;我经常认为它将是一个单元格“手机”，但我正在笔记本电脑上开发，所以我在设计时看到的与大多数用户看到的不匹配。当然，我可以运行模拟器/模拟器等。但我的观点是，我希望网站在任何给定时刻自动调整设备的大小/宽高比/方向。根据我的阅读，最简单的方法是通过引用他们的CSS文件并在我的html中为各种标签添加一些类声明来利用Twitter Bootstraps功能。我想知道我需要在哪里添加这些。

我添加了bootstrap css：

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">

我的_SiteLayout.cshtml（Razor 2 webiste）文件以这种方式结构化（仅显示正文，头部被斩首）：

<body>
    <div id="fb-root"></div>
    <header>
        <div class="content-wrapper">
            <div class="float-left">
                <p class="site-title">
                </p>
            </div>
            <div class="float-right">
            </div>
        </div>
    </header>
    <div id="body" >
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix">
            @RenderBody()
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>
                </p>
            </div>
        </div>
    </footer>
</body>

因此它在外部div上使用“content-wrapper”，然后左右浮动内部标签。这是否不需要Twitter Bootstrap？这种Razor 2结构已经采用了同样的响应式设计吗？

如果没有，我应该在哪些标签中放置Twitter Bootstrap类声明？

我应该为其中一些标签添加class =“row-fluid”，如果是，那么哪些标签？

Answer 1

Twitter Bootstrap的基本流体网格支架布局为.container-fluid > .row-fluid > .span#。 .row-fluid范围内的跨度使用有利于布局的百分比宽度，这些布局包含最多12个元素的元素：.span1，.span2，.span3等。

跨度类已设置为float:left，可以通过将.pull-right添加到float:right元素来覆盖。

所以你的布局的Bootstrap实现看起来像：

<body>
    <div id="fb-root"></div>
    <header class="container-fluid">
        <div class="row-fluid content-wrapper">
            <div class="span6">
                <p class="site-title">
                </p>
            </div>
            <div class="span6 pull-right">
            </div>
        </div>
    </header>
    <div class="container-fluid" id="body">
        @RenderSection("featured", required: false)
        <section class="row-fluid content-wrapper main-content clear-fix">
            @RenderBody()
        </section>
    </div>
    <footer class="container-fluid">
        <div class="row-fluid content-wrapper">
            <div class="span12">
                <p>
                </p>
            </div>
        </div>
    </footer>
</body>

查看http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem

我应该在哪里引导我的网站？

1 个答案: