Bootstrap Basic Learning

Bootstrap is a grid-based front-end structure (and of course there are js,jquery), its advantage is that the content framework can be quickly set up, based on the media query can make the page quickly adapt to different users, whether it is mobile phones, tablets, or PCs, basically can be adaptive, Of course, the new version has started not to support IE6, IE8 support is also very limited, after all, IE8 to HTML5 support is not very good, (to tell the truth, I do not like ie6~8, for me this beginner, compatibility is sometimes really arduous, not only the project to use, even the interview to use, there is no mistake, Met, the Internet to check not on the line. A complaint, a meeting or a meeting!!!)

Gossip does not say much, start summarizing yourself this time BS notes!

1. In terms of structural content, BS control of the structure content is basically a class to control, such as the control of the structure is

?

1 2 3 4 5 6 7 8

<div class= "Container" > <div class= "Row" > <div class= "col-md-4 col-xs-6" > The class name of this Div, is made up of col-md-4, Col-xs-6 the two class names to control the width of his frame; where Col represents the grid, MD on behalf of the client display width of the PC screen, the same XS on behalf of the client display for the Super small screen, that is, mobile phone screen; 4,6 represents the length of the grid, meaning that the width of the screen is 4 grid , in the mobile phone width of 6 grids, generally put a whole piece of div can be divided into 12 grids, so his brother Div under the screen is 8 grid! </div> <div class= "Col-md-8 text-muted" > The class name of this div, throw away col-md-8 don't say, Say text-muted. This class is to control the content font color under this div, when you download the BS CSS to the local, you in the CSS my file search text-muted, you will see his definition of only color, and his other class names are defined in different colors </div> </div> </div>

2. Structure above said, then say the specific page of some components, first talk about navigation, the original we made navigation by a basic inline UL composition (the following CSS can be implemented in BS),

?

1 2 3 4 5 6 7

<ul class= "List-inline" > <li>W3cplus</li> <li>Blog</li> <li>CSS3</li> <li>jQuery</li> <li>PHP</li> </ul>

In BS, however, there is a nav class to implement, but nav this class needs to be combined with other classes to make the page effect work, such as Nav-pills and nav-tabs, if vertical navigation is added to the class name nav-stacked

?

1 2 3 4 5 6 7

<ul class= "Nav nav-pill" > <li><a href= "# #" >Home</a></li> <li><a href= "# #" > Css3</a></li> <li><a href= "# #" >Sass</a></li> <li><a href= "# #" > Jquery</a></li> <li><a href= "# #" >Responsive</a></li> </ul>

3. Say the navigation bar again, the next pull menu, BS in the Drop-down menu to rely on its own a JS file to achieve, and its own JS also rely on jquery, so the two files are required. It is worth noting that the drop down menu code is somewhat complicated, and the data-toggle= "dropdown" in the button must be the same as the outer div class name.

?

1 2 3 4 5 6 7 8 9 of

<div class= "dropdown" > <button class= "btn btn-default dropdown-toggle" type= "button" id= "DropdownMenu1" data-toggle= "Dropdown" > Pull-down menu <span class= "Caret" ></span> </button> <ul class= "Dropdown-menu" Role= "Menu" aria-labelledby= "dropdownMenu1" > <li role= "presentation" ><a role= "MenuItem" tabindex= "-1" href= "#" > Drop-down menu items </a></li> <li role= "presentation" ><a role= "MenuItem" tabindex= "-1" href= "#" > Drop-down menu items </a></li> <li role= "presentation" ><a role= "MenuItem" tabindex= "-1" href= "#" > Pull-down menu item </a></li> <li role= "presentation" ><a role= "MenuItem" tabindex= "-1" href= "#" > Drop-down menu Items </a> </li> </ul> </div>

4. It seems to say that the form, in the bootstrap framework, by customizing a class name ' Form-control ', that is, if these elements use the class name "Form-control", will implement some design customization effect.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14-15 16

<form role= "Form" > <div class= "Form-group" > <label for= "exampleInputEmail1" > Mailbox:</label> < Input type= "email" class= "Form-control" id= "exampleInputEmail1" placeholder= "Please enter your email address" > </div> <div class= "Form-group" > <label for= "exampleInputPassword1" > Password </label> <input type= "Password" Form-control "id=" exampleInputPassword1 "placeholder=" Please enter your email password "> </div> <div class=" checkbox "> < label> <input type= "checkbox" > Remember password </label> </div> <button type= "Submit" class= "BTN" Btn-default "> Enter mailbox </button> </form>

        above is the entire contents of this article, I hope you can enjoy