Bootstrap LESS

Introduction

Getting Bootstrap and Less CSS

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

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

What's included

Download Bootstrap and unzip the file. Bootstrap's Less components are located in the 'lib' directory. Since Bootstrap v1.4.0, nine less files are included. Let's take a look at what each of these nine files contains.

bootstrap.less

This is the main Less file. This file imports some other less files. This file contains no code.

forms.less

This Less file contains styles for form layouts and input types.

mixins.less

This Less file makes CSS code reusable.

patterns.less

This Less file contains CSS code for repeated user interface elements, which will not be overridden by the base styles in the scaffolding Less file.

reset.less

This Less file contains the CSS reset. It is an update of Eric Meyer's CSS reset. Resets for some HTML elements such as dfn, samp, etc. are exempted.

scaffolding.less

This Less file contains the basic styles needed to create the grid system, structural layouts, and page templates.

tables.less

This Less file contains styles for creating tables.

type.less

In this Less file, you can find typography-related styles. Styles for headings, paragraphs, lists, code, etc. are located in this file.

variables.less

This Less file contains variables for customizing the look and feel of Bootstrap.

How to use

To use it, include the following code in your HTML page:

Please note that less-1.1.5.min.js is not in the js folder; you need to download it and place it in the specified folder.

LESS variables and variable values, and usage guide

Hyperlinks

Grayscale colors

Accent colors

Buttons

Forms

Navbar

Form states and notifications

Bootstrap Mixins

Basic mixins

Basic mixins are essentially entire or partial code snippets. They are written like a CSS class and can be called anywhere.

.element {
  .clearfix();
}

Parametric mixins

Parametric mixins are very similar to basic mixins, the difference being that the former can accept parameters (by name), and parameters can have default values.

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

Easy to customize

Basically all of Bootstrap's mixins are saved in mixins.less, which is an excellent utility .less file. We can use its mixins in any .less file.

Therefore, you can either directly use existing mixins or define a new mixin.

Includes mixins

Utilities

Forms

Typography

Grid system

CSS3 properties

Backgrounds and gradients

How to compile

Node.js with a makefile

Run the following commands to install the LESS command-line compiler and uglify-js globally with npm:

$ npm install -g less uglify-js

After installation succeeds, run `make` in your Bootstrap root directory to compile the CSS.

In addition, if you have installed watchr, you can run `make watch`, which will automatically recompile Bootstrap each time you modify it. (Not required, but merely for convenience.)

Using JavaScript

Simply reference the less.js file (Download the latest Less.js) and reload the page.

The js file will compile less.

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

Command line

If you have already installed the Less command line, use the following command to compile:

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

If you want a compressed compilation, you can use the --compress command.

Less Mac app

Although unofficial, there is a useful Less Mac application available for compiling.

Click here to download all HTML, CSS, JS, and image files used in this tutorial.