Bootstrap getting started Demo -- create path navigation bar, bootstrapdemo

Bootstrap getting started Demo -- create path navigation bar, bootstrapdemo

Today, when chatting in the group, I saw a programmer send a Bootstrap interface, which looks pretty good. Then I went to the official website and checked the components, then we can see the path navigation bar, just to do this, and then we can look at the source code of Bootstrap.

I. Introduction to the source code file

After downloading the source code, we must have thought about how to run the Demo in the source code first. However, we are still confused when we look at so many English things, it is necessary to get familiar with everything as a whole.

II. Introduction

Currently, many UI frameworks are based on Jquery. Therefore, before using them, you must first introduce jquery files, then JS files and css files of the framework, easyUI has been used before. Compared with EasyUI, bootstrap is quite simple. Just introduce three files.

3. Path navigation bar example

To use the control of the path navigation bar, I need to extract the CSS and JS files of the control of the path navigation bar from the Bootstrap environment, in the overall CSS and JS folders:

Find the two files in the figure, and then bake the style segments used. Because this path navigation bar only uses CSS files, we only need to extract the CSS files used and take them out separately, put it in the CSS component library of our system.

 

See the results:

Iv. Summary

I recently learned about the framework and found that to get started quickly, the basic steps are to first look at the Demo, then understand what is available, and finally try to change the Demo. The framework is ready, and I feel that the development is quite simple, saves a lot of time on the interface.