Zero-Basic Bootstrap tutorial (2)

Zero-Basic Bootstrap tutorial (2)

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.

This article focuses on introducing the Bootstrap zero-Basic tutorial (2). The details are as follows:

Websites that frequently access data during the process:

Http://www.w3school.com.cn/This is a site established by the W3C alliance to spread W3C standards. There are a lot of Web-based technologies that you can see as an encyclopedia of Web technologies.

Http://v3.bootcss.com/needless to say, BootStrap3 official documentation

Http://www.runoob.com/This is almost the same as W3school, but than W3school to be a little more complex, a lot of content is from the original W3C English site and the original BootStrap official English documentation translation, however, I feel that his translation quality is higher (because the first two websites are also translated), and some cases are better understood.

Let's start:

(1) Clear goals

As shown in, this is a simple website. The layout is simple and has no outstanding effect. However, you need to implement a function: Read the relevant information from the Json file (the knowledge about Json can be found on the above website) 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"}}} 

That is:

Layout:

Three main parts: the class list on the left of the first line, the name list on the right of the first line, and related information about the second behavior.

Function:

1. Click a class in the class list to dynamically update the students in the class list and check the class.

2. Click a student in the student list to dynamically display the student information in the second row. Only one student information can be displayed at a time.

(2) analyze the technologies required

Layout:

BootStrap: used to implement this simple two-row layout, check the Class column, and scroll bar (some are directly implemented using BootStrap, while others cannot. How do I know? Go to the above three websites to find and check)

Function:

Use Javascript and Ajax to obtain and dynamically interact with data (partial refresh ).

(3) Analysis of Technology Selection

　1. implement layout.

By reading the documentation (http://www.runoob.com/bootstrap/bootstrap-grid-system-example3.html), I found that Bootstrap uses a raster system layout, and setting a specific class attribute for the div can achieve the layout I want. In addition, you can set different effects for mobile phones, tablets, and desktop computers. You can check the class attribute of HTML tags and what HTML tags are in W3SCHOOL.

It is worth noting that there can be multiple class attributes of an element.

Eg: <div class = "btn-group-vertical btn-group-lg col-md-6" role = "group" aria-label = "... "id =" btn-group-vertical-classes ">

Use "space" to separate different attributes. Believe me, this allows you to write Javacript scripts and adjust CSS.

2. Vertically arrange Class numbers and select multiple classes.

Viewing the http://www.runoob.com/bootstrap/bootstrap-button-groups.html knows how to set up vertical button groups. Set the class of the DIV where the button group is located to btn-group-vertical to make it a container for storing the button group.

Check out the http://www.runoob.com/bootstrap/bootstrap-button-plugin.html and know how to make the button group check. You can add the data attribute data-toggle = "buttons" to the DIV whose class attribute is btn-group.

3. the corner of the button is redefined as a right corner. A scroll bar is added to the button group, and the text displayed on the button is limited so that it does not exceed the button "..." Show, and when the mouse moves on the button, show all text:

The style and title attributes must be directly set in the HTML tag when the corner is changed to a right angle and the text is displayed by hovering over the mouse.

In most implementations, a CSS is written:

<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

The general method is to first use the CSS selector to select the tag to set CSS, and then set the corresponding style in curly brackets.

The so-called CSS selector is the "# btn-group-vertical-classes" and "button" in the above Code, that is, the line of code above the curly brackets. The CSS selector has multiple usage methods. You can use the W3SCHOOL website to find related methods.

Because CSS style sheets have three loading methods (CSS files; <style> labels in

<1> write the style attribute directly in the element label. This is the highest priority, so we will definitely work.

<2> modify the BootStrap CSS file on your link. Once and for all, new elements will be added and style attributes will not be re-written one by one. Here, you must download the CSS file instead of referencing the link.

Because our webpage is small, I took method 1.

4. Use Ajax for data acquisition, interaction, and dynamic loading.

How can I know how to use Ajax? Baidu goes to search, or asks the front-end technical personnel.

The core of Ajax is that it can be refreshed locally without refreshing the entire page. For more information about Ajax technology, see the preceding three websites and various Baidu websites ). Because we need to retrieve data from the Json file, we have referenced Jquery (because the JS of BootStrap is based on Jquery, all Jquery methods work, this knowledge point is also found when I search for information) Ajax manual selects the each function as the parsing method.

Code implementation involves traversing (for statement), judging (if statement), operations on HTML elements, adding sub-elements, and modifying attribute values.

It's boring to write too much details about the specific page. I directly paste the code.

When running the demo, pay attention to the following points: chrome seems to limit the direct local reading of file content, so you should put the entire project in the Apache htdocs folder. Then run it. For more information about how to install Apache, see the previous blog. For details about how to use it, refer to Baidu.

<!DOCTYPE html>