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

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

    

        

            

                ...navbar...
            
        
        

            

                ...content...
            
        
    


    

        

            ...list menu...
        
        

            ...list menu...
        
        

            ...list menu...
        
        

            ...dropup menu...
        
    

With this in hand, you can fill in the elements quite easily, like so:

HTML

    

        

            

            

                

                  

                    
                      
                      
                      
                    
                    

                        

                             Dropdown 
                            

                                

                                    
                                    
                                    
                                     Remember me
                                    
                                
                            
                        
                    

                  
                

              
            
        
        

            

                
Title
                
                    
                
                

                    Download
                
            
        
    


    

        

            

                
Lorem ipsum dolor sit amet
                
Consectetur adipiscing elit
                
Integer molestie lorem at massa
                
Facilisis in pretium nisl aliquet
                
Nulla volutpat aliquam velit
            
        
        

            

                
Lorem ipsum dolor sit amet
                
Consectetur adipiscing elit
                
Integer molestie lorem at massa
                
Facilisis in pretium nisl aliquet
                
Nulla volutpat aliquam velit
            
        
        

            

                
Lorem ipsum dolor sit amet
                
Consectetur adipiscing elit
                
Integer molestie lorem at massa
                
Facilisis in pretium nisl aliquet
                
Nulla volutpat aliquam velit
            
        
        

            

                 Inverse 
                

                    
Action
                    
Another action
                    
Something else here
                    
Separated link
                
            
        
    

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.