Bootstrap零基础学习第一课之模板


Posted in Javascript onJuly 18, 2016

最近需要做一个简单的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规定的兼容性等细节是怎样的。(https://3water.com/web/70787.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规定了初始缩放比例。(关于其他的功能:设置用户能否缩放,最大缩放比例,最小缩放比例等,参考: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学习教程 Bootstrap实战教程

Javascript 相关文章推荐
用Javascript 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
javascript 事件处理程序介绍
Jun 27 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
webpack的 rquire.context用法实现工程自动化的方法
Feb 07 Javascript
原生JavaScript实现简单五子棋游戏
Jun 28 Javascript
深入分析javascript中的错误处理机制
Jul 17 #Javascript
javascript正则表达式中分组详解
Jul 17 #Javascript
最佳的JavaScript错误处理实践
Jul 16 #Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 #Javascript
js canvas实现擦除动画
Jul 16 #Javascript
微信jssdk用法汇总
Jul 16 #Javascript
详解JavaScript节流函数中的Throttle
Jul 16 #Javascript
You might like
phpmyadmin的#1251问题
2006/11/25 PHP
php smarty模版引擎中的缓存应用
2009/12/02 PHP
PHP 时间日期操作实战
2011/08/26 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
一段批量给页面上的控件赋值js
2010/06/19 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
python实现登录密码重置简易操作代码
2019/08/14 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
继电保护工岗位职责
2014/01/05 职场文书
电焊工工作岗位职责
2014/02/06 职场文书
社区交通安全实施方案
2014/03/22 职场文书
护理目标管理责任书
2014/07/25 职场文书
代领报检证委托书范本
2014/10/11 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
开除员工通知
2015/04/22 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
Python超简单容易上手的画图工具库推荐
2021/05/10 Python