>

读书笔记

- 编辑:www.bifa688.com -

读书笔记

作为Web前端开荒框架,Bootstrap为大多数正式的UI设计常见提供了用户自个儿、扩浏览器的减轻方案。

【Bootstrap】1.初识Bootstrap,初识bootstrap

作为Web前端开拓框架,Bootstrap为超越1/二正规的UI设计常见提供了用户本人、扩浏览器的减轻方案。

 

1.下载Bootstrap

开荒官网  举行下载。

必发88官网 1

 

 

2.备选项目模板文件夹

接下去,大家为率先个门类开创二个文件夹以及部分中坚的文书。谓词我们还要选取HTML5样板文件 HTML五 Boilerplate(H5BP),然后把Bootstrap的有用文件复制过去。

2.1 下载H5BP

做客网址链接地址: ,下载B5BP。

必发88官网 2

解压后,修改文件夹名称叫Bootstrap_First,其目录结构如下:

必发88官网 3

二.二 然后删除和更新下必备的旗帜文件

删除下列至于H伍BP相关的文件夹和文件:

□ 因为稍后要利用LESS创制本身的CSS文件,所以先删除css文件夹。

□ doc 文件夹及里面内容

二.叁 理解样板中的.htaccess文件

本条文件中的内容不自然全部都用,那有赖于主机设置和站点需要。这么些文件的3个首要用途是确定保证站点品质最优。

二.四 更新需要的旗帜文件

旗帜中的下列文件提供了类别的科班新闻,依照需求能够创新它们、直接运用它们如故就放那无论是。

□ humans.txt:这一个文件记载贡献者,H5BP、Bootstrap的,还有任何贡献者。

□ LICENSE.txt:在H伍BP许可后边,加上你根据该许可创设的网址的承认信息,在H5BP许可后,加上Bootstrap以及别的站点中用到的紧要的库的批准音讯。

二.五 更新站点桌面和触摸设备Logo

毫无忘了用自个儿项指标Logo替换 Boilerplate 暗中认可的Logo文件。

 

 

3.加入Bootstrap文件

3.1 字体

从Bootstrap的主文件夹中,把fonts文件夹复制粘贴到Bootstrap_First文件夹中。那些文件夹里富含着Bootstrap附带的最主要的Glyphicon字体。

管教起见,再在fonts文件夹中放3个跨域友好的.htaccess文件:

<FilesMatch ".(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

其目标是保障固然站点根目录下未有放H伍BP的.htaccess文件,也不会产出字体难题。

 

3.2 JavaScript

接下去正是加盟Bootstrap的JavaScript文件。H5BP的文本夹中已经包括了多少个JavaScript文件如下:

必发88官网 4 

在js文件夹里新建文件夹bootsreap,然后把Bootstrap的js文件夹中的脚本都复制过来。下边包车型地铁截图显示了Bootstrap随带的插件。种种插件1个文书:

必发88官网 5

把这几个插件文件集中封存到新建的js/bootstrap 文件夹,便于优化网址品质,即能够按需选拔插件、排除任何文件并缩减文件大小。

在付出时期,保持所有Bootstrap的插件都可用也是2个措施。那样,假若想增多个折叠、提示大概传送带效应,都得以随手拈来。

H5BP采纳的点子是把持有插件代码复制到二个plugins.js模板文件中。那是甘休开拓从此的超级做法,因为如此能够削减HTTP请求,加速站点速度。(换句话说,一个80K的公文,比加载多个20K的文件速度更加快。)

开垦Bootstrap文件夹中包罗分发文件的dist文件夹。在那么些文件夹中的js文件夹里,包括着 bootstrap.js 和 bootstrap.min.js,它们正是含有 Bootstrap全数插件代码的大文件。

必发88官网 6

把bootstrap.min.js 的具有代码复制到plugins.js 里。

然后把Bootstrap文件夹里的less文件夹也复制到项目文件夹中。

 

4.构造HTML模板

开拓项目中的 index.html 文件进行编写制定。那么些示例标识文件来自H5BP,显示了有的一流实行和提出方案。我们就以那几个为底蕴,把它构成到Bootstrap的劳作流中。

浏览一下全数文件,在那之中有多少个风趣的地方,H五BP文档中都有详细表达,这段时间的五.3.0版本的链接地址为: 。下边也简单介绍下,按次序来:

□ HTML伍 文书档案类型证明:

<!doctype html>

□ 接下去是几个meta标签

  ■  用于内定字符集的:  

<meta charset="utf-8">

  ■  告诉IE使用新型版的渲染引擎

<meta http-equiv="x-ua-compatible" content="ie=edge">

  ■  预留给描述站点用的:

<meta name="description" content="">

  ■ 针对移动浏览器的视口标签

 <meta name="viewport" content="width=device-width, initial-scale=1">

□ 接下去是八个样式表的链接

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">

□ 再上面就是加载Modernizr脚本的script标签。这几个本子回味IE八提供HTML5“垫片脚本”,以便它能辨识HTML5的分区成分:

<script src="js/vendor/modernizr-2.8.3.min.js"></script>

□ 接下去是IE条件注释,包涵推荐用户把旧版本IE晋级到新本子的音信:

<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browse. ...
<![endif]-->

□ 紧接着是一段文本

□ 随后是托管在谷歌(谷歌(Google))服务器上的jQuery链接,以及3个地面jQuery的后备链接:

<script src="http://www.qjdongsheng.com/uploads/allimg/190514/13352A2Y-6.jpg"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"></script>')</script>

□ 上面正是plugins.js 和main.js的链接,别分保存JavaScript插件代码和大家编辑的代码:

<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

□ 谷歌的Analytics 脚本:

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l= new Date;
  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
  e.src='http://www.qjdongsheng.com/uploads/allimg/190514/13352644N-7.jpg';
  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>

 

对此次的职分来讲,大家需求对那个模板中的成分实行如下操作:

(一) 设定我们站点的标题,针对旧版本浏览器用户更新现存的IE条件注释;

(二) 基于LESS文件编写翻译Bootstrap的CSS,增加基本的页面内容;

(叁) 整合Bootstrap的JavaScript插件,确定保障响应式的导航条(navbar)平常响应。

做完这几件事后,大家就可以开首设计自身的网址了。

 

5.设定站点标题 

<title>初识 Bootstrap</title>

五.一 调解过时的浏览器新闻

模板中的新闻针对老浏览器用户。

<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">
upgrade your browser</a> to improve your experience.</p>
<![endif]-->

 个中蕴藏的链接  ,该网址是一个推荐浏览器进级的站点。

5.2 设置主结构成分

上边开首准备页面内容,近来还只有四个段落。大家能够稍微增加一些内容:

□ 包罗Logo的导航的页头区;

□ 包涵页面内容的内容区;

□ 包涵版权和应酬媒体链接的页脚区。

充分那几个剧情,都会依据最新的HTML最好实践来做,而且会设想APRADOIA(Accessible Rich Internet Applications,可访问富因特网应用)的role属性(即banner、navigation、main和contentinfo 那多少个剧中人物)。HTML5后来又增多了 <main cole="main></main> 成分,目标是极度为页面或分区中的主内容提供贰个专项使用的要素。要询问越来越多消息,能够参照链接:

找到下边包车型大巴代码:

<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>

修改为:

<header role="banner">
<nav role="navigation">
</nav>
</header>

<main role="main">
<h1>Main Heading</h1>
<p>Content specific to this page goes here.</p>
</main>

<footer role="contentinfo">
<p><small>Copyright &copy; Luka Ye</small></p>
</footer>

那正是我们页面的着力构造和内容。

 

6.导航条

大家先把Bootstrap特有的要素设置好,这就是导航条。

用作起源,大家能够一时就利用 Bootstrap基本的导航条。为此,从Bootstrap文档中拿来它的导航条代码,然后做出如下调解:

□ 增添了 navbar-static-top 类,因为大家期望导航条能够稳固到窗口最上端,但亦可随页面滚动而滚动。

□ 把项目名称连接到 index.html;

□ 把原先的父div标签改成了语义化的HTML5 nav 标签。

调动后,其header成分如下:

<header role="banner">
<nav role="navigation" class="navbar nav-static-top navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">初识 Bootstrap</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</nav>
</header>

保存结果,其导航条的显得效果如下:

必发88官网 7

内容有了。未来,大家专门要求和睦的样式表。先来产生并链接Bootstrap暗中认可的样式表。

 

七.编译和链接暗许的Bootstrap CSS

7.1 编译Bootstrap CSS

找到less/bootstrap.less 并开辟它,那些文件导入了less文件夹中所有其它文件。编写翻译后,这么些文件会扭转完整的bootstrap.css样式表。而那就是大家首先步要做的。

PS:LESS的文书档案地址为   

设若全体尚未编写翻译过LESS文件,供给下载和装置它的编写翻译器。

□ Window 用户,下载和装置这些编写翻译器:

 ■ WinLess(无偿桌面应用),地址为 。

□ Mac 用户能够挑选下载:

 ■ Crunch 应用(免费),地址为

 ■ CodeKit(收费),地址为

下载了增选的LESS编写翻译器之后,安装,张开。然后就能够依照下边包车型地铁手续来做了。

(壹) 在根目录创造css文件夹。

必发88官网 8

(贰) 使用下列的1种把主文件(css、fonts、img、js和 less文件夹的父文件夹)增多到编写翻译器:

 ■ 把公文夹拖到编写翻译器窗口中;

 ■ 在编译器窗口中找到 Add folder 按键,点击采用主文件夹。

(叁) 然后再编写翻译器窗口中得以见见加载的LESS文件,找到less/bootstrap.lesss文件

(四) 右键单击less/bootstrap.less 文件,选取 Select output file,找到刚成立的css文件夹,此时出口文件名应当自行会成为bootstrap.css,单击“保存”。

(⑤) 选拔输出路线和文书名,点击Compile。

必发88官网 9

(陆) css文件夹中会出现编写翻译生成的 bootstrap.css文件。

(柒) 编写翻译成功后,唯一要专注的是以此文件名是还是不是与index.html中链接的文书名同样。

(八) 在 index.html 中,删除指向 css/normalize.css 的样式表链接,因为这么些样式表已经包蕴在 Bootstrap中了。

(玖) 复制一份 bootstrap.css,重命名字为main.css。

必发88官网 10

(拾) 浏览器张开index.html文件,能够观望起默许的导航样式如下,从排版和布局上装有提升,那注脚CSS已经生效。

必发88官网 11

7.贰 完结响应式导航条

为了在 Bootstrap 响应式导航条基础上变成大家的导航条,还得再追加三个新因素,以及相应的类和data属性。相关的用法能够参照 Bootstrap的Components 文书档案,在Navbar选项卡下:

先遵照下列步骤增加额外的号子。

(一) 搜索到 <div class="navbar-header">,在二个因素中加多1个navbar-toggle按键,用于开始展览和选拔响应式导航条。上边正是以此开关的万事标记:

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">



</button>
<a class="navbar-brand" href="index.html">初识 Bootstrap</a>
</div>

简轻巧单解释下以上代码:

 ■ 开关中的navbar-toggle 类用于选用CSS样式;

 ■ 后边的数额属性 data-toggle 和 data-target 是Bootstrap 的JavaScript 插件要用的,分部表示预期行为和预期目的(即 collapse 和类名称叫navbar-collapse 的成分,那么些因素后边会加上)

 ■ 类名称叫 icon-bar 的span 成分是CSS用来制造按键中的3道杠开关用的。

(二) 接下来把导航项包装在2个收受的div中,即用饱含适当 Bootstrap类的div把<ul class="nav navbar-nav">包装起来:

<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>

在如今两步中,大家把代码分分隔成两部分,而且都位于 <div class="container">中。

好了,在任何二个今世浏览器(IE9或Firefox、Chrome、Safari等的流行版本)中,拖动窗口裁减到低于980像素。其出示效果如下:

必发88官网 12

 

 

7.三 排除故障

设若1切顺利,那么注解你曾经打响地把LESS编写翻译成CSS,而且也成功地含有了Bootstrap的JavaScript插件。假使不顺遂,那就要仔细检查下咯。

7.4 支持IE8

要扶助IE捌,必要1段JavaScript代码让浏览器能响应媒体询问。这段代码正是斯科特Jehl的 respond.js “腻子脚本”。

Bootstrap本身的文书档案推荐这样做以包容IE8。相关新闻能够参见这里:

为了针对IE八 应用这段脚本,要求针对IE八的尺码注释:

<!--[if lt IE 9]>
...
<![endif]-->

别的,根据Andy 克拉克e的提议,为了不让并无需那一个本子的Windows 移动道具加载该脚本,还应当破除IE移动版浏览器,具体参见他的在线代码块 320andup,地址是: 。

Clarke建议的条件注释如下:

<!--[if (lt IE 9) & (!IEMobile)]>
...
<![endif]-->

有了标准注释,上面正是在站点模板文件中增多腻子脚本了,步骤如下:

(1) 打开  ,下载源代码。

必发88官网 13

(二) 解压缩,找到名字为 respond.min.js 的压缩版。

(3) 把它复制到项目文件夹中的 js/vendor 目录下,与jQuery 和 Modernizr放到一齐。

必发88官网 14

(四) 然后,把下部几行加载 respond.js 文件代码增多到 index.html 中,包蕴针对IE的口径注释,就加载 Modernizr的代码上边:

<!-- Modernizr -->
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<!-- Respond.js for IE 8 or less only -->
<!--[if (lt IE 9) & (!IEMobile)]>
<script src="js/vendor/respond.min.js"></script>
<![endif]-->

(五) 好了,那样IE八 就足以支撑媒体询问响应视口大小变化了。

PS:即使您想测试增加腻子脚本的结果,但又不曾IE8浏览器,能够利用三个在线服务,叫Browsershots,地址是: ,那是免费的。还有3个收取费用的,叫BrowserStack,地址是:

 

来源:《Bootstrap实战》

作为Web前端开垦框架,Bootstrap为大多数规范的UI设计常见提供了用户本人、扩浏览器的化解方案。...

用作Web前端开拓框架,Bootstrap为繁多正式的UI设计常见提供了用户自个儿、扩浏览器的减轻方案。

 

 

1.下载Bootstrap

1.下载Bootstrap

开拓官方网址 http://getbootstrap.com/ 进行下载。

开垦官网 http://getbootstrap.com/ 举办下载。

必发88官网 15

必发88官网 16

 

 

 

 

2.预备项目模板文件夹

2.希图项目模板文件夹

接下去,大家为第1个体系创设3个文本夹以及部分大旨的文书。谓词大家还要接纳HTML5样板文件 HTML五 Boilerplate(H5BP),然后把Bootstrap的有用文件复制过去。

接下去,我们为第二个系列创设1个文书夹以及部分主导的文书。谓词大家还要采取HTML5样板文件 HTML五 Boilerplate(H伍BP),然后把Bootstrap的有用文件复制过去。

2.1 下载H5BP

2.1 下载H5BP

访问网址链接地址:https://html5boilerplate.com/ ,下载B5BP。

做客网址链接地址:https://html5boilerplate.com/ ,下载B5BP。

必发88官网 17

必发88官网 18

解压后,修改文件夹名称叫Bootstrap_First,其目录结构如下:

解压后,修改文件夹名称为Bootstrap_First,其目录结构如下:

必发88官网 19

必发88官网 20

二.二 然后删除和创新下必备的样子文件

二.二 然后去除和翻新下必备的范例文件

除去下列至于H五BP相关的文件夹和文件:

剔除下列至于H伍BP相关的公文夹和文书:

□ 因为稍后要动用LESS创设和煦的CSS文件,所以先删除css文件夹。

□ 因为稍后要选取LESS成立协调的CSS文件,所以先删除css文件夹。

□ doc 文件夹及其间内容

□ doc 文件夹及中间内容

二.三 掌握样板中的.htaccess文件

二.③ 精晓样板中的.htaccess文件

本条文件中的内容不必然全体都用,那有赖于主机设置和站点要求。那一个文件的三个主要用途是保险站点质量最优。

其一文件中的内容不必然全部都用,那有赖于主机设置和站点需要。那些文件的贰个首要用途是承接保险站点品质最优。

贰.四 更新必要的样子文件

二.四 更新须求的标准文件

标准中的下列文件提供了项目的正式音信,依据供给能够革新它们、直接运用它们依然就放那无论是。

旗帜中的下列文件提供了类别的专门的工作新闻,依据必要能够创新它们、直接运用它们依旧就放那无论是。

□ humans.txt:这一个文件记载贡献者,H5BP、Bootstrap的,还有任何进献者。

□ humans.txt:这些文件记载进献者,H五BP、Bootstrap的,还有任何进献者。

□ LICENSE.txt:在H伍BP许可前边,加上你依照该许可营造的网址的承认新闻,在H5BP许可后,加上Bootstrap以及别的站点中用到的根本的库的特许音信。

□ LICENSE.txt:在H伍BP许可前边,加上你依照该许可营造的网址的批准新闻,在H伍BP许可后,加上Bootstrap以及别的站点中用到的首要的库的许可音讯。

二.伍 更新站点桌面和触摸设备Logo

2.伍 更新站点桌面和触摸设备Logo

并非忘了用本身项目标Logo替换 Boilerplate 暗中同意的Logo文件。

绝不忘了用本人项指标Logo替换 Boilerplate 暗中认可的Logo文件。

 

 

 

 

3.加入Bootstrap文件

3.加入Bootstrap文件

3.1 字体

3.1 字体

从Bootstrap的主文件夹中,把fonts文件夹复制粘贴到Bootstrap_First文件夹中。那个文件夹里含有着Bootstrap附带的首要的Glyphicon字体。

从Bootstrap的主文件夹中,把fonts文件夹复制粘贴到Bootstrap_First文件夹中。这一个文件夹里含有着Bootstrap附带的重大的Glyphicon字体。

担保起见,再在fonts文件夹中放一个跨域友好的.htaccess文件:

保证起见,再在fonts文件夹中放一个跨域友好的.htaccess文件:

<FilesMatch ".(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
<FilesMatch ".(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

其目标是承接保险纵然站点根目录下未有放H五BP的.htaccess文件,也不会现出字体难题。

其目标是保障固然站点根目录下未有放H五BP的.htaccess文件,也不晤面世字体难题。

 

 

3.2 JavaScript

3.2 JavaScript

接下去正是到场Bootstrap的JavaScript文件。H5BP的文书夹中曾经包蕴了多少个JavaScript文件如下:

接下去正是参与Bootstrap的JavaScript文件。H伍BP的文书夹中曾经包含了多少个JavaScript文件如下:

必发88官网 21 

必发88官网 22 

在js文件夹里新建文件夹bootsreap,然后把Bootstrap的js文件夹中的脚本都复制过来。上面包车型客车截图呈现了Bootstrap随带的插件。每一种插件贰个文件:

在js文件夹里新建文件夹bootsreap,然后把Bootstrap的js文件夹中的脚本都复制过来。上边包车型客车截图呈现了Bootstrap随带的插件。每一种插件多少个文件:

必发88官网 23

必发88官网 24

把那么些插件文件聚焦封存到新建的js/bootstrap 文件夹,便于优化网址品质,即能够按需选拔插件、排除任何文件并缩短文件大小。

把那个插件文件聚集封存到新建的js/bootstrap 文件夹,便于优化网址品质,即能够按需选用插件、排除任何文件并收缩文件大小。

在付出时期,保持全部Bootstrap的插件都可用也是二个主意。那样,假设想增多个折叠、提醒或许传送带效应,都得以随手拈来。

在开荒时期,保持全数Bootstrap的插件都可用也是贰个措施。那样,假若想加多个折叠、提醒可能传送带效应,都足以随手拈来。

H伍BP采取的法子是把具备插件代码复制到2个plugins.js模板文件中。那是终止开辟从此的一级做法,因为那样能够削减HTTP请求,加速站点速度。(换句话说,2个80K的文书,比加载伍个20K的文本速度更加快。)

H五BP选择的方法是把具有插件代码复制到三个plugins.js模板文件中。那是终止开采从此的极品做法,因为这么能够削减HTTP请求,加速站点速度。(换句话说,1个80K的公文,比加载多少个20K的文件速度更加快。)

开辟Bootstrap文件夹中蕴涵分发文件的dist文件夹。在这几个文件夹中的js文件夹里,包涵着 bootstrap.js 和 bootstrap.min.js,它们就是含有 Bootstrap全体插件代码的大文件。

展开Bootstrap文件夹中蕴藏分发文件的dist文件夹。在那一个文件夹中的js文件夹里,包含着 bootstrap.js 和 bootstrap.min.js,它们正是带有 Bootstrap全体插件代码的大文件。

必发88官网 25

必发88官网 26

把bootstrap.min.js 的富有代码复制到plugins.js 里。

把bootstrap.min.js 的持有代码复制到plugins.js 里。

下一场把Bootstrap文件夹里的less文件夹也复制到项目文件夹中。

下一场把Bootstrap文件夹里的less文件夹也复制到项目文件夹中。

 

 

4.构造HTML模板

4.构造HTML模板

张开项目中的 index.html 文件进行编辑。那一个示例标志文件来自H5BP,显示了部分一级试行和建议方案。大家就以这些为根基,把它结合到Bootstrap的办事流中。

开发项目中的 index.html 文件举办编写制定。这几个示例标识文件来自H5BP,展现了一部分一级级实行和提议方案。大家就以这一个为根基,把它构成到Bootstrap的干活流中。

浏览一下整整文件,当中有多少个有意思的地点,H伍BP文书档案中都有详尽表明,近些日子的五.3.0版本的链接地址为: 。下面也简单介绍下,按次序来:

浏览一下全套文件,当中有多少个有趣的地点,H五BP文书档案中都有详细表达,最近的伍.三.0本子的链接地址为: 。上面也简介下,按次序来:

□ HTML5 文书档案类型申明:

□ HTML五 文档类型证明:

<!doctype html>
<!doctype html>

□ 接下去是多少个meta标签

□ 接下去是多少个meta标签

  ■  用于钦赐字符集的:  

  ■  用于钦点字符集的:  

<meta charset="utf-8">
<meta charset="utf-8">

  ■  告诉IE使用最新版的渲染引擎

  ■  告诉IE使用新型版的渲染引擎

<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta http-equiv="x-ua-compatible" content="ie=edge">

  ■  预留给描述站点用的:

  ■  预留给描述站点用的:

<meta name="description" content="">
<meta name="description" content="">

  ■ 针对移动浏览器的视口标签

  ■ 针对移动浏览器的视口标签

 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="viewport" content="width=device-width, initial-scale=1">

□ 接下去是四个样式表的链接

□ 接下去是八个样式表的链接

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">

□ 再上边正是加载Modernizr脚本的script标签。这几个剧本回味IE8提供HTML5“垫片脚本”,以便它能辨别HTML5的分区成分:

□ 再上面正是加载Modernizr脚本的script标签。那个本子回味IE8提供HTML5“垫片脚本”,以便它能辨识HTML伍的分区成分:

<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<script src="js/vendor/modernizr-2.8.3.min.js"></script>

□ 接下去是IE条件注释,包括推荐用户把旧版本IE晋级到新本子的音讯:

□ 接下去是IE条件注释,包括推荐用户把旧版本IE进级到新本子的音信:

<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browse. ...
<![endif]-->
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browse. ...
<![endif]-->

□ 紧接着是1段文本

□ 紧接着是1段文本

□ 随后是托管在谷歌(谷歌(Google))服务器上的jQuery链接,以及二个本地jQuery的后备链接:

□ 随后是托管在谷歌(Google)服务器上的jQuery链接,以及二个地面jQuery的后备链接:

<script src="http://www.qjdongsheng.com/uploads/allimg/190514/13352A2Y-6.jpg"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"></script>')</script>
<script src="http://www.qjdongsheng.com/uploads/allimg/190514/13352A2Y-6.jpg"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"></script>')</script>

□ 下边正是plugins.js 和main.js的链接,别分保存JavaScript插件代码和大家编辑的代码:

□ 上边正是plugins.js 和main.js的链接,别分保存JavaScript插件代码和大家编辑的代码:

<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

□ 谷歌的Analytics 脚本:

□ 谷歌的Analytics 脚本:

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l= new Date;
  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
  e.src='http://www.qjdongsheng.com/uploads/allimg/190514/13352644N-7.jpg';
  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l= new Date;
  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
  e.src='http://www.qjdongsheng.com/uploads/allimg/190514/13352644N-7.jpg';
  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>

 

 

对此番的天职来讲,我们必要对那么些模板中的成分举行如下操作:

对此番的义务来讲,大家必要对这么些模板中的成分进行如下操作:

(一) 设定大家站点的题目,针对旧版本浏览器用户更新现成的IE条件注释;

(一) 设定大家站点的题目,针对旧版本浏览器用户更新现存的IE条件注释;

(2) 基于LESS文件编写翻译Bootstrap的CSS,增多基本的页面内容;

(二) 基于LESS文件编写翻译Bootstrap的CSS,增加基本的页面内容;

(三) 整合Bootstrap的JavaScript插件,确认保证响应式的导航条(navbar)正常响应。

(三) 整合Bootstrap的JavaScript插件,确认保障响应式的导航条(navbar)寻常响应。

做完这几件事后,大家就能够开头设计本身的网址了。

做完这几件事后,大家就能够伊始规划本人的网址了。

 

 

五.设定站点题目 

5.设定站点标题 

<title>初识 Bootstrap</title>
<title>初识 Bootstrap</title>

5.一 调解过时的浏览器音讯

5.一 调度过时的浏览器音信

模板中的消息针对老浏览器用户。

模板中的音信针对老浏览器用户。

<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">
upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">
upgrade your browser</a> to improve your experience.</p>
<![endif]-->

 当中带有的链接  ,该网站是三个推荐浏览器晋级的站点。

 当中蕴藏的链接  ,该网址是3个推荐介绍浏览器升级的站点。

5.二 设置主结构成分

五.2 设置主结构成分

下边起始企图页面内容,方今还唯有1个段落。我们可以稍微加多一些内容:

上边初步盘算页面内容,这段日子还唯有贰个段落。大家得以稍微增添一些剧情:

□ 包括Logo的导航的页头区;

□ 包蕴Logo的领航的页头区;

□ 包蕴页面内容的内容区;

□ 包涵页面内容的内容区;

□ 包涵版权和社交媒体链接的页脚区。

□ 包括版权和社交媒体链接的页脚区。

充分那一个剧情,都会基于最新的HTML最棒实行来做,而且会设想A兰德QashqaiIA(Accessible Rich Internet Applications,可访问富因特网应用)的role属性(即banner、navigation、main和contentinfo 那多少个角色)。HTML伍后来又追加了 <main cole="main></main> 成分,指标是特意为页面或分区中的主内容提供3个专项使用的成分。要明白越来越多新闻,能够参见链接:

增多那个故事情节,都会依据最新的HTML最棒实施来做,而且会设想ALANDIA(Accessible Rich Internet Applications,可访问富因特网应用)的role属性(即banner、navigation、main和contentinfo 那多少个角色)。HTML5后来又增加了 <main cole="main></main> 成分,目标是特地为页面或分区中的主内容提供一个专项使用的要素。要询问越多新闻,能够参照链接:

找到下边包车型地铁代码:

找到上边包车型客车代码:

<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>

必发88官网,修改为:

修改为:

<header role="banner">
<nav role="navigation">
</nav>
</header>

<main role="main">
<h1>Main Heading</h1>
<p>Content specific to this page goes here.</p>
</main>

<footer role="contentinfo">
<p><small>Copyright &copy; Luka Ye</small></p>
</footer>
<header role="banner">
<nav role="navigation">
</nav>
</header>

<main role="main">
<h1>Main Heading</h1>
<p>Content specific to this page goes here.</p>
</main>

<footer role="contentinfo">
<p><small>Copyright &copy; Luka Ye</small></p>
</footer>

那正是大家页面包车型客车基本结议和剧情。

那正是大家页面包车型客车主题结构和内容。

 

 

6.导航条

6.导航条

大家先把Bootstrap特有的因素设置好,那便是导航条。

咱俩先把Bootstrap特有的因素设置好,那便是导航条。

作为起源,咱们得以一时就选用Bootstrap基本的导航条。为此,从Bootstrap文档中拿来它的导航条代码,然后做出如下调度:

作为起源,大家得以一时半刻就采纳Bootstrap基本的导航条。为此,从Bootstrap文书档案中拿来它的导航条代码,然后做出如下调度:

□ 增多了 navbar-static-top 类,因为我们意在导航条能够稳定到窗口顶上部分,但亦可随页面滚动而滚动。

□ 增多了 navbar-static-top 类,因为大家期待导航条能够牢固到窗口顶上部分,但可以随页面滚动而滚动。

□ 把项目名称连接到 index.html;

□ 把项目名称连接到 index.html;

□ 把原来的父div标签改成了语义化的HTML伍 nav 标签。

□ 把本来的父div标签改成了语义化的HTML伍 nav 标签。

调治后,其header成分如下:

调治后,其header成分如下:

<header role="banner">
<nav role="navigation" class="navbar nav-static-top navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">初识 Bootstrap</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</nav>
</header>
<header role="banner">
<nav role="navigation" class="navbar nav-static-top navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">初识 Bootstrap</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</nav>
</header>

封存结果,其导航条的展现效果如下:

保存结果,其导航条的体现效果如下:

必发88官网 27

必发88官网 28

剧情有了。今后,大家特别需求团结的样式表。先来产生并链接Bootstrap私下认可的样式表。

内容有了。以后,大家特意供给协和的样式表。先来变成并链接Bootstrap暗中同意的样式表。

 

 

7.编译和链接暗中认可的Bootstrap CSS

7.编写翻译和链接暗中同意的Bootstrap CSS

7.1 编译Bootstrap CSS

7.1 编译Bootstrap CSS

找到less/bootstrap.less 并张开它,这些文件导入了less文件夹中全体其余文件。编写翻译后,那几个文件会变动完整的bootstrap.css样式表。而那正是咱们第壹步要做的。

找到less/bootstrap.less 并开垦它,那些文件导入了less文件夹中全部别的文件。编写翻译后,那一个文件会扭转完整的bootstrap.css样式表。而那正是我们率先步要做的。

PS:LESS的文书档案地址为 http://lesscss.org/  

PS:LESS的文书档案地址为 http://lesscss.org/  

若是壹切尚未编写翻译过LESS文件,要求下载和设置它的编写翻译器。

就算一切未有编写翻译过LESS文件,供给下载和安装它的编写翻译器。

□ Window 用户,下载和安装那一个编写翻译器:

□ Window 用户,下载和安装那些编写翻译器:

 ■ WinLess(免费桌面应用),地址为 。

 ■ WinLess(无偿桌面应用),地址为 。

□ Mac 用户能够接纳下载:

□ Mac 用户能够选拔下载:

 ■ Crunch 应用(免费),地址为

 ■ Crunch 应用(免费),地址为

 ■ CodeKit(收费),地址为

 ■ CodeKit(收费),地址为

下载了选择的LESS编写翻译器之后,安装,张开。然后就足以遵守下边的步调来做了。

下载了选拔的LESS编写翻译器之后,安装,张开。然后就足以遵照下边包车型大巴步子来做了。

(壹) 在根目录创造css文件夹。

(一) 在根目录创造css文件夹。

必发88官网 29

必发88官网 30

(贰) 使用下列的壹种把主文件(css、fonts、img、js和 less文件夹的父文件夹)加多到编写翻译器:

(二) 使用下列的1种把主文件(css、fonts、img、js和 less文件夹的父文件夹)加多到编写翻译器:

 ■ 把文件夹拖到编写翻译器窗口中;

 ■ 把文件夹拖到编写翻译器窗口中;

 ■ 在编写翻译器窗口中找到 Add folder 按键,点击选取主文件夹。

 ■ 在编写翻译器窗口中找到 Add folder 按键,点击选拔主文件夹。

(3) 然后再编译器窗口中能够看到加载的LESS文件,找到less/bootstrap.lesss文件

(三) 然后再编译器窗口中可以观望加载的LESS文件,找到less/bootstrap.lesss文件

(肆) 右键单击less/bootstrap.less 文件,选用 Select output file,找到刚创造的css文件夹,此时出口文件名应当自行会化为bootstrap.css,单击“保存”。

(四) 右键单击less/bootstrap.less 文件,选拔 Select output file,找到刚创设的css文件夹,此时出口文件名应当自行会化为bootstrap.css,单击“保存”。

(5) 采纳输出路线和文书名,点击Compile。

(伍) 选拔输出路线和文件名,点击Compile。

必发88官网 31

必发88官网 32

(陆) css文件夹中会出现编写翻译生成的 bootstrap.css文件。

(陆) css文件夹中会出现编写翻译生成的 bootstrap.css文件。

(7) 编写翻译成功后,唯1要留心的是以此文件名是或不是与index.html中链接的公文名一样。

(7) 编写翻译成功后,唯1要留心的是其一文件名是不是与index.html中链接的文件名一样。

(八) 在 index.html 中,删除指向 css/normalize.css 的样式表链接,因为那几个样式表已经包蕴在 Bootstrap中了。

(八) 在 index.html 中,删除指向 css/normalize.css 的样式表链接,因为那么些样式表已经包括在 Bootstrap中了。

(玖) 复制1份 bootstrap.css,重命名字为main.css。

(9) 复制壹份 bootstrap.css,重命名字为main.css。

必发88官网 33

必发88官网 34

(拾) 浏览器展开index.html文件,能够见见起私下认可的导航样式如下,从排版和布局上享有加强,这表明CSS已经生效。

(10) 浏览器张开index.html文件,能够看看起私下认可的领航样式如下,从排版和布局上装有增加,那表达CSS已经生效。

必发88官网 35

必发88官网 36

7.2 实现响应式导航条

⑦.二 实现响应式导航条

为了在 Bootstrap 响应式导航条基础上完结我们的导航条,还得再追加多个新因素,以及对应的类和data属性。相关的用法能够参照 Bootstrap的Components 文档,在Navbar选项卡下:

为了在 Bootstrap 响应式导航条基础上到位大家的导航条,还得再充实两个新因素,以及相应的类和data属性。相关的用法能够参考Bootstrap的Components 文书档案,在Navbar选项卡下:

先根据下列步骤增添额外的标记。

先根据下列步骤增添额外的符号。

(一) 搜索到 <div class="navbar-header">,在1个要素中增多三个navbar-toggle开关,用于开始展览和取出响应式导航条。上面正是以此按键的一切符号:

(一) 搜索到 <div class="navbar-header">,在贰个成分中增多贰个navbar-toggle按键,用于开始展览和接收响应式导航条。下边就是那些开关的上上下下标识:

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">



</button>
<a class="navbar-brand" href="index.html">初识 Bootstrap</a>
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">



</button>
<a class="navbar-brand" href="index.html">初识 Bootstrap</a>
</div>

简短表明下以上代码:

粗略表明下以上代码:

 ■ 按键中的navbar-toggle 类用于采纳CSS样式;

 ■ 按键中的navbar-toggle 类用于采用CSS样式;

 ■ 前边的数目属性 data-toggle 和 data-target 是Bootstrap 的JavaScript 插件要用的,分局表示预期行为和预期指标(即 collapse 和类名称叫navbar-collapse 的要素,这几个因素前边会助长)

 ■ 前边的数目属性 data-toggle 和 data-target 是Bootstrap 的JavaScript 插件要用的,总部表示预期行为和预期指标(即 collapse 和类名为navbar-collapse 的成分,那一个成分前边会增进)

 ■ 类名字为 icon-bar 的span 成分是CSS用来创立按键中的3道杠按键用的。

 ■ 类名称为 icon-bar 的span 成分是CSS用来成立开关中的3道杠按键用的。

(2) 接下来把导航项包装在1个接受的div中,即用富含适当 Bootstrap类的div把<ul class="nav navbar-nav">包装起来:

(二) 接下来把导航项包装在一个抽出的div中,即用含有适当 Bootstrap类的div把<ul class="nav navbar-nav">包装起来:

<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>

在最近两步中,大家把代码分分隔成两片段,而且都位于 <div class="container">中。

在前方两步中,大家把代码分分隔成两片段,而且都位居 <div class="container">中。

好了,在其它1个今世浏览器(IE九或Firefox、Chrome、Safari等的时尚版本)中,拖动窗口减少到低于980像素。其出示效果如下:

好了,在其余3个当代浏览器(IE九或Firefox、Chrome、Safari等的新颖版本)中,拖动窗口减少到低于980像素。其出示效果如下:

必发88官网 37

必发88官网 38

 

 

 

 

七.三 排除故障

7.3 排除故障

设若1切顺遂,那么申明您早就成功地把LESS编写翻译成CSS,而且也不负众望地含有了Bootstrap的JavaScript插件。假诺不顺畅,这就要细心检查下咯。

比如壹切顺遂,那么评释你已经成功地把LESS编写翻译成CSS,而且也不负众望地含有了Bootstrap的JavaScript插件。如若不顺利,那就要过细检查下咯。

7.4 支持IE8

7.4 支持IE8

要帮忙IE捌,要求1段JavaScript代码让浏览器能响应媒体询问。这段代码就是ScottJehl的 respond.js “腻子脚本”。

要帮忙IE8,必要壹段JavaScript代码让浏览器能响应媒体询问。这段代码正是ScottJehl的 respond.js “腻子脚本”。

Bootstrap本身的文书档案推荐那样做以兼容IE8。相关音信能够参照这里:

Bootstrap自个儿的文书档案推荐那样做以包容IE八。相关新闻能够参谋这里:

为了针对IE八 应用这段脚本,须要针对IE八的口径注释:

为了针对IE8 应用这段脚本,必要针对IE八的准绳注释:

<!--[if lt IE 9]>
...
<![endif]-->
<!--[if lt IE 9]>
...
<![endif]-->

其余,根据Andy 克拉克e的提议,为了不让并无需这些本子的Windows 移动器材加载该脚本,还应该排除IE移动版浏览器,具体参见他的在线代码块 320andup,地址是: 。

此外,依照Andy Clarke的建议,为了不让并不供给这一个剧本的Windows 移动道具加载该脚本,还应有破除IE移动版浏览器,具体参见他的在线代码块 320andup,地址是: 。

Clarke建议的原则注释如下:

Clarke建议的尺码注释如下:

<!--[if (lt IE 9) & (!IEMobile)]>
...
<![endif]-->
<!--[if (lt IE 9) & (!IEMobile)]>
...
<![endif]-->

有了准星注释,下边正是在站点模板文件中增多腻子脚本了,步骤如下:

有了规范注释,上边就是在站点模板文件中加多腻子脚本了,步骤如下:

(1) 打开  ,下载源代码。

(1) 打开  ,下载源代码。

必发88官网 39

必发88官网 40

(贰) 解压缩,找到名叫 respond.min.js 的压缩版。

(2) 解压缩,找到名字为 respond.min.js 的压缩版。

(3) 把它复制到项目文件夹中的 js/vendor 目录下,与jQuery 和 Modernizr放到一齐。

(三) 把它复制到项目文件夹中的 js/vendor 目录下,与jQuery 和 Modernizr放到一齐。

必发88官网 41

必发88官网 42

(四) 然后,把下边几行加载 respond.js 文件代码增加到 index.html 中,包涵针对IE的尺度注释,就加载 Modernizr的代码上面:

(四) 然后,把下边几行加载 respond.js 文件代码增添到 index.html 中,包含针对IE的标准注释,就加载 Modernizr的代码下边:

<!-- Modernizr -->
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<!-- Respond.js for IE 8 or less only -->
<!--[if (lt IE 9) & (!IEMobile)]>
<script src="js/vendor/respond.min.js"></script>
<![endif]-->
<!-- Modernizr -->
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<!-- Respond.js for IE 8 or less only -->
<!--[if (lt IE 9) & (!IEMobile)]>
<script src="js/vendor/respond.min.js"></script>
<![endif]-->

(5) 好了,那样IE八 就足以帮助媒体询问响应视口大小变化了。

(5) 好了,那样IE八 就能够辅助媒体询问响应视口大小变化了。

PS:假诺你想测试增添腻子脚本的结果,但又从不IE8浏览器,能够选择一个在线服务,叫Browsershots,地址是:,那是免费的。还有三个收款的,叫BrowserStack,地址是: (试用无需付费)。

PS:假若你想测试增添腻子脚本的结果,但又尚未IE八浏览器,可以使用3个在线服务,叫Browsershots,地址是:,那是免费的。还有2个收取薪给的,叫BrowserStack,地址是: (试用无需付费)。

 

 

来源:《Bootstrap实战》

来源:《Bootstrap实战》

本文由必发88官网发布,转载请注明来源:读书笔记