Geek Answers Handbook

Dropbox, like a landing page with bootstrap

I am new to UI and twitter-bootstrap stuff. Can anyone advise me how to start with twitter-bootstrap if I want to create a landing page like Dropbox for example. I looked through the documentation and download examples. But if someone can specifically specify which type of layout / nav / another div I should use.

Thanks!

+4
source share
1 answer

This type of layout can be easily achieved by stacking bootstrap grid elements to create the three sections that you see on the page; menu, content, footer. Menu items can be implemented using the bootstrap drop-down menus, you just need to style them the way you want.

This is the main breakdown of this layout:

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>

With this in hand you can easily fill in the elements, for example:

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>

Sprinkle some CSS love into the mix and you have the quenching:

CSS is extremely dirty css used for demo purposes only

 .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; }

Here is the demogram of this layout: demo , edit here .

+16
source

More articles:


All Articles