Bootstrap (1) of the H5 framework, h5bootstrap

Bootstrap (1) of the H5 framework, h5bootstrap

In the following time, I will join you in learning the speed of the currently popular front-end framework Bootstrap, in the form of a case, it is very helpful for those who want to learn Bootstrap at the beginning and cannot find the edge. If you want to learn more about Bootstrap, we suggest you go to http://noob.d8jd.com/noob/5.htmlto learn more. Let's start with two steps ....

Step 1: DownloadBootstrap

 

Looking at this big B, we will know that there are more NB, haha ~~~~

The most popular HTML, CSS, and JS frameworks are also mentioned in English. Who knows the benefits of the frameworks.

Http://getbootstrap.com/getting-started/#download

Http://v3.bootcss.com/getting-started/#download

 

Download the first one

After downloading and decompressing the package, the directory is generally like this:

bootstrap/├── css/│   ├── bootstrap.css│   ├── bootstrap.min.css│   ├── bootstrap-theme.css│   └── bootstrap-theme.min.css├── js/│   ├── bootstrap.js│   └── bootstrap.min.js└── fonts/    ├── glyphicons-halflings-regular.eot    ├── glyphicons-halflings-regular.svg    ├── glyphicons-halflings-regular.ttf    └── glyphicons-halflings-regular.woff

However, if your website is online, it is best to use the address in its cdn, unless you can guarantee that your network is very good...

To reference a CDN address, you only need to add the following code between headers:

<! -- New Bootstrap core CSS file -->
<Link rel = "stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <! -- Optional Bootstrap topic file (generally not introduced) --> <link rel = "stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css"> <! -- JQuery file. Be sure to introduce it before bootstrap. min. js --> <script src = "http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"> </script> <! -- The latest Bootstrap core JavaScript file --> <script src = "http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"> </script>

Next: hello word

Case:

<! DOCTYPE html> 
See the results. Click here.
Note: To make the phone display friendly, add the following between the headers:
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
Specific meaning:
Width-width of viewport height-height of viewport
Initial-scale-initial scaling ratio
Minimum-scale-minimum scale allowed by users
Maximum-scale-maximum scale allowed by users
User-scalable-whether the user can manually Scale
Next case:
<! DOCTYPE html> 
See the results. Click here.
If you have any questions, leave a message online first.
Try again today and continue tomorrow