Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to write bootstrap progress bar". In daily operation, I believe many people have doubts about how to write bootstrap progress bar. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to write bootstrap progress bar". Next, please follow the editor to study!

The bootstrap progress bar uses CSS3 excesses and animation to achieve the effect, and there are older versions of Firefox that do not support this feature in IE9 and previous versions, while Opera12 does not support animation.

1. Default progress bar

By creating the .html file, we add tags to the file before using our class selector, and the code and run results are as follows:

Bootstrap instance-progress bar .progress {margin-top: 10px;} 40% complete

two。 Alternate progress bar

Add our class selector name to the project we created, and the code and run results are as follows:

Bootstrap instance-alternating progress bar. Progress {margin-top: 10px } 90% complete (successful) 30% complete (information) 20% complete (warning) 10% complete (hazardous)

3. Striped progress bar

By adding class. Progress and. Progress-striped to the class selector in the code, the code and running results are as follows:

Bootstrap instance-striped progress bar. {margin-top: 10px;} 90% complete (successful) 30% complete (information) 20% complete (warning) 10% complete (dangerous)

4. Animation progress bar

We create two tags inside the tags in the .html file and set the class properties to class .progress and .progress-striped. The code and run results are as follows:

Bootstrap instance-progress bar of the animation. Progress {margin-top: 10px;} 40% complete

5. Stack progress bar

We are setting each tag to achieve the desired effect. The code and run screenshots are as follows:

Bootstrap instance-stacked progress bar. {margin-top: 10px } 40% complete 30% complete (information) 20% complete (warning) this is the end of the study on "how to write the bootstrap progress bar". I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.