twitter-bootstrap - ブートストラップ付きのランディングページのようなドロップボックス

Question

私はUI関連のものとtwitter-bootstrapにかなり慣れていません。Dropboxのようなランディングページをデザインしたい場合、誰かがtwitter-bootstrapから始める方法を教えてもらえますか？ブートストラップのドキュメントと例を確認しました。しかし、誰かがどのタイプのレイアウト/ナビゲーション/他のdivを使用すべきかを具体的に指摘できれば。

ありがとう！

Answer 1

このタイプのレイアウトは、ブートストラップ グリッド要素を積み重ねて、ページに表示される 3 つのセクションを作成することで簡単に実現できます。メニュー、コンテンツ、フッター。メニュー項目は、ブートストラップ ドロップダウン メニューを使用して実装できます。必要な方法でスタイルを設定するだけです。

これは、そのレイアウトの基本的な内訳です​​。

HTML

<div class="content">
    <div class="container">
        <div class="row">
            <div class="span12">
                ...navbar...
            </div>
        </div>
        <div class="row">
            <div class="span8 offset2">
                ...content...
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="span2">
            ...list menu...
        </div>
        <div class="span2">
            ...list menu...
        </div>
        <div class="span2">
            ...list menu...
        </div>
        <div class="span2 pull-right">
            ...dropup menu...
        </div>
    </div>
</div>

これがあれば、次のように非常に簡単に要素を埋めることができます。

HTML

<div class="content">
    <div class="container">
        <div class="row">
            <div class="span12">
            <div class="navbar">
                <div class="navbar-inner">
                  <div class="container">
                    <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </a>
                    <div class="nav-collapse">
                        <div class="btn-group pull-right">
                            <a data-toggle="dropdown" class="btn btn-simple dropdown-toggle" href="#"><i class="icon-fire"></i> Dropdown <b class="caret"></b></a>
                            <div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
                                <form>
                                    <input style="margin-bottom: 15px;" type="text">
                                    <input style="margin-bottom: 15px;" type="password">
                                    <input style="float: left; margin-right: 10px;" type="checkbox">
                                    <label for="user_remember_me"> Remember me</label>
                                    <input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" value ="Submit" type="submit">
                                </form>
                            </div>
                        </div>
                    </div><!-- /.nav-collapse -->
                  </div>
                </div><!-- /navbar-inner -->
              </div>
            </div>
        </div>
        <div class="row">
            <div class="span8 offset2">
                <h1>Title</h1>
                <a class="play" href="#">
                    <img src="https://www.dropbox.com/static/images/watch_a_video2.png">
                </a>
                <div class="big-btn">
                    <a href="#" class="btn btn-primary">Download</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="span2">
            <ul>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Consectetur adipiscing elit</li>
                <li>Integer molestie lorem at massa</li>
                <li>Facilisis in pretium nisl aliquet</li>
                <li>Nulla volutpat aliquam velit</li>
            </ul>
        </div>
        <div class="span2">
            <ul>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Consectetur adipiscing elit</li>
                <li>Integer molestie lorem at massa</li>
                <li>Facilisis in pretium nisl aliquet</li>
                <li>Nulla volutpat aliquam velit</li>
            </ul>
        </div>
        <div class="span2">
            <ul>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Consectetur adipiscing elit</li>
                <li>Integer molestie lorem at massa</li>
                <li>Facilisis in pretium nisl aliquet</li>
                <li>Nulla volutpat aliquam velit</li>
            </ul>
        </div>
        <div class="span2 pull-right">
            <div class="btn-group dropup pull-right">
                <a href="#" data-toggle="dropdown" class="btn btn-simple dropdown-toggle"><i class="icon-globe"></i> Inverse <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

ミックスに CSS 愛を振りかけると、シチューができあがります。

CSS ^{非常にダーティな CSS。デモ目的でのみ使用}

.content {
    text-align:center;
    margin:0 0 60px;
}

.navbar-inner {
    background-color: transparent;
    background-image: none;
    background-repeat: no-repeat;
    box-shadow: none;
    color:black;
}

.navbar .nav > li > a {
    color:black;
    text-shadow:none;
}

.navbar .nav > li > a:hover {
    color:#333;
}

.navbar .nav li.dropdown .dropdown-toggle .caret, .navbar .nav li.dropdown.open .caret {
    border-bottom-color: #000000;
    border-top-color: #000000;
}

.btn-simple {
    background-color:transparent;
    background-image:none;
}

.big-btn {
    margin: 80px 0 108px;
}

.big-btn .btn {
    border-radius: 6px 6px 6px 6px;
    display: inline-block;
    font-size: 30px;
    line-height: 1;
    margin-bottom: 27px;
    padding: 19px 24px;
    text-align: center;
    width: 60%;
}

.navbar-inner {
    padding-left: 0;
    padding-right: 0;
}

.play {
    margin:20px 0;
    display:block;
}

このレイアウトの実行中のデモは次のとおりです: demo , edit here .