Bootstrap, front-end engineers more commonly used frameworks, plug-ins, according to its definition, we may as well understand, Bootstrap is used for the front-end development of a template, is someone else do we can directly move directly to use or according to their own needs to slightly modify the design of their own page effect of the finished product. So it's more accurate to say that we are more often learning how to use bootstrap, so how do we learn to use bootstrap better? The following is my personal learning in the process of bootstrap some of the experience, here to share with you, the shortcomings of the welcome to the predecessors of a lot of advice!
First: In learning a new knowledge, we first understand what it is and why we should learn it, then go deep, understand some of its conceptual knowledge, do not memorize, remember not the purpose, a thorough understanding is.
Second: Download bootstrap, read carefully, in-depth study bootstrap inside the JS and jq some plug-ins, hands-on practice, deepen the impression.
Third: How about the bootstrap application in its own development, steps:
1 "First step, build a basic HTML page, basic template, can be found in bootstrap directly copied over, EX:
<! DOCTYPE html>lang="ZH-CN"><metacharset="Utf-8"><metahttp-equiv="X-ua-compatible"Content="Ie=edge"><metaName="Viewport"Content="Width=device-width, initial-scale=1"><title>bootstrap 101 Template</title><!--Bootstrap--<linkhref="Css/bootstrap.min.css"Rel="Stylesheet"><!--HTML5 Shim and Respond.js for IE8 support of HTML5 elements and media queries-<!--WARNING:Respond.js doesn ' t work if you view the page via file://--<!--[If Lt IE 9]><script src= "Http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js" ></script><script src= "Http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js" ></script> <![ endif]--> <body> <!--jQuery (necessary for Bootstrap ' s JavaScript plugins)-- <script src=" Http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js "></script> <!--Include all compiled Plugins (below), or include individual files as needed-- <script src= "Js/bootstrap.min.js"& gt;</script> </body>Description
1) <meta name= "viewport" content= "width=device-width,initial-scale=1.0" >
To fix problems with Web pages appearing on mobile devices
2)
<!--[If Lt IE 9]>
<script src= "Http://html5shim.googlecode.com/svn/trunk/html5.js" ></script>
<! [endif]-->
This is a special process for browsers that do not support HTML5 before the IE9 version.
4) in the head of the BOOTSTRAP-RESPONSIVE.CSS is a non-mandatory file, can not be introduced, the main role of this file is to make a responsive web page.
5) in the Web page bootstrap.css is bootstrap in the style file, Bootstrap.js is a script file, two files corresponding to each other, the introduction of the order and location is generally: CSS file in the head tag introduced, JS file in the body tag introduced. Where the jquery file is to be introduced before the bootstrap script file.
6) Bootstrap is based on the HTML5 Web page, so first create a HTML5 type of Web page
Finish the above operation to build a basic bootstrap Web page, and then you can use the body inside the bootstrap defined in a variety of good-looking style.
Brief description in Bootstrap, the page is distributed according to the layout of the 12 column, in the div the span class can define how many columns the div block occupies, span1~span12 can choose.
2 "second step: according to your web site needs, directly introduced bootstrap inside the CSS layout or JS plug-in, White is the bootstrap inside you need to copy the things, according to the specific needs of the decision to use or modify directly.
Bootstrap frame, plug-in
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
