2018-02-01 学习如何参考bootstrap3的html文件写出bs4的网页来

学习如何参考bootstrap3的html文件写出bs4的网页来：

1） 首先查看，我本地有的文件： 

2） jumbotron.html 中间 最重要的几个 s  ，就是一头 《head》，和一尾巴 ，《！-----bootstrap 下面有些要修改的东西》

3） 但是我 ，直接 用鼠标 右键 去点击 chp09 下的home.html 文件的话， 发现其实 原来包含在这个home.html里的bs3 .css文件 以及为了兼容 （就是 网页里 有判断 如果是 IE低于 IE9时，用低版本的bs 源头的链接 ，也都 还是 有效的） 

所以 ： 

我 就保留 自己 未来 可以 修改 的能力（是一头 《head》，和一尾巴 ，《！-----bootstrap 下面有些要修改的东西》——

但现在就 以这个 可以正常 运行的 home.html 来继续 后面的程序了。

--// 注意 ，原来bs3下的home.html可以在当前的环境下使用就直接大胆用，不要节外生枝，另外注意 现在bs4官网的jumbotron 模板（*.html 文件打开后 ，其实也已经有了很多 导航条上的新按钮，所谓用新的bs4下的jumbotron其实也不是现成的工作，还要费一堆功夫，所以就正好，就现有 bs3版，code chp09中 直接配置好的那个home.html文件） 

4） 分析下 home.html 的 结构 组成： 

 a） head 里的字符集 utf-8 

meta name="viewport" content="width=device-width, initial-scale=1"   --- // 以手机或mobile 支持为优先 

title>Waiter Caller    --- // 网页的名字

-- Bootstrap core CSS --   

link href="../static/css/bootstrap.min.css" rel="stylesheet"

-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --        //对低版本 IE的支持，给出支持低版的源头

https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">

https://oss.maxcdn.com/respond/1.4.2/respond.min.js"><

/head>    --/ head 结束

《body》

nav class="navbar navbar-inverse navbar-fixed-top"    --//导航条

--导航条的容器 

div class="container

--button

--span 

-herf

div id="navbar" class="navbar-collapse collapse"

form class="navbar-form navbar-right" action="/login" method="POST"

变量：邮箱 email

变量： 密码 

按钮 ：提交

/nav>  结束

!-- Main jumbotron for a primary marketing message or call to action --

div class="jumbotron"   ----//注意这里的第2个容器，都没改名字；注意这个容器里 ，也没有什么 了，所以 只要 背后的css的普遍处理中包含 这个

--div class="container"

h1>Waiter Caller

p>Your patrons can call their waiter anytime, using only their phone

/div>

div class="container">  -- // 有一个container

    !-- Example row of columns --      --// 注意  ，！-- 看来是 类似 python中的# ，起到注释的作用

div class="row"

div class="col-md-4"     -// 注意 这个class="col-md-4"  是css里控制行距离 即colume的一个标准方式，md=middle unit

h2  Simple /h2

....

div class="col-md-4"

h2>Register now

form class="form-horizontal" action="/register" method="POST"

div class="form-group" 

----div class="col-sm-9     ----// 注意 这个class="col-sm-9"  是css里控制行距离 即colume的一个标准方式，sm=small unit  

div class="form-group"

--div class="col-sm-9

----input type="submit" value="Register" class="btn btn-primary btn-block"    --按钮 sunmmit ，caption ==Register

   --  注意 ，此处是 div row>的关闭位置 

div class="container"    ---//注意 ，这里建立了一个 空 container ，就是为了 为美观 而留白了一部分

/div> !-- ./container --

hr>      ---//注意 

footer>

p>© A. Non 2015

/footer>

/div> !-- /container --      //这里是 ，body的主体 container的关闭的位置 ！！

!-- Bootstrap core JavaScript

    ================================================== -->    --- 尾巴了，这是接近尾巴的一个超长的注释标识符号 

-- Placed at the end of the document so the pages load faster --   // 为了load 页面更快，人家已经写上去了

script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">

script src="../static/js/bootstrap.min.js">

/body>

/html>

全文读完， 也翻译结束 ，爽！