起来多少个品类,读书笔记

  • 起来多少个品类,读书笔记。time: 2016-10-20 20:00

何以选取Bootstrap,因为它是三个简单、直观、强悍的前端开荒框架,让web开采更神速、轻便。

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

用作Web前端开拓框架,Bootstrap为许多正规的UI设计常见提供了用户自身、扩浏览器的消除方案。

 

1.下载Bootstrap

开垦官网  举办下载。

澳门葡京 1

 

 

2.预备项目模板文件夹

接下去,大家为率先个品种创制一个文件夹以及一些主旨的公文。谓词大家还要选用HTML5样板文件
HTML伍 Boilerplate(H五BP),然后把Bootstrap的有用文件复制过去。

2.1 下载H5BP

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

澳门葡京 2

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

澳门葡京 3

二.二 然后删除和革新下必备的标准文件

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

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

□ doc 文件夹及中间内容

二.3 驾驭样板中的.htaccess文件

其一文件中的内容不料定全体都用,那取决主机设置和站点必要。那个文件的一个首要用途是承保站点品质最优。

2.4 更新须求的表率文件

旗帜中的下列文件提供了项目标正式音信,依照必要能够立异它们、间接运用它们依旧就放那无论是。

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

□ LICENSE.txt:在H5BP许可前面,加上你依据该许可创设的网址的批准消息,在H5BP许可后,加上Bootstrap以及此外站点中用到的要害的库的许可新闻。

二.五 更新站点桌面和触摸设备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文件如下:

澳门葡京 4 

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

澳门葡京 5

把那么些插件文件集中封存到新建的js/bootstrap
文件夹,便于优化网址质量,即能够按需接纳插件、排除任何文件并缩减文件大小。

在付出时期,保持全体Bootstrap的插件都可用也是1个措施。那样,假若想增添个折叠、提醒也许传送带效应,都得以随手拈来。

H五BP采纳的措施是把富有插件代码复制到一个plugins.js模板文件中。那是实现开拓从此的顶级做法,因为如此能够减掉HTTP请求,加速站点速度。(换句话说,一个80K的公文,比加载多少个20K的公文速度更加快。)

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

澳门葡京 6

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

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

 

4.构造HTML模板

开垦项目中的 index.html
文件举行编辑。那一个示例标识文件来自H5BP,显示了壹部分一流施行和提议方案。大家就以这几个为底蕴,把它结合到Bootstrap的劳作流中。

浏览一下全数文件,在那之中有多少个风趣的地点,H5BP文书档案中都有详细表明,目前的伍.三.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伍“垫片脚本”,以便它能辨别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]-->

□ 紧接着是1段文本

□ 随后是托管在谷歌(谷歌(Google))服务器上的jQuery链接,以及一个地面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条件注释;

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

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

做完这几件事后,大家就可以起来安顿自个儿的网址了。

 

伍.设定站点标题 

<title>初识 Bootstrap</title>

伍.1 调度过时的浏览器新闻

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

<!--[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.二 设置主结构成分

上面开端计划页面内容,近年来还唯有3个段子。大家得以稍微增多一些剧情:

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

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

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

增加那么些内容,都会依附最新的HTML最棒实施来做,而且会思虑AENVISIONIA(Accessible
Rich Internet
Applications,可访问富因特网应用)的role属性(即banner、navigation、main和contentinfo
那多少个剧中人物)。HTML伍后来又扩充了 <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标签改成了语义化的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>

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

澳门葡京 7

内容有了。未来,大家特地须求团结的样式表。先来形成并链接Bootstrap暗中认可的样式表。

 

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

7.1 编译Bootstrap CSS

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

PS:LESS的文书档案地址为   

若是全勤未有编译过LESS文件,须求下载和装置它的编写翻译器。

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

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

□ Mac 用户能够挑选下载:

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

 ■ CodeKit(收费),地址为

下载了增选的LESS编写翻译器之后,安装,张开。然后就能够依照上面包车型客车步骤来做了。

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

澳门葡京 8

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

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

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

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

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

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

澳门葡京 9

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

(柒)
编写翻译成功后,唯一要注意的是其一文件名是或不是与index.html中链接的文本名同样。

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

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

澳门葡京 10

(十)
浏览器展开index.html文件,能够见见起私下认可的领航样式如下,从排版和布局上具备拉长,那表明CSS已经生效。

澳门葡京 11

七.贰 完毕响应式导航条

为了在 Bootstrap
响应式导航条基础上形成我们的导航条,还得再充实四个新因素,以及对应的类和data属性。相关的用法能够参见
Bootstrap的Components
文书档案,在Navbar选项卡下:

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

(一) 寻觅到 <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>

简单解释下以上代码:

 ■ 开关中的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像素。其出示效果如下:

澳门葡京 12

 

 

七.3 排除故障

只要一切顺遂,那么评释您已经成功地把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) 打开  ,下载源代码。

澳门葡京 13

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

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

澳门葡京 14

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

(五) 好了,那样IE8 就能够接济媒体询问响应视口大小变化了。

PS:假如您想测试加多腻子脚本的结果,但又从未IE捌浏览器,能够使用七个在线服务,叫Browsershots,地址是:
,那是无偿的。还有3个收取薪酬的,叫BrowserStack,地址是:

 

来源:《Bootstrap实战》

作为Web前端开拓框架,Bootstrap为大多专门的学问的UI设计常见提供了用户自身、扩浏览器的消除方案。…

作为Web前端开荒框架,Bootstrap为绝大大多典型的UI设计常见提供了用户本人、扩浏览器的消除方案。

HTML5 Boilerplate(H5BP)是3个由 PaulIrish(谷歌(Google) Chrome 开采职员、jQuery 项目成员、Modernizr
作者、yayQuery
播客主持人)主导的“前端开垦模版”,也能够大致明了为web前端的最好实施的HTML+CSS+jquery模板集合,帮你塑造飞速, 健壮, 并且适应力强的web app或网址。

下载  Bootstrap

做客下边网址下载最新的 bootstrap 源文件

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

澳门葡京 15

解压后,展开 bootstrap
文件夹能够看到里面有一批文件以及文件夹,几乎就像是这么,

澳门葡京 16

当中,less 文件夹里面含有了具有的 less 文件,js 文件夹里面富含了拾个 js
插件,接下去,大家去下载 HTML5 Boilerplate。

 

一、H5BP 性情简要介绍

下载 HTML5 Boilerplate

访问 获取最新的 HTML5 Boilerplate(H5BP)
文件,解压后大家给文件夹命名叫 project一表示项目1,张开文件夹,能够看看当中包含的内容,如下所示,

澳门葡京 17

1.下载Bootstrap

  • 首创在 HTML 页面包车型大巴 body 上接纳 IE
    条件注释剖断浏览器版本,从而大大简化了针对 IE Hack的基金(在新生的版本中提高为在 标签中参加条件注释)
  • HTML伍 集成,暗中认可使用了不知凡几 HTML伍 的特色,并且使其相称旧版本浏览器
  • 恢宏针对服务器的暗中认可配置,无需修改就能够配置3个安然无恙、规范的 web
    服务器
  • 完全的 JS 调节和测试机制 —— 即便在 IE 下
  • 大批量应用 CSS叁技能,并且集成了差不多全数来自框架卯月技巧大牌们口头逸事的 CSS 本事
  • 削减包内富含了
    贰个完完全全、移动终端友好的HTML模版;优化过的谷歌(Google)总括代码;触摸屏设备上使用的Logo;还有拉长的文档、才具、法门
  • 包涵了 Normalize.css— 三个不甘落后的、帮衬HTML伍的CSS reset —
    和根基样式、帮助功效、media queries、打印样式
  • 自带了三个地道的Javascript工具库的最新版本: jQuery (默许链接到
    谷歌(Google)的CDN, 即使CDN失效,当三步跳件作为后备) 和Modernizr
    浏览器个性监测工具库,能够检查实验浏览器对新个性的帮助手艺,方便针对旧版本浏览
  • 为全数浏览情况做了优化,包含尊耀版本和打字与印刷版本

删掉不供给的文书

  1. css 文件夹(因为大家会利用 bootstrap 的体裁)
  2. CHANGELOG.md
  3. CONTRIBUTING.md
  4. doc 文件夹以及当中的始末

开荒官网 http://getbootstrap.com/
进行下载。

二、怎么着选用H五BP

更新须要的文书

  1. humans.txt,里面能够写上全部网站职业集体,对帮助过网址建设的人们致以谢意,以及选拔到的开拓工具等等。
  2. LICENSE.md,添加上 Bootstrap 和任何框架的特许音讯。
  3. README.md,提供二个为主的等级次序表明。

澳门葡京 18

  1. 下载H5BP

    下载地址:HTML5 Boilerplate(H5BP)

  2. 删除不供给的范例文件

    除去下列只与H5BP有关的文本:

    • CHANGELOG.md
    • CONTRIBUTING.md
    • doc文件夹及其内容
    • 去除css文件夹内不要求的样式文件
  3. 精晓样板中的.htaccess文件
    建议先看二回H伍BP的文书档案(),此文件本人也有详细的笺注,能够张开编辑器从头到尾看二回,这些文件夹的始末不全都有用,主要取决于你的主机设置和站点要求,可是那么些文件的多个主要用途是承保站点质量最优。

  4. 可挑选翻新的金科玉律文件

    旗帜中的下列文件提供了类别的正经新闻,依据供给能够创新它们:

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

    LICENSE.md:在H五BP许可前边,可拉长你根据该许可创设的网址的批准音讯,在H5BP许可从此,加上Bootstrap以及任何站点中用到的重要性的库的许可新闻。

    • README.md:加上本人的花色表达音讯并更新这么些文件。
  5. 更新站点桌面Logo和触摸设备Logo

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

    apple-touch-icon.png:为有限支撑全数移动设备都有超级效应,那个Logo应该是14四px*144px方形Logo

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

    今天大家考虑把H5BP和bootstrap结合使用,我们须求从bootstrap提供的一大推文件中选出须要的局地:
    – 字体:
    把fonts文件夹复制到H伍BP文件夹的根目录,那些文件夹包罗bootstrap主要的Glyphicon字体。
    为力保起见,在那个fonts文件夹建二个.hatccsee文本,防止因为越多的CDN为您的网址缓存静态财富,尽管未有这么些文件某个浏览器会拒绝识别你的WEB字体,在创设的.hatccss文件中增添如下代码:
    澳门葡京 19
    – JavaScript
    在js目录下创办3个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. 大盘点

    此刻的种类文件结构如下:
    澳门葡京 20

更新 favicon 和 touch icons

用本身的图标替换掉 H五BP 暗中认可的图标,

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

不领会怎么生成 ico Logo,点击那里,能够帮忙你在线调换

 

整合 Bootstrap

先是张开 bootstrap 文件夹找到字体 fonts 文件夹,复制到 project1文件夹里面,该 fonts 文件夹里面是 Bootstrap 自带的 Glyphicon
Logo字体文件,这样字体文件就算解决了。

接下来是 javaScript 文件,看看 H5BP 自带的 js 文件,展开 project1文件夹里面包车型客车 js 文件夹,如下所示,

澳门葡京 21

Bootstrap 的插件是依赖于 jQuery 的,能够看出 Boilerplate
已经为我们策动好了(vendor 文件夹中),其它二个 Modernizr
脚本,在那之中饱含了 HTML五 shiv,能够让 IE8包容,可是它更加大的职能是对浏览器进行了特点检查评定。plugin.js
文件用于放置插件,在那里新建叁个文本夹命名字为 bootstrap,用于放置
Bootstrap 插件,把 Bootstrap 中的 js
文件夹里面包车型大巴插件复制到这一个文件夹里面来,如下所示,

澳门葡京 22

不出意外的话,应该有十三个插件(不免除以往会增添依然缩减的或然),能够遵照供给选择采用一些插件,也能够一把抓,把方方面面插件引用进来,一个1个的引用实在是思梅止渴扩充HTTP 请求,所以得把全路插件放入一个文件中,将 Bootstrap 插件全体放入
plugins.js 文件中,找到已经打包好的代码,展开bootstrap/dist/js/bootstrap.min.js 全选全体代码复制粘贴到 plugins.js
中,就行了。

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

迄今截止,Bootstrap 中须求的始末早已全副重组到 project壹 中来了,project一里面包车型客车内容如下所示,

澳门葡京 23

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

澳门葡京 24

自己想通晓越多关于 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">

等等,未来 project1 里面一直未有那么些样式文件,近来得以有二种做法,

1.从 bootstrap/dist/css 里面复制多个编写翻译好的 bootstrap.css 到
project1/css(那么些文件夹供给新建1个)中。

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

说说第叁个格局,首先需求设置
Less,在node.js中选用Node包管理工科具npm来安装:

$ npm install -g less

安装完毕后就足以用了:

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

好了,纵然以上三种方法已经到位个中2个了,继续向下,样式化解了,应该轮到脚本了,由于
IE 8并不帮助媒体询问,必要去下载二个本子(响应式布局,未有媒体询问怎么玩得转呢),点本身去往下载的路上,下载好后,把
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 柒 和 IE 六一齐坠入地狱(其实就多了一句晋级浏览器的唤起而已),

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

全副解决,一个组成了 Bootstrap 和 HTML5 Boilerplate
的网页基础模版就成型了,剩下的事情就是丰富页面包车型大巴本位内容了。

贰.妄图项目模板文件夹

能源列表

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

接下去,我们为第一个项目创制叁个文件夹以及部分基本的文本。谓词我们还要选取HTML伍样板文件
HTML五 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。

澳门葡京 25

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

澳门葡京 26

二.二 然后删除和换代下必备的典范文件

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

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

□ doc 文件夹及中间内容

二.三 领悟样板中的.htaccess文件

其一文件中的内容不必然全体都用,那有赖于主机设置和站点需要。这几个文件的1个重要用途是承接保险站点质量最优。

二.肆 更新供给的范例文件

旗帜中的下列文件提供了种类的职业消息,依照要求能够立异它们、间接利用它们大概就放这无论是。

□ humans.txt:这些文件记载进献者,H5BP、Bootstrap的,还有别的进献者。

□ LICENSE.txt:在H伍BP许可前面,加上你根据该许可营造的网址的特许音信,在H伍BP许可后,加上Bootstrap以及此外站点中用到的重中之重的库的批准音讯。

二.5 更新站点桌面和触摸设备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文件。H5BP的公文夹中已经包含了多少个JavaScript文件如下:

澳门葡京 27 

在js文件夹里新建文件夹bootsreap,然后把Bootstrap的js文件夹中的脚本都复制过来。上边包车型大巴截图显示了Bootstrap随带的插件。每个插件四个文本:

澳门葡京 28

把那些插件文件集中保存到新建的js/bootstrap
文件夹,便于优化网址质量,即能够按需选拔插件、排除其余文件并压缩文件大小。

在支付时期,保持全部Bootstrap的插件都可用也是八个办法。那样,倘若想加多个折叠、提示也许传送带效应,都能够随手拈来。

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

开采Bootstrap文件夹中包括分发文件的dist文件夹。在这几个文件夹中的js文件夹里,包括着
bootstrap.js 和 bootstrap.min.js,它们正是含有
Bootstrap全数插件代码的大文件。

澳门葡京 29

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

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

 

4.构造HTML模板

展开项目中的 index.html
文件举办编写制定。那个示例标志文件来自H五BP,呈现了有的极品执行和建议方案。大家就以这么些为根基,把它整合到Bootstrap的办事流中。

浏览一下全副文件,在那之中有多少个有趣的地点,H5BP文书档案中都有详实表明,最近的伍.三.0版本的链接地址为:
。下面也简介下,按次序来:

□ HTML5 文书档案类型注解:

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

□ 紧接着是1段文本

□ 随后是托管在谷歌(谷歌)服务器上的jQuery链接,以及一个地面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条件注释;

(二) 基于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]-->

 在那之中积攒的链接 
,该网站是二个推荐介绍浏览器晋级的站点。

五.二 设置主结构成分

上面早先计划页面内容,近日还唯有多少个段落。我们能够稍微增多一些剧情:

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

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

□ 包罗版权和交际媒体链接的页脚区。

拉长那么些剧情,都会依照最新的HTML最棒实行来做,而且会设想A奥德赛IA(Accessible
Rich Internet
Applications,可访问富因特网应用)的role属性(即banner、navigation、main和contentinfo
那些剧中人物)。HTML五后来又追加了 <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>

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

澳门葡京 30

情节有了。将来,我们尤其须求协和的样式表。先来产生并链接Bootstrap暗中认可的样式表。

 

七.编写翻译和链接私下认可的Bootstrap CSS

7.1 编译Bootstrap CSS

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

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

1旦全数尚未编写翻译过LESS文件,须求下载和装置它的编写翻译器。

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

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

□ Mac 用户能够选拔下载:

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

 ■ CodeKit(收费),地址为

下载了选取的LESS编写翻译器之后,安装,张开。然后就足以依据下边包车型地铁步子来做了。

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

澳门葡京 31

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

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

 ■ 在编写翻译器窗口中找到 Add folder 开关,点击选用主文件夹。

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

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

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

澳门葡京 32

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

(七)
编写翻译成功后,唯壹要专注的是那一个文件名是还是不是与index.html中链接的公文名同样。

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

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

澳门葡京 33

(10)
浏览器打开index.html文件,能够看出起私下认可的导航样式如下,从排版和布局上有所加强,这评释CSS已经生效。

澳门葡京 34

七.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用来创建开关中的叁道杠开关用的。

(二) 接下来把导航项包装在一个收受的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像素。其出示效果如下:

澳门葡京 35

 

 

7.三 排除故障

假诺一切顺利,那么表明你已经成功地把LESS编译成CSS,而且也不负众望地蕴藏了Bootstrap的JavaScript插件。假诺不顺手,这将在细心检查下咯。

7.4 支持IE8

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

Bootstrap自个儿的文书档案推荐那样做以包容IE八。相关消息方可参照那里:

为了针对IE捌 应用那段脚本,供给针对IE捌的准绳注释:

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

其它,依照Andy Clarke的建议,为了不让并不须要那一个本子的Windows
移动设备加载该脚本,还应该破除IE移动版浏览器,具体参见他的在线代码块
320andup,地址是: 。

Clarke提议的尺度注释如下:

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

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

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

澳门葡京 36

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

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

澳门葡京 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]-->

(伍) 好了,那样IE8 就能够帮助媒体询问响应视口大小变化了。

PS:纵然你想测试增加腻子脚本的结果,但又未有IE八浏览器,能够使用二个在线服务,叫Browsershots,地址是:,那是无偿的。还有1个收取费用的,叫BrowserStack,地址是:
(试用无需付费)。

 

来源:《Bootstrap实战》

相关文章

发表评论

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

*
*
Website