Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
less.html 27.19 KiB
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
10 
    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
11 
    <!--[if lt IE 9]>
12 
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
13 
    <![endif]-->
14
15 
    <!-- Le styles -->
16 
    <link href="assets/css/bootstrap.css" rel="stylesheet">
17 
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
18 
    <link href="assets/css/docs.css" rel="stylesheet">
19 
    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
20
21 
    <!-- Le fav and touch icons -->
22 
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
23 
    <link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
24 
    <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/apple-touch-icon-72x72.png">
25 
    <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/apple-touch-icon-114x114.png">
26 
  </head>
27
28 
  <body data-spy="scroll" data-target=".subnav" data-offset="50">
29
30
31 
  <!-- Navbar
32 
    ================================================== -->
33 
    <div class="navbar navbar-fixed-top">
34 
      <div class="navbar-inner">
35 
        <div class="container">
36 
          <a class="brand" href="./index.html">Bootstrap</a>
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="">
57 
              <a href="./download.html">Download</a>
58 
            </li>
59 
          </ul>
60 
        </div>
61 
      </div>
62 
    </div>
63
64 
    <div class="container">
65
66 
<div class="alert">
67 
  <strong>Heads up!</strong> This page is still under construction and is missing plenty of documentation. Hang tight!
68 
</div>
69
70 
<!-- Masthead
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
================================================== --> <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> <div class="subnav"> <ul class="nav pills"> <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> </ul> </div> </header> <!-- BUILT WITH LESS ================================================== --> <section id="builtWith"> <div class="page-header"> <h1>Built with LESS</h1> </div> <div class="row"> <div class="span4"> <h3>Why LESS?</h3> <p>Bootstrap is made with LESS at it's 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> </div> <div class="span4"> <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> </div> <div class="span4"> <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> </div> </div> <div class="row"> <div class="span4"> <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&mdash;assign colors or pixel values as variables and change them once.</p> </div> <div class="span4"> <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> </div> <div class="span4"> <h3>Operations</h3> <p>Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.</p> </div> </div> </section> <!-- VARIABLES ================================================== --> <section id="variables"> <div class="page-header"> <h1>Bootstrap variables <small></small></h1> </div> <h3>Hyperlinks</h3> <table class="table table-bordered table-striped"> <thead> <tr> <th class="span2">Variable</th> <th>Value</th> <th>Usage</th> </tr>