Original articles, welcome to reprint, please retain the source. There are any errors, questions or suggestions, please note. my e-mail: Maxwell_nc@163.com
Now the Internet equipment is very much, the resolution of each device is different, the traditional web site development needs to spend a lot of effort to achieve a compatible layout at different resolutions, and the advent of Bootstrap makes the site development more simple and quick. Bootstrap is a Twitter-enabled open source Toolkit for front-end development, one feature of which is support for responsive layouts. What is a responsive layout
We can check Baidu encyclopedia to get more authoritative analysis:
The responsive layout is a concept that Ethan Marcotte in May 2010, in short, that a Web site can be compatible with multiple terminals-not a specific version for each terminal. This concept was created to address mobile internet browsing.
Look at the following two devices browsing the effect of the display:
The above is when the device width is greater than 768px, the following is the effect of small screen display
Sidebar and navigation bars are hidden, displayed by buttons
Download Bootstrap3
First we use the development platform is windows7+eclipse for Java EE
First to download BOOTSTRAP3, you can go to the Bootstrap Chinese Web download, only need to download the Bootstrap for the production environment, interested in the source can also be studied:
http://v3.bootcss.com/getting-started/#download
Also note that to use the bootstrap must have jquery, you can from the bootstrap Chinese web CDN inside the condensed version of the jquery, the address is:
Http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js
Start configuring the project to configure BOOTSTRAP3 local configuration for the project
First use eclipse to build a dynamic Web project, create a bootstrap folder and jquery folder under WebContent, and then copy the corresponding files into it.
Note: You may be copying jquery's JS file in, Eclipse complains, this is because eclipse to JavaScript validation error, you can exclude this file validation, or directly ignore Eclipse's error. The following figure:
Next, create a index.jsp file and introduce BOOTSTRAP3:
<!--Bootstrap3 core CSS file-->
<link rel= "stylesheet" href= "${pagecontext.request.contextpath}/bootstrap/" Css/bootstrap.min.css ">Put the JS file at the end of the <BODY>, speed up the page display:
<!--jquery files, be sure to introduce-->
<script src= before Bootstrap.min.js ${pagecontext.request.contextpath}/jquery/ Jquery.min.1.11.2.js "></script>
<!--Bootstrap3 JavaScript file-->
<script src=" ${ Pagecontext.request.contextpath}/bootstrap/js/bootstrap.min.js "></script>If you think the above process is too complex, the actual station and want to save some traffic, you can use the Bootstrap Chinese network CDN Configuration (personal advice or local configuration is reliable):
Bootstrap Chinese Network for Bootstrap dedicated to build their own free CDN acceleration services. Based on the domestic cloud vendors CDN service, access faster, accelerated effect more obvious, no speed and bandwidth restrictions, permanent free. Bootstrap Chinese Network also provides CDN acceleration service for a large number of front-end open source tool libraries, please go to the BOOTCDN home page to see more available tool libraries.
<!--new Bootstrap core CSS file--> <link rel= "stylesheet" href= "http://cdn.bootcss.com/bootstrap/3.3.4/css/" Bootstrap.min.css "> <!--optional bootstrap theme files (generally not introduced)--> <link rel=" stylesheet "href=" http://" Cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css "> <!--jquery file. Be sure to introduce--> <script src= "Http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js" before Bootstrap.min.js ></ Script> <!--the latest Bootstrap core JavaScript files--> <script src= "http://cdn.bootcss.com/bootstrap/ 3.3.4/js/bootstrap.min.js "></script>
Note, however, that you need to attach a meta (must be written in front of the other meta) to implement the mobile device response:
<!--The following sentence is used to respond to changes in the layout of a mobile device and must be written in front of--> <meta name= "Viewport content=" Width=device-width, initial-scale=1, Maximum-scale=1 "/>
Once configured, you can start using BOOTSTRAP3 's global CSS styles, JavaScript plug-ins, and bootstrap components. Grid System
Next we learn how to implement a responsive layout using bootstrap grid systems:
Bootstrap provides a set of responsive, mobile device-priority streaming grid systems that automatically divide the system into up to 12 columns as the screen or viewport (viewport) dimensions increase. It contains predefined classes that are easy to use, as well as powerful mixin for generating more semantic layouts.
Learning Bootstrap must understand the principle of grid system in order to realize the response layout.
First, the grid system is used to create the page layout through a series of rows (row) and column (column) combinations, where we use only rows (row).
Row must be included in the. Container (container: fixed width) or. Container-fluid (Flow container: Fixed width conversion to 100% width).
In Bootstrap3, the main bar screen is divided into three types (here in rows (row) to illustrate):
. col-xs-* Ultra Small screen, mobile phone (width <768px)
. col-sm-* small screen, flat (width ≥768px)
. col-md-* medium screen, desktop display (width ≥992px)
on either screen, the grid system is automatically divided into 12 columns
The parameters followed by col-xs-* and. col-sm-* and. col-md-* represent the number of columns in the current screen.
The same piece of code in different screen display, see my diagram:
Understanding the grid system can be a preliminary implementation of the response layout. PostScript
I will update a series of BOOTSTRAP3 construction station tutorials, starting from the download configuration, although this article is short, but all the code is a personal verification, for a use of spare time to write a blog I come, this series has taken me a lot of time, the next article we will explore the following implementation of the response-oriented navigation bar.
In fact, I have achieved, but due to time has not been able to write blog records, but I have uploaded the source code in
http://download.csdn.net/detail/maxwell_nc/8709975
Can not wait for a friend to study under their own.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
