Bootstrap LESS

Brief introduction

Get Bootstrap and Less CSS

Bootstrap official website: http://getbootstrap.com/

Less official website: http://lesscss.org/

What is included in

Download Bootstrap, unzip the file. Less Bootstrap's components are located under the 'lib' directory. From Bootstrap v1.4.0 version since, it contains nine less files. Here we take a look at what each containing nine files.

bootstrap.less

This is the main Less file. The file import some other less files. The file does not contain any code.

forms.less

Less This file contains the layout of the form, the type of input box style.

mixins.less

This document lets Less CSS code can be reused.

patterns.less

Less This file contains the CSS code duplication of user interface elements will not be located scaffolding Less file basic style overrides.

reset.less

Less This file contains the CSS reset. This is Eric Meyer's CSS reset an update. Some HTML elements such as reset dfn, samp, etc. are exempt.

scaffolding.less

Less This file is saved to create the grid system, structured layout, the basic style that you want the page template.

tables.less

Less This file contains the styles created table.

type.less

Less can be found in this document typography styles. Headings, paragraphs, lists, and other styles of code inside the file is located.

variables.less

This file contains Less Bootstrap to customize the look and feel of variables.

how to use

If you want to use it, include the following code in your HTML page:

Please note, less-1.1.5.min.js not js folder, you need to download and put it in the specified folder.

LESS variables and variable values, and usage guidelines

Hyperlink

Gray color

Accent color

Push button

Form

Navigation Bar

Status and notification form

Bootstrap mixed

The basic mix

The basic mix essentially, is to include the entire or part of the code snippet. Wording similar to a CSS class, you can call anywhere.

.element {
  .clearfix();
}

Mixed with parameters

Mixing and mixing with basic parameters like, except that the former can receive parameters (by name), the parameters can have default values.

.element {
  .border-radius(4px);
}

Easy to customize

Substantially all of the mixing Bootstrap are stored in mixins.less, this is an excellent tool .less class file, we can mix them in any .less file.

Therefore, the direct use of existing or custom mix a new mix can be.

Comprising mixing

Utilities

Form

typesetting

Grid system

CSS3 properties

And gradient background

How to compile

Node.js with the makefile

Run the following command using npm install LESS command-line compiler and uglify-js in the global environment:

$ npm install -g less uglify-js

After successful installation, in the root directory of your Bootstrap run make to compile the CSS.

Also, if you have installed watchr, you can run make watch, so every time you modified Bootstrap, it will automatically recompile Bootstrap. (Must not run, do so just out of convenience.)

Using JavaScript

Simply references less.js file ( download the latest Less.js ) and reload the page.

js file will compile less.

<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="/path/to/less.js"></script>

Command Line

Less if you have installed the command line (Command Line), prototype to compile the following command:

$ lessc ./lib/bootstrap.less > bootstrap.css

If you want to compile a compressed, you can use --compress command.

Less Mac app

Although unofficial, but there is an available Less Mac application can be used to compile.

Click here to download the tutorial to use all the HTML, CSS, JS and image files.