What is Bootstrap?
Bootstrap is a front-end framework for the rapid development of web applications and websites. 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.
Having written this article, I want to write the following contents of this article:
1. Based on my understanding of Bootstrap, I will make a small summary.
2. I will beautify and optimize the UI and code for the examples of learning Bootstrap (2) from scratch, mainly to talk about how I made the effect I wanted.
3. It is better to teach people how to fish than to teach people how to fish. Use your own examples (because you are also a novice, and what you write may be more suitable for beginners), and talk about the pitfalls encountered during the code writing process and points that need to be paid attention to.
Without further ado, let’s start:
1. A little summary of Bootstrap
Based on the description of Bootstrap's official documentation (http://v3.bootcss.com/), Bootstrap is divided into three large blocks: CSS style, components, and Javascript plug-in.
First of all, it is clear that Bootstrap is a framework, which means that if others make wheels, you can use them directly, so as not to build wheels by yourself. So we need to clarify two points: what kind of wheels are these wheels and how to use them.
1. CSS style: It mainly introduces the global style of the raster system and Bootstrap. Implemented by setting the value of Class.
1.1 Grid system:
This allows us to easily 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 an important and cumbersome task (you can take a look at the introduction to layout in W3School http://www.w3school.com.cn/html/html_layout.asp, look at the code in the example and you will understand), and the compatibility of different browsers and devices needs to be taken into account.
The raster system has greatly simplified this. Open the above connection about the grid system, and you will find that you only need to assign the corresponding value to the HTML element Class attribute according to the effect you want to achieve, and you can also set different effects to devices of different screen sizes.
1.2 Bootstrap global style:
That is how Bootstrap beautifies commonly used HTML elements (eg: DIV, Button, P, Table, Img, etc.). By assigning the corresponding value to the Class attribute of the HTML element, you can get the desired effect.
Let's give the simplest example:
As shown in the above figure, Bootstrap allows you to change the class value of the Button element to change the size of the button without having to trouble modify the css file or embed the style value of the element.
2. Component: I think the component is Bootstrap that combines some elements (HTML elements and Javascript code) into components, and provides many very good-looking and practical icons. These components are basically commonly used in HTML development. Implemented by setting the value of Class. (http://v3.bootcss.com/components/)
Let's give the simplest example:
As shown in the figure above, 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 your own needs.
3. Javascript plug-in: I think Bootstrap's Javascript plug-in is the "wheel" that encapsulates common web interaction functions. You only need to set the class attribute and data attribute to implement commonly used web interaction functions without having to write a lot of javascript code yourself.
First of all, let’s talk about a small episode. Newbies may mistakenly think that “javascript” and “java” have a deep connection, 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 for the Internet. In fact, its first name is "livescript". Later, Netscape reached a cooperation with Sun (that is, the company that invented Java, which was later acquired by Oracle). At that time, the Java language was at its peak and was very famous. In order to ride the ride, it changed its name to Javascript. So much so that some people joked: the difference between "Java" and "Javascript" is the same as the difference between "Lei Feng" and "Lei Feng Tower".
Back to the topic, we know that Javascript exists to give web page interaction capabilities. Therefore, the rich Javascript plug-ins on Bootsript can make you conveniently implement commonly used web interaction functions without having to focus on "making wheels".
As shown in the figure above, using Bootstrap's carousel plug-in (http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html, the official Bootstrap document is not translated into Chinese here, but there is a very detailed Chinese translation on runoob, and you can modify the code online to submit the observation effect, which is highly recommended). You can easily implement the picture carousel function that many websites now use. Here you only need to assign the corresponding class and image src values according to the tutorial in the above link, and you don’t even need to set the data value.
2. Beautify and optimize the UI and code for the examples of learning Bootstrap (2) from scratch
The following figure shows the effects achieved in the previous tutorial:
We can see that there are the following shortcomings that need to be corrected:
(1) Click on the specific classmate and display their information, and it is not selected. (When you click at the beginning, you will be in the selected state, but that is just the button click effect. If you click the blank space, the selected state will disappear)
(2) The colors are monotonous and not very beautiful.
(3) The layout needs to be adjusted. The information box is the place where we need information and should be as large as possible. It is best to hide the unnecessary box when it is displayed.
(4) For the code, the Javascript code in Bootstrap (2) from scratch is written in the HTML page, and there are duplicate code segments. The duplicate code segments should be written into functions, which can reduce the code size. When modifying the code, I can just modify the corresponding function directly, without looking for one place at a time. Javascript code can be written into JS files to separate HTML pages and Javascript code.
Technical selection (inclinically speaking, it is to think about how to use what is already in the Bootstrap framework to achieve the desired effect):
1. First adjust the layout, adjust the information box and the class box together, and display the class box on the top.
Obviously, we only need to place the DIV where the information box is located and the DIV of the class box in the same row in the DIV, and modify the class attribute value "col-md" related to the grid system to achieve it. For example, if we want them to display a ratio of 2:1, then the class attribute of the information box should have col-md-8, while the class box should be 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 carefully. As an example, everyone should learn to search by themselves, try and make continuous adjustments (the subsequent adjustments will not be explained in the specific process):
After we modify the code, the effect presented is as follows:
Obviously, only one Class is displayed on each line above, which is a bit of a waste of space. The two parts below are not aligned.
Delete the "btn-group-vertical" in the class attribute of the DIV component above, and add col-md-6 to the class attribute of tmp_button in the js code. In addition, it is observed that after setting this, the first line has a strange indentation compared to the second line:
There is no doubt that this kind of appearance and layout changes are related to CSS. At this time, we can take a look at the specific CSS of the element.
Take Chrome as an example:
Right-click this element and select Inspect, which means review. You will find the corresponding code in the box on the right. Through comparison, we found that it is a margin-left problem. This property is the default in the bootstrap framework and is inherited from the upper element. Some are -1px and some are 0px. We just need to change it to the same, for example, all are changed to 0px:
In the tmp_button in the js code, modify the style attribute and add "margin-left:0px;". Some people think that the font is not good to look in the center, so they can add text-align:left and set the text on the button to start from the left.
Corrected effects:
2. Add a fold button so that users can hide/open the class box through this button. When clicking classmate to display detailed information, it will automatically hide it to save a lot of space for the information box to display.
To add a fold button, you can refer to http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html.
In addition, we can add a good-looking icon to the folding button, and it can be easily achieved by referring to the tutorial http://v3.bootcss.com/components/#glyphicons.
When clicking on classmate to display detailed information, it will be automatically hidden. You need to modify the click event of the classmate button, that is, the corresponding js code.
We checked the usage of Bootstrap folding plugin http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html (this is better, the official part has not been translated yet), and found the following content:
It turns out that clapse and in values in the Class attribute control the hidden and display functions. Then we only need to modify the corresponding class attribute of the HTML element to perform the "show/hide" operation in the button's click event js code. So add the following statement to the click function of the classmate button:
$("#collapseOne").attr("class","panel-collapse collapse");
3. Fixed the bug that "click on specific students and display their information, and there is no selected state."
By checking the document, http://www.runoob.com/bootstrap/bootstrap-button-plugin.html, we set the data-toggle property of the button to "button", which can automatically render the selected state after clicking.
So we add the attribute data-toggle="button" to the button of classmate.
At this time, another problem occurred. I think when I click on other classmates next, the original click was still in the active state. What should I do?
By checking http://www.runoob.com/bootstrap/bootstrap-buttons.html, the selected state will appear when the class assignment of the button is active. That is to say, the above setting, that is, bootstrap does something like this: when the button data-toggle=”button” is clicked, the active is automatically added to the class, and the selected state is present. When clicked again, the active is automatically removed from the class, and the unselected state is presented.
In other words, we just need to do this operation ourselves. For example, when clicking classmate, I can remove all the active classmate buttons from the class attribute. After the click is completed, only the Button I clicked is in the active state.
Therefore, you only need to add such statements to the click function of the classmate button:
The code copy is as follows:
$(".btn-classmate").attr("class","btn btn-default btn-classmate btn-info");
The effect is as follows:
4. Beautify the appearance of the button
Find the CSS button section in bootstrap:
http://www.runoob.com/bootstrap/bootstrap-buttons.html
Following the tutorial to modify it, I have simply modified the color of the button here, and you can change it yourself according to your needs. The effect is as follows:
5. Separation of HTML pages and Javascript code
In fact, it is divided into two steps:
Step 1: Put the javascript code into the js file and link it in the HTML file.
Step 2: Write code blocks with javascript or clear functions into a function and call the function directly.
Since both steps are relatively simple, anyone who has learned a programming language should do it. I won't expand and write.
It is worth noting that when linking JS files, pay attention to the order.
For example, the JS file in Bootstrap is based on Jquery and uses many Jquery functions, so the JQuery JS file must declare the link before the JS file in Bootstrap.
Similarly, our JS file is based on Bootstrap, so it must be after Bootstrap, otherwise the code will not work.
Finally, let’s post the relevant code:
getClassmate.html:
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>getClassmate</title><!-- Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]><script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]--><style type="text/css">#btn-group-vertical-classes {overflow-y:auto; overflow-x:auto; height:100px;}#btn-group-vertical-classmates {overflow-y:auto; overflow-x:auto; height:500px;}button{text-overflow: ellipsis;overflow: hidden;border-radius: 0px;}#context_div{overflow-y:auto; overflow-x:auto; height:500px;}</style></head><body><div><div><div><h4 style="text-align:right;"><a id="collapse_a" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span aria-hidden="true"></span> Click this to show/hide class</a> </h4></div><div id="collapseOne"><div id="div1-classes-classmates"><div role="group" aria-label="..." id="btn-group-vertical-classes"><!-- where classes show--></div></div></div></div><br></br><div><div id="btn-group-vertical-classmates" role="group" aria-label="..."> <!-- where classmates show--><button type="button" style="border-radius: 0px;">Click class to show classmate.</button></div><div><div id="context_div"><p>Click classmate to show details.</p></div></div></div><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="js/jquery-3.0.0.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --><script src="js/bootstrap.min.js"></script><script src="js/script_getClassmate.js"></script></body></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" 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;" 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);});}});});});});});});});});});});classesmates.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 introduction tutorial for Bootstrap zero-basic introduction (III) introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!