Presumably, the little friends who just started learning the front-end are very distressed about designing a beautiful front-end page. They have a good UI style in mind but can’t draw it. It may be a little difficult to learn. In fact, the front-end is easy and not difficult to learn. Yes, there are also many open source libraries in the front-end design. These third-party open source libraries have provided us with a lot of UI materials, whether it is components, panels, or navigation bars, etc., have been included. We You only need to know how to import and further modify it, and then I can briefly tell you how to introduce calls and modify these styles!
First find the official website of bootstrap and download it, and put it in this directory: ststic/plugins, and download jQuery at the same time, because the dynamic implementation of some styles in bootstrap needs to borrow jQuery!
After that, we enter the homepage of bootstrap, and we can find such a page. The content of the navigation bar on it is complete. We can use it directly. I will briefly talk about how to use it. We choose what we need according to the items in the navigation bar. Component style content, and then it has the corresponding code, we just need to copy it in our html file, some style codes are more or use other styles, we only need to press F12 to open the inspection page, and then locate the arrow in the upper left corner, click Just copy the content of the elements we need!
Just to give an example, I now want to implement a carousel image, the operation is as follows:
Click on the sequence JavaScript plugin /carousel/instance
Right-click to check and find the positioning symbol on the upper left to confirm the position of the carousel map and copy the code block!
operation result:
Or we add another navigation bar is the same step, just click on the component/navigation bar
Also find the source code corresponding to html and copy it
Running diagram:
Next, let's integrate it to make a simple and better-looking page (using navigation bar + panel + paging)
The process method of this page design is the same as what I described above, so I will directly paste the renderings!
However, I also used another third-party library, fontawesome, to implement this page. This is an open-source library with a large collection of icon elements. For example, the icons that appear on my right panel and left panel are all applied to the above, and the usage method is similar to that of bootstrap. Similarly, when entering the official website, first download its file and import it into the ststic/plugins of the file directory, then you can see the icon you like and right click (F12) to check and use the positioning arrow to find the corresponding html source code and copy it directly to the desired location. OK!
In the end, we found that using these open source libraries not only greatly improved the efficiency of our front-end development and saved time, but also made our pages more outstanding!
Well, I will briefly share it here today. Due to time reasons, I can’t introduce it to you in detail. I’m very sorry. If you don’t have a classmate who understands it, but you don’t know how to use it, you can leave a message or private message me in the background. Everyone reply!