less.html 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Bootstrap, from Twitter</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="description" content="">
  8. <meta name="author" content="">
  9. <!-- Le styles -->
  10. <link href="assets/css/bootstrap.css" rel="stylesheet">
  11. <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
  12. <link href="assets/css/docs.css" rel="stylesheet">
  13. <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
  14. <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
  15. <!--[if lt IE 9]>
  16. <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
  17. <![endif]-->
  18. <!-- Le fav and touch icons -->
  19. <link rel="shortcut icon" href="assets/ico/favicon.ico">
  20. <link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
  21. <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/apple-touch-icon-72x72.png">
  22. <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/apple-touch-icon-114x114.png">
  23. </head>
  24. <body data-spy="scroll" data-target=".subnav" data-offset="50">
  25. <!-- Navbar
  26. ================================================== -->
  27. <div class="navbar navbar-fixed-top">
  28. <div class="navbar-inner">
  29. <div class="container">
  30. <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
  31. <span class="icon-bar"></span>
  32. <span class="icon-bar"></span>
  33. <span class="icon-bar"></span>
  34. </a>
  35. <a class="brand" href="./index.html">Bootstrap</a>
  36. <div class="nav-collapse">
  37. <ul class="nav">
  38. <li class="">
  39. <a href="./index.html">Overview</a>
  40. </li>
  41. <li class="">
  42. <a href="./scaffolding.html">Scaffolding</a>
  43. </li>
  44. <li class="">
  45. <a href="./base-css.html">Base CSS</a>
  46. </li>
  47. <li class="">
  48. <a href="./components.html">Components</a>
  49. </li>
  50. <li class="">
  51. <a href="./javascript.html">Javascript plugins</a>
  52. </li>
  53. <li class="active">
  54. <a href="./less.html">Using LESS</a>
  55. </li>
  56. <li class="divider-vertical"></li>
  57. <li class="">
  58. <a href="./download.html">Customize</a>
  59. </li>
  60. <li class="">
  61. <a href="./examples.html">Examples</a>
  62. </li>
  63. </ul>
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68. <div class="container">
  69. <!-- Masthead
  70. ================================================== -->
  71. <header class="jumbotron subhead" id="overview">
  72. <h1>Using LESS with Bootstrap</h1>
  73. <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>
  74. <div class="subnav">
  75. <ul class="nav nav-pills">
  76. <li><a href="#builtWith">Built with Less</a></li>
  77. <li><a href="#variables">Variables</a></li>
  78. <li><a href="#mixins">Mixins</a></li>
  79. <li><a href="#compiling">Compiling Bootstrap</a></li>
  80. </ul>
  81. </div>
  82. </header>
  83. <!-- BUILT WITH LESS
  84. ================================================== -->
  85. <section id="builtWith">
  86. <div class="page-header">
  87. <h1>Built with LESS</h1>
  88. </div>
  89. <div class="row">
  90. <div class="span4">
  91. <h3>Why LESS?</h3>
  92. <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>
  93. </div>
  94. <div class="span4">
  95. <h3>What's included?</h3>
  96. <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>
  97. </div>
  98. <div class="span4">
  99. <h3>Learn more</h3>
  100. <img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
  101. <p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
  102. </div>
  103. </div>
  104. <div class="row">
  105. <div class="span4">
  106. <h3><a href="#variables">Variables</a></h3>
  107. <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&mdash;assign colors or pixel values as variables and change them once.</p>
  108. </div>
  109. <div class="span4">
  110. <h3><a href="#mixins">Mixins</a></h3>
  111. <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>
  112. </div>
  113. <div class="span4">
  114. <h3>Operations</h3>
  115. <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>
  116. </div>
  117. </div>
  118. </section>
  119. <!-- VARIABLES
  120. ================================================== -->
  121. <section id="variables">
  122. <div class="page-header">
  123. <h1>Bootstrap variables <small>LESS variables, their values, and usage guidelines</small></h1>
  124. </div>
  125. <div class="row">
  126. <div class="span6">
  127. <h3>Hyperlinks</h3>
  128. <table class="table table-bordered table-striped">
  129. <tbody>
  130. <tr>
  131. <td class="span2"><code>@linkColor</code></td>
  132. <td>#08c</td>
  133. <td>Default link text color</td>
  134. <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
  135. </tr>
  136. <tr>
  137. <td><code>@linkColorHover</code></td>
  138. <td><code>darken(@linkColor, 15%)</code></td>
  139. <td>Default link text hover color</td>
  140. <td><span class="swatch" style="background-color: #005580;"></span></td>
  141. </tr>
  142. </tbody>
  143. </table>
  144. <h3>Grid system</h3>
  145. <table class="table table-bordered table-striped">
  146. <tbody>
  147. <tr>
  148. <td class="span2"><code>@gridColumns</code></td>
  149. <td>12</td>
  150. </tr>
  151. <tr>
  152. <td><code>@gridColumnWidth</code></td>
  153. <td>60px</td>
  154. </tr>
  155. <tr>
  156. <td><code>@gridGutterWidth</code></td>
  157. <td>20px</td>
  158. </tr>
  159. <tr>
  160. <td><code>@fluidGridColumnWidth</code></td>
  161. <td>6.382978723%</td>
  162. </tr>
  163. <tr>
  164. <td><code>@fluidGridGutterWidth</code></td>
  165. <td>2.127659574%</td>
  166. </tr>
  167. </tbody>
  168. </table>
  169. <h3>Typography</h3>
  170. <table class="table table-bordered table-striped">
  171. <tbody>
  172. <tr>
  173. <td class="span2"><code>@baseFontSize</code></td>
  174. <td>13px</td>
  175. </tr>
  176. <tr>
  177. <td><code>@baseFontFamily</code></td>
  178. <td><code>"Helvetica Neue", Helvetica, Arial, sans-serif</code></td>
  179. </tr>
  180. <tr>
  181. <td><code>@baseLineHeight</code></td>
  182. <td>18px</td>
  183. </tr>
  184. </tbody>
  185. </table>
  186. </div>
  187. <div class="span6">
  188. <h3>Grayscale colors</h3>
  189. <table class="table table-bordered table-striped">
  190. <tbody>
  191. <tr>
  192. <td class="span2"><code>@black</code></td>
  193. <td>#000</td>
  194. <td class="swatch-col"><span class="swatch" style="background-color: #000;"></span></td>
  195. </tr>
  196. <tr>
  197. <td><code>@grayDarker</code></td>
  198. <td>#222</td>
  199. <td><span class="swatch" style="background-color: #222;"></span></td>
  200. </tr>
  201. <tr>
  202. <td><code>@grayDark</code></td>
  203. <td>#333</td>
  204. <td><span class="swatch" style="background-color: #333;"></span></td>
  205. </tr>
  206. <tr>
  207. <td><code>@gray</code></td>
  208. <td>#555</td>
  209. <td><span class="swatch" style="background-color: #555;"></span></td>
  210. </tr>
  211. <tr>
  212. <td><code>@grayLight</code></td>
  213. <td>#999</td>
  214. <td><span class="swatch" style="background-color: #999;"></span></td>
  215. </tr>
  216. <tr>
  217. <td><code>@grayLighter</code></td>
  218. <td>#eee</td>
  219. <td><span class="swatch" style="background-color: #eee;"></span></td>
  220. </tr>
  221. <tr>
  222. <td><code>@white</code></td>
  223. <td>#fff</td>
  224. <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
  225. </tr>
  226. </tbody>
  227. </table>
  228. <h3>Accent colors</h3>
  229. <table class="table table-bordered table-striped">
  230. <tbody>
  231. <tr>
  232. <td class="span2"><code>@blue</code></td>
  233. <td>#049cdb</td>
  234. <td class="swatch-col"><span class="swatch" style="background-color: #049cdb;"></span></td>
  235. </tr>
  236. <tr>
  237. <td><code>@green</code></td>
  238. <td>#46a546</td>
  239. <td><span class="swatch" style="background-color: #46a546;"></span></td>
  240. </tr>
  241. <tr>
  242. <td><code>@red</code></td>
  243. <td>#9d261d</td>
  244. <td><span class="swatch" style="background-color: #9d261d;"></span></td>
  245. </tr>
  246. <tr>
  247. <td><code>@yellow</code></td>
  248. <td>#ffc40d</td>
  249. <td><span class="swatch" style="background-color: #ffc40d;"></span></td>
  250. </tr>
  251. <tr>
  252. <td><code>@orange</code></td>
  253. <td>#f89406</td>
  254. <td><span class="swatch" style="background-color: #f89406;"></span></td>
  255. </tr>
  256. <tr>
  257. <td><code>@pink</code></td>
  258. <td>#c3325f</td>
  259. <td><span class="swatch" style="background-color: #c3325f;"></span></td>
  260. </tr>
  261. <tr>
  262. <td><code>@purple</code></td>
  263. <td>#7a43b6</td>
  264. <td><span class="swatch" style="background-color: #7a43b6;"></span></td>
  265. </tr>
  266. </tbody>
  267. </table>
  268. </div>
  269. </div> <!-- /row -->
  270. <h3>Components</h3>
  271. <div class="row">
  272. <div class="span6">
  273. <h4>Buttons</h4>
  274. <table class="table table-bordered table-striped">
  275. <tbody>
  276. <tr>
  277. <td class="span3"><code>@primaryButtonBackground</code></td>
  278. <td><code>@linkColor</code></td>
  279. <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
  280. </tr>
  281. </tbody>
  282. </table>
  283. <h4>Forms</h4>
  284. <table class="table table-bordered table-striped">
  285. <tbody>
  286. <tr>
  287. <td class="span3"><code>@placeholderText</code></td>
  288. <td><code>@grayLight</code></td>
  289. <td class="swatch-col"><span class="swatch" style="background-color: #999;"></span></td>
  290. </tr>
  291. </tbody>
  292. </table>
  293. <h4>Navbar</h4>
  294. <table class="table table-bordered table-striped">
  295. <tbody>
  296. <tr>
  297. <td class="span3"><code>@navbarHeight</code></td>
  298. <td>40px</td>
  299. <td class="swatch-col"></td>
  300. </tr>
  301. <tr>
  302. <td><code>@navbarBackground</code></td>
  303. <td><code>@grayDarker</code></td>
  304. <td><span class="swatch" style="background-color: #222;"></span></td>
  305. </tr>
  306. <tr>
  307. <td><code>@navbarBackgroundHighlight</code></td>
  308. <td><code>@grayDark</code></td>
  309. <td><span class="swatch" style="background-color: #333;"></span></td>
  310. </tr>
  311. <tr>
  312. <td><code>@navbarText</code></td>
  313. <td><code>@grayLight</code></td>
  314. <td><span class="swatch" style="background-color: #999;"></span></td>
  315. </tr>
  316. <tr>
  317. <td><code>@navbarLinkColor</code></td>
  318. <td><code>@grayLight</code></td>
  319. <td><span class="swatch" style="background-color: #999;"></span></td>
  320. </tr>
  321. <tr>
  322. <td><code>@navbarLinkColorHover</code></td>
  323. <td><code>@white</code></td>
  324. <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
  325. </tr>
  326. </tbody>
  327. </table>
  328. </div>
  329. <div class="span6">
  330. <h4>Form states and alerts</h4>
  331. <table class="table table-bordered table-striped">
  332. <tbody>
  333. <tr>
  334. <td class="span3"><code>@warningText</code></td>
  335. <td>#c09853</td>
  336. <td><span class="swatch" style="background-color: #c09853;"></span></td>
  337. </tr>
  338. <tr>
  339. <td><code>@warningBackground</code></td>
  340. <td>#f3edd2</td>
  341. <td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
  342. </tr>
  343. <tr>
  344. <td><code>@errorText</code></td>
  345. <td>#b94a48</td>
  346. <td><span class="swatch" style="background-color: #b94a48;"></span></td>
  347. </tr>
  348. <tr>
  349. <td><code>@errorBackground</code></td>
  350. <td>#f2dede</td>
  351. <td><span class="swatch" style="background-color: #f2dede;"></span></td>
  352. </tr>
  353. <tr>
  354. <td><code>@successText</code></td>
  355. <td>#468847</td>
  356. <td><span class="swatch" style="background-color: #468847;"></span></td>
  357. </tr>
  358. <tr>
  359. <td><code>@successBackground</code></td>
  360. <td>#dff0d8</td>
  361. <td><span class="swatch" style="background-color: #dff0d8;"></span></td>
  362. </tr>
  363. <tr>
  364. <td><code>@infoText</code></td>
  365. <td>#3a87ad</td>
  366. <td><span class="swatch" style="background-color: #3a87ad;"></span></td>
  367. </tr>
  368. <tr>
  369. <td><code>@infoBackground</code></td>
  370. <td>#d9edf7</td>
  371. <td><span class="swatch" style="background-color: #d9edf7;"></span></td>
  372. </tr>
  373. </tbody>
  374. </table>
  375. </div>
  376. </div><!-- /row -->
  377. </section>
  378. <!-- MIXINS
  379. ================================================== -->
  380. <section id="mixins">
  381. <div class="page-header">
  382. <h1>Bootstrap mixins <small></small></h1>
  383. </div>
  384. <h2>About mixins</h2>
  385. <div class="row">
  386. <div class="span4">
  387. <h3>Basic mixins</h3>
  388. <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>
  389. <pre class="prettyprint linenums">
  390. .element {
  391. .clearfix();
  392. }
  393. </pre>
  394. </div><!-- /span4 -->
  395. <div class="span4">
  396. <h3>Parametric mixins</h3>
  397. <p>A parametric mixin is just like a basic mixin, but it also accepts parameters (hence the name) with optional default values.</p>
  398. <pre class="prettyprint linenums">
  399. .element {
  400. .border-radius(4px);
  401. }
  402. </pre>
  403. </div><!-- /span4 -->
  404. <div class="span4">
  405. <h3>Easily add your own</h3>
  406. <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>
  407. <p>So, go ahead and use the existing ones or feel free to add your own as you need.</p>
  408. </div><!-- /span4 -->
  409. </div><!-- /row -->
  410. <h2>Included mixins</h2>
  411. <h3>Utilities</h3>
  412. <table class="table table-bordered table-striped">
  413. <thead>
  414. <tr>
  415. <th class="span4">Mixin</th>
  416. <th>Parameters</th>
  417. <th>Usage</th>
  418. </tr>
  419. </thead>
  420. <tbody>
  421. <tr>
  422. <td><code>.clearfix()</code></td>
  423. <td><em class="muted">none</em></td>
  424. <td>Add to any parent to clear floats within</td>
  425. </tr>
  426. <tr>
  427. <td><code>.tab-focus()</code></td>
  428. <td><em class="muted">none</em></td>
  429. <td>Apply the Webkit focus style and round Firefox outline</td>
  430. </tr>
  431. <tr>
  432. <td><code>.center-block()</code></td>
  433. <td><em class="muted">none</em></td>
  434. <td>Auto center a block-level element using <code>margin: auto</code></td>
  435. </tr>
  436. <tr>
  437. <td><code>.ie7-inline-block()</code></td>
  438. <td><em class="muted">none</em></td>
  439. <td>Use in addition to regular <code>display: inline-block</code> to get IE7 support</td>
  440. </tr>
  441. <tr>
  442. <td><code>.size()</code></td>
  443. <td><code>@height: 5px, @width: 5px</code></td>
  444. <td>Quickly set the height and width on one line</td>
  445. </tr>
  446. <tr>
  447. <td><code>.square()</code></td>
  448. <td><code>@size: 5px</code></td>
  449. <td>Builds on <code>.size()</code> to set the width and height as same value</td>
  450. </tr>
  451. <tr>
  452. <td><code>.opacity()</code></td>
  453. <td><code>@opacity: 100</code></td>
  454. <td>Set, in whole numbers, the opacity percentage (e.g., "50" or "75")</td>
  455. </tr>
  456. </tbody>
  457. </table>
  458. <h3>Forms</h3>
  459. <table class="table table-bordered table-striped">
  460. <thead>
  461. <tr>
  462. <th class="span4">Mixin</th>
  463. <th>Parameters</th>
  464. <th>Usage</th>
  465. </tr>
  466. </thead>
  467. <tbody>
  468. <tr>
  469. <td><code>.placeholder()</code></td>
  470. <td><code>@color: @placeholderText</code></td>
  471. <td>Set the <code>placeholder</code> text color for inputs</td>
  472. </tr>
  473. </tbody>
  474. </table>
  475. <h3>Typography</h3>
  476. <table class="table table-bordered table-striped">
  477. <thead>
  478. <tr>
  479. <th class="span4">Mixin</th>
  480. <th>Parameters</th>
  481. <th>Usage</th>
  482. </tr>
  483. </thead>
  484. <tbody>
  485. <tr>
  486. <td><code>#font > #family > .serif()</code></td>
  487. <td><em class="muted">none</em></td>
  488. <td>Make an element use a serif font stack</td>
  489. </tr>
  490. <tr>
  491. <td><code>#font > #family > .sans-serif()</code></td>
  492. <td><em class="muted">none</em></td>
  493. <td>Make an element use a sans-serif font stack</td>
  494. </tr>
  495. <tr>
  496. <td><code>#font > #family > .monospace()</code></td>
  497. <td><em class="muted">none</em></td>
  498. <td>Make an element use a monospace font stack</td>
  499. </tr>
  500. <tr>
  501. <td><code>#font > .shorthand()</code></td>
  502. <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
  503. <td>Easily set font size, weight, and leading</td>
  504. </tr>
  505. <tr>
  506. <td><code>#font > .serif()</code></td>
  507. <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
  508. <td>Set font family to serif, and control size, weight, and leading</td>
  509. </tr>
  510. <tr>
  511. <td><code>#font > .sans-serif()</code></td>
  512. <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
  513. <td>Set font family to sans-serif, and control size, weight, and leading</td>
  514. </tr>
  515. <tr>
  516. <td><code>#font > .monospace()</code></td>
  517. <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
  518. <td>Set font family to monospace, and control size, weight, and leading</td>
  519. </tr>
  520. </tbody>
  521. </table>
  522. <h3>Grid system</h3>
  523. <table class="table table-bordered table-striped">
  524. <thead>
  525. <tr>
  526. <th class="span4">Mixin</th>
  527. <th>Parameters</th>
  528. <th>Usage</th>
  529. </tr>
  530. </thead>
  531. <tbody>
  532. <tr>
  533. <td><code>.container-fixed()</code></td>
  534. <td><em class="muted">none</em></td>
  535. <td>Provide a fixed-width (set with <code>@siteWidth</code>) container for holding your content</td>
  536. </tr>
  537. <tr>
  538. <td><code>.columns()</code></td>
  539. <td><code>@columns: 1</code></td>
  540. <td>Build a grid column that spans any number of columns (defaults to 1 column)</td>
  541. </tr>
  542. <tr>
  543. <td><code>.offset()</code></td>
  544. <td><code>@columns: 1</code></td>
  545. <td>Offset a grid column with left margin that spans any number of columns</td>
  546. </tr>
  547. <tr>
  548. <td><code>.gridColumn()</code></td>
  549. <td><em class="muted">none</em></td>
  550. <td>Make an element float like a grid column</td>
  551. </tr>
  552. </tbody>
  553. </table>
  554. <h3>CSS3 properties</h3>
  555. <table class="table table-bordered table-striped">
  556. <thead>
  557. <tr>
  558. <th class="span3">Mixin</th>
  559. <th>Parameters</th>
  560. <th>Usage</th>
  561. </tr>
  562. </thead>
  563. <tbody>
  564. <tr>
  565. <td><code>.border-radius()</code></td>
  566. <td><code>@radius: 5px</code></td>
  567. <td>Round the corners of an element. Can be a single value or four space-separated values</td>
  568. </tr>
  569. <tr>
  570. <td><code>.box-shadow()</code></td>
  571. <td><code>@shadow: 0 1px 3px rgba(0,0,0,.25)</code></td>
  572. <td>Add a drop shadow to an element</td>
  573. </tr>
  574. <tr>
  575. <td><code>.transition()</code></td>
  576. <td><code>@transition</code></td>
  577. <td>Add CSS3 transition effect (e.g., <code>all .2s linear</code>)</td>
  578. </tr>
  579. <tr>
  580. <td><code>.rotate()</code></td>
  581. <td><code>@degrees</code></td>
  582. <td>Rotate an element <em>n</em> degrees</td>
  583. </tr>
  584. <tr>
  585. <td><code>.scale()</code></td>
  586. <td><code>@ratio</code></td>
  587. <td>Scale an element to <em>n</em> times its original size</td>
  588. </tr>
  589. <tr>
  590. <td><code>.translate()</code></td>
  591. <td><code>@x: 0, @y: 0</code></td>
  592. <td>Move an element on the x and y planes</td>
  593. </tr>
  594. <tr>
  595. <td><code>.background-clip()</code></td>
  596. <td><code>@clip</code></td>
  597. <td>Crop the background of an element (useful for <code>border-radius</code>)</td>
  598. </tr>
  599. <tr>
  600. <td><code>.background-size()</code></td>
  601. <td><code>@size</code></td>
  602. <td>Control the size of background images via CSS3</td>
  603. </tr>
  604. <tr>
  605. <td><code>.box-sizing()</code></td>
  606. <td><code>@boxmodel</code></td>
  607. <td>Change the box model for an element (e.g., <code>border-box</code> for a full-width <code>input</code>)</td>
  608. </tr>
  609. <tr>
  610. <td><code>.user-select()</code></td>
  611. <td><code>@select</code></td>
  612. <td>Control cursor selection of text on a page</td>
  613. </tr>
  614. <tr>
  615. <td><code>.resizable()</code></td>
  616. <td><code>@direction: both</code></td>
  617. <td>Make any element resizable on the right and bottom</td>
  618. </tr>
  619. <tr>
  620. <td><code>.content-columns()</code></td>
  621. <td><code>@columnCount, @columnGap: @gridColumnGutter</code></td>
  622. <td>Make the content of any element use CSS3 columns</td>
  623. </tr>
  624. </tbody>
  625. </table>
  626. <h3>Backgrounds and gradients</h3>
  627. <table class="table table-bordered table-striped">
  628. <thead>
  629. <tr>
  630. <th class="span4">Mixin</th>
  631. <th>Parameters</th>
  632. <th>Usage</th>
  633. </tr>
  634. </thead>
  635. <tbody>
  636. <tr>
  637. <td><code>.#translucent > .background()</code></td>
  638. <td><code>@color: @white, @alpha: 1</code></td>
  639. <td>Give an element a translucent background color</td>
  640. </tr>
  641. <tr>
  642. <td><code>.#translucent > .border()</code></td>
  643. <td><code>@color: @white, @alpha: 1</code></td>
  644. <td>Give an element a translucent border color</td>
  645. </tr>
  646. <tr>
  647. <td><code>.#gradient > .vertical()</code></td>
  648. <td><code>@startColor, @endColor</code></td>
  649. <td>Create a cross-browser vertical background gradient</td>
  650. </tr>
  651. <tr>
  652. <td><code>.#gradient > .horizontal()</code></td>
  653. <td><code>@startColor, @endColor</code></td>
  654. <td>Create a cross-browser horizontal background gradient</td>
  655. </tr>
  656. <tr>
  657. <td><code>.#gradient > .directional()</code></td>
  658. <td><code>@startColor, @endColor, @deg</code></td>
  659. <td>Create a cross-browser directional background gradient</td>
  660. </tr>
  661. <tr>
  662. <td><code>.#gradient > .vertical-three-colors()</code></td>
  663. <td><code>@startColor, @midColor, @colorStop, @endColor</code></td>
  664. <td>Create a cross-browser three-color background gradient</td>
  665. </tr>
  666. <tr>
  667. <td><code>.#gradient > .radial()</code></td>
  668. <td><code>@innerColor, @outerColor</code></td>
  669. <td>Create a cross-browser radial background gradient</td>
  670. </tr>
  671. <tr>
  672. <td><code>.#gradient > .striped()</code></td>
  673. <td><code>@color, @angle</code></td>
  674. <td>Create a cross-browser striped background gradient</td>
  675. </tr>
  676. <tr>
  677. <td><code>.#gradientBar()</code></td>
  678. <td><code>@primaryColor, @secondaryColor</code></td>
  679. <td>Used for buttons to assign a gradient and slightly darker border</td>
  680. </tr>
  681. </tbody>
  682. </table>
  683. </section>
  684. <!-- COMPILING LESS AND BOOTSTRAP
  685. ================================================== -->
  686. <section id="compiling">
  687. <div class="page-header">
  688. <h1>Compiling Bootstrap with LESS</h1>
  689. </div>
  690. <div class="alert alert-info">
  691. <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.
  692. </div>
  693. <h2>Tools for compiling</h2>
  694. <div class="row">
  695. <div class="span4">
  696. <h3>Node with makefile</h3>
  697. <p>Install the LESS command line compiler globally with npm by running the following command:</p>
  698. <pre>$ npm install -g less</pre>
  699. <p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
  700. <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>
  701. </div><!-- /span4 -->
  702. <div class="span4">
  703. <h3>Command line</h3>
  704. <p>Install the LESS command line tool via Node and run the following command:</p>
  705. <pre>$ lessc ./lib/bootstrap.less > bootstrap.css</pre>
  706. <p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p>
  707. </div><!-- /span4 -->
  708. <div class="span4">
  709. <h3>Javascript</h3>
  710. <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>
  711. <pre class="prettyprint">
  712. &lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
  713. &lt;script src="/path/to/less.js"&gt;&lt;/script&gt;
  714. </pre>
  715. <p>To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.</p>
  716. </div><!-- /span4 -->
  717. </div><!-- /row -->
  718. <div class="row">
  719. <div class="span4">
  720. <h3>Unofficial Mac app</h3>
  721. <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>
  722. <p>If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p>
  723. </div><!-- /span4 -->
  724. <div class="span4">
  725. <h3>More Mac apps</h3>
  726. <h4><a href="http://crunchapp.net/" target="_blank">Crunch</a></h4>
  727. <p>Crunch is a great looking LESS editor and compiler built on Adobe Air.</p>
  728. <h4><a href="http://incident57.com/codekit/" target="_blank">CodeKit</a></h4>
  729. <p>Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.</p>
  730. <h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4>
  731. <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>
  732. </div><!-- /span4 -->
  733. </div><!-- /row -->
  734. </section>
  735. <!-- Footer
  736. ================================================== -->
  737. <footer class="footer">
  738. <p class="pull-right"><a href="#">Back to top</a></p>
  739. <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>
  740. <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>
  741. <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>
  742. </footer>
  743. </div><!-- /container -->
  744. <!-- Le javascript
  745. ================================================== -->
  746. <!-- Placed at the end of the document so the pages load faster -->
  747. <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
  748. <script src="assets/js/jquery.js"></script>
  749. <script src="assets/js/google-code-prettify/prettify.js"></script>
  750. <script src="assets/js/bootstrap-transition.js"></script>
  751. <script src="assets/js/bootstrap-alert.js"></script>
  752. <script src="assets/js/bootstrap-modal.js"></script>
  753. <script src="assets/js/bootstrap-dropdown.js"></script>
  754. <script src="assets/js/bootstrap-scrollspy.js"></script>
  755. <script src="assets/js/bootstrap-tab.js"></script>
  756. <script src="assets/js/bootstrap-tooltip.js"></script>
  757. <script src="assets/js/bootstrap-popover.js"></script>
  758. <script src="assets/js/bootstrap-button.js"></script>
  759. <script src="assets/js/bootstrap-collapse.js"></script>
  760. <script src="assets/js/bootstrap-carousel.js"></script>
  761. <script src="assets/js/bootstrap-typeahead.js"></script>
  762. <script src="assets/js/application.js"></script>
  763. </body>
  764. </html>