twitter-bootstrap - Dropbox 像引导程序的登陆页面

Question

我对 UI 的东西和 twitter-bootstrap 很陌生。如果我想设计像Dropbox这样的登陆页面，有人可以指导我如何从 twitter-bootstrap 开始。我浏览了引导程序的文档和示例。但是，如果有人可以特别指出我应该使用哪种类型的布局/导航/其他 div。

谢谢！

Answer 1

这种类型的布局可以通过堆叠引导网格元素来创建您在页面上看到的三个部分来轻松实现；菜单、内容、页脚。菜单项可以通过使用引导下拉菜单来实现，您只需按照您想要的方式设置它们的样式。

这是该布局的基本细分：

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。