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 で「content-wrapper」を使用し、内側のタグを左右にフロートします。これにより、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-rightfloat: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 に答える