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=no
You 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:
-
- Remove the label for setting the browser viewport as mentioned in this CSS document:
<meta>
.
- Pass
.container
Classwidth
Value 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
.
- If a navigation bar is used, you need to remove the folding and expansion actions of all navigation bars.
- 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