Why use bootstrap?
- Bootstap is the most popular framework at the front end (any major learning websites say so ... emmm),
since it is the most popular then of course it is necessary to learn, it can help us develop web projects quickly
and on various devices There is a good flexible layout, without a set on the pc side, a set on the mobile side, a set on the face, and a set on the back. This is not good and too tired, so a flexible layout is necessary
What are the benefits ?
- Previously, we wrote a navigation bar. First, ul is using floating, positioning, and a long list. This is not acceptable to us lazy people! ! ! , So he came, bootsrtap has defined a lot of common components for us, like a black box, like the navigation bar, just drop it off, just look good button i, drop-down menu, you can directly add the corresponding class name , After reading it, it may still be confusing, then we will understand what we mean by experimenting
Ready to work:
- Download the resource library on the official website . After downloading, use link import as the css file, js file,
<srcipt>note import, download, and import. It's a hassle. I am a lazy person, you told me to get these ? ? Don't worry, the lazy man imports the resource library, he's here - It is recommended to use the library on the Staticfile CDN in China. It is a bit confusing. It is okay to use the link import and copy the following link directly to the head of the page.
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
- Download plug-ins
Open vscode (I used vsc, various plug-in functions, comfortable to use), select extended functions (ctrl + shit + x), search for bootstrap 3 snippets and bootstrap 4 snippets, after installation, reload. This plugin is a reminder function, let's see how to use it! ! !
Start practicing:
- Starting with bs3- or keywords, let's take the commonly used components of the page
- bs3-form or form, it will automatically pop up multiple styles for you to choose, just click one to see the corresponding style, there are radio, check box, drop-down selection menu, input box, etc., Let's take a brief look
- The select drop-down menu is generated with one click, and the text and width can be modified by yourself.
Generate beautiful radio buttons with one click
- Someone asked, you said that it can be generated with one click, where is so simple, right is so simple, when we enter the form, a prompt will be generated, we always know the checkbox, find the keyword, yeah, there are many If you are not familiar with it, you can try it. Which one is what we want most? Other butttons, navigation bars, and web page rotation maps are similar, enter keywords, and then find the style you need ok !!!
- There is also an important knowledge point. Although it is simple to use, what should I do if I want to change it on this basis? It ’s like copying homework, it ’s not always the same, I ’m lazy, but not stupid, hhh. Careful people may find that his style is basically set by the class name, then what if the drop-down menu above, I do n’t want the mouse touch to become a blue background, we can set the priority on this basis Higher selectors such as the id selector, as long as the weight is higher than him (the chain of problems about weights is below ), he can cover his original style (of course, not too much trouble, or you do n’t want to be blue Background, you can directly modify the source file downloaded from the official website, so diligently also look at the introductory article of the lazy person ?? hhh )
How to simply understand and calculate the weight
It can be collected at any time for future use! ! !
