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 相关文章推荐
JS 参数传递的实际应用代码分析
Sep 13 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
React服务端渲染(总结)
Jul 01 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
Vue Socket.io源码解读
2018/02/07 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
Python自定义一个异常类的方法
2019/06/27 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
Python解析json代码实例解析
2019/11/25 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
应届大学生自荐信格式
2013/09/21 职场文书
文秘求职信范文
2014/04/10 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
农业项目投资意向书
2015/05/09 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技