Bootstrap 0 Basic Introductory Tutorials (iii) _JAVASCRIPT skills

What is Bootstrap?

Bootstrap is a front-end framework for rapid development of Web applications and Web sites. Bootstrap is based on HTML, CSS, and JAVASCRIPT.

History

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

Writing here, this is a zero-start learning bootstrap (3) I want to write the following:

1. Based on my understanding of bootstrap, make a small summary.

2. For the bootstrap (2) from the beginning of the UI landscaping and code optimization, mainly to talk about how I have to do what I want to effect.

3. Giving a person a fish is not as good as giving a person a fishing case (because he is also a novice, writing something that might be more suitable for beginners), talking about the pits encountered during code writing and the points to be noted.

Nonsense not much to say, the following begins:

A small sum of bootstrap

Based on the description of Bootstrap's Official document (http://v3.bootcss.com/), Bootstrap is divided into three chunks: CSS styles, components, JavaScript plug-ins.

The first thing to be clear: Bootstrap is a framework, meaning that someone else has made the wheel, you can use it directly, eliminating the need to build your own wheels. So we need to be clear about two points: what kind of wheels these wheels are, and how to use those wheels.

1. CSS style: It mainly introduces the global style of grid system and bootstrap. Implemented by setting the value of class.

1.1 Grid system:

Let's make it easy to implement the layout of HTML pages (http://v3.bootcss.com/css/#grid).

I think the grid system is very important. Because the layout of HTML pages is a very important and tedious task (look at W3school's introduction to layouts Http://www.w3school.com.cn/html/html_ Layout.asp, take a look at the code in the example, and take into account the compatibility of different browsers and different devices.

The grid system has greatly simplified all this. Open the connection to the grid system above, and you'll find that you can implement it by assigning values to the HTML element class attribute based on the effect you want to achieve, and you can also set up different effects for devices with different screen sizes.

　1.2 Bootstrap Global Style:

That is, how the bootstrap to the common HTML elements (Eg:div, Button, P, Table, IMG, etc.) is how to beautify. You can get the effect you want by assigning the corresponding value to the class attribute of the HTML element.

Let me give you one of the simplest examples:

As shown in the figure above, Bootstrap lets you change the value of the button element's class only by changing its size, without having to bother to modify the CSS file, or to embed the value of the style in the element.

2. Components: I think the component is bootstrap the elements (HTML elements and JavaScript code) are grouped together, become components, and provide a lot of nice and useful icons. These components are basically common in the HTML development process. Implemented by setting the value of class. (http://v3.bootcss.com/components/)

Let me give you one of the simplest examples:

As shown in the figure above, when we need to implement the navigation function. Find the corresponding components in the boostrap, according to the code template, in accordance with their own needs, assign the corresponding class and UL, Li value can be

3. JavaScript plugin: I think Bootstrap's JavaScript plugin is the "wheel" that encapsulates the common web-page interaction features. You just need to set the class attribute and the data property to achieve common Web page interactivity without having to write a lot of JavaScript code yourself.

First of all, the novice may mistakenly think that "JavaScript" and "Java" have a deep connection, even think of JavaScript is a variant of java. That's not true, JavaScript is the scripting language that Netscape developed for the Internet, but it was first named "LiveScript", and then Netscape and Sun (the company that invented Java, which was later acquired by Oracle) To achieve cooperation, when the Java language was high, famous, in order to ride the car, the livesript renamed JavaScript. So that some people joke: "Java" and "Javascrip" The difference is like "Lei Feng" and "Leifeng Pagoda," the same difference.

To get to the chase, we know that JavaScript exists to give Web interactive functionality. So, the rich JavaScript plugin on the bootsript makes it easy for you to implement commonly used Web interactive functions, instead of focusing on "making wheels".

As shown in the figure above, using Bootstrap's Carousel plugin (http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html, Bootstrap's official documentation is not translated into Chinese, Runoob has a very detailed Chinese translation, and can modify the online code to submit observation results, strongly recommended, you can easily realize now many sites are using the image of the carousel function. Here only need to according to the above link inside the tutorial, assign corresponding class and picture src value can be, even the data value is not set.

Second, from the Zero Start Bootstrap (2) Examples of UI beautification and code optimization

The following illustration is the effect implemented in the previous tutorial:

We can see that there are several shortcomings that need to be corrected:

(1) Click on the specific students, display their information, not in the selected state. (You first click, will be in the selected state, but that is only button click Effect, you click the blank, the status of the selected disappeared)

(2) Color monotonous, not very beautiful.

(3) Layout needs to be adjusted, the information box is to render the information we need, should be as large as possible, the best display of the time can not need to hide the box.

(4) For code, the JavaScript code from the zero-start bootstrap (2) is written in the HTML page, and there are duplicate code snippets, you should write a duplicate code snippet function, which can reduce the size of the code, and then a change in the code, I can directly modify the corresponding function on it, instead of a place to find a place. JavaScript code can be written to the JS file, the implementation of HTML page and JavaScript code separation.

Technology selection (straightforward is to think how to use the bootstrap frame in the existing things, to achieve the desired effect):

1, first adjust the layout, the information box and the classmate frame together, the class box is displayed on the top.

Obviously, we just need to put the information box div and classmate Box Div in the same row Div, and modify the grid system related to the class attribute value "COL-MD" can be achieved. For example, we want to let them 2:1 of the ratio display, then the information box class attribute should have col-md-8, and the classmate frame should be col-md-4.

It is noteworthy that the front-end can never be one-step development, often the first code is not the perfect result we want, need to be carefully adjusted. Take the following as an example, we should learn to search their own, to try, to constantly adjust (after the adjustment, the specific process will not be accounted for):

After we have modified the code, the rendering effect is as follows:

Obviously, each line shows only one class, which is a bit of a waste of space. The following two sections are not aligned.

Delete the "btn-group-vertical" in the class attribute of the above div component and add the col-md-6 to the Tmp_button class attribute in the JS code. In addition, after observing this setting, the first line has a strange indentation compared to the second line:

There is no doubt that this kind of appearance, layout class changes are related to CSS. At this time we can look at the elements of the specific CSS.

Take Chrome for example:

Click the right mouse button on this element, select inspect, or review, and you will find the appropriate code in the box on the right. Through the comparison, we found that the problem is margin-left, this attribute is the default in the bootstrap framework, from the top elements inherited from, some for the -1px, some 0px, we just need to change into the same, for example, all changed to 0px:

In the JS code in the Tmp_button, modify the style attribute, add "margin-left:0px;" Some people think the font is not good-looking, you can add Text-align:left, set the text on the button from the left.

After the correction of the effect:

2, add folding button, so that users can hide/Open the class box through this button, click Classmate Display details, automatically hidden, to the large number of space to the information box to display.

Add a folding button to refer to http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html to implement.

In addition, we can add a nice icon to the folding button, refer to the http://v3.bootcss.com/components/#glyphicons的教程就可以轻松实现.

Realization clicks classmate Display the detailed information, automatically hides, needs to modify classmate button's Click event, namely corresponding JS code.

Let's look at the usage of the bootstrap folding plugin http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html (This is better, the official part hasn't been translated yet) and find the following:

The cllapse and in values in the original class attribute control the hiding and display function, so we just need to modify the corresponding class attribute of the HTML element in the Click event JS Code of the button to perform the "Show/Hide" operation. Then add the following statement to the click function of the Classmate button:

$ ("#collapseOne"). attr ("Class", "Panel-collapse collapse");

3, fixed "click on specific students, display their information, there is no status in the selected" bug.

We set the button's Data-toggle property to "button" by looking at the document, Http://www.runoob.com/bootstrap/bootstrap-button-plugin.html, You can make it appear to be selected automatically when clicked.

So we add the attribute data-toggle= "button" to the Classmate button.

At this time there is another problem, I would like to click on the other classmate, the original point or in the active state, how to do?

By looking at http://www.runoob.com/bootstrap/bootstrap-buttons.html, the button's class assignment is active, which renders the selected state, that is, the above setting, That is, Bootstrap did one thing: When the button was clicked, it automatically added active to class, which was selected and, when clicked again, automatically removed active from class, Renders a state that is not selected.

In other words, we just do this on our own, for example, when I click Classmate, I can remove all of the classmate button's active from the class attribute, so that when I click on it, only the button I clicked on is in active state.

So, just add the statement to the click function of the Classmate button:

Copy Code code as follows:

$ (". Btn-classmate"). attr ("Class", "Btn Btn-default btn-classmate btn-info");

The effect of the following figure:

4, beautify the appearance of the button

Find bootstrap CSS about button parts:

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

According to the tutorial changes, I just simply modified the button color, we can according to the needs of their own change. The effect of the following figure:

5, HTML page and JavaScript code separation

In fact, it is divided into two steps:

The first step: the JavaScript code into the JS file, and in the HTML file link.

Step two: Reuse in JavaScript, or a code block with a well-defined function, write it into a function, and call the function directly.

Since these two steps are simpler, any learning programming language should be. I'm not going to start writing.

It is noteworthy that in the link to the JS file, you should pay attention to the order.

For example, bootstrap JS file, the inside code is based on jquery, using a lot of jquery functions, so jquery js file to bootstrap in the JS file before the declaration of links.

Similarly, our JS file is based on Bootstrap, so after bootstrap, otherwise the code will not work.

Finally international practice, paste the relevant code:

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;
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": "A", "interest": "Football", "Hometown": "Shanghai", "Chinese":  "Physics", "Math": "The", "English": "Yi", "chemistry": "Bayi", "History": "The", "Geography": "The", "Xiao Li": {"Gender": "Male", "Age": "The", "interest": "Basketball", "Hometown": "Beijing", "Chinese": "", "Math": "", "Chinese ":" "", "Physics": "The", "Chemistry": "The", "History": "The", "Geography": "Ba"}}, "Class 002": {"Xiao Cai": {"Gender" : "Female", "Age": "A", "interest": "Dance", "Hometown": "Gaoxiong", "Chinese": "", "Math": "", "English": "", "Phy Sics ":" "," Chemistry ":" "", "History": "", "Geography": "", "" Class 003 ": {" Xiao Ma ": {" Gender ":" Male "," age ":", "interest": "Reading", "Hometown": "Taibei", "Chinese": "The", "Math": "", "Chinese": "", "Physics": "The", "Ch Emistry ":", "History": "The", "Geography": "The" and "" Class 005 ": {" Xiao Zhang ": {" Gender ":" Male "," Age ":" The "," in Terest ":" Running "," HomEtown ":" Guangzhou "," Chinese ":", "" Math ":", "" Chinese ":" "," Physics ":" "," Chemistry ":", "History": "", "G Eography ': ' 93 '}}}

The above is a small set to introduce the bootstrap 0 basic Introductory Course (iii), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!