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.
This article focuses on introducing Bootstrap's zero-basic introductory tutorial (2). The specific details are as follows:
Websites that frequently review information during the process:
http://www.w3school.com.cn/ This is a website established by the W3C Alliance to spread the W3C standard. There are many technologies on the web side, and you can view it as an encyclopedia of web technology.
http://v3.bootcss.com/ Needless to say, the official BootStrap3 document
http://www.runoob.com/ This is actually similar to W3school, but it is a little more complicated than W3school. A lot of the content is translated from the original W3C English website and the official English documents of the original BootStrap, but I feel that its translation quality is higher (because the first two websites were also translated to it bluntly), and some cases are easier to understand.
Without further ado, let's start:
(1) Clearly achieve the goals
As shown in the figure below, this is a simple website we want to implement. The layout is simple and there is no dazzling effect. However, it is necessary to implement a function: read relevant information from the Json file (you can check the above website for knowledge about Json) and display it on the website.
Json file content:
{"Class 001": {"Xiao Wang": {"Gender": "Male","Age": "18","Interest": "Football","Hometown": "Shanghai"},"Xiao Li": {"Gender": "Male","Age": "20","Interest": "Basketball","Hometown": "Beijing"}},"Class 002": {"Xiao Cai": {"Gender": "Female","Age": "19","Interest": "Dance","Hometown": "Gaoxiong"}},"Class 003": {"Xiao Ma": {"Gender": "Male","Age": "18","Interest": "Reading","Hometown": "Taibei"}},"Class 005": {"Xiao Zhang": {"Gender": "Male","Age": "20","Interest": "Running","Hometown": "Guangzhou"}}}Right now:
layout:
There are three major blocks: the left side of the first line is the class list, the right side of the first line is the name list of classmates, and the second line is the relevant information of classmates.
Function:
1. Click on a class in the class list to update which students in the class are dynamically in the class list, and can select the class.
2. Click on a classmate in the classmate list and dynamically display the classmate's information on the second line. Only one classmate's information can be displayed at a time.
(2) Techniques required for analysis
layout:
BootStrap: used to implement this simple two-row layout, as well as the check of Class columns, and scroll bars (some are easy to implement directly with BootStrap, while others cannot. How to know? Go to the above three websites to find and check)
Function:
Use Javascript and Ajax to achieve data acquisition and dynamic interaction (in a local refresh method).
(3) Technical selection analysis
1. Implement layout.
By looking up the documentation (http://www.runoob.com/bootstrap/bootstrap-grid-system-example3.html), I found that Bootstrap is laid out using a raster system. By setting specific class attributes for the div, I can achieve the layout effect I want. And you can set different effects on mobile phones, tablets, and desktop computers. The class attributes of HTML tags and what HTML tags are can be found on W3SCHOOL.
It is worth noting that the element's class attributes can have multiple class attributes.
Eg: <div role="group" aria-label="..." id="btn-group-vertical-classes">
Use "space" intervals between different attributes, believe me, this will allow you to easily write Javascript scripts and adjust CSS.
2. Realize vertical arrangement of Class numbers and multiple selections.
Check http://www.runoob.com/bootstrap/bootstrap-button-groups.html to know how to set up vertical button groups. That is, set the class of the DIV where the button group is located to btn-group-vertical, so that it becomes the container for storing the button group.
Check http://www.runoob.com/bootstrap/bootstrap-button-plugin.html and know how to make the button group check. Implementation is done by adding the data attribute data-toggle="buttons" to the DIV of the class attribute to btn-group.
3. Implement the button corners to be redefined from rounded corners to right angles, add scroll bars to the button group, and add restrictions to the text displayed on the button so that it does not exceed the button. The excess part is displayed as "...", and when the mouse moves and stops on the button, all text is displayed:
A small part (rounded corners become right angles, mouse hovering to display text) needs to be set directly in the HTML tag.
Most of the implementations are written with a CSS:
<style type="text/css">#btn-group-vertical-classes{overflow-y:auto;overflow-x:auto;height:150px;}#btn-group-vertical-classmates{overflow-y:auto;overflow-x:auto;height:150px;}button{text-overflow: ellipsis;overflow: hidden;border-radius: 0px;}</style>The <style> part of the code is placed in the head, that is, between <head> and </head>.
The general method is to first use the CSS selector to select the tag to set the CSS, and then set the corresponding style in the curly braces.
The so-called CSS selector is the "#btn-group-vertical-classes" and "button" in the above code, that is, a line of code on the curly braces. There are multiple methods for using the CSS selector, and you can find the relevant methods through the W3SCHOOL website.
Because CSS style sheets have three loading methods (CSS file; <head> tag, style attribute in HTML element, and the effective priority order is: "style on the element" > "style element on the file header" > "external style file", we also refer to BootStrap's CSS, so it involves overwriting issues, that is, some CSS styles are set in the <style> tag in the head, but they are not working (for example, the border-radius setting of button in the above <style> is not working). From the perspectives of "must work" and "the lowest coupling degree (that is, the most convenient modification)", two methods are recommended at this time:
<1> Write the style attribute directly in the element tag. This is the most preferred, so it will definitely work.
<2> Modify the BootStrap CSS file you linked to, once and for all, and add new elements in the future, without having to rewrite the style attribute one by one. This requires you to download the CSS file instead of referring to the link.
Since our page is very small, I took the method one.
4. Use Ajax to achieve data acquisition, interaction and dynamic loading.
Ask me how to use Ajax? Search on Baidu, or ask people who know front-end technology.
The most core thing about Ajax is that it can be refreshed partially without refreshing the entire page. Here we should first check the relevant documents on Ajax technology (the above three websites, as well as various Baidu). Since you want to get data from the Json file, you refer to the Ajax manual http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp in Jquery (because BootStrap's JS is based on Jquery, and all Jquery methods are work, and this knowledge point was also found when I was searching for information). The getJson function was selected. In addition, refer to http://www.cnblogs.com/codeplus/archive/2011/07/18/2109544.html Select each function as the analysis method.
In the implementation of code, it mainly involves traversal (for statement), judgment (if statement), operations on HTML elements, adding child elements, modifying attribute values, etc.
Regarding how to write the specific page, it is boring to write it in detail, so I just pasted the code.
Some points to pay attention to when running demo: Chrome seems to restrict direct reading of file content locally, so you need to place the entire project in Apache's htdocs folder. Then run. Regarding how to install Apache, my previous blog has a very detailed introduction. How to use it, please Baidu.
<!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:150px;}#btn-group-vertical-classmates {overflow-y:auto; overflow-x:auto; height:150px;}button{text-overflow: ellipsis;overflow: hidden;border-radius: 0px;}</style></head><body><div><br></br><div id="div1-classes-classmates"><div role="group" aria-label="..." id="btn-group-vertical-classes"><!-- where classes show--></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><br></br><div><form role="form"> <div><div><div id="context_div"><p>Click classmate to show details.</p></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>$(document).ready(function(){$.getJSON("resource/classmates.json",function(result){$.each(result, function(i, field){var tmp_button=$('<button type="button" style="border-radius: 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));$("#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;" chosen_state=0></button>').text(j);tmp_button.attr("title",j);$("#btn-group-vertical-classmates").append(tmp_button);});}}});$(".btn.btn-default.btn-classmate").click(function(){var selected_classmate=$(this).text();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){classmate_context_item=k + ": " + field3;var tmp_p=$('<p></p>').text(classmate_context_item);$("#context_div").append(tmp_p);});});});});});});});})</script></body></html>