Last active
October 11, 2015 11:44
-
-
Save tongtie/9a189c91f4987547158d to your computer and use it in GitHub Desktop.
Bootstrap3 tutorial index.html
This file contains 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 lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <!-- Set the viewport so this responsive site displays correctly on mobile devices --> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Bootstrap 3 Responsive Design Tutorial | RevillWeb.com</title> | |
| <!-- Include bootstrap CSS --> | |
| <!-- 替换cdn服务了--> | |
| <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="includes/style.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <!-- Site header and navigation --> | |
| <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> | |
| <!-- Site banner --> | |
| <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> | |
| <!-- Middle content section --> | |
| <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> | |
| <!-- Site footer --> | |
| <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> | |
| <!-- Include jQuery and bootstrap JS plugins --> | |
| <!-- 替换cdn服务 --> | |
| <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> | |
| <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
源代码来自：http://www.revillweb.com/tutorials/bootstrap-tutorial/