API tools faq
paste
Shazz

HTML5 Fixed

Shazz
Apr 14th, 2014
163
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.75 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Page Title</title> <!-- Sets the title of the webpage that gets displayed for the name of the window/tab. -->
  5.     <meta name = "viewport" content = "width=device-width, initial-scale = 1.0"> <!-- Tells Bootstrap to serve the mobile version of the page when on a mobile, even if the screen has enough pixels to display the desktop version. -->
  6.     <link href = "css/bootstrap.min.css" rel = "stylesheet"> <!-- Loads Bootstrap's and our CSS styles. -->
  7.     <link href = "css/styles.css" rel = "stylesheet">
  8.   </head>
  9.  
  10.   <body>
  11.     <div class = "navbar  navbar-inverse navbar-fixed-top"> <!-- Creates a navbar that will be displayed at the top of our page. -->
  12.       <div class = "container">
  13.         <a href = "#" class = "navbar-brand">Navbar Title</a> <!-- The title of our navbar. -->
  14.         <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navbarCollapser"> <!-- Creates the button that will toggle the visibility of the navbar on a mobile device. -->
  15.           <span class = "icon-bar"></span>
  16.           <span class = "icon-bar"></span>
  17.           <span class = "icon-bar"></span>
  18.         </button>
  19.         <div class = "collapse navbar-collapse navbarCollapser">
  20.           <ul class = "nav navbar-nav navbar-right"> <!-- An unordered list containing the items on our navbar. -->  
  21.             <li class = "dropdown"> <!-- Makes dropdown menu -->
  22.               <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Dropdown On Navbar<b class = "caret"></b></a>
  23.               <ul class = "dropdown-menu">
  24.                 <li><a href = "#">Item</a></li>
  25.                 <li><a href = "#">Item</a></li>
  26.                 <li><a href = "#">Item</a></li>
  27.               </ul>  
  28.             </li>
  29.             <li><a href = "#">Regular Item</a></li>
  30.           </ul>
  31.         </div>
  32.       </div>
  33.     </div>  
  34.    
  35.     <div class = "container">
  36.       <div class = "jumbotron">
  37.         <center><h1>Jumbotron Title</h1>
  38.         <p>Jumbotron text</p>
  39.         <a href = "#" class = "btn btn-info btn-lg">Button</a>
  40.         <a href = "#" class = "btn btn-success btn-lg">Button 2</a>
  41.         </center>
  42.       </div>
  43.     </div>
  44.    
  45.     <div class = "navbar navbar-default navbar-fixed-bottom">
  46.       <div class = "container">
  47.         <p class = "navbar-text pull-left">Text Text</p>
  48.         <a class = "navbar-btn btn-success btn pull-right">I'm using a button, but it doesn't link to anything.</a>
  49.       </div>
  50.     </div>
  51.  
  52.     <script src = "http://code.jquery.com/jquery-1.11.0.min.js"></script> <!-- Loads jQuery and Bootstrap's javascript files -->
  53.     <script src = "http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  54.     <script src = "js/bootstrap.min.js"></script>
  55.   </body>
  56. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!