Shulou(Shulou.com)06/01 Report--

This article mainly explains "what is the relationship between bootstrap and less". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the relationship between bootstrap and less".

In bootstrap, there are many threaded style components, which are written by less. Using bootstrap, there is no need for less,less to include a set of custom syntax and a parser to generate the corresponding css file.

Operating environment of this tutorial: Windows10 system, bootstrap3.3.7 version, DELL G3 computer

The relationship between bootstrap and less

In bootstrap, there are many threaded style components that are written by less, and you don't need to less to use bootstrap.

Bootstrap project architecture

Implement the layout system and content

1) supplement to the design of grid system: column sorting col-md-push-4

2) complete the contents of the cell

Style customization

Less

Modify bootstrap source code

Less

As a markup language, css has simple syntax and low difficulty in learning, but CSS needs to write a large number of codes that seem to have no logic, which is not convenient to maintain and expand, and is not conducive to reuse. The reason for these difficulties is that CSS is a non-procedural language without the concepts of variables, functions, SCOPE (scope) and so on.

LESS contains a set of custom syntax and a parser, according to which users define their own style rules, which will eventually be compiled through the parser to generate the corresponding CSS file.

   LESS does not cut out the original features of CSS, let alone replace CSS, but adds programming language features to CSS on the basis of the existing CSS syntax. Based on the syntax of CSS, less introduces functions such as variables, Mixin, operations and functions, which greatly simplifies the writing of CSS and reduces the maintenance cost of CSS.

Less can run on the Node or browser side.

Mode 1-run the less converter on the client side

   introduces xx.less into html, along with less.js, which is a less compiler that can be run in client browsers-- inefficient and not recommended

Method 2-run the less conversion program on the server-recommended

   1) download and install a server-side js interpreter-nodejs

   2) download the conversion program lessc of less file-- js script

   3) run the lessc converter on the server-side js interpreter to convert the .less files written by yourself into css files

A) you can use the conversion program on the command line

Node.exe lessc my.less my.css

B) use the conversion program in hbuilder

   4) in the html file, reference the compiled css file

II. Less Grammar Learning

Less fully supports css syntax

Lss supports both single-line and multiline comments, but only multiline comments are converted to css files

Less support variables (variable)

   @ variable name: value

   uses: selector {style: @ variable name}

Less supports style blending-referencing one style in another

.class1 () {.}. Class2 {. Class1.}

Parameter mixing

.class () (@ parameter 1J @ parameter 2,.) {.} .class2 {. Class (parameter 1, parameter 2);.}

Nesting rule

.class1 {... .class2 {}}

Result of conversion

.class1 {} .class1 .class2 {}

Less can perform arithmetic operations on variables and constants

Less provides dozens of application functions for styles

Lighten (color, luminance value): the percentage that brightens the established color

Darken (color, luminance value): darkens the specified color by a specified percentage

Floor (digital) logarithm rounded down

Ceil (number) logarithm is rounded up

Page import

Try to avoid using the @ import directive in the css file-it will increase the number of HTTP requests

   in order to split a style file into several small style files, written by multiple people at the same time, you can use @ import-less in less to import other less files, and the conversion will splice a large and complete css style file, so it is recommended to import other less files in less.

@ import "xx.less"

* * less file structure in large projects * *

Variable.less-- place all variables

Mixin.less-place all the mixtures

Reset.less-- place the HTML element reset style

Navbar.less-navigation bar related

Footer.less-footer related style

Js.less-A bunch of less files

Third, customize the style by modifying the less source file of bootstrap.

Remove unwanted styles, such as broadcast ads / modal boxes

   in the bootstrat.less file, comment out the unwanted @ import

Customize the default style of the required components, such as modifying the default background color of the navigation bar

   can modify the variables in the variables.less file.

Create new styles based on the default styles provided by bootstrap, such as customizing the style of divider in dropdown-deep customization of components

   modifies the less file corresponding to a component

Thank you for reading, the above is the content of "what is the relationship between bootstrap and less". After the study of this article, I believe you have a deeper understanding of what the relationship between bootstrap and less is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.