Home>

What is bootstrap?

bootstrap is a front-end framework for 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.

Write here,This article learns bootstrap from scratch (3) I want to write the following:

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

2. Make UI beautification and code optimization for the bootstrap (2) example learned from scratch,It is mainly about how I achieve the effect I want.

3. It is better to teach people to fish,Take your own example (because I am also a novice,What is written may be more suitable for beginners), talk about the pits encountered in the code writing process and points to pay attention to.

Not much nonsense,Let's start:

A small summary of bootstrap

Based on the instructions in bootstrap's official document (), bootstrap is divided into three large blocks:css styles, components, and javascript plugins.

First thing to be clear:bootstrap is a framework,It means that someone made the wheel,You can use it directly,Eliminate the need to build wheels.So we need to make clear two points:what kind of wheels are these wheels,How to use these wheels.

1. css style:Introduces the global style of the grid system and bootstrap.This is achieved by setting the value of class.

1.1 grid system:

Let's easily implement the layout of the html page (http://v3.bootcss.com/css/#grid).

I think grid systems are important.Because the layout of the html page is an important and tedious task (you look at the introduction of layout in w3school http://www.w3school.com.cn/html/html_layout.asp, look at the code in the example,I understand), and need to consider the compatibility of different browsers, different devices.

The radon grid system greatly simplifies this.Open the connection above about the grid system,You will find that you only need toAssign the corresponding value to the html element class attribute,Can be achieved,And can also be set to show different effects for different screen size devices.

1.2 bootstrap global style:

Is how bootstrap beautifies common HTML elements (eg:div, button, p, table, img, etc.).By assigning corresponding values ​​to the class attribute of the html element,You can get the effect i want.

To give a simple example:

As shown in FIG,bootstrap allows you to change the button's class value simply by changing the size of the button.Without having to trouble to modify the css file, or to embed style values ​​in the element.

2. Components:I think the component is bootstrap that combines some elements (html elements and javascript code),Becomes a component,And provides a lot of nice and useful icons.These components are basically commonly used in the html development process.This is achieved by setting the value of class.(http://v3.bootcss.com/components/)

Take the simplest example:

As shown in FIG,When we need to implement navigation.Find the corresponding components in boostrap,According to the code template it gives,According to your needs,Assign the corresponding class, ul, and li values.

3. JavaScript plugin:I think bootstrap's JavaScript plugin is a "wheel" that encapsulates common web page interaction functions. You only need to set the class and data attributes to implement common web page interaction functions.Instead of writing a lot of javascript code yourself.

Let ’s start with an episode,Novices may mistakenly believe that "javascript" and "java" are deeply related.JavaScript is even considered a variant of java. This is not the case.Javascript is a scripting language developed by Netscape for Internet applications.In fact, its first name was "livescript". Later, Netscape reached a cooperation with sun company (the company that invented java and was later acquired by oracle).At that time, the java language was like a sky,Very famousIn order to ride the windmill,Just renamed livesript to javascript. So much so that someone joked:The difference between "java" and "javascrip" is like the difference between "Lei Feng" and "Lei Feng Tower".

Closer to home,we know,JavaScript exists to make web pages interactive.Therefore, the rich javascript plugin on bootsript allows you to easily implement common web page interaction functions.Instead of focusing on "building wheels".

As shown in FIG,Use bootstrap's carousel plugin (the official documentation of bootstrap is not translated into Chinese here,There is a very detailed Chinese translation on runoob,And you can modify the code to submit the observation effect online.Highly recommended), you can easily implement the image carousel function used by many websites.Just follow the tutorial in the link above,Assign the corresponding class and picture src values.Do not even set the data value.

Second, the UI beautification and code optimization of the bootstrap (2) example from scratch

The following figure is the effect achieved in the previous tutorial:

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

(1) Click on the specific classmate,After displaying its information,Not selected.(You click at the beginning,Will be selected.But that's just the click effect of the button,You click on the blank space,The selected state disappears)

(2) color monotonic,Not pretty.

(3) The layout needs to be adjusted.Information boxes are where we present the information we need,Should be as large as possible,It is best to hide unnecessary boxes when it is displayed.

(4) For code,The JavaScript code for learning bootstrap (2) from scratch is written in the html page.And there are duplicate code snippets,You should write repeated code sections as functions,This reduces code size,When we modify the code one more time,I can directly modify the corresponding function,Instead of looking for one place at a time.JavaScript code can be written in a js file to separate the html page from the javascript code.

Technical selection (to be straightforward 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 message box and classmate box together,The class box is displayed at the top.

Obviously, we only need to put the div where the information box is located and the div of the class box in the same row div, and modify the class attribute value "col-md" related to the grid system to achieve it.For example, we want to display them in a 2:1 ratio,Then the class attribute of the information box should have col-md-8, while the class box should have col-md-4.

It is worth noting thatThe front end can never be a one-step development,Often the initial code is not the perfect result we want,Needs fine-tuning.As an example,Everyone should learn to search by themselves,Go try, keep adjusting (the adjustments later,The specific process will not be explained):

After we modify the code,The effect is as follows:

obviously,Each line above shows only one class, which is a waste of space.The next two sections 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, after observing this setting,The first line is strangely indented compared to the second line:

no doubt,This change in appearance and layout is related to CSS. At this time we can look at the element-specific css.

Take chrome as an example:

Right click on this element,Select inspect, you will find the corresponding code in the box on the right.By comparison,We found a margin-left problem. This property is the default in the bootstrap framework.Inherited from the upper element,Some are -1px, some are 0px, we just need to change it to the same,For example, change it 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 centered,You can add text-align:left to set the text on the button to the left.

Corrected effect:

2. Add a folding button,Let users use this button to hide/open the class box. When clicking classmate to display detailed information,Auto-hide,To save a lot of space for the information box to display.

Adding a folding button can be achieved by reference.

In addition, we can add a nice icon to the collapse button,The referenced tutorial can be easily implemented.

When clicking on classmate to display detailed information,Auto-hide,Need to modify the click event of the classmate button,That is the corresponding js code.

We look at the usage of bootstrap folding plugin (this is better,This official part has not been translated yet), found the following:

The value of the cluster and in in the original class attribute controls the hide and show functions.Then we only need to modify the class attribute of the corresponding 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. Modify "click on specific classmates,After displaying its information,There is no selected state "bug.

We consulted the documentation,To set the button's data-toggle property to "button", you can make it into the state of being automatically selected after clicking.

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

At this point, another problem arose,I want to click on other classmates next time, the original ones are still active,How to do?

By checking, the button will be selected when the class assignment is active.That is,The settings above,That is, bootstrap does one thing:When the button of data-toggle="button" is clicked,Automatically adds active to the class, at this time it is selected.When clicked again,The active is automatically removed from the class, and it is unselected.

That is,We just need to do this by ourselves,For example, when clicking classmate, I can remove all the active of the classmate button from the class attribute.After clicking this way,Only the button I clicked most recently is active.

Therefore, just add the following statement to the click function of the classmate button:

$(". 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 in bootstrap:

Modify as per the tutorial,I just modified the color of the button a bit here,You can change it yourself according to your needs.The effect is as follows:

5. Separation of html pages and javascript code

There are actually two steps:

The first step:put the javascript code in the js file and link it in the html file.

Step 2:Reuse Javascript, or code blocks with clear functions,Into a function,Call the function directly.

Since both steps are relatively simple,Anyone who has learned a programming language should.I will not start writing.

It is worth noting thatWhen linking js files, pay attention to the order.

For example, the bootstrap js file, the code inside is written based on jquery, using a lot of jquery functions, so the jquery js file must declare the link before the bootstrap js file.

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

Finally international practice,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>
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseone">
<span aria-hidden="true"</span>click this to show/hide class
</a>
</h4>
</div>
<div>
<div>
<div>
<div role="group" aria-label="...">
<!-Where classes show->
</div>
</div>
</div>
</div>
</div>
<br></br>
<div>
<div role="group" aria-label="...">
<!-Where classmates show->
<button type="button">click class to show classmate.</button>
</div>
<div>
<div>
<div>
<p>click classmate to show details.</p>
</div>
</div>
</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 "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 "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"
}
}
}
  • Previous Summary of Yii2's introduction methods for generating specified URLs and pictures
  • Next Iframe in ASPNET Click the link on the left to display the content of the link on the right