Dropbox like landing-page with bootstrap

Question

I am pretty new to UI stuff and twitter-bootstrap. Could someone guide to me how do I start with twitter-bootstrap if I want to design a landing page like on of Dropbox. I went through bootstrap's documentation and examples. But if someone could specifically point out which type of layout/nav/other div's I should use.

Thanks!

Answer 1

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

This is a basic breakdown of that 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 fill in the elements quite easily, like so:

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 got a stew going:

CSS ^{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 a demo of this layout running: demo, edit here.