Download and simple application of Bootstrap learning notes

Source: Internet
Author: User

The bootstrap Chinese network has clearly described its download and environment setup, this article lists some of my important points during my learning process (note that during my learning, bootstrap is v3.2.0 ), note that the JS components of Bootstrap are all developed based on jquery. Therefore, you must introduce jquery in advance for the JS components provided by bootstrap.

Developer version (bootstrap for production environment)

After downloading the compressed package, decompress it to any directory to see the following (compressed version) directory structure:

  

This is the most basic form of Bootstrap file organization: uncompressed files can be directly used in any web project. At the same time (bootstrap.min.*) And uncompressed (bootstrap.*. The font icon file is from glyphicons.

Basic Template

Use the simple HTML template provided below, or modify these instances. We strongly recommend that you modify these instances as needed, instead of simply copying and pasting them.

Copy and paste the following HTML code. This is the simplest Bootstrap page.

 

<! Doctype HTML> <HTML lang = "ZH-CN"> 

 

Responsive Layout

Bootstrap is preferred for mobile devices. To ensure proper rendering and touch screen scalingAdd the viewport metadata tag.

<meta name="viewport" content="width=device-width, initial-scale=1">

On the mobile device browser, set the meta attributeuser-scalable=noYou can disable zooming. After the scaling function is disabled, you can only scroll the screen to make your website look more like a native application. Note: This method is not recommended for all websites, but depends on your own situation!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

So how can we disable responsive layout? Bootstrap Chinese network also provides a good explanation:

To disable responsive layout, take the following steps:
    1. Remove the label for setting the browser viewport as mentioned in this CSS document:<meta>.
    2. Pass.containerClasswidthValue to overwrite the default value of the framework.WidthFor example width: 970px !important;. Make sure that all these settings are placed behind the default Bootstrap CSS file. Note: If you put it in a media query, you can also skip it.!important .
    3. If a navigation bar is used, you need to remove the folding and expansion actions of all navigation bars.
    4. For the grid layout, add additional .col-xs-*Class or replace .col-md-*And .col-lg-*. Don't worry, The raster System for ultra-small screen devices can be expanded in all resolution environments.

Additional introduction is required for IE8Respond. jsFile (because the browser still supports media query, it still needs to be processed ). In this way, Bootstrap's responsive support for mobile devices is disabled.

Download and simple application of Bootstrap learning notes

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.