个人中心
gpt4 book ai didi

asp.net - 我应该在哪里 Bootstrap 我的网站？

转载 作者：太空宇宙 更新时间：2023-11-04 04:35:42 26 4
gpt4 key购买 nike

我希望我的网站能够流畅/响应用户使用的任何设备；我估计它通常会是一部手机，但我是在笔记本电脑上开发的，所以我在设计时看到的和大多数用户会看到的不匹配。当然，我可以运行仿真器/模拟器等。但我的意思是我希望网站在任何给定时刻自动调整设备的大小/纵横比/方向。根据我的阅读，实现此目的的最简单方法是通过引用其 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 网站)文件的结构是这样的(只显示 body ，头部被斩首):

<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"吗？如果是，添加哪些标签？

最佳答案

Twitter Bootstrap 的基本流体网格脚手架布局为 .container-fluid > .row-fluid > .span#。 .row-fluid 中的跨度使用百分比宽度，有利于由加起来为 12 的元素组成的布局:.span1、.span2、.span3 等..

Span 类已经设置为 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

关于asp.net - 我应该在哪里 Bootstrap 我的网站？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16493807/

26 4 0
文章推荐： Css float 缺点
文章推荐： linux - Crontab 中的 Perl 脚本没有在一夜之间移动文件
文章推荐： javascript - 一个显示滚动球的简单程序
文章推荐： linux - Ubuntu 15.04下安装MongoDB时无法正常执行 "apt-get update"
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com