git.roojs.org Git - bootswatch/blob - 2/bower_components/bootstrap/docs/examples/sticky-footer.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3   <head>
   4     <meta charset="utf-8">
   5     <title>Sticky footer &middot; Twitter Bootstrap</title>
   6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   7     <meta name="description" content="">
   8     <meta name="author" content="">
   9
  10     <!-- CSS -->
  11     <link href="../assets/css/bootstrap.css" rel="stylesheet">
  12     <style type="text/css">
  13
  14       /* Sticky footer styles
  15       -------------------------------------------------- */
  16
  17       html,
  18       body {
  19         height: 100%;
  20         /* The html and body elements cannot have any padding or margin. */
  21       }
  22
  23       /* Wrapper for page content to push down footer */
  24       #wrap {
  25         min-height: 100%;
  26         height: auto !important;
  27         height: 100%;
  28         /* Negative indent footer by it's height */
  29         margin: 0 auto -60px;
  30       }
  31
  32       /* Set the fixed height of the footer here */
  33       #push,
  34       #footer {
  35         height: 60px;
  36       }
  37       #footer {
  38         background-color: #f5f5f5;
  39       }
  40
  41       /* Lastly, apply responsive CSS fixes as necessary */
  42       @media (max-width: 767px) {
  43         #footer {
  44           margin-left: -20px;
  45           margin-right: -20px;
  46           padding-left: 20px;
  47           padding-right: 20px;
  48         }
  49       }
  50
  51
  52
  53       /* Custom page CSS
  54       -------------------------------------------------- */
  55       /* Not required for template or sticky footer method. */
  56
  57       .container {
  58         width: auto;
  59         max-width: 680px;
  60       }
  61       .container .credit {
  62         margin: 20px 0;
  63       }
  64
  65     </style>
  66     <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
  67
  68     <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
  69     <!--[if lt IE 9]>
  70       <script src="../assets/js/html5shiv.js"></script>
  71     <![endif]-->
  72
  73     <!-- Fav and touch icons -->
  74     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
  75     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
  76       <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
  77                     <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
  78                                    <link rel="shortcut icon" href="../assets/ico/favicon.png">
  79   </head>
  80
  81   <body>
  82
  83
  84     <!-- Part 1: Wrap all page content here -->
  85     <div id="wrap">
  86
  87       <!-- Begin page content -->
  88       <div class="container">
  89         <div class="page-header">
  90           <h1>Sticky footer</h1>
  91         </div>
  92         <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
  93         <p>Use <a href="./sticky-footer-navbar.html">the sticky footer</a> with a fixed navbar if need be, too.</p>
  94       </div>
  95
  96       <div id="push"></div>
  97     </div>
  98
  99     <div id="footer">
 100       <div class="container">
 101         <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
 102       </div>
 103     </div>
 104
 105
 106
 107     <!-- Le javascript
 108     ================================================== -->
 109     <!-- Placed at the end of the document so the pages load faster -->
 110     <script src="../assets/js/jquery.js"></script>
 111     <script src="../assets/js/bootstrap-transition.js"></script>
 112     <script src="../assets/js/bootstrap-alert.js"></script>
 113     <script src="../assets/js/bootstrap-modal.js"></script>
 114     <script src="../assets/js/bootstrap-dropdown.js"></script>
 115     <script src="../assets/js/bootstrap-scrollspy.js"></script>
 116     <script src="../assets/js/bootstrap-tab.js"></script>
 117     <script src="../assets/js/bootstrap-tooltip.js"></script>
 118     <script src="../assets/js/bootstrap-popover.js"></script>
 119     <script src="../assets/js/bootstrap-button.js"></script>
 120     <script src="../assets/js/bootstrap-collapse.js"></script>
 121     <script src="../assets/js/bootstrap-carousel.js"></script>
 122     <script src="../assets/js/bootstrap-typeahead.js"></script>
 123
 124   </body>
 125 </html>