最近需要做一个简单的Web页面。

考虑到前端经验不足，为了快速产出，同时项目只是一个工具，对项目没有什么要求，所以我选择了Bootstrap这个框架作为Web框架。

写从零开始学Bootstrap的初衷：

看了半天的Bootstrap的文档，包括官方的（http://v3.bootcss.com/getting-started/）和非官方的（http://www.runoob.com/bootstrap/bootstrap-tutorial.html），以及他人写的简单入门博客（http://www.cnblogs.com/fnng/p/4446047.html），和知乎上关于BootStrap上的评论（https://www.zhihu.com/question/35237472，https://www.zhihu.com/question/31409502）深深的感觉到，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.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>你好，世界！</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>

让我们一行行的来看（我用#代表解释）：

<!DOCTYPE html> #代表这是HTML5页面

<html lang="zh-CN"> #lang是“language”的意思，是html标签的一个属性，这个属性是告诉搜索引擎，我这个页面是中文页面,是方便搜索引擎收录的，对页面显示并没有影响。"zh—CN"是ISO标准的一种写法，表示中文。"zh"是"zhongwen"的前两个字母（如果要告诉浏览器是英文界面，则lang="en"，"en"就对应了“english”的前两个字母），"CN"是国家代码。（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属性告诉浏览器，本HTML文件的编码方式是utf-8.


<meta http-equiv="X-UA-Compatible" content="IE=edge"> #http-equiv属性告诉浏览器，本HTML规定的兼容性等细节是怎样的。（http://www.jb51.net/web/70787.html）
#X-UA-Compatible值是IE8及以后版本的IE（IE9，IE10，11,...）中才生效的标记，用来指定浏览器去模拟某个特定版本的IE浏览器的渲染方式。（网上有的文章居然说 X-UA-Compatible是IE8的专用标记，简直太误导人了！比如这篇文章http://blog.sina.com.cn/s/blog_5ea463780100xwni.html，以及http://xiaoyu1985ban.iteye.com/blog/1816518）

#为什么要这么做？因为微软之前的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规定了初始缩放比例。（关于其他的功能：设置用户能否缩放，最大缩放比例，最小缩放比例等，参考：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]-->
#这里是条件注释判断，当IE版本小于IE9的时候，scrpit src采取上述cdn的资源。

<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
#这里是链接了jquery和bootstrap的js文件，放在最后是为了加快网页加载速度，即首先显示出网页内容，然后加载js文件。如果放在前面，比如head标签里，则网速不好的时候，会一直卡在加载js文件那里，无法很快的显示出网页内容，影响用户体验。
												


											
从零开始学Bootstrap(1)的更多相关文章
	

    
						
  1. 从零开始学Bootstrap(3)
		
    首先让我们回顾一下系列内容. 从零开始学Bootstrap(1)介绍了BootStrap最简单的模板,逐条解释了每行代码的含义. 从零开始学Bootstrap(2)强调了边学边做,通过实际的例子,讲解 ...
    
		
    2. 
						
  2. 从零开始学Bootstrap(2)
		
    继从零开始学Bootstrap(1)后,我们需要实际做一些页面,边学边做.因为前端是一项非常注意实践的技术,知识点太多.太琐碎了,所以我们只能边学边做.根据我们想要做的效果,去查相应的资料.不要想着把 ...
    
		
    3. 
								
  3. 从零开始学 Web 之 移动Web（七）Bootstrap
		
    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
    
		
    4. 
						
  4. 从零开始学数据分析，什么程度可以找到工作？（ 内附20G、5000分钟数据分析工具教程大合集 ）
		
    从零开始学数据分析,什么程度可以找到工作?( 内附20G.5000分钟数据分析工具教程大合集 )   我现在在Coursera上面学data science 中的R programming,过去很少接 ...
    
		
    5. 
						
  5. 从零开始学 Web 系列教程
		
    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...
    
		
    6. 
						
  6. 从零开始学 Web 之 移动Web（九）微金所案例
		
    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
    
		
    7. 
						
  7. 从零开始学 ASP.NET Core 与 EntityFramework Core  目录
		
    从零开始学 ASP.NET Core 与 EntityFramework Core 介绍 我是一个目录,它旨在帮助开发者循序渐进的了解 ASP.NET Core 和 Entity Framework  ...
    
		
    8. 
						
  8. 从零开始学 Java - Spring 集成 Memcached 缓存配置（二）
		
    Memcached 客户端选择 上一篇文章 从零开始学 Java - Spring 集成 Memcached 缓存配置(一)中我们讲到这篇要谈客户端的选择,在 Java 中一般常用的有三个: Memc ...
    
		
    9. 
						
  9. 从零开始学 Java - Spring 集成 ActiveMQ 配置（一）
		
    你家小区下面有没有快递柜 近两年来,我们收取快递的方式好像变了,变得我们其实并不需要见到快递小哥也能拿到自己的快递了.对,我说的就是类似快递柜.菜鸟驿站这类的代收点的出现,把我们原来快递小哥必须拿着快 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. jQuery Mobile 过渡效果
			
    jQuery Mobile 包含了允许您选择页面打开方式的 CSS 效果. jQuery Mobile 过渡效果 jQuery Mobile 拥有一系列关于如何从一页过渡到下一页的效果. 注释:如需实 ...
    
			
    2. 
						
  2. mysql root 密码丢失问题
			
    root密码丢失,我们需要将mysql以不检查权限的方式重新启动. 在mysql的配置文件(/etc/my.cnf)中,[mysqld]下添加一句skip-grant-tables,然后重新启动服务, ...
    
			
    3. 
						
  3. quick-cocos2d-x之testlua之mainMenu.lua
			
    require "helper" require "testResource" require "ActionsTest.ActionsTest&qu ...
    
			
    4. 
						
  4. python学习之路-day1-python基础1
			
    本节内容: Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据类型初识 数据运算 表达式if ...else ...
    
			
    5. 
						
  5. hibernate多表查询，结果封装在自己定义的一个实体类当中（在自己定义的类中增加构造函数）
			
    hibernate的hql查询直接返回java对象时出现问题3 向大家请教一个问题,现在有三张表,表之间没有关联,我需要将三张表里面的所有东西查询出来存储到一个新的对象中,该如何实现,使用hibern ...
    
			
    6. 
						
  6. LeetCode（84） Largest Rectangle in Histogram
			
    题目 Given n non-negative integers representing the histogram’s bar height where the width of each bar ...
    
			
    7. 
						
  7. CSS3中:nth-child和:nth-of-type的区别深入理解
			
    关于:nth-child和:nth-of-type的区别之前一直没太注意.最近打算深入了解一些CSS3,才发现里面其实暗藏玄机. :nth-child可以选择父元素下的字元素,:nth-of-type ...
    
			
    8. 
						
  8. 奇葩问题之ToolBar返回键失效
			
    今天遇到一个奇葩问题,先说现象:接口调用成功,但是在后台业务上报错时(比如:手机号已经被注册过时,接口调用成功,但是后台返回了错误信息:手机号已被注册),toolBar的返回键失效了. 后来仔细看了一 ...
    
			
    9. 
						
  9. 轻量级模块化开发框架 Hasor 核心模块 v0.0.2 发布
			
    首先引用Wiki的介绍一下Hasor:     “Hasor是一款开源框架.它是为了解决企业模块化开发中复杂性而创建的.Hasor遵循简单的依赖.单一职责,在开发多模块企业项目中更加有调理.然 而Ha ...
    
			
    10. 
						
  10. MVC路由探寻,涉及路由的惯例、自定义片段变量、约束、生成链接和URL等
			
    引子 在了解MVC路由之前,必须了解的概念是"片段".片段是指除主机名和查询字符串以外的.以"/"分隔的各个部分.比如,在http://site.com/Hom ...
    
			
    11.