Bootstrap basic learning

Bootstrap basic learning

Bootstrap is a front-end structure framework based on the raster structure (of course, JS and JQuery are also available). It has the advantage that the content framework can be quickly set up, media-based query can quickly adapt the created pages to different users, including mobile phones, tablets, and PCs. Of course, the new version does not support IE6, the support for IE8 is also very limited. After all, IE8 does not support HTML5 very well. (To be honest, I do not like IE6 myself ~ 8. For beginner players like me, compatibility is sometimes difficult, not only for projects, but also for interviews. If there are any mistakes, you can check the internet. Make a complaint. The meeting will continue !!!)

I don't have much gossip to talk about. I started to summarize my BS notes during this time!

1. In terms of structure content, BS basically controls the structure content by class. For example, the structure control is

?

1 2 3 4 5 6 7 8

<Div class = "container"> <Div class = "row"> <Div class = "col-md-4 col-xs-6"> In the class name of this div, it is controlled by the col-md-4, the two class names of the col-xs-6 to control the width of his frame; col represents the grid, md represents the width of the client display is pc screen, similarly, xs indicates that the client display is a super small screen, that is, a mobile phone screen. represents the length of the grid, which means that the width of the screen is four grids, the mobile phone end has 6 grids in width. Generally, a div can be divided into up to 12 grids. Therefore, his brother div has 8 grids under the middle screen! </Div> <Div class = "col-md-8 text-muted"> in the class name of this div, throwing the col-md-8 doesn't say, let's say text-muted. this class controls the font color of the content under this div. When you download BS css to the local, you search for text-muted in css my file, we can see that his definition only has color, and other class names with him define different colors respectively. </div> </Div> </Div>

2. after the structure is finished, let's talk about some specific components on the page. Let's talk about navigation first, originally, we made our own navigation and made up of a basic inline ul (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>

However, in BS, the class nav is implemented, but the class nav needs to be used together with other classes to make the page effect take effect, for example, nav-pills and nav-tabs, for vertical navigation, add nav-stacked to the class name.

?

1 2 3 4 5 6 7

<Ul class = "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. after finishing the navigation bar, let's talk about the drop-down menu. The drop-down menu in BS depends on a js file that comes with it, and its js also relies on JQuery. Therefore, these two files are essential. It is worth noting that the code of this drop-down menu is a bit complicated. The data-toggle = "dropdown" in the button must be the same as the div class name in the outer layer.

?

1 2 3 4 5 6 7 8 9 10 11 12

<Div class = "dropdown"> <Button class = "btn-default dropdown-toggle" type = "button" id = "dropdownMenu1" data-toggle = "dropdown"> Drop-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 item </a> </li> <Li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> drop-down menu item </a> </li> <Li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> drop-down menu item </a> </li> <Li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> drop-down menu item </a> </li> </Ul> </Div>

4. it seems that we should talk about the form. In the Bootstrap framework, we have customized a class name 'form-control', that is, if these elements use the class name "form-control ", some design customization results will be achieved.

?

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"> Email: </label> <Input type = "email" class = "form-control" id = "exampleInputEmail1" placeholder = "Enter your email address"> </Div> <Div class = "form-group"> <Label for = "exampleInputPassword1"> password </label> <Input type = "password" class = "form-control" id = "exampleInputPassword1" placeholder = "Enter your email password"> </Div> <Div class = "checkbox"> <Label> <Input type = "checkbox"> remember the password </Label> </Div> <Button type = "submit" class = "btn-default"> enter email address </button> </Form>

The above is all the content of this article. I hope you will like it.