Use Bootstrap and HTML5 Boilerplate to start a project, html5boilerplate

Use Bootstrap and HTML5 Boilerplate to start a project, html5boilerplate

Prerequisites

Previously, I created a simple homepage, but now I have a problem. I cannot meet the default Bootstrap style and want to define the style as needed, to be able to modify the style happily, I need to first understand the basic Less syntax. For more details, refer to the official website.

Less is a CSS Preprocessor. It uses a syntax similar to CSS and makes many improvements to CSS. However, it should be compiled into a CSS file that can be directly recognized by the browser, the main advantage is that it increases the development speed and better organizes style sheets. I have installed Less in the early stage of the project. The installation method is the same. In node. js, use the Node package management tool npm.To install, first, go to the http://nodejs.org/download/ according to your own operating system to download the corresponding Node installation version, because I am using Windows XP, So I downloaded the node-v0.10.29-x86.msi silly installation package:

After the download is complete, double-click the file to install it. Of course, I installed Node not to use it, but to use the Node package management tool NPM, NPM is a Node. js package management and distribution tool, similar to Ruby's gem. In Node 0.4 and later versions, NPM has been included in the Node core, so no additional installation is required, check the NPM version to confirm that the installation is successful:

npm -v

The printed number is the version number. It is also a good habit to update NPM frequently:

npm update -g npm

After you confirm the installation, you can install Less. Install Less in the global environment:

npm install -g less

If the-g ID is removed, the local installation will be installed under the command execution path. Generally, the project path will be selected, because I will use Less development in almost all projects, so there is nothing wrong with the global installation. After the installation is complete, check the Less version:

Similarly, printing and publishing the document number indicates that the installation was successful. Note that the command here is lessc (not less), that is, Less Compiler. This command is also used to compile the Less file, the current version is the same as that on the official website. if the version is earlier, try to upgrade it:

npm update less -g

After the installation is complete, you can use it. The suffix of the Less file is. less: You can quickly generate a Less file by modifying the suffix of a common CSS file. However, let's take a look at some features of Less:

Variable

Variables can be used to store information that is prepared for multiple times and can be used repeatedly after being defined once. If the variable definition is modified, all instances that use the variable will change accordingly, imagine that if the page uses a lot of # abc Color values and you want to change them all to # def one day, you only need to modify the value of one variable, instead of boring search replacement. In Less, use the @ symbol as the prefix of the variable name. Use: to separate the variable name and variable value, and use; end the variable declaration:

@brand-primary: #428bca;

Using variables is like using a CSS property value:

a {  color: @brand-primary;}

Save as a Less file, such as example. less, and then compile it into a CSS file using the following command:

lessc example.less > example.css

It is okay not to have the value greater than the symbol (I don't know whether there is any difference). The compiled example.css is as follows:

a {  color: #428bca;}

Variables can be used arbitrarily. Normally, variables with the same name after declaration will overwrite the previously stated values, or they can be used before the declaration of variables. Find variables in the Less file of Bootstrap. less file (the path in this project is less/bootstrap/variables. less), you can see that there are a lot of variables in it, modify the variable values at will, and then re-compile to customize the Bootstrap style.

Nested rules

You can use nesting to organize style sheets under the same module more reasonably. 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 { ... }

Repeatedly writing. navbar-nav... is disgusting even if it is copied and pasted. Fortunately, the nested braces syntax can be used in Less:

.navbar-nav { ...  > li { ...    > a { ...      &:hover,      &:focus { ... }    }  }}

The CSS files generated after compilation are basically the same as those above. We can see that using nested rules improves the writing style efficiency, although the compiled CSS style files do not actually change, however, Less files can be easily written and maintained.

&It is the parent element quote, where & is equivalent to referencenavbar-nav > li > aAs shown above, the use of the parent element quote can simplify the compilation of pseudo-class and pseudo-element styles. In addition, you can change the selector:

.main {  .content {    width: 70%;  }  .content & {    width: 100%;  }  .content & {    .two & {      color: pink;    }  }}

The generated CSS code is as follows:

.main .content {  width: 70%;}.content .main {  width: 100%;}.two .content .main {  color: pink;}

It can also be used to create a multi-class selector (cascade selector ):

.collapse {  &.in {    display: block;  }}

The generated CSS code is as follows:

.collapse.in {  display: block;}

This selector selects elements with both classes.

The variable declared in the nesting is a local variable, which cannot be used in environments outside the nesting:

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

Similarly, after a local variable is modified, the environment outside the nested environment will not be affected:

@brand-primary: #428bca;a {  color: @brand-primary; // #c1ba62  @brand-primary: #c1ba62;}div {  background-color: @brand-primary; // #428bca}

Another method is that Modernizr has been introduced in this project. js script. This script detects the features of the browser when loading the page. According to browser support and does not support some features, many classes are added to the html element:

This is what I saw with Chrome 24.0. We can see that this browser supports these features very well. For unsupported features, There is a no-prefix, for example, csstransform3d is not supported, so you can write a style as follows:

Div {... // The style when 3d transformation is supported. no-csstransform3d & {... // The style when 3d transformation is not supported }}

Of course, this example is not very appropriate!

Hybrid

Mixin refers to a piece of code that can be reused. The most common application is to process browser prefixes for experimental CSS attributes. For example, I want to use the transition attribute, to be compatible with more mainstream browsers, I may write as follows:

-webkit-transition: all .2s ease-in-out;        transition: all .2s ease-in-out;

All the places where I use the transition property have to be written in this way. It is troublesome to define a mixin as follows:

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

You only need to input the following parameters during the call:

.thumbnail {  .transition(all .2s ease-in-out);}

The advantage is that you do not need to write the various prefixes of the same attribute repeatedly during writing. Similarly, if you do not need an attribute with a certain prefix in the future, you only need to modify the defined mixin and re-compile it again. Of course, the power of hybrid is far more than that.

Operation

You can perform mathematical operations in the Less world. For example, you can use a function to deepen a color value:

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

You can also perform common four arithmetic operations:

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

Import File

Using the import file function, you can separate Less files into different module components for separate storage, and then import all the Less files you need into a primary Less file, finally compiled into a separate CSS style file, suchThe less/bootstrap. less file shows:

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

Generally, variables and mixins are imported first, then the Reset/Reset style is performed, and other modules are followed.

The above are some basic features of Less. After knowing it, you can modify the Bootstrap style as you like. However, Bootstrap has been upgraded to version 3.2.0, so I decided to keep up with the trend, update all Bootstrap-related files to the latest official version (because you have not edited the style files before, simply Delete and replace them ). Return to the cute three-column content bar:

<div class="container">  <div class="row">    <div class="col-sm-4">      
Bootstrap defines four types of grid classes to adapt to different screen resolutions. They are prefixed with col-xs, col-sm, col-md, and col-lg, col-xs indicates that the image is floating and displayed as a grid even below the ultra-small screen, col-sm indicates that only the small screen and above will be displayed as a grid style, and the following will not float, but will occupy the whole line, similar col-lg columns will only float on the large screen, and breakpoints on various screen resolutions will be found in bootstrap/variables. there are detailed definitions in less.
Because I don't want to use classes like col-sm-4, I should replace these classes first. To avoid conflicts with Bootstrap naming, I added a prefix for the custom class, of course, this prefix does not mean anything:
<div class="container">  <div class="row">    <div class="x-column">      "x-column">      "x-column">      
Create a new main in the less folder first. less files, put bootstrap. importing less is equivalent to importing all the Bootstrap Less files, and then importing a self-created Less file named custom. less:
@import "bootstrap/bootstrap.less";@import "costom.less";
Enter the following code in custom. less:
.x-column {  .make-sm-column(4);}
Here we use the pre-defined mixin of Bootstrap and re-compile it:
lessc less/main.less css/main.css
The related CSS after compilation is as follows, which can be seen at the end of main.css:
.x-column {  position: relative;  min-height: 1px;  padding-left: 15px;  padding-right: 15px;}@media (min-width: 768px) {  .x-column {    float: left;    width: 33.33333333%;  }}
Because I have added my own styles and I am not happy to add multiple style files to a page (with HTTP requests added ), so I integrated the Bootstrap style and the style I defined into a style file, so I am embarrassed to use the bootstrap.css file name again, so I changed it to main.css. The content on the index.html page must be updated accordingly. You cannot forget this:
<link rel="stylesheet" href="css/main.css">
The final result is the same as using the col-sm-4 class. Why? In this way, if I want to fill the entire row with an internal column instead of a row with three columns, I only need to modify the Less file, instead of modifying the HTML:
.x-column {  .make-sm-column(12);}
For more information, see the mixins file of Bootstrap.
Resource list

  

 
   
Bootstrap
 
   
HTML5 Boilerplate
 
   
Less
 
   
Modernizr
 
   
Node. js

  

I wrote a <div class = "row"> </div> using bootstrap. How can I center this div in the entire browser window?
Vertical center? How is vertical center? Is it horizontally centered?
<Body> 

Html, css, and friends I am now using bootstrap to create a simple web page. How can I set aside a certain interval between the two sides of the browser navigation bar?
Bootstrap styles use hierarchical styles, that is, looking for them from the external layer. Therefore, you cannot directly write css styles on the navigation bar, which has a higher priority than hierarchical styles, you need to find the corresponding style modification in the css in the bootstrap source file.