git.roojs.org Git - bootswatch/blob - 2/bower_components/bootstrap/docs/extend.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3   <head>
   4     <meta charset="utf-8">
   5     <title>Extend · 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     <!-- Le styles -->
  11     <link href="assets/css/bootstrap.css" rel="stylesheet">
  12     <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
  13     <link href="assets/css/docs.css" rel="stylesheet">
  14     <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
  15
  16     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
  17     <!--[if lt IE 9]>
  18       <script src="assets/js/html5shiv.js"></script>
  19     <![endif]-->
  20
  21     <!-- Le fav and touch icons -->
  22     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
  23     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
  24       <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
  25                     <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
  26                                    <link rel="shortcut icon" href="assets/ico/favicon.png">
  27
  28     <script type="text/javascript">
  29       var _gaq = _gaq || [];
  30       _gaq.push(['_setAccount', 'UA-146052-10']);
  31       _gaq.push(['_trackPageview']);
  32       (function() {
  33         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  34         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  35         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  36       })();
  37     </script>
  38   </head>
  39
  40   <body data-spy="scroll" data-target=".bs-docs-sidebar">
  41
  42     <!-- Navbar
  43     ================================================== -->
  44     <div class="navbar navbar-inverse navbar-fixed-top">
  45       <div class="navbar-inner">
  46         <div class="container">
  47           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
  48             <span class="icon-bar"></span>
  49             <span class="icon-bar"></span>
  50             <span class="icon-bar"></span>
  51           </button>
  52           <a class="brand" href="./index.html">Bootstrap</a>
  53           <div class="nav-collapse collapse">
  54             <ul class="nav">
  55               <li class="">
  56                 <a href="./index.html">Home</a>
  57               </li>
  58               <li class="">
  59                 <a href="./getting-started.html">Get started</a>
  60               </li>
  61               <li class="">
  62                 <a href="./scaffolding.html">Scaffolding</a>
  63               </li>
  64               <li class="">
  65                 <a href="./base-css.html">Base CSS</a>
  66               </li>
  67               <li class="">
  68                 <a href="./components.html">Components</a>
  69               </li>
  70               <li class="">
  71                 <a href="./javascript.html">JavaScript</a>
  72               </li>
  73               <li class="">
  74                 <a href="./customize.html">Customize</a>
  75               </li>
  76             </ul>
  77           </div>
  78         </div>
  79       </div>
  80     </div>
  81
  82 <!-- Subhead
  83 ================================================== -->
  84 <header class="jumbotron subhead" id="overview">
  85   <div class="container">
  86     <h1>Extending Bootstrap</h1>
  87     <p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
  88   <div>
  89 </header>
  90
  91   <div class="container">
  92
  93     <!-- Docs nav
  94     ================================================== -->
  95     <div class="row">
  96       <div class="span3 bs-docs-sidebar">
  97         <ul class="nav nav-list bs-docs-sidenav">
  98           <li><a href="#built-with-less"><i class="icon-chevron-right"></i> Built with LESS</a></li>
  99           <li><a href="#compiling"><i class="icon-chevron-right"></i> Compiling Bootstrap</a></li>
 100           <li><a href="#static-assets"><i class="icon-chevron-right"></i> Use as static assets</a></li>
 101         </ul>
 102       </div>
 103       <div class="span9">
 104
 105
 106
 107         <!-- BUILT WITH LESS
 108         ================================================== -->
 109         <section id="built-with-less">
 110           <div class="page-header">
 111             <h1>Built with LESS</h1>
 112           </div>
 113
 114           <img style="float: right; height: 36px; margin: 10px 20px 20px" src="assets/img/less-logo-large.png" alt="LESS CSS">
 115           <p class="lead">Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>
 116
 117           <h3>Why LESS?</h3>
 118           <p>One of Bootstrap's creators wrote a quick <a href="http://www.wordsbyf.at/2012/03/08/why-less/">blog post about this</a>, summarized here:</p>
 119           <ul>
 120             <li>Bootstrap compiles faster ~6x faster with Less compared to Sass</li>
 121             <li>Less is written in JavaScript, making it easier to us to dive in and patch compared to Ruby with Sass.</li>
 122             <li>Less is more; we want to feel like we're writing CSS and making Bootstrap approachable to all.</li>
 123           </ul>
 124
 125           <h3>What's included?</h3>
 126           <p>As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.</p>
 127
 128           <h3>Learn more</h3>
 129           <p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
 130         </section>
 131
 132
 133
 134         <!-- COMPILING LESS AND BOOTSTRAP
 135         ================================================== -->
 136         <section id="compiling">
 137           <div class="page-header">
 138             <h1>Compiling Bootstrap with Less</h1>
 139           </div>
 140
 141           <p class="lead">Since our CSS is written with Less and utilizes variables and mixins, it needs to be compiled for final production implementation. Here's how.</p>
 142
 143           <div class="alert alert-info">
 144             <strong>Note:</strong> If you're submitting a pull request to GitHub with modified CSS, you <strong>must</strong> recompile the CSS via any of these methods.
 145           </div>
 146
 147           <h2>Tools for compiling</h2>
 148
 149           <h3>Command line</h3>
 150           <p>Follow <a href="https://github.com/twbs/bootstrap#developers">the instructions in the project readme</a> on GitHub for compiling via command line.</p>
 151
 152           <h3>JavaScript</h3>
 153           <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>&lt;head&gt;</code>.</p>
 154 <pre class="prettyprint">
 155 &lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
 156 &lt;script src="/path/to/less.js"&gt;&lt;/script&gt;
 157 </pre>
 158           <p>To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.</p>
 159
 160           <h3>Unofficial Mac app</h3>
 161           <p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file. If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p>
 162
 163           <h3>More apps</h3>
 164           <h4><a href="http://crunchapp.net/" target="_blank">Crunch</a></h4>
 165           <p>Crunch is a great looking LESS editor and compiler built on Adobe Air.</p>
 166           <h4><a href="http://incident57.com/codekit/" target="_blank">CodeKit</a></h4>
 167           <p>Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.</p>
 168           <h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4>
 169           <p>Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.</p>
 170
 171         </section>
 172
 173
 174
 175         <!-- Static assets
 176         ================================================== -->
 177         <section id="static-assets">
 178           <div class="page-header">
 179             <h1>Use as static assets</h1>
 180           </div>
 181           <p class="lead"><a href="./getting-started.html">Quickly start</a> any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.</p>
 182
 183           <h3>Setup file structure</h3>
 184           <p>Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:</p>
 185 <pre>
 186   <span class="icon-folder-open"></span> app/
 187       <span class="icon-folder-open"></span> layouts/
 188       <span class="icon-folder-open"></span> templates/
 189   <span class="icon-folder-open"></span> public/
 190       <span class="icon-folder-open"></span> css/
 191           <span class="icon-file"></span> bootstrap.min.css
 192       <span class="icon-folder-open"></span> js/
 193           <span class="icon-file"></span> bootstrap.min.js
 194       <span class="icon-folder-open"></span> img/
 195           <span class="icon-file"></span> glyphicons-halflings.png
 196           <span class="icon-file"></span> glyphicons-halflings-white.png
 197 </pre>
 198
 199           <h3>Utilize starter template</h3>
 200           <p>Copy the following base HTML to get started.</p>
 201 <pre class="prettyprint linenums">
 202 &lt;html&gt;
 203   &lt;head&gt;
 204     &lt;title&gt;Bootstrap 101 Template&lt;/title&gt;
 205     &lt;!-- Bootstrap --&gt;
 206     &lt;link href="public/css/bootstrap.min.css" rel="stylesheet"&gt;
 207   &lt;/head&gt;
 208   &lt;body&gt;
 209     &lt;h1&gt;Hello, world!&lt;/h1&gt;
 210     &lt;!-- Bootstrap --&gt;
 211     &lt;script src="public/js/bootstrap.min.js"&gt;&lt;/script&gt;
 212   &lt;/body&gt;
 213 &lt;/html&gt;
 214 </pre>
 215
 216           <h3>Layer on custom code</h3>
 217           <p>Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.</p>
 218 <pre class="prettyprint linenums">
 219 &lt;html&gt;
 220   &lt;head&gt;
 221     &lt;title&gt;Bootstrap 101 Template&lt;/title&gt;
 222     &lt;!-- Bootstrap --&gt;
 223     &lt;link href="public/css/bootstrap.min.css" rel="stylesheet"&gt;
 224     &lt;!-- Project --&gt;
 225     &lt;link href="public/css/application.css" rel="stylesheet"&gt;
 226   &lt;/head&gt;
 227   &lt;body&gt;
 228     &lt;h1&gt;Hello, world!&lt;/h1&gt;
 229     &lt;!-- Bootstrap --&gt;
 230     &lt;script src="public/js/bootstrap.min.js"&gt;&lt;/script&gt;
 231     &lt;!-- Project --&gt;
 232     &lt;script src="public/js/application.js"&gt;&lt;/script&gt;
 233   &lt;/body&gt;
 234 &lt;/html&gt;
 235 </pre>
 236
 237         </section>
 238
 239       </div>
 240     </div>
 241
 242   </div>
 243
 244
 245
 246     <!-- Footer
 247     ================================================== -->
 248     <footer class="footer">
 249       <div class="container">
 250         <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
 251         <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
 252         <p><a href="http://glyphicons.com">Glyphicons Free</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
 253         <ul class="footer-links">
 254           <li><a href="http://blog.getbootstrap.com">Blog</a></li>
 255           <li class="muted">&middot;</li>
 256           <li><a href="https://github.com/twbs/bootstrap/issues?state=open">Issues</a></li>
 257           <li class="muted">&middot;</li>
 258           <li><a href="https://github.com/twbs/bootstrap/releases">Changelog</a></li>
 259         </ul>
 260       </div>
 261     </footer>
 262
 263
 264
 265     <!-- Le javascript
 266     ================================================== -->
 267     <!-- Placed at the end of the document so the pages load faster -->
 268     <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
 269     <script src="assets/js/jquery.js"></script>
 270     <script src="assets/js/bootstrap-transition.js"></script>
 271     <script src="assets/js/bootstrap-alert.js"></script>
 272     <script src="assets/js/bootstrap-modal.js"></script>
 273     <script src="assets/js/bootstrap-dropdown.js"></script>
 274     <script src="assets/js/bootstrap-scrollspy.js"></script>
 275     <script src="assets/js/bootstrap-tab.js"></script>
 276     <script src="assets/js/bootstrap-tooltip.js"></script>
 277     <script src="assets/js/bootstrap-popover.js"></script>
 278     <script src="assets/js/bootstrap-button.js"></script>
 279     <script src="assets/js/bootstrap-collapse.js"></script>
 280     <script src="assets/js/bootstrap-carousel.js"></script>
 281     <script src="assets/js/bootstrap-typeahead.js"></script>
 282     <script src="assets/js/bootstrap-affix.js"></script>
 283
 284     <script src="assets/js/holder/holder.js"></script>
 285     <script src="assets/js/google-code-prettify/prettify.js"></script>
 286
 287     <script src="assets/js/application.js"></script>
 288
 289
 290     <!-- Analytics
 291     ================================================== -->
 292     <script>
 293       var _gauges = _gauges || [];
 294       (function() {
 295         var t   = document.createElement('script');
 296         t.type  = 'text/javascript';
 297         t.async = true;
 298         t.id    = 'gauges-tracker';
 299         t.setAttribute('data-site-id', '4f0dc9fef5a1f55508000013');
 300         t.src = '//secure.gaug.es/track.js';
 301         var s = document.getElementsByTagName('script')[0];
 302         s.parentNode.insertBefore(t, s);
 303       })();
 304     </script>
 305
 306   </body>
 307 </html>