Bootstrap Template for Lesson 1 of Zero Basic Learning

2021-07-04 17:44:57
OfStack

Need to do a simple Web page recently.
Considering the lack of front-end experience, in order to produce quickly, and the project is only a tool, there is no requirement for the project, so I chose Bootstrap as the framework of Web.
Write the original intention of learning Bootstrap from scratch:
I have read the documents of Bootstrap for half a day, including official (http://v3.bootcss.com/getting-started/) and unofficial (http://www.runoob.com/bootstrap/bootstrap-tutorial.html), as well as simple introductory blogs written by others (http://www.cnblogs.com/fnng/p/4446047.html), and comments on BootStrap in Zhihu (://www.zhihu.com/question/31409502) I deeply feel that Bootstrap should be a very easy framework, not difficult to learn, and a high-speed output tool, but the flexibility is not enough for developers to play at will. Moreover, there are too many things at the front end. If there is no clear learning goal and route, it is easy to fall into endless details. Without corresponding output, there will be frustration. Therefore, I decided to record my learning path, which is convenient for me to review and get started for 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">
 <!--  Above 3 A meta Label * Must * Put it at the front, and anything else is * Must * Follow behind!  -->
 <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 line by line (I use # to explain):
< !DOCTYPE html > # Means this is the HTML5 page

< html lang="zh-CN" > # lang means "language", which is an attribute of html tag. This attribute tells the search engine that this page is a Chinese page, which is convenient for the search engine to include, and has no effect 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", "en" corresponds 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" > The # meta tag is convenient for the browser to parse the HTML file. 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 property tells the browser what the compatibility details of this HTML are. (https://www. ofstack. com/web/70787. html) # X-UA-Compatible values are tags in force in IE8 and later IE (IE9, IE10, 11,...) that specify how browsers simulate the rendering of a particular version of IE browsers. (Some articles on the Internet actually say that X-UA-Compatible is a special mark for IE8, which is simply misleading!)

# Why do you want to do this? Because Microsoft's previous IE (IE6, IE7) did not conform to W3C standard, some websites used the old IE standard instead of W3C standard. Since IE8, Microsoft has adopted W3C standard.

# Therefore, this attribute value can be used to force the rendering mode of browsers. When content= "IE6" is set, users can normally display HTML web pages under IE6 standard with browsers with IE8 and above.

# content= "IE=edge" mandates that browsers render to the latest version of the IE standard that is currently supported. Why do you want to do this? Because some users' browsers may be set to "compatibility mode", they render HTML files according to the old IE standard, and errors will occur when encountering HTML code of W3C standard. 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 the display error caused by "compatibility mode". (That is, the user does not need to manually change the rendering mode of the browser) < meta name="viewport" content="width=device-width, initial-scale=1" > # viewport specifies the relevant settings of the display window, where width in content specifies the display width and initial-scale specifies the initial scaling ratio. (For other functions: setting whether users can zoom, maximum zoom, minimum zoom, 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 the conditional annotation judgment. When the version of IE is smaller than that of IE9, scrpit src takes the resources of cdn mentioned above.

< 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 linked to jquery and bootstrap, which is placed at the end to speed up the web page loading, that is, first display the web page content, and then load the js file. If it is placed in the front, such as head tag, when the network speed is not good, it will be stuck in the loading js file, which will not display the webpage content quickly and affect the user experience.

If you want to learn more, you can click here to learn, and then attach two wonderful topics for you: Bootstrap Learning Tutorial Bootstrap Practical Course