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

前端之家收集整理的这篇文章主要介绍了Bootstrap零基础学习第一课之模板前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近需要做一个简单的Web页面。 考虑到前端经验不足,为了快速产出,同时项目只是一个工具,对项目没有什么要求,所以我选择了Bootstrap这个框架作为Web框架。 写从零开始学Bootstrap的初衷: 看了半天的Bootstrap的文档,包括官方的()和非官方的(),以及他人写的简单入门博客),和知乎上关于BootStrap上的评论()深深的感觉到,Bootstrap应该是一个很好用的框架,学习起来也不难,是个高速产出的工具,但是灵活性不足以让开发者随心所欲的把玩。而且前端的东西太多太杂,如果没有一个清晰的学习目标和路线,很容易陷入无尽的细节中,没有相应的产出,会有挫败感。因此我决定记录下自己的学习路径,方便自己复习,以及广大的初学者入门。 让我们先从BootStrap的最简单的模板开始:

Bootstrap 101 Template

<link href="css/bootstrap.min.css" rel="stylesheet">

你好,世界!

<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js">

<script src="js/bootstrap.min.js">

让我们一行行的来看(我用#代表解释):

#代表这是HTML5页面

#lang是“language”的意思,是html标签的一个属性,这个属性是告诉搜索引擎,我这个页面是中文页面,是方便搜索引擎收录的,对页面显示并没有影响。"zh—CN"是ISO标准的一种写法,表示中文。"zh"是"zhongwen"的前两个字母(如果要告诉浏览器是英文界面,则lang="en","en"就对应了“english”的前两个字母),"CN"是国家代码。(

<Meta charset="utf-8">

#Meta标签是方便浏览器解析HTML文件标签,charset属性告诉浏览器,本HTML文件的编码方式是utf-8.

<Meta http-equiv="X-UA-Compatible" content="IE=edge">

#http-equiv属性告诉浏览器,本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渲染,能够避免“兼容模式”带来的显示错误。(即不需要用户手动更改浏览器的渲染模式)

#这里是条件注释判断,当IE版本小于IE9的时候,scrpit src采取上述cdn的资源。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

如果大家还想深入学习,可以点击进行学习,再为大家附两个精彩的专题:

猜你在找的Bootstrap相关文章