0

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

我添加了引导 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 上使用“内容包装器”，然后左右浮动内部标签。这是否消除了对 Twitter Bootstrap 的需求？这种 Razor 2 结构中是否已经融入了同样的响应式设计？

如果不是，我应该将 Twitter Bootstrap 类声明放在哪些标签中？

我应该在其中一些标签中添加 class="row-fluid" 吗？如果是，应该添加哪些标签？

4

1 回答 1

2

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

于 2013-05-11T05:14:33.920 回答