Bootstrap零基础学习第一课之模板
最近需要做一个简单的Web页面。
考虑到前端经验不足，为了快速产出，项目只是一个工具，对项目没有什么要求，所以我选择了Bootstrap这个框架作为Web框架。
写从零开始学Bootstrap的初衷
看了半天的Bootstrap的文档，包括官方的（）和非官方的（），以及他人写的简单入门博客（），和知乎上关于BootStrap上的评论（，）深深的感觉到，Bootstrap应该是一个很好用的框架，学习起来也不难，是个高速产出的工具，灵活性不足以让开发者随心所欲的把玩。而且前端的东西太多太杂，如果没有一个清晰的学习目标和路线，很容易陷入无尽的细节中，没有相应的产出，会有挫败感。我决定记录下自己的学习路径，方便自己复习，以及广大的初学者入门。
让我们先从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"> <!-- 上述3个meta标签必须放在最前面，任何其他内容都必须跟随其后！ --> <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./html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss./respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好，世界！</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="//cdn.bootcss./jquery/1.11.3/jquery.min.js"></script> <!-- Include all piled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
让我们一行行的来看（我用#代表解释）
<!DOCTYPE html> #代表这是HTML5页面
<html lang="zh-CN"> #lang是“language”的意思，是html标签的一个属性，这个属性是告诉搜索引擎，我这个页面是中文页面,是方便搜索引擎收录的，对页面显示并没有影响。"zh—CN"是ISO标准的一种写法，表示中文。"zh"是"zhongwen"的前两个字母（如果要告诉浏览器是英文界面，则lang="en"，"en"就对应了“english”的前两个字母），"CN"是国家代码。（）
<meta charset="utf-8"> #meta标签是方便浏览器解析HTML文件的标签，charset属性告诉浏览器，本HTML文件的编码方式是utf-8.
<meta http-equiv="X-UA-Compatible" content="IE=edge"> #http-equiv属性告诉浏览器，本HTML规定的兼容性等细节是怎样的。（）#X-UA-Compatible值是IE8及以后版本的IE（IE9，IE10，11,...）中才生效的标记，用来指定浏览器去模拟某个特定版本的IE浏览器的渲染方式。（网上有的文章居然说 X-UA-Compatible是IE8的专用标记，简直太误导人了！）
#为什么要这么做？因为微软之前的IE（IE6，IE7）是不符合W3C标准的，有些网站的代码使用的是老IE的标准，而不是W3C的标准。而从IE8开始，微软采用了W3C标准。
#所以可以通过这个属性值，来强制规定浏览器的渲染方式，当设置content="IE6"的时候，这样用户以IE8及以上的浏览器也能正常显示IE6标准下的HTML网页。
#content="IE=edge"则是强制规定了浏览器以当前所能支持的最新版本的IE标准进行渲染。为什么要这样做？因为有些用户的浏览器可能设成了“兼容模式”，是以老IE标准去渲染HTML文件，当遇到W3C标准的HTML代码的时候会相出现错误。所以，当我的代码是W3C标准的，又不考虑老IE标准的支持时，强制使用浏览器中所能支持的最新版本IE渲染，能够避免“兼容模式”带来的显示错误。（即不需要用户手动更改浏览器的渲染模式） <meta name="viewport" content="width=device-width, initial-scale=1"> #viewport规定了显示窗口的相关设定，这里content中width规定了显示宽度，initial-scale规定了初始缩放比例。（关于其他的功能设置用户能否缩放，最大缩放比例，最小缩放比例等，参考）
<!--[if lt IE 9]>
<script src="//cdn.bootcss./html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss./respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
#这里是条件注释判断，当IE版本小于IE9的时候，scrpit src采取上述cdn的资源。
<script src="//cdn.bootcss./jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
#这里是链接了jquery和bootstrap的js文件，放在是为了加快网页加载速度，即显示出网页内容，然后加载js文件。如果放在前面，比如head标签里，则网速不好的时候，会一直卡在加载js文件那里，无法很快的显示出网页内容，影响用户体验。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
如果大家还想深入学习，可以点击进行学习，再为大家附两个精彩的专题
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程