Bootstrap learning path (3) --- list component, bootstrap path

Bootstrap learning path (3) --- list component, bootstrap path

The list is a component used by almost all websites. Just as bootstrap provides us with the style of this component, I will give you a brief introduction to the usage of the List component in bootstrap!

First, repeat the issue of referencing the bootstrap core file to avoid some new friends forgetting this.

At the beginning of the page, reference the bootstrap core file (css, js) and so on.

<! -- New Bootstrap core CSS file --> <link rel = "stylesheet" href = "css/bootstrap.min.css"/> <! -- JQuery file --> <script type = "text/javascript" src = "js/jquery-1.11.1.min.js"> </script> <! -- The latest Bootstrap core JavaScript file --> <script type = "text/javascript" src = "js/bootstrap. min. js"> </script> <! -- The following sentence aims to disable page scaling when the webpage is on the mobile phone side to achieve the best visual effect, on the PC end, you can comment out --> <meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, user-scalable = no "/>View Code

Next we will talk about the bootstrap list component:

The following is a simple list group. It is only an unordered list with multiple list entries. You also need to set appropriate classes. Bootstrap provides some predefined styles, which can be customized by CSS based on your needs.

The Style Class of the list group is. list-group. The style of each column in the list is. list-group-item:

<Ul class = "list-group"> <li class = "list-group-item"> smiling words list item 1 </li> <li class = "list-group- item "> smiling words list item 2 </li> <li class =" list-group-item "> smiling words list item 3 </li> <li class =" list- group-item "> smiling words list item 4 </li> <li class =" list-group-item "> smiling words list item 5 </li> </ul>

The running effect is as follows:

The simplest list in bootstrap is described above;

In fact, using the div + a tag can also achieve the effect of the above list:

<Div class = "list-group"> <a href = "http://www.weixh.net" class = "list-group-item active"> smile 1 </a> <a href =" # "class =" list-group-item "> smile 2 </a> <a href =" # "class =" list-group-item "> smile 3 </a> <a href = "#" class = "list-group-item"> smile 4 </a> <a href = "#" class = "list-group -item "> smile 5 </a> </div>

Still use ul and li styles. The running effect is as follows:

Similarly, bootstrap provides us with several list styles. If you think that the List style is not your favorite, you can rewrite it to your favorite style:

<Div class = "list-group"> <a href = "http://www.weixh.net" class = "list-group-item-success active"> smile 1 </ a> <a href = "#" class = "list-group-item-info"> smile 2 </a> <a href = "#" class = "list-group-item-warning"> smile 3 </a> <a href = "#" class = "list-group-item list -group-item-danger "> smile 4 </a> <a href =" # "class =" list-group-item "style =" background: # F75000; "> Custom style </a> </div>

The running effect is as follows:

Then, I want to add a badge to the list:

<Div class = "list-group"> <a href = "http://www.weixh.net" class = "list-group-item-success active"> <span class =" badge "> 15 </span> smile 1 </a> <a href =" # "class =" list-group-item-info "> <span class = "badge"> 14 </span> smile 2 </a> <a href = "#" class = "list-group-item- warning "> <span class =" badge "> 18% </span> smile 3 </a> <a href =" # "class =" list-group-item list- group-item-danger "> <span class =" badge "> 100 </span> smile 4 </a> <a href =" # "class =" list-group -item "style =" background: # F75000; "> <span class =" badge "> 33 </span> Custom styles </a> </div>

So I got the badge:

Customized content
Each element in a list group can be any HTML content, or even a list group with links below.

<Div class = "list-group"> <a href = "http://www.weixh.net" class = "list-group-item active"> 

Running result:

Do you think it would be great not to write CSS by yourself? Well, I am here to join you today. If you don't understand or don't understand it, you can reply to questions. Let's learn from each other!
I have also launched my cell phone "smile Words". For the bootstrap-implemented page, you can check the address www.weixh.net. The mobile phone access will automatically jump to the mobile phone version, I 'd like to post it to you.

Also, if you reprint this article, you need to indicate the source.

The specific meaning of bootstrap in statistics, Chinese name, and usage example
Bootstrap)

Bootstrap Method is a Method published by Efron (1979) on Annals of Statistics. It is an extremely important milestone in the development of modern Statistics, modern and fast computers are often used for execution.
For example, when the average sample is used to estimate the expected value of the parent group, we often use the confidence interval method to estimate the error, in this case, you need to understand the average sampling distribution of the sample. In the Basic Statistics tutorial, sampling distribution can be normally allocated or allocated to t when the parent group of the sample is available for normal assignment description. However, when the parent group of the sample is from, it is not appropriate to use the regular distribution description. We can use a computer simulation or progressive Analysis Method to overcome this problem. When the parent group is not well understood, the method of progressive analysis is more effective, so the Central Limit Theorem (Central Limit Theorem), Edgeworth Expansion (small sample theory) methods and Their feasibility and limitations are widely used in the literature.
Although people do not like these methods completely, they cannot find a more rational method to replace the progressive analysis method.
The self-help method is indeed a very convincing method. It provides another method for statisticians to search for sampling distribution. Therefore, it has been widely discussed in the literature in recent years.

Www.math.ntu.edu.tw /~ Hchen/Teach/readme.html

How can we learn about bootstrap? Generally, what steps can I see that its website is a bit messy and there are many related open-source frameworks?
We recommend that you first learn the layout. This is the most useful. Start with the most basic bootstrap framework. Some of the other frameworks on the home page are scalable. With a complete understanding of some of the basic layout and style of bootstrap, it is not difficult to learn others. In fact, it is quite easy to learn about bootstrap. The layout is dominated by the percentage layout and the fence layout. Other similar buttons. btn error messages. alert-block all use the combined class .. Btn. btn-success is the green button .. Btn + suffix (actually a color system ). One of the most powerful features of bootstrap is the combined class. From typographical layout to css final to bootstrap. js (I personally think it is not likely to be used, and the compatibility and practicality are not the best. Js is useful for beginners. There are also a few commonly used ones. After all, the evil ie is still rooted in China.) After reading this step, I will try some small demos myself and get started quickly. I wish you a smooth learning experience.