Start a project again with Bootstrap and HTML5 boilerplate

Previously summary

1. Start a project with Bootstrap and HTML5 boilerplate
2. Use Bootstrap and HTML5 boilerplate to start a project continuation

In front, I created a simple homepage, but now I have a problem, I am not satisfied with the default style of Bootstrap, I want to be able to define the style according to their own needs, so in order to be able to modify the style, I need to understand the basic less syntax, more detailed information can refer to the official website

Less is a CSS preprocessor that uses CSS-like syntax to make a lot of improvements to CSS, but eventually it should be compiled into a CSS file that can be directly recognized by the browser, with the advantage of improving development speed and better organizing stylesheets. At the beginning of the project I have installed less, the installation method is the same, in node. js using the node Package management tool NPM to install, first, to http://nodejs.org/download/according to their own operating system to download the corresponding Node installation version, Since I am using Windows XP, I downloaded the node-v0.10.29-x86.msi fool-style installation package:

When the download is complete, double-click the file to install it, and of course I'm not installing node to use it, but to use node package management tool NPM,NPM is a NODEJS package management and Distribution tool, similar to Ruby's gem, in Node 0.4 and later, NPM has been returned to Into Node core, so no additional installation is necessary, check the NPM version to determine if the installation was successful:

Npm-v

The number printed is the version number, and frequently updating NPM is a good habit:

NPM update-g NPM

Once you've installed it, you can install less and install less in the Global environment:

NPM Install-g Less

If you remove the-G flag is a partial installation, it will be installed under the path to execute the command, usually choose the path of the project, because I will be in almost all projects using less development, so the global installation is not a problem, the installation can be done to check the less version:

The same print-out version number indicates that the installation is successful, you need to note that the command here is LESSC (not less), that is, the less Compiler, the time to compile the lesser file is also used this command, the current version and the official web surface consistent, if the version is lower, you can try the upgrade:

NPM Update Less-g

After the installation is ready to use, the suffix of the less file is. Less, you can quickly generate a less file by modifying the suffix name of a normal CSS file, but let's look at what the less features are:

Variable

Variables can be used to store the information prepared for multiple use, only need to be defined once can be reused, if the variable definition has been modified, then all the instances that use the variable will change, imagine, if the page used a lot of #abc this color value, one day want to modify all to #def, Then you just need to modify the value of a variable, instead of boring the search and replace. Use the @ sign as the variable name prefix in less, with the variable name and the variable value separated by: delimited, and finally used; End Variable declaration:

#428bca;

Using a variable is like using a CSS property value:

a {  color: @brand-primary;}

Save as a less file, such as Example.less, and then compile the CSS file with the following command:

LESSC example.less > Example.css

Do not have that greater than the symbol can also (I do not know what the difference between), compiled after the example.css as follows:

a {  color#428bca;}

Variables can be arbitrarily used, and in general, the later declared variable overrides the previously declared value, or it can be used before declaring the variable, and the variable declaration is advanced. Find the Variables.less file in the Bootstrap less file (the path in this project is less/bootstrap/ variables.less), you can see the declaration of a lot of variables, feel free to modify the values inside the variables, and then recompile to customize the Bootstrap style.

Nesting rules

Using nesting makes it easier to organize style sheets under the same module, for example, the following is the style of the NavBar module:

. Navbar-nav { ... } . Navbar-nav > Li { ... } . Navbar-nav > li > A { ... } . Navbar-nav > li > A:hover,.navbar-nav > li > A:focus { ... }

Write repeatedly. Navbar-nav. Even if the copy and paste also makes people feel nauseous, fortunately, in less can use braces nested syntax:

. Navbar-nav { ...  > Li { ...    > A { ...      &:hover,      &:focus {...}}}  

The resulting CSS file is consistent with the above, and you can see that the use of nested rules improves the efficiency of writing styles, although the compiled CSS style files do not change substantially, but less files can be easier to write and maintain.

&Character is the parent element reference, where & is the equivalent of a reference navbar-nav > li > a , as above, using the parent element reference can simplify the writing of pseudo-class, pseudo-element style, and the selector can also be swapped:

. main {  . Content {    width: 70%;  }  . Content & {    width: 100%;  }  . Content & {    . & {      color: Pink;}    }  }

Generate the CSS code as follows:

. Main. Content {  width70%;} . Content. Main {  width100%;} . Both. Content. Main {  colorpink;}

can also be used to create multi-class selectors (cascading selectors):

. Collapse {  &.in {    display: Block;  }}

Generate the CSS code as follows:

. collapse.in {  displayblock;}

The selector selects elements that have the same two class at the same time.

The variables declared inside the nesting are local variables, which cannot be used by an environment other than the nested set:

a {  color: @brand-primary;  #428bca;} Div {  background-color//nameerror:variable @brand-primary is undefined}

Similarly, when you modify a variable locally, there is no effect on the environment outside the nesting:

#428bca; a {  color//#c1ba62  #c1ba62;} Div {  background-color//#428bca}

Another way to play is that this project has introduced the Modernizr.js script, which detects the features of the browser when the page is loaded, and adds many classes to the HTML element based on browser support and unsupported features:

This is the effect I see with Chrome 24.0 open, I can see that the browser support for these features are good, for unsupported features preceded by a no-prefix, such as CSSTRANSFORM3D is not supported, so write the style can be written as follows:

Div {  //Style when 3d transforms are supported  . No-csstransform3d & {    //styles not supported for 3d transformations /c17>  }}

Of course, this example is not very appropriate!

Mixed

Hybrid (mixin) refers to a reusable piece of code, the most common application is to handle browser prefixes for experimental CSS properties, such as I want to use the Transition (transition) attribute, in order to be compatible with more mainstream browsers, I might write:

-webkit-transition All . 2s ease-in-out;        transition All . 2s ease-in-out;

That's all I'm going to have to do with the transition properties, which is a bit of a hassle, defined as a mixin, like this:

. Transition (@transition) {  -webkit-transition: @transition;          transition: @transition;}

When called, just pass in the parameters:

. Thumbnail {  . Transition(all. 2s ease-in-out);}

The advantage is that you do not have to write the same property of the various prefixes, again, if you no longer need to take a certain prefix of the property, then only need to modify the definition of the mixin and then recompile again OK, of course, the combination of the power far more than that.

Operation

In the less world, you can perform mathematical operations, such as using functions to deepen the value of a color:

a:hover {  darken (@link-color, 15%);}

You can also perform common arithmetic:

{  padding-top: ((@navbar-height-@line-height-computed)/2);  padding-bottom: ((@navbar-height-@line-height-computed)/2);}

Import file

Using the import file feature, you can separate less files into different module components, and then import the less files that need to be imported into a single master and file, and then compile them into a separate CSS style file, such as less/bootstrap/bootstrap.less 文件中可以看到 :

//Core variables and mixins@import "variables.less"; @import "mixins.less"; //Reset and Dependencies@import "normalize.less"; @import "print.less"; @import "glyphicons.less";

In general, variables, mixins, and reset/are then reset, followed by other modules.

These are some of the basic functions of less, after the clear to modify the style of Bootstrap, but in the meantime Bootstrap has been upgraded to 3.2.0 version, so I decided to keep up with the trend, will Bootstrap The relevant files have been updated to the latest official version (because the style file has not been edited before, delete and replace it directly). Back to that lovely three-column content bar:

<div class="Container"> <div class="Row"> <div class="Col-sm-4"> welcome!Suspendisse et arcu felis ...</p> <p><a href="#">See our Portfolio</a></p> </div> <div class="Col-sm-4"> Recent UpdatesSuspendisse et arcu felis ...</p> <p><a href="#">See what ' s new!</a></p> </div> <div class="Col-sm-4"> Our TeamSuspendisse et arcu felis ...</p> <p><a href="#">Meet the team!</a></p> </div> </div><!--end Row--</div><!--end Container--

Bootstrap defines a class of 4 classes to accommodate different screen resolutions, prefixed by COL-XS,COL-SM,COL-MD,COL-LG, col-xs means that even the following small screen floats and renders as a grid style, COL-SM Indicates that only the small screen and above will be rendered as a grid style, and on the ultra-small screen The following will not float, but the full line, similar COL-LG column will only float on the big screen, on the various screen resolution of the breakpoint in bootstrap/variables.less has a detailed definition.

Because I don't want to use class like col-sm-4, so I'm going to replace these classes first, and to avoid naming conflicts with Bootstrap, I prefix the custom class, which doesn't mean anything:

<div class="Container"> <div class="Row"> <div class="X-column"> welcome!Suspendisse et arcu felis ...</p> <p><a href="#">See our Portfolio</a></p> </div> <div class="X-column"> Recent UpdatesSuspendisse et arcu felis ...</p> <p><a href="#">See what ' s new!</a></p> </div> <div class="X-column"> Our TeamSuspendisse et arcu felis ...</p> <p><a href="#">Meet the team!</a></p> </div> </div><!--end Row--</div><!--end Container--

First in the less folder to create a new main.less file, import bootstrap.less, it is equivalent to all bootstrap less files are imported, and then import a later one of their own created less file, called Custom.les S bar:

@import "bootstrap/bootstrap.less"; @import "costom.less";

Enter the following code in the custom.less:

. X-column {  . Make-sm-column(4);}

The Bootstrap predefined mixin are used here and then recompiled:

LESSC less/main.less Css/main.css

After compiling the relevant CSS as follows, you can see at the end of the MAIN.CSS:

. X-column {  positionrelative;  Min-height 1px;  Padding-left 15px;  Padding-right 15px;} @media (min-width:768px) {  . x-column {    floatleft;    width 33.33333333%;}  }

Since I added my own defined style, and I'm not happy to add more than one style file to a page (adding HTTP requests), I've incorporated the Bootstrap style and my own style into a style file, so I'm embarrassed to use BOOTSTRAP.CSS This file name, so I changed to MAIN.CSS. The content on the Index.html page also has to be updated, this can not forget:

<link rel= "stylesheet" href= "Css/main.css" >

The end result is the same as using the Col-sm-4 class, why do you do it? So if I want a content bar full of rows instead of three columns, I just need to modify the less file instead of modifying the HTML:

. X-column {  . Make-sm-column(12);}

As simple as this, refer to Bootstrap's mixins file for more information.

Resource List

• Bootstrap
• HTML5 boilerplate
• Less
• Modernizr
• node. js