Developed as a mobile end (Android) I've been overwhelmed by the front end frame bootstrap

Source: Internet
Author: User
Tags bootstrap website

One, Bootstrap introduction:
A year ago I was immersed in the mobile end of the adaptation and optimization of the extricate, in order to adapt to the various resolution of the market, I took the Google percentage layout, but also to generate the resolution of the size of the file, or by measuring the width of the screen to define the proportional scaling of the package control and so on to achieve the matching effect. When I passed the Web front end of the Css+html+javascript+jquery will also encounter adaptation problems, understand some of the front-end framework, this evening saw Bootstrap this framework, BOOTSTRAP is based on HTML, CSS, JAVASCRIPT, it is simple and flexible, making Web development faster. Believe yourself you can fix it in half an hour and get your front end up to intermediate levels.
Two, the benefits of bootstrap
If you've finished html+css I believe that for many beautiful windows, buttons, navigation bars, labels, carousel diagrams, ... etc. The most important is the screen with a variety of resolutions, even the mobile phone, and bootstrap this framework allows you to easily reach the response page fit a variety of screens, as well as easy to achieve beautiful beautiful page layout.

third, take a look at the bootstrap built by the small example components and frame pictures are as follows:

Write your own case page:

.
.
. Wait a minute

four, how to build bootstrap structure

First step:

Go to bootstrap website download bootstrap source code and library. http://www.bootcss.com/

Step Two:

Import Bootstarp.css

Step Three:

Import Jquery.js

Fourth Step:

Import Bootstrap.js

Fifth Step:

Add a meta tag to support mobile devices
<meta name= "viewport" content= "Width=device-width, initial-scale=1" >

Sixth step.

Put all the content into the layout container.
Bootstrap need to package a. Container container for the page content and grid system. We offer two categories for this purpose.

Seventh Step:

Mainly for the system grid understanding. All others are callback classes.

It's just that simple. The following cases quickly build a bootstrap environment:

<!
        DOCTYPE html> 

Five, simple paste copy to complete your own page:
To be honest, this is the best frame I've ever seen, because the document is too useful, and it's a form of class that's incredibly easy to understand, let's open http:// Www.runoob.com/bootstrap/bootstrap-jumbotron.html. Then we will find this classification extremely detailed at a glance. Use is the case source directly paste copy. The code is very good understanding, as long as you have learned html+css+js+jquery, please paste copy slightly modified under the style, beautiful beautiful tall things on the out Oh.

Related Article

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.