脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Bootstrap模板

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

 更新时间：2016年07月18日 08:42:43   作者：青山牧云人  
这篇文章主要为大家详细介绍了Bootstrap零基础学习第一课：模板，感兴趣的小伙伴们可以参考一下

最近需要做一个简单的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://www.jb51.net/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实战教程

您可能感兴趣的文章:

相关文章

  • JS函数节流和函数防抖问题分析

    JS函数节流和函数防抖问题分析

    这篇文章主要介绍了JS函数节流和函数防抖问题分析，非常不错，具有参考借鉴价值,需要的朋友可以参考下
    2017-12-12
  • javascript实现倒计时（精确到秒）

    javascript实现倒计时（精确到秒）

    本文给大家分享的是个人项目中使用的javascript实现的精确到秒级的倒计时代码，十分的实用，有需要的小伙伴可以参考下。
    2015-06-06
  • javascript数组去重小结

    javascript数组去重小结

    本文给大家汇总介绍了javascript中数组去重的4种方法,分别是循环匹配去重,JSON去重/对象去重/字典去重,队列递归去重,INDEXOF去重方式，非常的细致全面，有需要的小伙伴可以参考下。
    2016-03-03
  • jsonp的简单介绍以及其安全风险

    jsonp的简单介绍以及其安全风险

    JSONP原理就是动态插入带有跨域url的script标签,然后调用回调函数,把我们需要的json数据作为参数传入,通过一些逻辑把数据显示在页面上,这篇文章主要给大家介绍了关于jsonp的简单介绍以及其安全风险的相关资料,需要的朋友可以参考下
    2022-01-01
  • js实现横向伸展开的二级导航菜单代码

    js实现横向伸展开的二级导航菜单代码

    这篇文章主要介绍了js实现横向伸展开的二级导航菜单代码,涉及javascript鼠标事件及页面元素遍历的相关技巧,需要的朋友可以参考下
    2015-08-08
  • 基于SVG的web页面图形绘制API介绍及编程演示

    基于SVG的web页面图形绘制API介绍及编程演示

    SVG的全称是可扩展的矢量图形跟传统的Raster方式的图形(JPG, PNG, GIF等)有很大的差别，下面与大家分享下JavaScript中SVG API编程演示，感兴趣的朋友可以参考下哈
    2013-06-06
  • JavaScript原生开发视频播放器的实现代码

    JavaScript原生开发视频播放器的实现代码

    这篇文章我们将一起探索一份自定义的视频播放器实现代码，甚至还可以实现有弹幕功能，文中的示例代码讲解详细，感兴趣的可以了解一下
    2023-06-06
  • JavaScript自定义插件实现tabs切换功能

    JavaScript自定义插件实现tabs切换功能

    这篇文章主要为大家详细介绍了JavaScript自定义插件实现tabs切换功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-04-04
  • 微信小程序可滑动周日历组件使用详解

    微信小程序可滑动周日历组件使用详解

    这篇文章主要为大家详细介绍了微信小程序可滑动周日历组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-10-10
  • JS完整获取IE浏览器信息包括类型、版本、语言等等

    JS完整获取IE浏览器信息包括类型、版本、语言等等

    这篇文章主要介绍了JS如何完整获取IE浏览器信息包括类型、版本、语言等等,需要的朋友可以参考下
    2014-05-05

最新评论