twitter-bootstrap - 带 Bootstrap 的 Dropbox 登陆页面

Question

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

谢谢!

Answer 1

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

这是该布局的基本分割:

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 , 编辑 here .