How to use bootstrap and bootstrap

Source: Internet
Author: User

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 ......

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.