2011-10-27 08:11:56 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
2012-03-11 00:14:54 +01:00
< title > Less · Twitter Bootstrap< / title >
2011-11-08 20:32:28 +01:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2011-10-27 08:11:56 +02:00
< meta name = "description" content = "" >
< meta name = "author" content = "" >
<!-- Le styles -->
2012-01-27 07:05:45 +01:00
< link href = "assets/css/bootstrap.css" rel = "stylesheet" >
< link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >
2011-10-27 08:11:56 +02:00
< link href = "assets/css/docs.css" rel = "stylesheet" >
< link href = "assets/js/google-code-prettify/prettify.css" rel = "stylesheet" >
2012-02-12 20:08:58 +01:00
<!-- 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]-->
2011-10-27 08:11:56 +02:00
<!-- Le fav and touch icons -->
2012-01-25 19:19:29 +01:00
< link rel = "shortcut icon" href = "assets/ico/favicon.ico" >
2012-03-25 09:46:03 +02:00
< link rel = "apple-touch-icon-precomposed" sizes = "144x144" href = "assets/ico/apple-touch-icon-144-precomposed.png" >
2012-03-12 01:28:28 +01:00
< link rel = "apple-touch-icon-precomposed" sizes = "114x114" href = "assets/ico/apple-touch-icon-114-precomposed.png" >
2012-03-12 01:53:17 +01:00
< 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" >
2012-05-27 01:35:28 +02:00
2011-10-27 08:11:56 +02:00
< / head >
2012-01-25 20:25:35 +01:00
< body data-spy = "scroll" data-target = ".subnav" data-offset = "50" >
2012-01-29 00:42:07 +01:00
2012-01-24 00:17:32 +01:00
<!-- Navbar
2011-10-27 08:11:56 +02:00
================================================== -->
2012-01-27 22:20:02 +01:00
< div class = "navbar navbar-fixed-top" >
2011-10-27 08:11:56 +02:00
< div class = "navbar-inner" >
< div class = "container" >
2012-05-25 06:30:43 +02:00
< button type = "button" class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >
2012-01-31 09:11:19 +01:00
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
2012-05-25 06:30:43 +02:00
< / button >
2011-10-27 08:11:56 +02:00
< a class = "brand" href = "./index.html" > Bootstrap< / a >
2012-03-25 22:33:36 +02:00
< div class = "nav-collapse collapse" >
2012-01-29 00:42:07 +01:00
< ul class = "nav" >
< li class = "" >
< a href = "./index.html" > Overview< / a >
< / li >
< 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 plugins< / a >
< / li >
< li class = "active" >
< a href = "./less.html" > Using LESS< / a >
< / li >
2012-01-30 10:09:34 +01:00
< li class = "divider-vertical" > < / li >
2012-01-29 00:42:07 +01:00
< li class = "" >
< a href = "./download.html" > Customize< / a >
< / li >
2012-01-30 09:39:44 +01:00
< li class = "" >
< a href = "./examples.html" > Examples< / a >
< / li >
2012-01-29 00:42:07 +01:00
< / ul >
< / div >
2011-10-27 08:11:56 +02:00
< / div >
< / div >
< / div >
2012-06-06 02:16:17 +02:00
< div class = "bs-docs-container" >
2011-10-27 08:11:56 +02:00
2012-01-25 08:35:34 +01:00
<!-- Masthead
================================================== -->
< header class = "jumbotron subhead" id = "overview" >
< h1 > Using LESS with Bootstrap< / h1 >
< p class = "lead" > Customize and extend Bootstrap with < a href = "http://lesscss.org" target = "_blank" > LESS< / a > , a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.< / p >
2012-06-06 03:25:46 +02:00
< / header >
< section id = "contents" >
< div class = "bs-docs-contents" >
< h3 > Contents< / h3 >
< ol >
2012-01-25 10:22:29 +01:00
< li > < a href = "#builtWith" > Built with Less< / a > < / li >
< li > < a href = "#variables" > Variables< / a > < / li >
< li > < a href = "#mixins" > Mixins< / a > < / li >
< li > < a href = "#compiling" > Compiling Bootstrap< / a > < / li >
2012-06-06 03:25:46 +02:00
< / ol >
2012-01-25 08:35:34 +01:00
< / div >
2012-06-06 03:25:46 +02:00
< / section >
2011-10-27 08:11:56 +02:00
2011-11-12 09:46:02 +01:00
2012-01-25 08:35:34 +01:00
<!-- BUILT WITH LESS
================================================== -->
< section id = "builtWith" >
< div class = "page-header" >
< h1 > Built with LESS< / h1 >
< / div >
2012-06-06 03:29:26 +02:00
< h3 > Why LESS?< / h3 >
< p > 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 >
< 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 >
< h3 > Learn more< / h3 >
< img style = "float: right; height: 36px;" src = "assets/img/less-logo-large.png" alt = "LESS CSS" >
< p > Visit the official website at < a href = "http://lesscss.org" > http://lesscss.org< / a > to learn more.< / p >
< h3 > < a href = "#variables" > Variables< / a > < / h3 >
< p > Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though— assign colors or pixel values as variables and change them once.< / p >
< h3 > < a href = "#mixins" > Mixins< / a > < / h3 >
< p > Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.< / p >
< h3 > Operations< / h3 >
< p > Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.< / p >
2012-01-25 08:35:34 +01:00
< / section >
2012-01-25 01:54:35 +01:00
2012-01-25 08:35:34 +01:00
<!-- VARIABLES
================================================== -->
< section id = "variables" >
< div class = "page-header" >
2012-01-29 08:58:39 +01:00
< h1 > Bootstrap variables < small > LESS variables, their values, and usage guidelines< / small > < / h1 >
2012-01-25 08:35:34 +01:00
< / div >
2011-11-17 08:58:36 +01:00
2012-05-25 06:30:43 +02:00
< h3 > Scaffolding and links< / h3 >
< table class = "table table-bordered table-striped" >
< tbody >
< tr >
< td class = "span4" > < code > @bodyBackground< / code > < / td >
< td > < code > @white< / code > < / td >
< td > Page background color< / td >
< td class = "swatch-col" > < span class = "swatch" style = "background-color: #fff;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @textColor< / code > < / td >
< td > < code > @grayDark< / code > < / td >
< td > Default text color for entire body, headings, and more< / td >
< td class = "swatch-col" > < span class = "swatch" style = "background-color: #333;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @linkColor< / code > < / td >
< td > < code > #08c< / code > < / td >
< td > Default link text color< / td >
< td class = "swatch-col" > < span class = "swatch" style = "background-color: #08c;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @linkColorHover< / code > < / td >
< td > < code > darken(@linkColor, 15%)< / code > < / td >
< td > Default link text hover color< / td >
< td > < span class = "swatch" style = "background-color: #005580;" > < / span > < / td >
< / tr >
< / tbody >
< / table >
< h3 > Grid system< / h3 >
< table class = "table table-bordered table-striped" >
< tbody >
< tr >
< td class = "span4" > < code > @gridColumns< / code > < / td >
< td > 12< / td >
< / tr >
< tr >
< td > < code > @gridColumnWidth< / code > < / td >
< td > 60px< / td >
< / tr >
< tr >
< td > < code > @gridGutterWidth< / code > < / td >
< td > 20px< / td >
< / tr >
< tr >
< td > < code > @fluidGridColumnWidth< / code > < / td >
< td > 6.382978723%< / td >
< / tr >
< tr >
< td > < code > @fluidGridGutterWidth< / code > < / td >
< td > 2.127659574%< / td >
< / tr >
< / tbody >
< / table >
< h3 > Typography< / h3 >
< table class = "table table-bordered table-striped" >
< tbody >
< tr >
< td class = "span4" > < code > @sansFontFamily< / code > < / td >
< td colspan = "2" > "Helvetica Neue", Helvetica, Arial, sans-serif< / td >
< / tr >
< tr >
< td > < code > @serifFontFamily< / code > < / td >
< td colspan = "2" > < code > Georgia, "Times New Roman", Times, serif< / code > < / td >
< / tr >
< tr >
< td > < code > @monoFontFamily< / code > < / td >
< td colspan = "2" > Menlo, Monaco, "Courier New", monospace< / td >
< / tr >
< tr >
< td > < code > @baseFontSize< / code > < / td >
< td > 13px< / td >
< td > < em class = "muted" > Must be pixels< / em > < / td >
< / tr >
< tr >
< td > < code > @baseFontFamily< / code > < / td >
< td colspan = "2" > < code > @sansFontFamily< / code > < / td >
< / tr >
< tr >
< td > < code > @baseLineHeight< / code > < / td >
< td > 18px< / td >
< td > < em class = "muted" > Must be pixels< / em > < / td >
< / tr >
< tr >
< td > < code > @altFontFamily< / code > < / td >
< td colspan = "2" > < code > @serifFontFamily< / code > < / td >
< / tr >
< tr >
< td > < code > @headingsFontFamily< / code > < / td >
< td colspan = "2" > < code > inherit< / code > < / td >
< / tr >
< tr >
< td > < code > @headingsFontWeight< / code > < / td >
< td colspan = "2" > < code > bold< / code > < / td >
< / tr >
< tr >
< td > < code > @headingsColor< / code > < / td >
< td colspan = "2" > < code > inherit< / code > < / td >
< / tr >
< / tbody >
< / table >
< h3 > Tables< / h3 >
< table class = "table table-bordered table-striped" >
< tbody >
< tr >
< td class = "span4" > < code > @tableBackground< / code > < / td >
< td > < code > transparent< / code > < / td >
< / tr >
< tr >
< td > < code > @tableBackgroundAccent< / code > < / td >
< td > < code > #f9f9f9< / code > < / td >
< / tr >
< tr >
< td > < code > @tableBackgroundHover< / code > < / td >
< td > < code > #f5f5f5< / code > < / td >
< / tr >
< tr >
< td > < code > @tableBorder< / code > < / td >
< td > < code > ddd< / code > < / td >
< / tr >
< / tbody >
< / table >
< h3 > Grayscale colors< / h3 >
< table class = "table table-bordered table-striped" >
< tbody >
< tr >
< td class = "span4" > < code > @black< / code > < / td >
< td > #000< / td >
< td class = "swatch-col" > < span class = "swatch" style = "background-color: #000;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @grayDarker< / code > < / td >
< td > #222< / td >
< td > < span class = "swatch" style = "background-color: #222;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @grayDark< / code > < / td >
< td > #333< / td >
< td > < span class = "swatch" style = "background-color: #333;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @gray< / code > < / td >
< td > #555< / td >
< td > < span class = "swatch" style = "background-color: #555;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @grayLight< / code > < / td >
< td > #999< / td >
< td > < span class = "swatch" style = "background-color: #999;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @grayLighter< / code > < / td >
< td > #eee< / td >
< td > < span class = "swatch" style = "background-color: #eee;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @white< / code > < / td >
< td > #fff< / td >
< td > < span class = "swatch swatch-bordered" style = "background-color: #fff;" > < / span > < / td >
< / tr >
< / tbody >
< / table >
< h3 > Accent colors< / h3 >
< table class = "table table-bordered table-striped" >
< tbody >
< tr >
< td class = "span4" > < code > @blue< / code > < / td >
< td > #049cdb< / td >
< td class = "swatch-col" > < span class = "swatch" style = "background-color: #049cdb;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @green< / code > < / td >
< td > #46a546< / td >
< td > < span class = "swatch" style = "background-color: #46a546;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @red< / code > < / td >
< td > #9d261d< / td >
< td > < span class = "swatch" style = "background-color: #9d261d;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @yellow< / code > < / td >
< td > #ffc40d< / td >
< td > < span class = "swatch" style = "background-color: #ffc40d;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @orange< / code > < / td >
< td > #f89406< / td >
< td > < span class = "swatch" style = "background-color: #f89406;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @pink< / code > < / td >
< td > #c3325f< / td >
< td > < span class = "swatch" style = "background-color: #c3325f;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @purple< / code > < / td >
< td > #7a43b6< / td >
< td > < span class = "swatch" style = "background-color: #7a43b6;" > < / span > < / td >
< / tr >
< / tbody >
< / table >
2011-11-12 09:46:02 +01:00
2012-01-25 08:35:34 +01:00
< h3 > Components< / h3 >
2012-05-25 06:30:43 +02:00
< h4 > Buttons< / h4 >
< table class = "table table-bordered table-striped" >
< tbody >
< tr >
< td class = "span4" > < code > @btnBackground< / code > < / td >
< td > < code > @white< / code > < / td >
< td class = "swatch-col" > < span class = "swatch" style = "background-color: #fff;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @btnBackgroundHighlight< / code > < / td >
< td > < code > darken(@white, 10%)< / code > < / td >
< td class = "swatch-col" > < span class = "swatch" style = "background-color: #e6e6e6;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @btnBorder< / code > < / td >
< td > < code > darken(@white, 20%)< / code > < / td >
< td class = "swatch-col" > < span class = "swatch" style = "background-color: #ccc;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @btnPrimaryBackground< / code > < / td >
< td > < code > @linkColor< / code > < / td >
< td class = "swatch-col" > < span class = "swatch" style = "background-color: #08c;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @btnPrimaryBackgroundHighlight< / code > < / td >
< td > < code > spin(@btnPrimaryBackground, 15%)< / code > < / td >
< td class = "swatch-col" > < span class = "swatch" style = "background-color: #05c;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @btnInfoBackground< / code > < / td >
< td > < code > #5bc0de< / code > < / td >
< td class = "swatch-col" > < span class = "swatch" style = "background-color: #5bc0de;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @btnInfoBackgroundHighlight< / code > < / td >
< td > < code > #2f96b4< / code > < / td >
< td class = "swatch-col" > < span class = "swatch" style = "background-color: #2f96b4;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @btnSuccessBackground< / code > < / td >
< td > < code > #62c462< / code > < / td >
< td class = "swatch-col" > < span class = "swatch" style = "background-color: #62c462;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @btnSuccessBackgroundHighlight< / code > < / td >
< td > < code > 51a351< / code > < / td >
< td class = "swatch-col" > < span class = "swatch" style = "background-color: #51a351;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @btnWarningBackground< / code > < / td >
< td > < code > lighten(@orange, 15%)< / code > < / td >
< td class = "swatch-col" > < span class = "swatch" style = "background-color: #fbb450;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @btnWarningBackgroundHighlight< / code > < / td >
< td > < code > @orange< / code > < / td >
< td class = "swatch-col" > < span class = "swatch" style = "background-color: #f89406;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @btnDangerBackground< / code > < / td >
< td > < code > #ee5f5b< / code > < / td >
< td class = "swatch-col" > < span class = "swatch" style = "background-color: #ee5f5b;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @btnDangerBackgroundHighlight< / code > < / td >
< td > < code > #bd362f< / code > < / td >
< td class = "swatch-col" > < span class = "swatch" style = "background-color: #bd362f;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @btnInverseBackground< / code > < / td >
< td > < code > @gray< / code > < / td >
< td class = "swatch-col" > < span class = "swatch" style = "background-color: #555;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @btnInverseBackgroundHighlight< / code > < / td >
< td > < code > @grayDarker< / code > < / td >
< td class = "swatch-col" > < span class = "swatch" style = "background-color: #222;" > < / span > < / td >
< / tr >
< / tbody >
< / table >
< h4 > Forms< / h4 >
< table class = "table table-bordered table-striped" >
< tbody >
< tr >
< td class = "span4" > < code > @placeholderText< / code > < / td >
< td > < code > @grayLight< / code > < / td >
< / tr >
< tr >
< td > < code > @inputBackground< / code > < / td >
< td > < code > @white< / code > < / td >
< / tr >
< tr >
< td > < code > @inputBorder< / code > < / td >
< td > < code > #ccc< / code > < / td >
< / tr >
< tr >
< td > < code > @inputBorderRadius< / code > < / td >
< td > < code > 3px< / code > < / td >
< / tr >
< tr >
< td > < code > @inputDisabledBackground< / code > < / td >
< td > < code > @grayLighter< / code > < / td >
< / tr >
< tr >
< td > < code > @formActionsBackground< / code > < / td >
< td > < code > #f5f5f5< / code > < / td >
< / tr >
< / tbody >
< / table >
< h4 > Form states and alerts< / h4 >
< table class = "table table-bordered table-striped" >
< tbody >
< tr >
< td class = "span4" > < code > @warningText< / code > < / td >
< td > #c09853< / td >
< td > < span class = "swatch" style = "background-color: #c09853;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @warningBackground< / code > < / td >
< td > #f3edd2< / td >
< td class = "swatch-col" > < span class = "swatch" style = "background-color: #f3edd2;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @errorText< / code > < / td >
< td > #b94a48< / td >
< td > < span class = "swatch" style = "background-color: #b94a48;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @errorBackground< / code > < / td >
< td > #f2dede< / td >
< td > < span class = "swatch" style = "background-color: #f2dede;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @successText< / code > < / td >
< td > #468847< / td >
< td > < span class = "swatch" style = "background-color: #468847;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @successBackground< / code > < / td >
< td > #dff0d8< / td >
< td > < span class = "swatch" style = "background-color: #dff0d8;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @infoText< / code > < / td >
< td > #3a87ad< / td >
< td > < span class = "swatch" style = "background-color: #3a87ad;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @infoBackground< / code > < / td >
< td > #d9edf7< / td >
< td > < span class = "swatch" style = "background-color: #d9edf7;" > < / span > < / td >
< / tr >
< / tbody >
< / table >
< h4 > Navbar< / h4 >
< table class = "table table-bordered table-striped" >
< tbody >
< tr >
< td class = "span4" > < code > @navbarHeight< / code > < / td >
< td > 40px< / td >
< td class = "swatch-col" > < / td >
< / tr >
< tr >
< td > < code > @navbarBackground< / code > < / td >
< td > < code > @grayDarker< / code > < / td >
< td > < span class = "swatch" style = "background-color: #222;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @navbarBackgroundHighlight< / code > < / td >
< td > < code > @grayDark< / code > < / td >
< td > < span class = "swatch" style = "background-color: #333;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @navbarText< / code > < / td >
< td > < code > @grayLight< / code > < / td >
< td > < span class = "swatch" style = "background-color: #999;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @navbarLinkColor< / code > < / td >
< td > < code > @grayLight< / code > < / td >
< td > < span class = "swatch" style = "background-color: #999;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @navbarLinkColorHover< / code > < / td >
< td > < code > @white< / code > < / td >
< td > < span class = "swatch swatch-bordered" style = "background-color: #fff;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @navbarLinkColorActive< / code > < / td >
< td > < code > @navbarLinkColorHover< / code > < / td >
< td > < span class = "swatch swatch-bordered" style = "background-color: #fff;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @navbarLinkBackgroundHover< / code > < / td >
< td > < code > transparent< / code > < / td >
< td > < span class = "swatch swatch-bordered" style = "background-color: transparent;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @navbarLinkBackgroundActive< / code > < / td >
< td > < code > @navbarBackground< / code > < / td >
< td > < span class = "swatch swatch-bordered" style = "background-color: #fff;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @navbarSearchBackground< / code > < / td >
< td > < code > lighten(@navbarBackground, 25%)< / code > < / td >
< td > < span class = "swatch" style = "background-color: #666;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @navbarSearchBackgroundFocus< / code > < / td >
< td > < code > @white< / code > < / td >
< td > < span class = "swatch swatch-bordered" style = "background-color: #fff;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @navbarSearchBorder< / code > < / td >
< td > < code > darken(@navbarSearchBackground, 30%)< / code > < / td >
< td > < span class = "swatch" style = "background-color: #111;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @navbarSearchPlaceholderColor< / code > < / td >
< td > < code > #ccc< / code > < / td >
< td > < span class = "swatch" style = "background-color: #ccc;" > < / span > < / td >
< / tr >
< tr >
< td > < code > @navbarBrandColor< / code > < / td >
< td > < code > @navbarLinkColor< / code > < / td >
< td > < span class = "swatch swatch-bordered" style = "background-color: #fff;" > < / span > < / td >
< / tr >
< / tbody >
< / table >
< h4 > Dropdowns< / h4 >
< table class = "table table-bordered table-striped" >
< tbody >
< tr >
< td class = "span4" > < code > @dropdownBackground< / code > < / td >
< td > < code > @white< / code > < / td >
< / tr >
< tr >
< td > < code > @dropdownBorder< / code > < / td >
< td > < code > rgba(0,0,0,.2)< / code > < / td >
< / tr >
< tr >
< td > < code > @dropdownLinkColor< / code > < / td >
< td > < code > @grayDark< / code > < / td >
< / tr >
< tr >
< td > < code > @dropdownLinkColorHover< / code > < / td >
< td > < code > @white< / code > < / td >
< / tr >
< tr >
< td > < code > @dropdownLinkBackgroundHover< / code > < / td >
< td > < code > @linkColor< / code > < / td >
< / tr >
< tr >
2012-06-05 03:39:02 +02:00
< td > < code > @dropdownDividerTop< / code > < / td >
2012-05-25 06:30:43 +02:00
< td > < code > #e5e5e5< / code > < / td >
< / tr >
< tr >
2012-06-05 03:39:02 +02:00
< td > < code > @dropdownDividerBottom< / code > < / td >
2012-05-25 06:30:43 +02:00
< td > < code > @white< / code > < / td >
< / tr >
< / tbody >
< / table >
< h4 > Hero unit< / h4 >
< table class = "table table-bordered table-striped" >
< tbody >
< tr >
< td class = "span4" > < code > @heroUnitBackground< / code > < / td >
< td > < code > @grayLighter< / code > < / td >
< td class = "swatch-col" > < span class = "swatch" style = "background-color: #eee;" > < / span > < / td >
< / tr >
< tr >
< td class = "span2" > < code > @heroUnitHeadingColor< / code > < / td >
< td > < code > inherit< / code > < / td >
< td > < / td >
< / tr >
< tr >
< td > < code > @heroUnitLeadColor< / code > < / td >
< td > < code > inhereit< / code > < / td >
< td > < / td >
< / tr >
< / tbody >
< / table >
2011-11-12 09:46:02 +01:00
2012-01-25 08:35:34 +01:00
< / section >
2011-11-12 09:46:02 +01:00
2012-01-25 08:35:34 +01:00
<!-- MIXINS
================================================== -->
2012-01-25 10:45:15 +01:00
< section id = "mixins" >
< div class = "page-header" >
< h1 > Bootstrap mixins < small > < / small > < / h1 >
< / div >
< h2 > About mixins< / h2 >
< div class = "row" >
< div class = "span4" >
< h3 > Basic mixins< / h3 >
< p > A basic mixin is essentially an include or a partial for a snippet of CSS. They're written just like a CSS class and can be called anywhere.< / p >
2011-10-27 08:11:56 +02:00
< pre class = "prettyprint linenums" >
2012-01-26 00:03:44 +01:00
.element {
.clearfix();
}
2011-10-27 08:11:56 +02:00
< / pre >
2012-01-25 10:45:15 +01:00
< / div > <!-- /span4 -->
< div class = "span4" >
< h3 > Parametric mixins< / h3 >
2012-01-26 00:03:44 +01:00
< p > A parametric mixin is just like a basic mixin, but it also accepts parameters (hence the name) with optional default values.< / p >
2011-10-27 08:11:56 +02:00
< pre class = "prettyprint linenums" >
2012-01-26 00:03:44 +01:00
.element {
.border-radius(4px);
}
2011-10-27 08:11:56 +02:00
< / pre >
2012-01-25 10:45:15 +01:00
< / div > <!-- /span4 -->
< div class = "span4" >
< h3 > Easily add your own< / h3 >
< p > Nearly all of Bootstrap's mixins are stored in mixins.less, a wonderful utility .less file that enables you to use a mixin in any of the .less files in the toolkit.< / p >
< p > So, go ahead and use the existing ones or feel free to add your own as you need.< / p >
< / div > <!-- /span4 -->
< / div > <!-- /row -->
< h2 > Included mixins< / h2 >
< h3 > Utilities< / h3 >
< table class = "table table-bordered table-striped" >
< thead >
< tr >
< th class = "span4" > Mixin< / th >
2012-01-25 23:08:51 +01:00
< th > Parameters< / th >
2012-01-25 10:45:15 +01:00
< th > Usage< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > < code > .clearfix()< / code > < / td >
2012-01-25 23:08:51 +01:00
< td > < em class = "muted" > none< / em > < / td >
< td > Add to any parent to clear floats within< / td >
2012-01-25 10:45:15 +01:00
< / tr >
2012-01-28 03:33:25 +01:00
< tr >
< td > < code > .tab-focus()< / code > < / td >
< td > < em class = "muted" > none< / em > < / td >
< td > Apply the Webkit focus style and round Firefox outline< / td >
< / tr >
2012-01-25 10:45:15 +01:00
< tr >
< td > < code > .center-block()< / code > < / td >
2012-01-25 23:08:51 +01:00
< td > < em class = "muted" > none< / em > < / td >
< td > Auto center a block-level element using < code > margin: auto< / code > < / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
< td > < code > .ie7-inline-block()< / code > < / td >
2012-01-25 23:08:51 +01:00
< td > < em class = "muted" > none< / em > < / td >
< td > Use in addition to regular < code > display: inline-block< / code > to get IE7 support< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
< td > < code > .size()< / code > < / td >
2012-04-01 06:36:45 +02:00
< td > < code > @height @width< / code > < / td >
2012-01-25 23:08:51 +01:00
< td > Quickly set the height and width on one line< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
< td > < code > .square()< / code > < / td >
2012-04-01 06:36:45 +02:00
< td > < code > @size< / code > < / td >
2012-01-25 23:08:51 +01:00
< td > Builds on < code > .size()< / code > to set the width and height as same value< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
< td > < code > .opacity()< / code > < / td >
2012-04-01 06:36:45 +02:00
< td > < code > @opacity< / code > < / td >
2012-01-25 23:08:51 +01:00
< td > Set, in whole numbers, the opacity percentage (e.g., "50" or "75")< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< / tbody >
< / table >
< h3 > Forms< / h3 >
< table class = "table table-bordered table-striped" >
< thead >
< tr >
< th class = "span4" > Mixin< / th >
2012-01-25 23:08:51 +01:00
< th > Parameters< / th >
2012-01-25 10:45:15 +01:00
< th > Usage< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > < code > .placeholder()< / code > < / td >
2012-01-25 23:08:51 +01:00
< td > < code > @color: @placeholderText< / code > < / td >
< td > Set the < code > placeholder< / code > text color for inputs< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< / tbody >
< / table >
< h3 > Typography< / h3 >
< table class = "table table-bordered table-striped" >
< thead >
< tr >
< th class = "span4" > Mixin< / th >
2012-01-25 23:08:51 +01:00
< th > Parameters< / th >
2012-01-25 10:45:15 +01:00
< th > Usage< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > < code > #font > #family > .serif()< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > < em class = "muted" > none< / em > < / td >
< td > Make an element use a serif font stack< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
< td > < code > #font > #family > .sans-serif()< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > < em class = "muted" > none< / em > < / td >
< td > Make an element use a sans-serif font stack< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
< td > < code > #font > #family > .monospace()< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > < em class = "muted" > none< / em > < / td >
< td > Make an element use a monospace font stack< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
< td > < code > #font > .shorthand()< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > < code > @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight< / code > < / td >
< td > Easily set font size, weight, and leading< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
< td > < code > #font > .serif()< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > < code > @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight< / code > < / td >
< td > Set font family to serif, and control size, weight, and leading< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
< td > < code > #font > .sans-serif()< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > < code > @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight< / code > < / td >
< td > Set font family to sans-serif, and control size, weight, and leading< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
< td > < code > #font > .monospace()< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > < code > @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight< / code > < / td >
< td > Set font family to monospace, and control size, weight, and leading< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< / tbody >
< / table >
< h3 > Grid system< / h3 >
< table class = "table table-bordered table-striped" >
< thead >
< tr >
< th class = "span4" > Mixin< / th >
2012-01-25 23:08:51 +01:00
< th > Parameters< / th >
2012-01-25 10:45:15 +01:00
< th > Usage< / th >
< / tr >
< / thead >
< tbody >
< tr >
2012-01-26 00:03:44 +01:00
< td > < code > .container-fixed()< / code > < / td >
< td > < em class = "muted" > none< / em > < / td >
2012-03-11 21:48:04 +01:00
< td > Create a horizontally centered container for holding your content< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
2012-03-11 21:48:04 +01:00
< td > < code > #grid > .core()< / code > < / td >
< td > < code > @gridColumnWidth, @gridGutterWidth< / code > < / td >
< td > Generate a pixel grid system (container, row, and columns) with < em > n< / em > columns and < em > x< / em > pixel wide gutter< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
2012-03-11 21:48:04 +01:00
< td > < code > #grid > .fluid()< / code > < / td >
< td > < code > @fluidGridColumnWidth, @fluidGridGutterWidth< / code > < / td >
2012-05-18 06:45:45 +02:00
< td > Generate a percent grid system with < em > n< / em > columns and < em > x< / em > % wide gutter< / td >
2012-01-25 10:45:15 +01:00
< / tr >
2012-04-15 03:18:11 +02:00
< tr >
< td > < code > #grid > .input()< / code > < / td >
< td > < code > @gridColumnWidth, @gridGutterWidth< / code > < / td >
< td > Generate the pixel grid system for < code > input< / code > elements, accounting for padding and borders< / td >
< / tr >
< tr >
< td > < code > .makeColumn< / code > < / td >
< td > < code > @columns: 1, @offset: 0< / code > < / td >
< td > Turn any < code > div< / code > into a grid column without the < code > .span*< / code > classes< / td >
< / tr >
2012-01-25 10:45:15 +01:00
< / tbody >
< / table >
< h3 > CSS3 properties< / h3 >
< table class = "table table-bordered table-striped" >
< thead >
< tr >
2012-01-26 00:03:44 +01:00
< th class = "span3" > Mixin< / th >
2012-01-25 23:08:51 +01:00
< th > Parameters< / th >
2012-01-25 10:45:15 +01:00
< th > Usage< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > < code > .border-radius()< / code > < / td >
2012-04-01 06:36:45 +02:00
< td > < code > @radius< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > Round the corners of an element. Can be a single value or four space-separated values< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
< td > < code > .box-shadow()< / code > < / td >
2012-04-01 06:36:45 +02:00
< td > < code > @shadow< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > Add a drop shadow to an element< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
< td > < code > .transition()< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > < code > @transition< / code > < / td >
< td > Add CSS3 transition effect (e.g., < code > all .2s linear< / code > )< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
< td > < code > .rotate()< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > < code > @degrees< / code > < / td >
< td > Rotate an element < em > n< / em > degrees< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
< td > < code > .scale()< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > < code > @ratio< / code > < / td >
2012-02-02 18:33:18 +01:00
< td > Scale an element to < em > n< / em > times its original size< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
< td > < code > .translate()< / code > < / td >
2012-04-01 06:36:45 +02:00
< td > < code > @x, @y< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > Move an element on the x and y planes< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
< td > < code > .background-clip()< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > < code > @clip< / code > < / td >
2012-02-02 08:30:37 +01:00
< td > Crop the background of an element (useful for < code > border-radius< / code > )< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
< td > < code > .background-size()< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > < code > @size< / code > < / td >
< td > Control the size of background images via CSS3< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
< td > < code > .box-sizing()< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > < code > @boxmodel< / code > < / td >
< td > Change the box model for an element (e.g., < code > border-box< / code > for a full-width < code > input< / code > )< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
< td > < code > .user-select()< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > < code > @select< / code > < / td >
< td > Control cursor selection of text on a page< / td >
2012-01-25 10:45:15 +01:00
< / tr >
2012-03-29 03:25:27 +02:00
< tr >
< td > < code > .backface-visibility()< / code > < / td >
< td > < code > @visibility: visible< / code > < / td >
< td > Prevent flickering of content when using CSS 3D transforms< / td >
< / tr >
2012-01-25 10:45:15 +01:00
< tr >
< td > < code > .resizable()< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > < code > @direction: both< / code > < / td >
< td > Make any element resizable on the right and bottom< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
< td > < code > .content-columns()< / code > < / td >
2012-04-01 06:36:45 +02:00
< td > < code > @columnCount, @columnGap: @gridGutterWidth< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > Make the content of any element use CSS3 columns< / td >
2012-01-25 10:45:15 +01:00
< / tr >
2012-05-13 23:31:31 +02:00
< tr >
< td > < code > .hyphens()< / code > < / td >
< td > < code > @mode: auto< / code > < / td >
< td > CSS3 hyphenation when you want it (includes < code > word-wrap: break-word< / code > )< / td >
< / tr >
2012-01-25 10:45:15 +01:00
< / tbody >
< / table >
< h3 > Backgrounds and gradients< / h3 >
< table class = "table table-bordered table-striped" >
< thead >
< tr >
< th class = "span4" > Mixin< / th >
2012-01-25 23:08:51 +01:00
< th > Parameters< / th >
2012-01-25 10:45:15 +01:00
< th > Usage< / th >
< / tr >
< / thead >
< tbody >
< tr >
2012-03-11 03:03:59 +01:00
< td > < code > #translucent > .background()< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > < code > @color: @white, @alpha: 1< / code > < / td >
< td > Give an element a translucent background color< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
2012-03-11 03:03:59 +01:00
< td > < code > #translucent > .border()< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > < code > @color: @white, @alpha: 1< / code > < / td >
< td > Give an element a translucent border color< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
2012-03-11 03:03:59 +01:00
< td > < code > #gradient > .vertical()< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > < code > @startColor, @endColor< / code > < / td >
< td > Create a cross-browser vertical background gradient< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
2012-03-11 03:03:59 +01:00
< td > < code > #gradient > .horizontal()< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > < code > @startColor, @endColor< / code > < / td >
< td > Create a cross-browser horizontal background gradient< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
2012-03-11 03:03:59 +01:00
< td > < code > #gradient > .directional()< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > < code > @startColor, @endColor, @deg< / code > < / td >
< td > Create a cross-browser directional background gradient< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
2012-03-11 03:03:59 +01:00
< td > < code > #gradient > .vertical-three-colors()< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > < code > @startColor, @midColor, @colorStop, @endColor< / code > < / td >
< td > Create a cross-browser three-color background gradient< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
2012-03-11 03:03:59 +01:00
< td > < code > #gradient > .radial()< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > < code > @innerColor, @outerColor< / code > < / td >
< td > Create a cross-browser radial background gradient< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
2012-03-11 03:03:59 +01:00
< td > < code > #gradient > .striped()< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > < code > @color, @angle< / code > < / td >
< td > Create a cross-browser striped background gradient< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< tr >
2012-03-11 03:03:59 +01:00
< td > < code > #gradientBar()< / code > < / td >
2012-01-26 00:03:44 +01:00
< td > < code > @primaryColor, @secondaryColor< / code > < / td >
< td > Used for buttons to assign a gradient and slightly darker border< / td >
2012-01-25 10:45:15 +01:00
< / tr >
< / tbody >
< / table >
< / section >
2011-10-27 08:11:56 +02:00
2012-01-25 10:22:29 +01:00
<!-- COMPILING LESS AND BOOTSTRAP
================================================== -->
< section id = "compiling" >
< div class = "page-header" >
< h1 > Compiling Bootstrap with LESS< / h1 >
< / div >
< 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 >
2012-06-06 03:29:26 +02:00
2012-01-25 10:22:29 +01:00
< h2 > Tools for compiling< / h2 >
2012-06-06 03:29:26 +02: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 >
< 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 >
2011-10-27 08:11:56 +02:00
< pre class = "prettyprint" >
< link rel="stylesheet/less" href="/path/to/bootstrap.less">
< script src="/path/to/less.js"> < /script>
< / pre >
2012-06-06 03:29:26 +02: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 >
< 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.< / p >
< p > If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.< / p >
< h3 > More Mac 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 PC 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 >
2011-10-27 08:11:56 +02:00
< / section >
2012-01-25 10:22:29 +01:00
2012-01-26 19:00:09 +01:00
2012-01-24 00:17:32 +01:00
<!-- Footer
2011-10-27 08:11:56 +02:00
================================================== -->
< footer class = "footer" >
2011-12-11 11:03:16 +01:00
< 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 >
2012-06-06 02:16:17 +02:00
< p > < a href = "#" > Back to top< / a > < / p >
2011-10-27 08:11:56 +02:00
< / footer >
2012-01-23 23:14:16 +01:00
2011-10-27 08:11:56 +02:00
< / div > <!-- /container -->
2012-01-23 23:14:16 +01:00
2012-01-26 19:00:09 +01:00
<!-- Le javascript
================================================== -->
2011-10-27 08:11:56 +02:00
<!-- Placed at the end of the document so the pages load faster -->
2012-01-26 19:00:09 +01:00
< script type = "text/javascript" src = "http://platform.twitter.com/widgets.js" > < / script >
2012-01-31 22:58:28 +01:00
< script src = "assets/js/jquery.js" > < / script >
2011-10-27 08:11:56 +02:00
< script src = "assets/js/google-code-prettify/prettify.js" > < / script >
2012-01-31 22:58:28 +01:00
< 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 >
2012-01-23 23:14:16 +01:00
< script src = "assets/js/application.js" > < / script >
2012-02-02 01:38:58 +01:00
2011-10-27 08:11:56 +02:00
< / body >
< / html >
