Dropbox像引导登陆页面

Question

我对UI的东西和twitter-bootstrap很新。有人可以引导我，如果我想设计一个类似于Dropbox的着陆页，我该如何从twitter-bootstrap开始。我经历了bootstrap的文档和示例。但是如果有人能够特别指出我应该使用哪种类型的布局/导航/其他div。

谢谢！

Answer 1

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

这是布局的一个基本的细分：

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。