How to use bootstrap and bootstrap

How to use bootstrap and bootstrap

 

Preface:A few days ago, I wanted to create a login interface, but it would be ugly to write a form myself. So I wanted to use the bootstarp framework. Before that, I heard people say that bootstrap is awesome. But I don't have bootstrap at all...

Download & directory

Go to the bootstrap official website and download the production environment Bootstrap:

Decompress the package as follows:

The directory structure is like this. We can see it on the official website a few days ago. You should first understand the following directory structure:

Bootstrap3
├ ── Css
│ ── Bootstrap-theme.css // theme type, generally not used in production
│ ── Bootstrap-theme.css.map // theme type, generally not used in production
│ ── Bootstrap-theme.min.css // theme type, generally not used in production
│ ── Bootstrap.css
│ ├ ── Bootstrap.css. map // ing can be understood as shuaige = "luotianshuai". When shuaige is dropped, it is equivalent to luotianshuai.
│ ── Bootstrap.min.css
── Fonts // contains the font icon file. The following files contain font icons in different systems
│ ── Glyphicons-halflings-regular.eot.
│ ── Glyphicons-halflings-regular.svg.
│ ── Glyphicons-halflings-regular.ttf.
│ ── Glyphicons-halflings-regular.woff.
│ ── Glyphicons-halflings-regular.woff2.
── Js
├ ── Bootstrap. js
├ ── Bootstrap. min. js

 

Bootstrapimplements a lot of beautiful CSS examples in bootstrap.css, while js is placed in bootstrap. js. Note that the js of bootstrap is different from that of Jquery. The js of bootstrap must depend on Jquery. Therefore, when importing JS, you must first import Jquery.

 

Application

Next, let's look at the entry-level templates recommended on the official website.

Although not very nice, I want to have such an HTML file locally. How ??
Right-click the page and click Save As to save it to your local device.

In addition to HTML files, the downloaded Starter Template for Boostrap_files file is displayed as follows: it is the css and js of bootstrap and can be introduced in HTML.

I have downloaded bootstrap, so I just need to use my local bootstrap, So I deleted the Starter Template for Boostrap_files folder above.

 

Bootstrap_1.html:

1 <! DOCTYPE html> 2 

 

 
  
11 rows import css from bootstrap.
 
  
Line 19 imports jquery
 
  
Line 21 imports js from bootstrap

 
Note the path for importing the css and js of bootstrap:

 
When you open the html interface in a browser, "Hello, world" appears ". Very low. I can't help wondering if bootstrap is really useful ?? What about the beautifying effect?
 
On the bootstrap official website, I can find the "Giant screen" component.

 
Paste the code of the component to the HTML body for use.
1 <! DOCTYPE html> 2 View Code
 
:

 
Now, you will use bootstrap. Haha
It is recommended that you take a good look at the official website, but I watched the whole afternoon ...... I haven't finished reading ......