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页面顶部卷动广告效果
Dec 01 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
利用webqq协议使用python登录qq发消息源码参考
Apr 08 Javascript
jQuery客户端分页实例代码
Nov 18 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
Jul 14 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
微信小程序-API接口安全详解
Jul 16 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 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
PHP下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
PHP实现搜索相似图片
2015/09/22 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
python2.6.6如何升级到python2.7.14
2018/04/08 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
美国著名的团购网站:Woot
2016/08/02 全球购物
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
户外活动总结
2015/02/04 职场文书
大学开学感言
2015/08/01 职场文书
自荐信范文
2019/05/20 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL