韦德娱乐1946网页版开始2个连串

2019-05-03 22:29 来源:未知
  • time: 2016-10-20 20:00

为什么选择 Bootstrap,因为它是一个简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。

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

作为Web前端开发框架,Bootstrap为大多数标准的UI设计常见提供了用户友好、扩浏览器的解决方案。

 

1.下载Bootstrap

打开官方网址  进行下载。

韦德娱乐1946网页版 1

 

 

2.准备项目模板文件夹

接下来,我们为第一个项目创建一个文件夹以及一些基本的文件。谓词我们还要用到HTML5样板文件 HTML5 Boilerplate(H5BP),然后把Bootstrap的有用文件复制过去。

2.1 下载H5BP

访问网站链接地址: ,下载B5BP。

韦德娱乐1946网页版 2

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

韦德娱乐1946网页版 3

2.2 然后删除和更新下必要的样板文件

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

□ 因为稍后要使用LESS创建自己的CSS文件,所以先删除css文件夹。

□ doc 文件夹及其中内容

2.3 理解样板中的.htaccess文件

这个文件中的内容不一定全部都用,这取决于主机设置和站点需求。这个文件的一个主要用途是保证站点性能最优。

2.4 更新必要的样板文件

样板中的下列文件提供了项目的标准信息,根据需要可以更新它们、直接使用它们或者就放那不管。

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

□ LICENSE.txt:在H5BP许可前面,加上你基于该许可构建的网站的许可信息,在H5BP许可后,加上Bootstrap以及其他站点中用到的重要的库的许可信息。

2.5 更新站点桌面和触摸设备图标

不要忘了用自己项目的图标替换 Boilerplate 默认的图标文件。

 

 

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文件如下:

韦德娱乐1946网页版 4 

在js文件夹里新建文件夹bootsreap,然后把Bootstrap的js文件夹中的脚本都复制过来。下面的截图显示了Bootstrap随带的插件。每个插件一个文件:

韦德娱乐1946网页版 5

把这些插件文件集中保存到新建的js/bootstrap 文件夹,便于优化网站性能,即可以按需选用插件、排除其他文件并缩减文件大小。

在开发期间,保持所有Bootstrap的插件都可用也是一个办法。这样,如果想添加个折叠、提示或者传送带效果,都可以信手拈来。

H5BP采用的方法是把所有插件代码复制到一个 plugins.js模板文件中。这是结束开发之后的最佳做法,因为这样可以减少HTTP请求,加快站点速度。(换句话说,一个80K的文件,比加载4个20K的文件速度更快。)

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

韦德娱乐1946网页版 6

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

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

 

4.构造HTML模板

打开项目中的 index.html 文件进行编辑。这个示例标记文件来自H5BP,体现了一些最佳实践和建议方案。我们就以这个为基础,把它整合到Bootstrap的工作流中。

浏览一下整个文件,其中有几个有意思的地方,H5BP文档中都有详细说明,目前的5.3.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标签。这个脚本回味IE8提供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]-->

□ 紧接着是一段文本

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

<script src="http://www.dongyuqing.com/uploads/allimg/190503/22291H9C-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.dongyuqing.com/uploads/allimg/190503/22291H564-7.jpg';
  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>

 

对此次的任务而言,我们需要对这个模板中的元素进行如下操作:

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

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

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

做完这几件事后,我们就可以开始设计自己的网站了。

 

5.设定站点标题 

<title>初识 Bootstrap</title>

5.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.2 设置主结构元素

下面开始准备页面内容,目前还只有一个段落。我们可以稍微添加一些内容:

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

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

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

添加这些内容,都会基于最新的HTML最佳实践来做,而且会考虑ARIA(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>

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

韦德娱乐1946网页版 7

内容有了。现在,我们特别需要自己的样式表。先来变异并链接Bootstrap默认的样式表。

 

7.编译和链接默认的Bootstrap CSS

7.1 编译Bootstrap CSS

找到less/bootstrap.less 并打开它,这个文件导入了less文件夹中所有其他文件。编译后,这个文件会生成完整的bootstrap.css样式表。而这就是我们第一步要做的。

PS:LESS的文档地址为   

如果一切没有编译过LESS文件,需要下载和安装它的编译器。

□ Window 用户,下载和安装这个编译器:

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

□ Mac 用户可以选择下载:

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

 ■ CodeKit(收费),地址为

下载了选择的LESS编译器之后,安装,打开。然后就可以按照下面的步骤来做了。

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

韦德娱乐1946网页版 8

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

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

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

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

(4) 右键单击less/bootstrap.less 文件,选择 Select output file,找到刚创建的css文件夹,此时输出文件名应该自动会变成bootstrap.css,单击“保存”。

(5) 选择输出路径和文件名,点击Compile。

韦德娱乐1946网页版 9

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

(7) 编译成功后,唯一要注意的是这个文件名是否与index.html中链接的文件名相同。

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

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

韦德娱乐1946网页版 10

(10) 浏览器打开index.html文件,可以看到起默认的导航样式如下,从排版和布局上有所增强,这说明CSS已经生效。

韦德娱乐1946网页版 11

7.2 完成响应式导航条

为了在 Bootstrap 响应式导航条基础上完成我们的导航条,还得再增加两个新元素,以及相应的类和data属性。相关的用法可以参考 Bootstrap的Components 文档,在Navbar选项卡下:

先按照下列步骤添加额外的标记。

(1) 搜索到 <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用来创建按钮中的三道杠按钮用的。

(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像素。其显示效果如下:

韦德娱乐1946网页版 12

 

 

7.3 排除故障

如果一切顺利,那么说明你已经成功地把LESS编译成CSS,而且也成功地包含了Bootstrap的JavaScript插件。如果不顺利,那就要仔细检查下咯。

7.4 支持IE8

要支持IE8,需要一段JavaScript代码让浏览器能响应媒体查询。这段代码就是Scott Jehl的 respond.js “腻子脚本”。

Bootstrap自身的文档推荐这样做以兼容IE8。相关信息可以参考这里:

为了针对IE8 应用这段脚本,需要针对IE8的条件注释:

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

另外,根据Andy Clarke的建议,为了不让并不需要这个脚本的Windows 移动设备加载该脚本,还应该排除IE移动版浏览器,具体参见他的在线代码块 320andup,地址是: 。

Clarke建议的条件注释如下:

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

有了条件注释,下面就是在站点模板文件中添加腻子脚本了,步骤如下:

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

韦德娱乐1946网页版 13

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

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

韦德娱乐1946网页版 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]-->

(5) 好了,这样IE8 就可以支持媒体查询响应视口大小变化了。

PS:如果你想测试添加腻子脚本的结果,但又没有IE8 浏览器,可以使用一个在线服务,叫Browsershots,地址是: ,这是免费的。还有一个收费的,叫BrowserStack,地址是:

 

来源:《Bootstrap实战》

作为Web前端开发框架,Bootstrap为大多数标准的UI设计常见提供了用户友好、扩浏览器的解决方案。...

HTML5 Boilerplate(H5BP)是一个由 Paul Irish(Google Chrome 开发人员、jQuery 项目成员、Modernizr 作者、yayQuery 播客主持人)主导的“前端开发模版”,也可以简单理解为web前端的最佳实践的HTML CSS jquery模板集合,帮你构建 快速, 健壮, 并且适应力强的web app或网站。

下载  Bootstrap

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

找到如下所示的下载页面,点击 Download source 按钮即可下载,如果用 Sass 开发,那么把 Sass 文件也下载下来,

韦德娱乐1946网页版 15

解压后,打开 bootstrap 文件夹可以看到里面有一堆文件以及文件夹,大致就像这样,

韦德娱乐1946网页版 16

其中,less 文件夹里面包含了所有的 less 文件,js 文件夹里面包含了12个 js 插件,接下来,我们去下载 HTML5 Boilerplate。

一、H5BP 特性简介

下载 HTML5 Boilerplate

访问 获取最新的 HTML5 Boilerplate(H5BP) 文件,解压后我们给文件夹命名为 project1 表示项目1,打开文件夹,可以看到里面包含的内容,如下所示,

韦德娱乐1946网页版 17

  • 首创在 HTML 页面的 body 上使用 IE 条件注释判断浏览器版本,从而大大简化了针对 IE Hack 的成本(在后来的版本中升级为在 标签中加入条件注释)
  • HTML5 集成,默认使用了很多 HTML5 的特性,并且使其兼容旧版本浏览器
  • 大量针对服务器的默认配置,无需修改即可配置一个安全、标准的 web 服务器
  • 完整的 JS 调试机制 —— 即使在 IE 下
  • 大量使用 CSS3 技术,并且集成了几乎所有来自框架中和技术大牛们口头相传的 CSS 技巧
  • 压缩包内包含了 一个干净、移动终端友好的HTML模版;优化过的Google统计代码;触摸屏设备上使用的图标;还有丰富的文档、技巧、窍门
  • 包含了 Normalize.css— 一个先进的、支持HTML5的CSS reset — 和基础样式、辅助功能、media queries、打印样式
  • 自带了两个优秀的Javascript工具库的最新版本: jQuery (默认链接到 Google的CDN, 如果CDN失效,本地文件作为后备) 和Modernizr 浏览器特性监测工具库,可以检测浏览器对新特性的支持能力,方便针对旧版本浏览
  • 为所有浏览环境做了优化,包括移动版本和打印版本

删掉不需要的文件

  1. css 文件夹(因为我们会使用 bootstrap 的样式)
  2. CHANGELOG.md
  3. CONTRIBUTING.md
  4. doc 文件夹以及其中的内容

二、如何使用H5BP

更新需要的文件

  1. humans.txt,里面可以写上整个网站工作团队,对帮助过网站建设的人们致以谢意,以及使用到的开发工具等等。
  2. LICENSE.md,添加上 Bootstrap 和其它框架的许可信息。
  3. README.md,提供一个基本的项目说明。
  1. 下载H5BP

    下载地址:HTML5 Boilerplate(H5BP)

  2. 删除不必要的样板文件

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

    • CHANGELOG.md
    • CONTRIBUTING.md
    • doc文件夹及其内容
    • 删除css文件夹内不需要的样式文件
  3. 理解样板中的.htaccess文件
    建议先看一遍H5BP的文档(),此文件本身也有详细的注释,可以打开编辑器从头到尾看一遍,这个文件夹的内容不全都有用,主要取决于你的主机设置和站点需求,不过这个文件的一个主要用途是保证站点性能最优。

  4. 可选择更新的样板文件

    样板中的下列文件提供了项目的标准信息,根据需要可以更新它们:

    - humans.txt:这个文件记载了贡献者,H5BP、Bootstrap等

    LICENSE.md:在H5BP许可前面,可加上你基于该许可构建的网站的许可信息,在H5BP许可之后,加上Bootstrap以及其他站点中用到的重要的库的许可信息。

    • README.md:加上自己的项目说明信息并更新这个文件。
  5. 更新站点桌面图标和触摸设备图标

    不要忘了用自己项目的图标替换H5BP默认的图标文件,包括以下图标:

    apple-touch-icon.png:为确保所有移动设备都有最佳效果,这个图标应该是144px*144px方形图标

    • favicon.ico:32px方形图标
  6. 加入Bootstrap 文件

    现在我们考虑把H5BP和bootstrap结合使用,我们需要从bootstrap提供的一大推文件中选出需要的部分:
    - 字体:
    把fonts文件夹复制到H5BP文件夹的根目录,这个文件夹包含bootstrap重要的Glyphicon字体。
    为保险起见,在这个fonts文件夹建一个.hatccsee文件,防止因为越来越多的CDN为你的网站缓存静态资源,如果没有这个文件某些浏览器会拒绝识别你的WEB字体,在创建的.hatccss文件中添加如下代码:
    韦德娱乐1946网页版 18
    - JavaScript 在js目录下创建一个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. 大盘点

    此时的项目文件结构如下:
    韦德娱乐1946网页版 19

更新 favicon 和 touch icons

用自己的图标替换掉 H5BP 默认的图标,

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

不知道怎么生成 ico 图标,点击这里,可以帮助你在线转换

整合 Bootstrap

首先打开 bootstrap 文件夹找到字体 fonts 文件夹,复制到 project1 文件夹里面,该 fonts 文件夹里面是 Bootstrap 自带的 Glyphicon 图标字体文件,这样字体文件就算搞定了。

然后是 javaScript 文件,看看 H5BP 自带的 js 文件,打开 project1 文件夹里面的 js 文件夹,如下所示,

韦德娱乐1946网页版 20

Bootstrap 的插件是依赖于 jQuery 的,可以看到 Boilerplate 已经为我们准备好了(vendor 文件夹中),另外一个 Modernizr 脚本,其中包含了 HTML5 shiv,可以让 IE8 兼容,不过它更大的作用是对浏览器进行了特性检测。plugin.js 文件用于放置插件,在这里新建一个文件夹命名为 bootstrap,用于放置 Bootstrap 插件,把 Bootstrap 中的 js 文件夹里面的插件复制到这个文件夹里面来,如下所示,

韦德娱乐1946网页版 21

不出意外的话,应该有12个插件(不排除以后会增加或者减少的可能),可以根据需要选择使用某些插件,也可以一把抓,把全部插件引用进来,一个一个的引用实在是徒然增加 HTTP 请求,所以得把全部插件放入一个文件中,将 Bootstrap 插件全部放入 plugins.js 文件中,找到已经打包好的代码,打开 bootstrap/dist/js/bootstrap.min.js 全选所有代码复制粘贴到 plugins.js 中,就行了。

最后是样式文件,复制整个 bootstrap/less 文件夹到 project1 中。

至此,Bootstrap 中需要的内容已经全部整合到 project1 中来了,project1 里面的内容如下所示,

韦德娱乐1946网页版 22

其中 fonts 文件夹里面包含了 Glyphicon 字体文件,img 文件夹是空的,less 文件夹是从 Bootstrap 复制来的(如果使用 Sass 进行开发,那么这里就是 Sass 文件夹),js 文件夹如下所示,

韦德娱乐1946网页版 23

我想了解更多关于 Modernizr 的内容。

设置首页

回到 project1 主目录,用可爱的文本编辑器打开 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 文件了,同时新增一行引入 Bootstrap 样式表的代码,

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

等等,现在 project1 里面根本没有这个样式文件,目前可以有两种做法,

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

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

说说第二个方法,首先需要安装 Less,在node.js中使用Node包管理工具npm来安装:

$ npm install -g less

安装完成后就可以用了:

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

好了,假设以上两种方法已经完成其中一个了,继续向下,样式搞定了,应该轮到脚本了,由于 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 已经不再支持 IE7,所以,我们要让 IE 7 和 IE 6 一同坠入地狱(其实就多了一句升级浏览器的提示而已),

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

全部搞定,一个整合了 Bootstrap 和 HTML5 Boilerplate 的网页基础模版就成型了,剩下的事情就是添加页面的主体内容了。

资源列表

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

参考资料

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


TAG标签: 韦德娱乐1946
版权声明:本文由韦德娱乐1946_韦德娱乐1946网页版|韦德国际1946官网发布于韦德娱乐1946网页版,转载请注明出处:韦德娱乐1946网页版开始2个连串