Created
February 5, 2015 13:41
-
-
Save wwsun/41580861b229ac6db814 to your computer and use it in GitHub Desktop.
Bootstrap 3 startup
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>Bootstrap 3 Responsive Design Tutorial</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="styles/style.css"> | |
| </head> | |
| <body> | |
| <header class="top" role="header"> | |
| <div class="container"> | |
| <a href="#" class="navbar-brand pull-left">BS3 Tutorial</a> | |
| <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> | |
| <span class="glyphicon glyphicon-align-justify"></span> | |
| </button> | |
| <nav class="navbar-collapse collapse" role="navigation"> | |
| <ul class="navbar-nav nav"> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </header> | |
| <div class="banner"> | |
| <div class="container"> | |
| <h1>Twitter Bootstrap 3: Responsive Design Tutorial</h1> | |
| <p>A comprehensive tutorial showing you how to quickly create responsive designs using Twitter Bootstrap 3.</p> | |
| </div> | |
| </div> | |
| <div class="middle"> | |
| <div class="container"> | |
| <div class="col-md-9 content"> | |
| <h2>Use Twitter Bootstrap to create responsive designs for desktop, tablet & mobile</h2> | |
| <p>Twitter bootstrap allows web developers and designers to quickly create attractive and responsive website templates. This tutorial provided by <a href="http://www.revillweb.com/">RevillWeb.com</a> will show you how to use Twitter Bootstrap 3 to create this responsive website template.</p> | |
| <div class="to-tutorial"> | |
| <p><strong>Visit the tutorial now to learn more:</strong></p> | |
| <a href="http://www.revillweb.com/tutorials/bootstrap-tutorial/" class="btn btn-success">TO THE TUTORIAL</a> | |
| </div> | |
| </div> | |
| <div class="col-md-3"> | |
| <h2>Resources</h2> | |
| <ul class="nav nav-pills nav-stacked"> | |
| <li><a href="http://getbootstrap.com/" target="_blank">Download Twitter Bootstrap</a></li> | |
| <li><a href="https://www.bootstrapresponsivethemes.com/" target="_blank">Bootstrap Responsive Themes</a></li> | |
| <li><a href="http://amzn.to/1iO8NBg" target="_blank">UK: HTML & CSS: Design and Build Web Sites</a></li> | |
| <li><a href="http://amzn.to/1lESKDp" target="_blank">UK: Bootstrap Site Blueprints</a></li> | |
| <li><a href="http://amzn.to/1oXAbu6" target="_blank">US: HTML & CSS: Design and Build Web Sites</a></li> | |
| <li><a href="http://amzn.to/1lESF2w" target="_blank">US: Bootstrap Site Blueprints</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bottom"> | |
| <div class="container"> | |
| <div class="col-md-4"> | |
| <h3><span class="glyphicon glyphicon-heart"></span> Footer section 1</h3> | |
| <p>Content for the first footer section.</p> | |
| </div> | |
| <div class="col-md-4"> | |
| <h3><span class="glyphicon glyphicon-star"></span> Footer section 2</h3> | |
| <p>Content for the second footer section.</p> | |
| </div> | |
| <div class="col-md-4"> | |
| <h3><span class="glyphicon glyphicon-music"></span> Footer section 3</h3> | |
| <p>Content for the third footer section.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="../bower_components/jquery/dist/jquery.min.js"></script> | |
| <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); | |
| h1, h2, h3, h4 { | |
| font-family: 'Lato', sans-serif; | |
| font-weight: 300; | |
| } | |
| p { | |
| font-family: 'Lato', sans-serif; | |
| } | |
| html { | |
| background-color: #474747; | |
| } | |
| .top { | |
| background-color: #474747; | |
| } | |
| .top .navbar-brand { | |
| height: 50px; | |
| line-height: 50px; | |
| text-align: center; | |
| padding: 0 10px; | |
| background-color: #CCC; | |
| color: #474747; | |
| text-decoration: none; | |
| } | |
| .top .container { | |
| padding: 0; | |
| } | |
| .banner { | |
| background-color: #373737; | |
| } | |
| .banner .container { | |
| background-color: #009b9b; | |
| min-height: 200px; | |
| padding: 40px 30px 30px 40px; | |
| } | |
| .banner .container p { | |
| font-size: 22px; | |
| padding-left: 5px; | |
| font-weight: 300; | |
| } | |
| .middle { | |
| background-color: #CCC; | |
| } | |
| .middle .container { | |
| background-color: #FFF; | |
| min-height: 300px; | |
| padding-bottom: 20px; | |
| } | |
| .navbar-nav li a { | |
| color: #CCC; | |
| font-family: 'Lato', sans-serif; | |
| } | |
| .navbar-nav li a:hover { | |
| background-color: #373737; | |
| } | |
| .bottom { | |
| background-color: #474747; | |
| } | |
| .bottom .container { | |
| background-color: #373737; | |
| min-height: 150px; | |
| } | |
| .bottom .container h3 { | |
| color: #999; | |
| } | |
| .bottom .container p { | |
| color: #666; | |
| } | |
| .navbar-toggle { | |
| color: #009b9b; | |
| font-size: 32px; | |
| margin: 3px; | |
| padding: 2px 5px; | |
| line-height: 32px; | |
| } | |
| .navbar-toggle:hover { | |
| background-color: #373737; | |
| } | |
| .navbar-nav { | |
| margin: 0; | |
| } | |
| .content p { | |
| line-height: 30px; | |
| font-size: 16px; | |
| } | |
| .to-tutorial { | |
| text-align: center; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment