Zero-Basic Bootstrap tutorial (3) and bootstrap tutorial

Zero-Basic Bootstrap tutorial (3) and bootstrap tutorial

What is Bootstrap?

Bootstrap is a front-end framework used to quickly develop Web applications and websites. Bootstrap is based on HTML, CSS, and JAVASCRIPT.

History

Bootstrap was developed by Mark Otto and Jacob Thornton of Twitter. Bootstrap is an open-source product released on GitHub in August 2011.

Write here, this article learns Bootstrap from scratch (3) I want to write the following content:

1. Make a small summary based on my understanding of Bootstrap.

2. Perform UI beautification and code optimization for the Bootstrap (2) Example from scratch, mainly to explain how I made the desired effect.

3. it is better to teach people to fish than to teach them to fish. (because you are a newbie, writing something may be more suitable for beginners ), this section describes the pitfalls encountered during code writing and points of attention.

Not to mention nonsense. Let's start:

I. Summary of Bootstrap

Based on the official documentation (http://v3.bootcss.com/) of Bootstrap, Bootstrap is divided into three main parts: CSS style, component, Javascript plug-in.

First, make it clear that Bootstrap is a framework, which means you can use it directly instead of creating the wheel yourself. So we need to clarify two points: What kind of wheels are these wheels and how to use them.

1. CSS style:This section describes the global style of the raster system and Bootstrap. Set the Class value.

1.1 grid system:

Let us easily implement the HTML page layout (http://v3.bootcss.com/css/#grid ).

I think the raster system is very important. Because the layout of HTML pages is a very important and cumbersome task (you can take a look at the introduction of layout in W3School), and you need to consider the compatibility of different browsers and devices.

The raster system greatly simplifies everything. Open the above connection to the raster system and you will find that you only need to assign the corresponding value to the Class attribute of the HTML Element Based on the desired effect, you can also set different display effects for devices of different screen sizes.

　1.2 Bootstrap global style:

That is, how Bootstrap beautifies common HTML elements (such as DIV, Button, P, Table, and Img. You can get the desired effect by assigning values to the Class attribute of the HTML element.

The simplest example is as follows:

As shown in, Bootstrap allows you to change the value of the class of the Button element by changing the size of the Button, without having to modify the css file or embed the style value into the element.

2. components:In my opinion, the component is Bootstrap which combines some elements (HTML elements and Javascript code) into components and provides many useful icons. These components are commonly used in HTML development. Set the Class value. Http://v3.bootcss.com/components)

The simplest example is as follows:

As shown in, when we need to implement the navigation function. Find the corresponding components in Boostrap and assign the corresponding class, ul, and li values according to the code template.

3. Javascript plug-in: I think the Javascript plug-in of Bootstrap is the "Wheel" that encapsulates common webpage interaction functions ". You only need to set the class attribute and data attribute to implement common webpage interaction functions, instead of writing a lot of javascript code yourself.

First of all, in an episode, new users may mistakenly think that "javascript" is closely related to "java" and may even think that javascript is a variant of java. In fact, this is not the case. javascript is a scripting language developed by Netscape and applied to the Internet. In fact, its first name is "livescript ", after that, Netscape reached a cooperation with Sun (the company that invented Java, and later acquired by Oracle). At that time, the Java language was very popular and famous, rename livesrept to javascript. So some people are joking: the difference between "Java" and "Javascrip" is like the difference between "Lei Feng" and "Leifeng Tower.

As we know, Javascript exists to enable webpage interaction. Therefore, the rich Javascript plug-ins on bootsrept allow you to easily implement common web page interaction functions without putting your focus on "Making wheels.

As shown in, using the Bootstrap carousel plug-in (http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html, Bootstrap's official documentation here is not translated into Chinese, runoob has a very detailed Chinese translation, and can modify the code submitted online to observe the effect, strongly recommended). You can easily implement the image carousel function used by many websites. Here, you only need to assign the corresponding class and image src values based on the tutorial in the above link, and do not even set the data value.

Ii. Learn Bootstrap from scratch (2) UI beautification and code optimization

Is the effect achieved in the previous tutorial:

We can see the following shortcomings that need to be corrected:

(1) Click a student to display the information, and the information is not in the selected status. (When you click a button at the beginning, it will be in the selected status, but it is only the click effect of the button. When you click a blank space, the selected status will disappear)

(2) monotonous colors, not very beautiful.

(3) The layout needs to be adjusted. The information box shows the information we need and should be as big as possible. It is best to hide the unwanted box when it is displayed.

(4) In terms of code, Javascript code in Bootstrap (2) learned from scratch has been written in the HTML page, and duplicate code segments have been written into functions, this reduces the size of the Code. When I modify the code, I can directly modify the corresponding function, instead of finding a place or a place. Javascript code can be written to a JS file to separate HTML pages from Javascript code.

Technology Selection (to put it bluntly, think about how to use the existing things in the Bootstrap framework to achieve the desired results ):

1. Adjust the layout first, and adjust the information box and the student box together. The class box is displayed at the top.

Obviously, we only need to put the DIV of the Information Box and the DIV of the classmate box in the DIV of the same row, modify the class attribute value "col-md" related to the raster system. For example, we want them to display the ratio of, then the class attribute of the information box should have a col-md-8, and the student box should be a col-md-4.

It is worth noting that the front-end can never be a one-step development. Often, the initial code is not the perfect result we want and needs to be adjusted in detail. As an example, you must learn how to search, try, and make constant adjustments (subsequent adjustments will not be explained in the specific process ):

After the code is modified, the effect is as follows:

Obviously, only one Class is displayed in each row above, which is a waste of space. The following two parts are not aligned.

Delete "btn-group-vertical" in the class attribute of the DIV component above, and add the col-md-6 to the class attribute of tmp_button In the js Code. After this setting is observed, the first line has a strange indentation compared with the second line:

Undoubtedly, this change in appearance and layout is related to CSS. At this time, we can look at the specific CSS of the element.

Taking Chrome as an example:

Right-click this element and select Inspect, which is the review. You will find the corresponding code in the box on the right. Through comparison, we found that this is a margin-left problem. This attribute is the default in the bootstrap framework and is inherited from the upper-layer elements. Some are-1px and some are 0px, we only need to change it to the same one, for example, change it to 0px:

Modify the style attribute in the tmp_button in js Code and add "margin-left: 0px;". Some people may think that the font center is poor. You can add text-align: left, set the text on the button to start from the left.

Effect after correction:

2. Add the fold button to hide or open the class box. When you click "classmate" to show details, the button is automatically hidden, to save a large amount of space for display in the information box.

The add fold button can be implemented by referring to the http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html.

In addition, we can add a nice icon to the fold button. For more information, see http://v3.bootcss.com/components/#glyphicons.

When you click classmate to display detailed information, it is automatically hidden. You need to modify the Click Event of the classmate button, that is, the corresponding js Code.

We look at the Bootstrap folding plug-in usage http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html (this is better, this part of the official has not been translated), find the following content:

The cllapse and in values in the original Class attributes control the hide and display functions, then, you only need to modify the class attribute of the HTML element for the "show/hide" Operation in the click Event js Code of the button, add the following statement to the click function of the classmate button:

$ ("# CollapseOne"). attr ("class", "panel-collapse ");

3. Fixed the bug that "click a student to display the information without being selected.

By looking at the document, http://www.runoob.com/bootstrap/bootstrap-button-plugin.html, we can set the data-toggle attribute of the button to "button" to make it automatically display the selected state after clicking.

Therefore, we add the attribute data-toggle = "button" to the button of classmate ".

At this time, another problem occurs. When I want to click another classmate, the original vertex is still active. What should I do?

By looking at the http://www.runoob.com/bootstrap/bootstrap-buttons.html, the button class value has active, will present the selected state, that is, the above settings, that is, bootstrap has done this thing: when the data-toggle = "button" button is clicked, the active node is automatically added to the class, and the selected status is displayed. When the button is clicked again, automatically remove the active from the class to display the unselected status.

That is to say, we only need to perform this operation on our own. For example, when you click classmate, I can remove all the active buttons of the classmate button from the class attribute. After this operation, only the Button that I recently clicked is active.

Therefore, you only need to add the following statement to the click function of the classmate button:

Copy codeThe Code is as follows:
$ (". Btn-classmate"). attr ("class", "btn-default btn-classmate btn-info ");

The effect is as follows:

4. Beautify the button appearance

Find the CSS button section in bootstrap:

Http://www.runoob.com/bootstrap/bootstrap-buttons.html

Follow the tutorial to modify the color of the button. You can change the color as needed. The effect is as follows:

5. Separation of HTML pages and Javascript code

There are two steps:

Step 1: place the javascript code in the js file and link it to the HTML file.

Step 2: Reuse javascript or write code blocks with clear functions into a function and directly call the function.

Since both steps are relatively simple, anyone who has learned programming languages should. I will not start writing.

It is worth noting that when linking JS files, pay attention to the order.

For example, the code in the Bootstrap JS file is written based on Jquery and many Jquery functions are used. Therefore, the Jquery JS file must declare the link before the Bootstrap JS file.

Similarly, our JS files are based on Bootstrap, so after Bootstrap, the code will not work.

Finally, we will post the relevant code in international practice:

GetClassmate.html:

<!DOCTYPE html>
Script_getClassmate.js:

$(document).ready(function(){$.getJSON("resource/classmates.json",function(result){$.each(result, function(i, field){var tmp_button=$('<button type="button" style="border-radius: 0px; text-align:left; margin-left:0px" class="btn btn-default btn-class col-md-6 btn-success" data-toggle="button" chosen_state=0></button>').text(i);tmp_button.attr("title",i);$("#btn-group-vertical-classes").append(tmp_button);});$(".btn.btn-default.btn-class").click(function(){var tmp_chosen=Number($(this).attr("chosen_state"))^1;$(this).attr("chosen_state",String(tmp_chosen));showClassmates(result);$(".btn.btn-default.btn-classmate").click(function(){$(".btn-classmate").attr("class","btn btn-default btn-classmate btn-info");$("#collapseOne").attr("class","panel-collapse collapse");var selected_classmate=$(this).text();showClassmateDetail(result,selected_classmate);});});});})function showClassmates(result){$("#btn-group-vertical-classmates").empty();var chosen_list=new Array();$(".btn.btn-default.btn-class").filter(function(){judgeflag=false;if($(this).attr("chosen_state")=="1"){judgeflag=true;chosen_list.push($(this).text());}return judgeflag; });$.each(result,function(i,field){var chosen_list_x;for (chosen_list_x in chosen_list){if(chosen_list[chosen_list_x]==i){$.each(field,function(j,field2){var tmp_button=$('<button type="button" style="border-radius: 0px;" class="btn btn-default btn-classmate btn-info" data-toggle="button" chosen_state=0></button>').text(j);tmp_button.attr("title",j);$("#btn-group-vertical-classmates").append(tmp_button);});}}});}function showClassmateDetail(result,selected_classmate){var classmate_context_item;$("#context_div").empty();$.each(result,function(i,field){$.each(field,function(j,field2){if(j==selected_classmate){$.each(field2,function(k,field3){//alert(k);//alert(field3);classmate_context_item=k + ": " + field3;var tmp_p=$('<p></p>').text(classmate_context_item);$("#context_div").append(tmp_p);});}});});}
Classmates. json:

{"Class 001": {"Xiao Wang": {"Gender": "Male","Age": "18","Interest": "Football","Hometown": "Shanghai","Chinese": "78","Math": "90","English": "66","Physics": "81","Chemistry": "88","History": "69","Geography": "92"},"Xiao Li": {"Gender": "Male","Age": "20","Interest": "Basketball","Hometown": "Beijing","Chinese": "98","Math": "77","English": "97","Physics": "72","Chemistry": "73","History": "88","Geography": "81"}},"Class 002": {"Xiao Cai": {"Gender": "Female","Age": "19","Interest": "Dance","Hometown": "Gaoxiong","Chinese": "93","Math": "80","English": "92","Physics": "82","Chemistry": "77","History": "89","Geography": "83"}},"Class 003": {"Xiao Ma": {"Gender": "Male","Age": "18","Interest": "Reading","Hometown": "Taibei","Chinese": "91","Math": "93","English": "96","Physics": "97","Chemistry": "100","History": "94","Geography": "92"}},"Class 005": {"Xiao Zhang": {"Gender": "Male","Age": "20","Interest": "Running","Hometown": "Guangzhou","Chinese": "67","Math": "70","English": "66","Physics": "80","Chemistry": 68,"History": "79","Geography": "93"}}}
The above is the Bootstrap zero-Basic getting started tutorial (3) introduced by xiaobian. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!