2012-06-28 14:56:00 +08:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > Extend · Twitter Bootstrap< / title >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta name = "description" content = "" >
< meta name = "author" content = "" >
<!-- Le styles -->
< link href = "assets/css/bootstrap.css" rel = "stylesheet" >
< link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >
< link href = "assets/css/docs.css" rel = "stylesheet" >
< link href = "assets/js/google-code-prettify/prettify.css" rel = "stylesheet" >
<!-- Le HTML5 shim, for IE6 - 8 support of HTML5 elements -->
<!-- [if lt IE 9]>
< script src = "http://html5shim.googlecode.com/svn/trunk/html5.js" > < / script >
<![endif]-->
<!-- Le fav and touch icons -->
< link rel = "shortcut icon" href = "assets/ico/favicon.ico" >
< link rel = "apple-touch-icon-precomposed" sizes = "144x144" href = "assets/ico/apple-touch-icon-144-precomposed.png" >
< link rel = "apple-touch-icon-precomposed" sizes = "114x114" href = "assets/ico/apple-touch-icon-114-precomposed.png" >
< link rel = "apple-touch-icon-precomposed" sizes = "72x72" href = "assets/ico/apple-touch-icon-72-precomposed.png" >
< link rel = "apple-touch-icon-precomposed" href = "assets/ico/apple-touch-icon-57-precomposed.png" >
< / head >
2012-08-20 12:12:52 +08:00
< body data-spy = "scroll" data-target = ".bs-docs-sidebar" >
2012-06-28 14:56:00 +08:00
<!-- Navbar
================================================== -->
2012-08-20 14:01:24 +08:00
< div class = "navbar navbar-inverse navbar-fixed-top" >
2012-06-28 14:56:00 +08:00
< div class = "navbar-inner" >
2012-07-08 14:16:07 +08:00
< div class = "container" >
2012-06-28 14:56:00 +08:00
< button type = "button" class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< / button >
< a class = "brand" href = "./index.html" > Bootstrap< / a >
< div class = "nav-collapse collapse" >
< ul class = "nav" >
< li class = "" >
< a href = "./index.html" > Home< / a >
< / li >
2012-07-13 12:38:18 +08:00
< li class = "" >
< a href = "./getting-started.html" > Get started< / a >
< / li >
2012-06-28 14:56:00 +08:00
< li class = "" >
< a href = "./scaffolding.html" > Scaffolding< / a >
< / li >
< li class = "" >
< a href = "./base-css.html" > Base CSS< / a >
< / li >
< li class = "" >
< a href = "./components.html" > Components< / a >
< / li >
< li class = "" >
< a href = "./javascript.html" > Javascript< / a >
< / li >
2012-07-21 13:06:47 +08:00
< li class = "" >
< a href = "./customize.html" > Customize< / a >
2012-06-28 14:56:00 +08:00
< / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
2012-07-10 13:25:00 +08:00
<!-- Subhead
2012-06-28 14:56:00 +08:00
================================================== -->
< header class = "jumbotron subhead" id = "overview" >
2012-07-13 09:11:49 +08:00
< div class = "container" >
< h1 > Extending Bootstrap< / h1 >
< p class = "lead" > Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.< / p >
< div >
2012-06-28 14:56:00 +08:00
< / header >
2012-07-24 16:53:32 +08:00
< div class = "container" >
2012-06-28 14:56:00 +08:00
2012-07-24 16:53:32 +08:00
<!-- Docs nav
================================================== -->
< div class = "row" >
< div class = "span3 bs-docs-sidebar" >
2012-08-15 12:06:08 +08:00
< ul class = "nav nav-list bs-docs-sidenav" >
2012-07-31 14:48:26 +08:00
< li > < a href = "#built-with-less" > < i class = "icon-chevron-right" > < / i > Built with LESS< / a > < / li >
< li > < a href = "#compiling" > < i class = "icon-chevron-right" > < / i > Compiling Bootstrap< / a > < / li >
< li > < a href = "#static-assets" > < i class = "icon-chevron-right" > < / i > Use as static assets< / a > < / li >
2012-07-24 16:53:32 +08:00
< / ul >
< / div >
< div class = "span9" >
2012-06-28 14:56:00 +08:00
2012-07-14 02:17:22 +08:00
2012-07-24 16:53:32 +08:00
<!-- BUILT WITH LESS
================================================== -->
< section id = "built-with-less" >
< div class = "page-header" >
< h1 > Built with LESS< / h1 >
< / div >
2012-06-28 14:56:00 +08:00
2012-07-24 16:53:32 +08:00
< img style = "float: right; height: 36px; margin: 10px 20px 20px" src = "assets/img/less-logo-large.png" alt = "LESS CSS" >
< 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 >
2012-06-28 14:56:00 +08:00
2012-07-24 16:53:32 +08:00
< h3 > Why LESS?< / h3 >
< 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 >
< ul >
< li > Bootstrap compiles faster ~6x faster with Less compared to Sass< / li >
< li > Less is written in JavaScript, making it easier to us to dive in and patch compared to Ruby with Sass.< / li >
< li > Less is more; we want to feel like we're writing CSS and making Bootstrap approachable to all.< / li >
< / ul >
2012-06-28 14:56:00 +08:00
2012-07-24 16:53:32 +08:00
< h3 > What's included?< / h3 >
< 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 >
2012-06-28 14:56:00 +08:00
2012-07-24 16:53:32 +08:00
< h3 > Learn more< / h3 >
< p > Visit the official website at < a href = "http://lesscss.org" > http://lesscss.org< / a > to learn more.< / p >
< / section >
2012-06-28 14:56:00 +08:00
2012-07-14 02:17:22 +08:00
2012-07-24 16:53:32 +08:00
<!-- COMPILING LESS AND BOOTSTRAP
================================================== -->
< section id = "compiling" >
< div class = "page-header" >
< h1 > Compiling Bootstrap with Less< / h1 >
< / div >
2012-07-10 13:25:00 +08:00
2012-07-24 16:53:32 +08:00
< 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 >
2012-07-10 13:25:00 +08:00
2012-07-24 16:53:32 +08:00
< div class = "alert alert-info" >
< 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.
< / div >
< h2 > Tools for compiling< / h2 >
2012-06-28 14:56:00 +08:00
2012-07-24 16:53:32 +08:00
< h3 > Node with makefile< / h3 >
< p > Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:< / p >
< pre > $ npm install -g less jshint recess uglify-js< / pre >
< p > Once installed just run < code > make< / code > from the root of your bootstrap directory and you're all set.< / p >
< p > Additionally, if you have < a href = "https://github.com/mynyml/watchr" > watchr< / a > installed, you may run < code > make watch< / code > to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).< / p >
2012-07-10 13:25:00 +08:00
2012-07-24 16:53:32 +08:00
< h3 > Command line< / h3 >
< p > Install the LESS command line tool via Node and run the following command:< / p >
< pre > $ lessc ./less/bootstrap.less > bootstrap.css< / pre >
< p > Be sure to include < code > --compress< / code > in that command if you're trying to save some bytes!< / p >
< h3 > Javascript< / h3 >
< p > < a href = "http://lesscss.org/" > Download the latest Less.js< / a > and include the path to it (and Bootstrap) in the < code > < head> < / code > .< / p >
2012-07-10 13:29:53 +08:00
< pre class = "prettyprint" >
< link rel="stylesheet/less" href="/path/to/bootstrap.less">
< script src="/path/to/less.js"> < /script>
< / pre >
2012-07-24 16:53:32 +08:00
< p > To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.< / p >
2012-07-10 13:25:00 +08:00
2012-07-24 16:53:32 +08:00
< h3 > Unofficial Mac app< / h3 >
< 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 >
2012-07-10 13:25:00 +08:00
2012-07-24 16:53:32 +08:00
< h3 > More apps< / h3 >
< h4 > < a href = "http://crunchapp.net/" target = "_blank" > Crunch< / a > < / h4 >
< p > Crunch is a great looking LESS editor and compiler built on Adobe Air.< / p >
< h4 > < a href = "http://incident57.com/codekit/" target = "_blank" > CodeKit< / a > < / h4 >
< p > Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.< / p >
< h4 > < a href = "http://wearekiss.com/simpless" target = "_blank" > Simpless< / a > < / h4 >
< 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 >
2012-07-10 13:25:00 +08:00
2012-07-24 16:53:32 +08:00
< / section >
2012-07-10 13:25:00 +08:00
2012-07-24 16:53:32 +08:00
<!-- Static assets
================================================== -->
< section id = "static-assets" >
< div class = "page-header" >
< h1 > Use as static assets< / h1 >
< / div >
< 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 >
2012-07-14 05:20:25 +08:00
2012-07-24 16:53:32 +08:00
< h3 > Setup file structure< / h3 >
< p > Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:< / p >
2012-07-14 05:20:25 +08:00
< pre class = "prettyprint" >
app/
├── layouts/
└── templates/
public/
├── css/
│ ├── bootstrap.min.css
├── js/
│ ├── bootstrap.min.js
└── img/
├── glyphicons-halflings.png
└── glyphicons-halflings-white.png
< / pre >
2012-07-24 16:53:32 +08:00
< h3 > Utilize starter template< / h3 >
< p > Copy the following base HTML to get started.< / p >
2012-07-14 05:20:25 +08:00
< pre class = "prettyprint linenums" >
< html>
< head>
< title> Bootstrap 101 Template< /title>
< !-- Bootstrap -->
< link href="public/css/bootstrap.min.css" rel="stylesheet">
< /head>
< body>
< h1> Hello, world!< /h1>
2012-07-18 13:19:02 +08:00
< !-- Bootstrap -->
< script src="public/js/bootstrap.min.js"> < /script>
2012-07-14 05:20:25 +08:00
< /body>
< /html>
< / pre >
2012-07-24 16:53:32 +08:00
< h3 > Layer on custom code< / h3 >
< 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 >
2012-07-14 05:20:25 +08:00
< pre class = "prettyprint linenums" >
< html>
< head>
< title> Bootstrap 101 Template< /title>
< !-- Bootstrap -->
< link href="public/css/bootstrap.min.css" rel="stylesheet">
< !-- Project -->
< link href="public/css/application.css" rel="stylesheet">
< /head>
< body>
< h1> Hello, world!< /h1>
2012-07-18 13:19:02 +08:00
< !-- Bootstrap -->
< script src="public/js/bootstrap.min.js"> < /script>
< !-- Project -->
< script src="public/js/application.js"> < /script>
2012-07-14 05:20:25 +08:00
< /body>
< /html>
< / pre >
2012-07-24 16:53:32 +08:00
< / section >
2012-07-10 13:29:53 +08:00
2012-07-24 16:53:32 +08:00
< / div >
2012-07-13 09:11:49 +08:00
< / div >
2012-07-24 16:53:32 +08:00
2012-07-10 13:25:00 +08:00
< / div >
2012-06-28 14:56:00 +08:00
2012-07-18 11:57:20 +08:00
2012-07-13 08:02:55 +08:00
2012-08-02 10:00:25 +08:00
<!-- Footer
================================================== -->
< footer class = "footer" >
< div class = "container" >
< p class = "pull-right" > < a href = "#" > Back to top< / a > < / p >
< p > Designed and built with all the love in the world < a href = "http://twitter.com/twitter" target = "_blank" > @twitter< / a > by < a href = "http://twitter.com/mdo" target = "_blank" > @mdo< / a > and < a href = "http://twitter.com/fat" target = "_blank" > @fat< / a > .< / p >
< p > Code licensed under the < a href = "http://www.apache.org/licenses/LICENSE-2.0" target = "_blank" > Apache License v2.0< / a > . Documentation licensed under < a href = "http://creativecommons.org/licenses/by/3.0/" > CC BY 3.0< / a > .< / p >
< p > Icons from < 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 >
< ul class = "footer-links" >
< li > < a href = "http://blog.getbootstrap.com" > Read the blog< / a > < / li >
< li > < a href = "https://github.com/twitter/bootstrap/issues?state=open" > Submit issues< / a > < / li >
< li > < a href = "https://github.com/twitter/bootstrap/wiki" > Roadmap and changelog< / a > < / li >
< / ul >
< / div >
< / footer >
2012-06-28 14:56:00 +08:00
2012-08-02 10:00:25 +08:00
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
< script type = "text/javascript" src = "http://platform.twitter.com/widgets.js" > < / script >
< script src = "assets/js/jquery.js" > < / script >
< script src = "assets/js/google-code-prettify/prettify.js" > < / script >
< script src = "assets/js/bootstrap-transition.js" > < / script >
< script src = "assets/js/bootstrap-alert.js" > < / script >
< script src = "assets/js/bootstrap-modal.js" > < / script >
< script src = "assets/js/bootstrap-dropdown.js" > < / script >
< script src = "assets/js/bootstrap-scrollspy.js" > < / script >
< script src = "assets/js/bootstrap-tab.js" > < / script >
< script src = "assets/js/bootstrap-tooltip.js" > < / script >
< script src = "assets/js/bootstrap-popover.js" > < / script >
< script src = "assets/js/bootstrap-button.js" > < / script >
< script src = "assets/js/bootstrap-collapse.js" > < / script >
< script src = "assets/js/bootstrap-carousel.js" > < / script >
< script src = "assets/js/bootstrap-typeahead.js" > < / script >
< script src = "assets/js/bootstrap-affix.js" > < / script >
< script src = "assets/js/application.js" > < / script >
2012-06-28 14:56:00 +08:00
< / body >
< / html >
