起始一个体系,读书笔记

By admin in 4858美高梅 on 2019年4月21日
  • time: 2016-10-20 20:00

缘何选拔Bootstrap,因为它是二个简练、直观、强悍的前端开采框架,让web开辟更便捷、轻易。

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

用作Web前端开辟框架,Bootstrap为绝大许多正式的UI设计常见提供了用户自身、扩浏览器的化解方案。

 

1.下载Bootstrap

开垦官方网址  实行下载。

4858美高梅 1

 

 

2.预备项目模板文件夹

接下去,大家为第一个项目创设叁个文本夹以及部分基本的文本。谓词大家还要采取HTML5样板文件
HTML五 Boilerplate(H5BP),然后把Bootstrap的有用文件复制过去。

2.1 下载H5BP

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

4858美高梅 2

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

4858美高梅 3

二.二 然后删除和立异下必备的轨范文件

除去下列至于H5BP相关的文书夹和文书:

□ 因为稍后要使用LESS创立和谐的CSS文件,所以先删除css文件夹。

□ doc 文件夹及内部内容

二.三 明白样板中的.htaccess文件

那几个文件中的内容不必然全部都用,那取决主机设置和站点供给。这么些文件的二个首要用途是承保站点品质最优。

贰.四 更新供给的轨范文件

典范中的下列文件提供了等级次序的科班音讯,依据需求能够立异它们、直接利用它们依然就放那无论是。

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

□ LICENSE.txt:在H五BP许可前面,加上你依据该许可构建的网址的批准音信,在H五BP许可后,加上Bootstrap以及别的站点中用到的首要的库的准许消息。

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

决不忘了用本身项目标Logo替换 Boilerplate 默许的Logo文件。

 

 

3.加入Bootstrap文件

3.1 字体

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

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

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

其目标是保险纵然站点根目录下没有放H5BP的.htaccess文件,也不会产出字体难题。

 

3.2 JavaScript

接下去便是出席Bootstrap的JavaScript文件。H伍BP的文本夹中曾经包括了多少个JavaScript文件如下:

4858美高梅 4 

在js文件夹里新建文件夹bootsreap,然后把Bootstrap的js文件夹中的脚本都复制过来。上边的截图展现了Bootstrap随带的插件。每种插件2个文书:

4858美高梅 5

把那几个插件文件集中封存到新建的js/bootstrap
文件夹,便于优化网址质量,就可以以按需选择插件、排除别的文件并缩减文件大小。

在开采期间,保持全部Bootstrap的插件都可用也是一个方法。那样,假如想增加个折叠、提醒或许传送带效应,都得以随手拈来。

H5BP选用的办法是把具有插件代码复制到二个plugins.js模板文件中。那是终止开垦从此的特级做法,因为如此可以减掉HTTP请求,加速站点速度。(换句话说,3个80K的文本,比加载6个20K的文本速度更加快。)

开发Bootstrap文件夹中涵盖分发文件的dist文件夹。在这么些文件夹中的js文件夹里,包涵着
bootstrap.js 和 bootstrap.min.js,它们正是带有
Bootstrap全部插件代码的大文件。

4858美高梅 6

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

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

 

4.构造HTML模板

开发项目中的 index.html
文件举办编辑。那个示例标志文件来自H伍BP,突显了1部分拔尖级实践和建议方案。我们就以这些为根基,把它结合到Bootstrap的做事流中。

浏览一下1体文件,个中有多少个有趣的地点,H五BP文书档案中都有详细表达,如今的5.叁.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捌提供HTML伍“垫片脚本”,以便它能辨识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]-->

□ 紧接着是一段文本

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

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></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='https://www.google-analytics.com/analytics.js';
  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>

 

对本次的天职来说,我们需求对那些模板中的元素进行如下操作:

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

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

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

做完这几件事后,大家就可以早先陈设和煦的网址了。

 

五.设定站点标题 

<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]-->

 个中积存的链接 
,该网站是1个引入浏览器晋级的站点。

伍.二 设置主结构成分

下边起先准备页面内容,方今还唯有一个段落。我们能够稍微增多一些剧情:

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

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

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

起始一个体系,读书笔记。增加那几个剧情,都会依赖最新的HTML最棒实施来做,而且会思量AXC60IA(Accessible
Rich Internet
Applications,可访问富因特网应用)的role属性(即banner、navigation、main和contentinfo
这多少个剧中人物)。HTML五后来又增添了 <main cole=”main></main>
元素,目的是特意为页面或分区中的主内容提供3个专用的要素。要询问越多音讯,能够参考链接:

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

<!-- 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标签改成了语义化的HTML五 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>

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

4858美高梅 7

剧情有了。现在,大家特意要求团结的样式表。先来产生并链接Bootstrap暗中认可的样式表。

 

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

7.1 编译Bootstrap CSS

找到less/bootstrap.less
并展开它,这么些文件导入了less文件夹中全数别的文件。编写翻译后,这么些文件会变动完整的bootstrap.css样式表。而那正是大家率先步要做的。

PS:LESS的文书档案地址为   

1旦整个尚未编写翻译过LESS文件,供给下载和装置它的编写翻译器。

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

 ■ WinLess(无需付费桌面应用),地址为 。

□ Mac 用户能够挑选下载:

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

 ■ CodeKit(收费),地址为

下载了选取的LESS编写翻译器之后,安装,展开。然后就足以依照下边包车型大巴手续来做了。

(1) 在根目摄像造css文件夹。

4858美高梅 8

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

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

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

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

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

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

4858美高梅 9

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

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

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

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

4858美高梅 10

(十)
浏览器张开index.html文件,可以见见起暗中认可的领航样式如下,从排版和布局上富有压实,那证明CSS已经生效。

4858美高梅 11

七.2 达成响应式导航条

为了在 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用来创立按键中的三道杠按键用的。

(2) 接下来把导航项包装在1个收受的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”>中。

好了,在其余三个今世浏览器(IE玖或Firefox、Chrome、Safari等的最新版本)中,拖动窗口收缩到低于980像素。其出示效果如下:

4858美高梅 12

 

 

7.三 排除故障

比方壹切顺遂,那么注脚你已经成功地把LESS编译成CSS,而且也不负众望地蕴藏了Bootstrap的JavaScript插件。假使不及愿,那将要精心检查下咯。

7.4 支持IE8

要支持IE捌,须求1段JavaScript代码让浏览器能响应媒体询问。那段代码便是ScottJehl的 respond.js “腻子脚本”。

Bootstrap本人的文书档案推荐那样做以包容IE八。相关消息能够参照那里:

为了针对IE捌 应用那段脚本,要求针对IE八的条件注释:

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

除此以外,根据Andy Clarke的提议,为了不让并不需求那几个本子的Windows
移动设备加载该脚本,还应该解除IE移动版浏览器,具体参见他的在线代码块
320andup,地址是: 。

Clarke建议的准绳注释如下:

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

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

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

4858美高梅 13

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

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

4858美高梅 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:如若你想测试增加腻子脚本的结果,但又从不IE捌浏览器,能够使用三个在线服务,叫Browsershots,地址是:
,那是免费的。还有三个收取薪金的,叫BrowserStack,地址是:

 

来源:《Bootstrap实战》

作为Web前端开采框架,Bootstrap为多数正规的UI设计常见提供了用户本身、扩浏览器的缓和方案。…

作为Web前端开拓框架,Bootstrap为绝大许多标准的UI设计常见提供了用户自个儿、扩浏览器的消除方案。

HTML5 Boilerplate(H5BP)是二个由 PaulIrish(谷歌(Google) Chrome 开荒职员、jQuery 项目成员、Modernizr
小编、yayQuery
播客主持人)主导的“前端开垦模版”,也得以差不多通晓为web前端的最棒实行的HTML+CSS+jquery模板会集,帮您构建火速, 健壮, 并且适应力强的web app或网址。

下载  Bootstrap

访问下边网站下载最新的 bootstrap 源文件

找到如下所示的下载页面,点击 Download source 开关就可以下载,若是用 Sass
开拓,那么把 Sass 文件也下载下来,

4858美高梅 15

解压后,张开 bootstrap
文件夹能够看看个中有一批文件以及文件夹,大概就像这么,

4858美高梅 16

其间,less 文件夹里面富含了具备的 less 文件,js 文件夹里面包涵了十一个 js
插件,接下去,大家去下载 HTML伍 Boilerplate。

 

壹、H五BP 特性简单介绍

下载 HTML5 Boilerplate

访问 获取最新的 HTML5 Boilerplate(H5BP)
文件,解压后我们给文件夹命名叫 project一表示项目壹,打开文件夹,能够见见当中包罗的剧情,如下所示,

4858美高梅 17

1.下载Bootstrap

  • 始创在 HTML 页面包车型客车 body 上运用 IE
    条件注释决断浏览器版本,从而大大简化了针对性 IE 哈克的工本(在新生的版本中升高为在 标签中参与条件注释)
  • HTML5 集成,暗许使用了不少 HTML伍 的风味,并且使其相称旧版本浏览器
  • 大气针对服务器的暗中认可配置,无需修改就能够配置2个平安、规范的 web
    服务器
  • 完整的 JS 调节和测试机制 —— 就算在 IE 下
  • 汪洋采纳 CSS3手艺,并且集成了大概具有来自框架花潮技能大腕们口头轶事的 CSS 本事
  • 减掉包内含有了
    1个到底、移动终端友好的HTML模版;优化过的谷歌总结代码;触摸屏设备上应用的Logo;还有充足的文书档案、本事、秘技
  • 含蓄了 Normalize.css— 二个先进的、帮助HTML5的CSS reset —
    和基础样式、匡助作用、media queries、打字与印刷样式
  • 自带了四个了不起的Javascript工具库的风靡版本: jQuery (暗许链接到
    谷歌(Google)的CDN, 倘使CDN失效,当三步跳件作为后备) 和Modernizr
    浏览器天性监测工具库,能够检验浏览器对新特征的支撑力量,方便针对旧版本浏览
  • 为具有浏览意况做了优化,包蕴移动版本和打字与印刷版本

删掉不供给的公文

  1. css 文件夹(因为咱们会使用 bootstrap 的体制)
  2. CHANGELOG.md
  3. CONTRIBUTING.md
  4. doc 文件夹以及个中的剧情

开采官方网站 http://getbootstrap.com/
举行下载。

2、怎么着运用H5BP

履新须求的公文

  1. humans.txt,里面能够写上全体网址专门的学业协会,对扶持过网址建设的芸芸众生致以谢意,以及使用到的开拓工具等等。
  2. LICENSE.md,增添上 Bootstrap 和别的框架的许可音讯。
  3. README.md,提供三个中坚的门类表明。

4858美高梅 18

  1. 下载H5BP

    下载地址:HTML5 Boilerplate(H5BP)

  2. 删去不供给的标准文件

    剔除下列只与H5BP有关的文件:

    • CHANGELOG.md
    • CONTRIBUTING.md
    • doc文件夹及其内容
    • 删除css文件夹内不必要的体裁文件
  3. 略知一二样板中的.htaccess文件
    建议先看三遍H伍BP的文书档案(),此文件本人也有详实的表明,可以展开编辑器从头到尾看一次,那一个文件夹的剧情不全都有用,主要取决于你的主机设置和站点须求,但是这一个文件的3个首要用途是保险站点品质最优。

  4. 可挑选翻新的标准文件

    标准中的下列文件提供了品种的正儿八经新闻,依据须求能够立异它们:

    – humans.txt:这几个文件记载了进献者,H五BP、Bootstrap等

    LICENSE.md:在H5BP许可前边,可拉长你依照该许可营造的网址的认同音讯,在H伍BP许可随后,加上Bootstrap以及别的站点中用到的第叁的库的批准新闻。

    • README.md:加上本身的类型表明新闻并更新那几个文件。
  5. 履新站点桌面Logo和触摸设备Logo

    不要忘了用自个儿项目标Logo替换H5BP暗许的Logo文件,包涵以下图标:

    apple-touch-icon.png:为保障全部移动设备都有顶级效果,这么些Logo应该是14四px*14四px方形Logo

    • favicon.ico:3二px方形Logo
  6. 加入Bootstrap 文件

    当今我们着想把H5BP和bootstrap结合使用,大家必要从bootstrap提供的一大推文件中选出需求的局部:
    – 字体:
    把fonts文件夹复制到H伍BP文件夹的根目录,那些文件夹包涵bootstrap首要的Glyphicon字体。
    为保证起见,在那些fonts文件夹建二个.hatccsee文件,幸免因为尤其多的CDN为您的网址缓存静态能源,假若未有那么些文件有些浏览器会拒绝识别你的WEB字体,在开立的.hatccss文件中增多如下代码:
    4858美高梅 19
    – JavaScript
    在js目录下开创2个bootstrap文件夹,然后把bootstrap的js脚本文件拷到这几个文件夹下,便于优化网址品质,就能够按需选拔插件、排除任何文件并压缩文件大小。
    H5BP采取的主意是将具有的插件代码都复制到plugins.js模板文件,那是结束开辟从此的特等做法,因为如此能够减去http请求,加快站点的加载速度。全体以往大家须要找到Bootstrap文件夹下的bootstrap.min.js文件,张开->全选代码->复制->粘贴到plugins.js模板文件中->保存并脱离。
    – css文件

    1. 先是种形式:能够一直把bootstrap的样式大文件拷贝到css文件夹内;
    2. 第一种方法:把bootstrap中相当重要的less文件夹全体复制过来:把bootstrap/less文件夹复制到H5BP文件夹的根目录下,然后利用less自定义编写翻译css文件到css文件夹中。
  7. 大盘点

    这时候的品类文件结构如下:
    4858美高梅 20

更新 favicon 和 touch icons

用自个儿的Logo替换掉 H伍BP 暗中同意的Logo,

  • apple-touch-icon-precomposed.png
  • favicon.ico

不明了怎么生成 ico 图标,点击那里,可以扶持你在线转变

 

整合 Bootstrap

先是展开 bootstrap 文件夹找到字体 fonts 文件夹,复制到 project一文件夹里面,该 fonts 文件夹里面是 Bootstrap 自带的 Glyphicon
Logo字体文件,这样字体文件固然解决了。

然后是 javaScript 文件,看看 H5BP 自带的 js 文件,张开 project1文件夹里面包车型大巴 js 文件夹,如下所示,

4858美高梅 21

Bootstrap 的插件是信赖于 jQuery 的,能够看出 Boilerplate
已经为大家策画好了(vendor 文件夹中),别的3个 Modernizr
脚本,在这之中涵盖了 HTML伍 shiv,能够让 IE8包容,不过它更加大的遵从是对浏览器举行了特色检查评定。plugin.js
文件用于放置插件,在此地新建叁个文件夹命名称叫 bootstrap,用于放置
Bootstrap 插件,把 Bootstrap 中的 js
文件夹里面包车型客车插件复制到那几个文件夹里面来,如下所示,

4858美高梅 22

不出意外的话,应该有11个插件(不清除现在会扩张如故减小的或是),能够依据须要选拔使用一些插件,也得以1把抓,把方方面面插件引用进来,一个三个的引用实在是徒劳增加HTTP 请求,所以得把全体插件放入二个文书中,将 Bootstrap 插件全体放入
plugins.js 文件中,找到已经打包好的代码,张开bootstrap/dist/js/bootstrap.min.js 全选全数代码复制粘贴到 plugins.js
中,就行了。

最终是样式文件,复制整个 bootstrap/less 文件夹到 project一 中。

迄今截至,Bootstrap 中须求的始末已经全副重组到 project壹 中来了,project1里面包车型大巴剧情如下所示,

4858美高梅 23

里面 fonts 文件夹里面富含了 Glyphicon 字体文件,img 文件夹是空的,less
文件夹是从 Bootstrap 复制来的(如若运用 Sass 进行付出,那么那里就是 Sass
文件夹),js 文件夹如下所示,

4858美高梅 24

4858美高梅,自己想了解更加多关于 Modernizr 的内容。

 

安装首页

再次回到 project一 主目录,用喜人的文书编辑器张开index.html,注意不是用浏览器展开,能够看到如下内容,

 1 <!DOCTYPE html>   2 <!--[if lt IE 7]>      <html > <![endif]-->   3 <!--[if IE 7]>         <html > <![endif]-->   4 <!--[if IE 8]>         <html > <![endif]-->   5 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->   6     <head>   7         <meta charset="utf-8">   8         <meta http-equiv="X-UA-Compatible" content="IE=edge">   9         <title></title>  10         <meta name="description" content="">  11         <meta name="viewport" content="width=device-width, initial-scale=1">  12   13         <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->  14   15         <link rel="stylesheet" href="css/normalize.css">  16         <link rel="stylesheet" href="css/main.css">  17         <script src="js/vendor/modernizr-2.6.2.min.js"></script>  18     </head>  19     <body>  20         <!--[if lt IE 7]>  21             <p >You are using an <strong>outdated</strong> browser. Please <a  >upgrade your browser</a> to improve your experience.</p>  22         <![endif]-->  23   24         <!-- Add your site or application content here -->  25         <p>Hello world! This is HTML5 Boilerplate.</p>  26   27         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  28         <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>  29         <script src="js/plugins.js"></script>  30         <script src="js/main.js"></script>  31   32         <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->  33         <script>  34             (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=  35             function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;  36             e=o.createElement(i);r=o.getElementsByTagName(i)[0];  37             e.src='//www.google-analytics.com/analytics.js';  38             r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));  39             ga('create','UA-XXXXX-X');ga('send','pageview');  40         </script>  41     </body>  42 </html>

内需修改部分代码,

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

率先删掉上边两行引进样式表的代码,因为 Bootstrap 已经放开了
normalize.css,这里不要求再引进了,而且大家一直已经已经去除了这多少个 CSS
文件了,同时新添1行引进 Bootstrap 样式表的代码,

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

等等,以往 project一 里面根本未曾这么些样式文件,近期得以有两种做法,

一.从 bootstrap/dist/css 里面复制1个编译好的 bootstrap.css 到
project1/css(这几个文件夹要求新建一个)中。

2.用 Less 文件(或者 Sass)编译成 CSS。

说说第1个艺术,首先须要设置
Less,在node.js中动用Node包处理工科具npm来安装:

$ npm install -g less

安装达成后就足以用了:

$ lessc less/bootstrap/bootstrap.less css/bootstrap.css

好了,借使以上两种艺术已经做到在那之中三个了,继续向下,样式消除了,应该轮到脚本了,由于
IE 捌并不支持媒体询问,须要去下载一个本子(响应式布局,未有媒体询问怎么玩得转呢),点小编去往下载的旅途,下载好后,把
respond.min.js 文件放在 project1/js/vendor
中,然后在页面上增添以下代码,

<!-- 只让 IE 8 以及更低版本的浏览器下载该脚本 -->  <!--[if (lt IE 9) & (!IEMobile)]>  <script src="js/vendor/respond.min.js"></script>  <![endif]-->

就写在引进 Modernizr 脚本的代码后边就行,那样,IE
8及以下的浏览器也能帮衬媒体询问了,接下去有个标准注释需求多少修改一下,由于
Bootstrap 已经不再协理 IE七,所以,大家要让 IE 7 和 IE 6一起坠入鬼世界(其实就多了一句进级浏览器的唤起而已),

20 <!--[if lt IE 7]> 改成 <!--[if lte IE 7]>

全方位消除,五个组合了 Bootstrap 和 HTML5 Boilerplate
的网页基础模版就成型了,剩下的业务就是增加页面包车型大巴主体内容了。

2.备选项目模板文件夹

能源列表

  • Bootstrap
  • HTML5 Boilerplate
  • Less
  • Sass
  • Normalize.css
  • Modernizr
  • Respond.js
  • Node.js

接下去,大家为第多个等级次序创建三个文本夹以及部分骨干的文件。谓词大家还要选择HTML5样板文件
HTML5 Boilerplate(H伍BP),然后把Bootstrap的有用文件复制过去。

参考资料

Bootstrap Site Blueprints: Design mobile-first responsive websites with
Bootstrap 3
by David Cochran & Ian Whitley


2.1 下载H5BP

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

4858美高梅 25

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

4858美高梅 26

2.二 然后删除和翻新下必备的表率文件

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

□ 因为稍后要选取LESS创立本身的CSS文件,所以先删除css文件夹。

□ doc 文件夹及里面内容

2.三 明白样板中的.htaccess文件

本条文件中的内容不分明全体都用,那取决主机设置和站点须要。那一个文件的三个首要用途是有限协理站点质量最优。

2.4 更新供给的规范文件

规范中的下列文件提供了项目的正式消息,依照须求能够立异它们、直接运用它们仍然就放那无论是。

□ humans.txt:那几个文件记载进献者,H5BP、Bootstrap的,还有此外进献者。

□ LICENSE.txt:在H5BP许可前边,加上你依据该许可创设的网址的认同新闻,在H五BP许可后,加上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文件。H五BP的文件夹中一度包蕴了多少个JavaScript文件如下:

4858美高梅 27 

在js文件夹里新建文件夹bootsreap,然后把Bootstrap的js文件夹中的脚本都复制过来。上面包车型大巴截图展现了Bootstrap随带的插件。各个插件二个文件:

4858美高梅 28

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

在付出时期,保持全数Bootstrap的插件都可用也是1个主意。那样,假如想增加个折叠、提醒可能传送带效应,都得以随手拈来。

H5BP采取的章程是把具有插件代码复制到一个plugins.js模板文件中。那是截至开垦从此的最棒做法,因为如此能够减去HTTP请求,加速站点速度。(换句话说,叁个80K的文件,比加载四个20K的文书速度更加快。)

张开Bootstrap文件夹中带有分发文件的dist文件夹。在这些文件夹中的js文件夹里,包蕴着
bootstrap.js 和 bootstrap.min.js,它们正是富含
Bootstrap全数插件代码的大文件。

4858美高梅 29

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

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

 

4.构造HTML模板

展开项目中的 index.html
文件举办编辑。那些示例标识文件来自H伍BP,显示了有个别超级推行和建议方案。我们就以那么些为根基,把它结合到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“垫片脚本”,以便它能识别HTML五的分区成分:

<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链接,以及2个当地jQuery的后备链接:

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></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='https://www.google-analytics.com/analytics.js';
  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>

 

对此次的天职来说,我们要求对那个模板中的成分进行如下操作:

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

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

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

做完这几件事后,大家就足以早先布署和煦的网址了。

 

伍.设定站点题目 

<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]-->

 个中储存的链接 
,该网站是2个引入浏览器晋级的站点。

五.贰 设置主结构元素

上边开端筹算页面内容,目前还只有二个段落。我们能够稍微加多一些剧情:

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

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

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

增进这几个剧情,都会基于最新的HTML最好施行来做,而且会思考A奇骏IA(Accessible
Rich Internet
Applications,可访问富因特网应用)的role属性(即banner、navigation、main和contentinfo
这么些剧中人物)。HTML5后来又扩充了 <main cole=”main></main>
成分,目标是特意为页面或分区中的主内容提供2个专用的成分。要掌握更加多新闻,能够参见链接:

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

<!-- 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>

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

4858美高梅 30

内容有了。未来,我们特意必要和煦的样式表。先来造成并链接Bootstrap暗中同意的样式表。

 

7.编写翻译和链接暗许的Bootstrap CSS

7.1 编译Bootstrap CSS

找到less/bootstrap.less
并展开它,那些文件导入了less文件夹中全体别的文件。编写翻译后,这些文件会生成完整的bootstrap.css样式表。而那就是大家第三步要做的。

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

即使全勤尚未编写翻译过LESS文件,需求下载和安装它的编写翻译器。

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

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

□ Mac 用户能够选择下载:

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

 ■ CodeKit(收费),地址为

下载了增选的LESS编写翻译器之后,安装,展开。然后就能够依据上边包车型大巴步骤来做了。

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

4858美高梅 31

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

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

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

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

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

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

4858美高梅 32

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

(柒)
编译成功后,唯一要专注的是那些文件名是不是与index.html中链接的文本名同样。

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

(九) 复制1份 bootstrap.css,重命名叫main.css。

4858美高梅 33

(10)
浏览器打开index.html文件,能够见到起暗中认可的导航样式如下,从排版和布局上装有进步,那表达CSS已经生效。

4858美高梅 34

7.2 落成响应式导航条

为了在 Bootstrap
响应式导航条基础上做到我们的导航条,还得再扩展五个新因素,以及对应的类和data属性。相关的用法可以参照
Bootstrap的Components
文书档案,在Navbar选项卡下:

先遵照下列步骤增多额外的符号。

(1) 寻觅到 <div
class=”navbar-header”>,在一个因素中增添2个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用来创设开关中的③道杠按键用的。

(二) 接下来把导航项包装在四个收到的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”>中。

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

4858美高梅 35

 

 

七.叁 排除故障

一经1切顺利,那么表明您早就打响地把LESS编译成CSS,而且也成功地蕴藏了Bootstrap的JavaScript插件。要是不顺畅,那就要精心检查下咯。

7.4 支持IE8

要帮衬IE捌,须要一段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) 打开  ,下载源代码。

4858美高梅 36

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

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

4858美高梅 37

(4) 然后,把下部几行加载 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]-->

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

PS:纵然您想测试增多腻子脚本的结果,但又不曾IE8浏览器,可以利用3个在线服务,叫Browsershots,地址是:,那是无偿的。还有一个收取费用的,叫BrowserStack,地址是:
(试用免费)。

 

来源:《Bootstrap实战》

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有