I need to make a simple web page recently.
Considering the lack of front-end experience, in order to produce quickly, the project is just a tool and has no requirements for the project, so I chose Bootstrap as the web framework.
The original intention of writing to learn Bootstrap from scratch:
After reading Bootstrap documentation for a long time, including the official (http://v3.bootcss.com/getting-started/) and the unofficial (http://www.runoob.com/bootstrap/bootstrap-tutorial.html), as well as the simple introductory blog written by others (http://www.cnblogs.com/fnng/p/44460 47.html), and the comments on BootStrap on Zhihu (https://www.zhihu.com/question/35237472, https://www.zhihu.com/question/31409502) deeply felt that Bootstrap should be a very useful framework, and it is not difficult to learn. It is a tool for high-speed production, but its flexibility is not enough for developers to play with it as they please. Moreover, there are too many things on the front end. If you don’t have a clear learning goal and route, you can easily fall into endless details and have no corresponding output, and you will feel frustrated. Therefore, I decided to record my learning path so that I can review myself and get started with the majority of beginners.
Let's start with the simplest template of BootStrap:
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* be placed first, and any other content *must* follow them! --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="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="//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]--> </head> <body> <h1>Hello, world! </h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body></html>
Let's look at it one by one (I use # for explanation):
<!DOCTYPE html> # means this is an HTML5 page
<html lang="zh-CN"> #lang means "language", which is an attribute of the html tag. This attribute tells search engines that my page is a Chinese page, which is convenient for search engines to include, and has no impact on the page display. "zh-CN" is a writing method of ISO standard, which means Chinese. "zh" is the first two letters of "zhongwen" (if you want to tell the browser that it is an English interface, lang="en" and "en" correspond to the first two letters of "english"), and "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 tag is a tag that facilitates the browser to parse HTML files. The charset attribute tells the browser that the encoding method of this HTML file is utf-8.
<meta http-equiv="X-UA-Compatible" content="IE=edge"> The #http-equiv attribute tells the browser what the compatibility and other details stipulated in this HTML are. (//www.VeVB.COM/web/70787.html) #X-UA-Compatible value is a tag that only takes effect in IE8 and later versions of IE (IE9, IE10, 11,...). It is used to specify the browser to simulate the rendering method of a specific version of IE browser. (Some articles on the Internet actually say that X-UA-Compatible is a special marker for IE8, which is simply misleading!)
#Why do this? Because Microsoft's previous IE (IE6, IE7) did not comply with the W3C standard, some websites' codes use the old IE standards rather than the W3C standards. Starting from IE8, Microsoft has adopted the W3C standard.
#So you can use this attribute value to force the rendering method of the browser. When setting content="IE6", users can also display HTML web pages under the IE6 standard normally in browsers of IE8 and above.
#content="IE=edge" forces the browser to render with the latest version of IE standards that can be supported. Why do this? Because some users' browsers may be set to "compatibility mode", they render HTML files based on the old IE standard, and errors will occur when encountering W3C standard HTML code. Therefore, when my code is W3C standard and does not consider the support of the old IE standard, forcing the latest version of IE rendering that can be supported in the browser can avoid display errors caused by "compatibility mode". (That is, the user does not need to manually change the browser's rendering mode) <meta name="viewport" content="width=device-width, initial-scale=1"> #viewport specifies the relevant settings of the display window. Here the width in the content specifies the display width, and initial-scale specifies the initial scaling ratio. (About other functions: Set whether the user can scale, maximum scaling ratio, minimum scaling ratio, etc., refer to: 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]-->
#Here is a conditional comment judgment. When the IE version is smaller 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>
# Here is the js file that links jquery and bootstrap. It is placed at the end to speed up the loading of the web page, that is, first display the web page content and then load the js file. If placed in front, such as in the head tag, when the Internet speed is not good, it will keep stuck in the loading js file, and the web page content cannot be displayed quickly, affecting the user experience.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.
If you still want to learn in depth, you can click here to learn and attach two exciting topics to you: Bootstrap learning tutorial Bootstrap practical tutorial