Home > Developer > Web Develop
原创文章，欢迎转载，请保留出处。有任何错误、疑问或者建议，欢迎指出。我的邮箱:[email protected]
Now the Internet equipment is very many, each device resolution is not the same, the traditional web site development needs to spend a lot of effort to achieve a different resolution of the compatible layout, and the advent of Bootstrap makes website development easier and faster. Bootstrap is an open source toolkit for front-end development launched by Twitter, one of which features support for responsive layouts.
What is responsive layoutWe can consult the Baidu Encyclopedia to get more authoritative analysis:
Responsive layout is a concept presented by Ethan Marcotte in May 2010, in short, that a website can be compatible with multiple terminals-rather than making a specific version for each terminal. This concept was created to address mobile internet browsing.
Look at the effects of the following two devices browsing the display:
The above is when the device width is greater than 768px, the following is the effect on the small screen display
The sidebar and navigation bar are hidden and displayed via buttons
Download BOOTSTRAP3The first development platform we use is the windows7+eclipse for Java EE
First of all to download BOOTSTRAP3, can be downloaded to Bootstrap Chinese network, only need to download Bootstrap for production environment, interested can also be under the source of research:
http://v3.bootcss.com/getting-started/#download
Also note that to use bootstrap must have jquery, can be from the bootstrap Chinese network CDN inside save jquery compressed version can, address is:
Http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js
Start configuring items when you're ready
First use eclipse to build a dynamic Web project, create the bootstrap folder and the jquery folder under WebContent, and then copy the corresponding files in.
Note: You may have copied jquery's JS file, eclipse error, this is because the eclipse of JavaScript validation error, you can exclude this file validation, or directly ignore eclipse error. Such as:
Next, create a index.jsp file that introduces BOOTSTRAP3:
<!-- Bootstrap3 核心 CSS 文件 --><link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
Put the JS file at <BODY> the end of the page to speed up the display:
Using the bootstrap Chinese network CDN Configuration<!-- JQuery文件,务必在bootstrap.min.js 之前引入 --><script src="${pageContext.request.contextPath}/jquery/jquery.min.1.11.2.js"></script><!-- Bootstrap3的 JavaScript文件 --><script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
If the above process is too complex, the actual station and want to save a bit of traffic, you can use the Bootstrap Chinese network CDN Configuration (personal advice or local configuration):
Bootstrap Chinese Network for Bootstrap dedicated to build their own free CDN accelerator services. Based on the domestic cloud vendor CDN service, the access speed is faster, the acceleration effect is more obvious, no speed and bandwidth limit, permanent free. Bootstrap also provides CDN acceleration services to a large number of front-end open source repositories, please go to the BOOTCDN home page to see more available tools 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 (not normally introduced) --<link rel="stylesheet" href="http://cdn.bootcss.com/ Bootstrap/3.3.4/css/bootstrap-theme.min.css "><!--jquery file. Be sure to bring in before Bootstrap.min.js<script src="Http://cdn.bootcss.com/jquery/1.11.2/jquery.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 (which must be written in front of other meta) to implement the mobile device response:
<!-- 下面这句用于响应移动设备的改变布局，必须写在前面 --><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 plugins, and bootstrap components.
Grid systemNext we learn how to implement a responsive layout using Bootstrap's raster system:
Bootstrap provides a responsive, mobile-first streaming raster system that is automatically divided into up to 12 columns as the screen or viewport (viewport) size increases. It contains pre-defined classes that are easy to use, and powerful mixin for generating more semantic layouts.
Learning Bootstrap must understand the principle of grid system, in order to realize the responsive layout.
First, the grid system is used to create a page layout with a series of rows and columns (column), where we use only rows.
Row must be contained in .container (container: Fixed width) or .container-fluid (Flow container: Fixed width converted to 100% width).
In Bootstrap3, the main bar screen is divided into three types (here by row):.col-xs-*Ultra small screen, mobile phone (width <768px).col-sm-*Small screen, flat (width ≥768px).col-md-*Medium screen, desktop Monitor (width ≥992px)
The grid system automatically points to 12 columns regardless of the screen .
The .col-xs-* and .col-sm-* and .col-md-* followed parameters represent the number of columns in the current screen.
The same piece of code is displayed under different screens, see my diagram:
Understanding the grid system can initially implement a responsive layout.
PostscriptI will update a series of BOOTSTRAP3 build station tutorial, starting from the download configuration, this short, but all the code is personally verified, for a use of spare time to write a blog, I have spent a lot of time, the next chapter of our discussion to implement the response navigation bar.
In fact, I have achieved, but because the time relationship has not yet written Bo 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.
Making responsive layout site based on BOOTSTRAP3 (i)
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
