Bootstrap 0 Template _javascript Skills for the first lesson of basic learning

A simple Web page needs to be done recently.
  Taking into account the front-end inexperience, in order to quickly output, while the project is just a tool for the project has no requirements, so I chose to bootstrap this framework as a web framework.
  Write the original intention of learning bootstrap from scratch:
  read a half-day bootstrap documentation, including the official (http://v3.bootcss.com/getting-started/ and unofficial (http://www.runoob.com/bootstrap/bootstrap-tutorial.html), and other people write a simple entry blog (http://www.cnblogs.com/fnng/p/ 4446047.html), and is aware of the comments on Bootstrap (https://www.zhihu.com/question/35237472,https://www.zhihu.com/question/ 31409502 deep feeling, bootstrap should be a very good framework, learning is not difficult, is a high-speed output tool, but the flexibility is not enough to allow developers to play the arbitrary. And the front end of things too much too miscellaneous, if not a clear learning goals and routes, it is easy to fall into endless details, there is no corresponding output, there will be frustration. So I decided to record my own learning path, to facilitate their own review, as well as a large number of beginners to get started.
  Let's start with the simplest template from bootstrap:  

<! DOCTYPE html>  

Let's look at the line (I'll explain it with the # representative):
<! DOCTYPE html> #代表这是HTML5页面

#lang是 "Language" meaning, is an HTML tag attribute, this property is to tell the search engine, I this page is a Chinese page, is convenient search engine included, the page display has no effect. "ZH-CN" is a form of the ISO standard, expressed in Chinese. "En" is "Zhongwen" the first two letters (if you want to tell the browser is an English interface, then lang= "en", "en" corresponds to "Chinese" the first two letters), "CN" is the country code. (http://www.cnblogs.com/sink_cup/archive/2010/01/22/html401_lang_iso639_iso3166_iana_language_subtag.html)

<meta charset= "Utf-8" > #meta标签是方便浏览器解析HTML文件的标签, CharSet attribute tells the browser that this HTML file is encoded in Utf-8.

<meta http-equiv= "x-ua-compatible" content= "Ie=edge" > #http-equiv attribute tells the browser what details such as the compatibility of this HTML rule are. (http://www.jb51.net/web/70787.html) #X-ua-compatible value is IE8 and later versions of IE (ie9,ie10,11,... To specify the browser to simulate the rendering of a particular version of IE browser. (Online some articles actually say x-ua-compatible is IE8 's special mark, simply too misleading!) ）

#为什么要这么做? because prior to Microsoft's IE (IE6,IE7) is not in line with the standards of the consortium, so some of the site's code is used by the old IE standards, rather than the standard of the consortium. Starting with IE8, Microsoft has adopted the standard of the consortium.

#所以可以通过这个属性值, to enforce the browser's rendering, when set content= "IE6", so that users to IE8 and above the browser can also normal display IE6 standard HTML page.

#content = "Ie=edge" is a mandatory requirement for browsers to render with the latest version of IE standard currently supported. Why did you do that? Because some of the user's browser may be set to "Compatibility Mode", is to use the old IE standard to render HTML files, when encountering the standard of the HTML code of the same time will appear error. Therefore, when my code is the standard of the consortium, and does not consider the old IE standard support, forced to use the browser can support the latest version of IE rendering, can avoid the "compatibility mode" caused by the display error. (That is, no user is required to manually change the browser's rendering mode) <meta name= "viewport" content= "Width=device-width, initial-scale=1" > Viewport stipulates the display window of the relevant settings, where the content in the width of the specified display widths, Initial-scale specified the initial scaling ratio. (about other functions: Set the user can zoom, the maximum zoom ratio, the minimum scale, etc., reference: http://my.oschina.net/liangrockman/blog/380727)

<!--[If Lt IE 9]>
<script src= "//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js" ></script>
<script src= "//cdn.bootcss.com/respond.js/1.4.2/respond.min.js" ></script>
<! [endif]-->

#这里是条件注释判断, when IE version is less than IE9, Scrpit SRC takes the above CDN resources.

<script src= "//cdn.bootcss.com/jquery/1.11.3/jquery.min.js" ></script>

<script src= "Js/bootstrap.min.js" ></script>

#这里是链接了jquery和bootstrap的js文件, put in the end is to speed up the page loading speed, that is, first display the content of the Web page, and then load the JS file. If put in front, such as head tag, then the network is bad, will always be stuck in the load JS file there, can not quickly display the content of the Web page, affecting the user experience.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course