第一次接触神奇的Bootstrap
作为Web前端开发框架,Bootstrap为大多数标准的UI设计常见提供了用户友好、扩浏览器的解决方案。 1.下载Bootstrap打开官方网址 2.准备项目模板文件夹接下来,我们为第一个项目创建一个文件夹以及一些基本的文件。谓词我们还要用到HTML5样板文件 HTML5 Boilerplate(H5BP),然后把Bootstrap的有用文件复制过去。 2.1 下载H5BP 访问网站链接地址: 解压后,修改文件夹名为Bootstrap_First,其目录结构如下: 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文件: 代码如下: Header set Access-Control-Allow-Origin "*"
其目的是保证即使站点根目录下没有放H5BP的.htaccess文件,也不会出现字体问题。 3.2 JavaScript 接下来就是加入Bootstrap的JavaScript文件。H5BP的文件夹中已经包含了几个JavaScript文件如下: 在js文件夹里新建文件夹bootsreap,然后把Bootstrap的js文件夹中的脚本都复制过来。下面的截图显示了Bootstrap随带的插件。每个插件一个文件: 把这些插件文件集中保存到新建的js/bootstrap 文件夹,便于优化网站性能,即可以按需选用插件、排除其他文件并缩减文件大小。 在开发期间,保持所有Bootstrap的插件都可用也是一个办法。这样,如果想添加个折叠、提示或者传送带效果,都可以信手拈来。 H5BP采用的方法是把所有插件代码复制到一个 plugins.js模板文件中。这是结束开发之后的最佳做法,因为这样可以减少HTTP请求,加快站点速度。(换句话说,一个80K的文件,比加载4个20K的文件速度更快。) 打开Bootstrap文件夹中包含分发文件的dist文件夹。在这个文件夹中的js文件夹里,包含着 bootstrap.js 和 bootstrap.min.js,它们就是包含 Bootstrap所有插件代码的大文件。 把bootstrap.min.js 的所有代码复制到plugins.js 里。 然后把Bootstrap文件夹里的less文件夹也复制到项目文件夹中。 4.构造HTML模板打开项目中的 index.html 文件进行编辑。这个示例标记文件来自H5BP,体现了一些最佳实践和建议方案。我们就以这个为基础,把它整合到Bootstrap的工作流中。 浏览一下整个文件,其中有几个有意思的地方,H5BP文档中都有详细说明,目前的5.3.0版本的链接地址为: 。下面也简单介绍下,按次序来: □ HTML5 文档类型声明: 代码如下:
□ 接下来是几个meta标签 ■ 用于指定字符集的: 代码如下: ■ 告诉IE使用最新版的渲染引擎 代码如下: ■ 预留给描述站点用的: 代码如下: ■ 针对移动浏览器的视口标签 代码如下: □ 接下来是两个样式表的链接 代码如下: □ 再下面就是加载Modernizr脚本的script标签。这个脚本回味IE8提供HTML5“垫片脚本”,以便它能识别HTML5的分区元素: 代码如下:
□ 接下来是IE条件注释,包含推荐用户把旧版本IE升级到新版本的消息:
outdated browse. ...
□ 紧接着是一段文本 □ 随后是托管在谷歌服务器上的jQuery链接,以及一个本地jQuery的后备链接: □ 下面就是plugins.js 和main.js的链接,别分保存JavaScript插件代码和我们编写的代码: 代码如下:
□ 谷歌的Analytics 脚本: 对此次的任务而言,我们需要对这个模板中的元素进行如下操作: (1) 设定我们站点的标题,针对旧版本浏览器用户更新现有的IE条件注释; (2) 基于LESS文件编译Bootstrap的CSS,添加基本的页面内容; (3) 整合Bootstrap的JavaScript插件,确保响应式的导航条(navbar)正常响应。 做完这几件事后,我们就可以开始设计自己的网站了。 5.设定站点标题 代码如下: 初识 Bootstrap
5.1 调整过时的浏览器消息 模板中的消息针对老浏览器用户。
outdated browser. Please
其中包含的链接
5.2 设置主结构元素 下面开始准备页面内容,目前还只有一个段落。我们可以稍微添加一些内容: □包含Logo的导航的页头区; □包含页面内容的内容区; □包含版权和社交媒体链接的页脚区。 添加这些内容,都会基于最新的HTML最佳实践来做,而且会考虑ARIA(Accessible Rich Internet Applications,可访问富因特网应用)的role属性(即banner、navigation、main和contentinfo 这几个角色)。HTML5后来又增加了 找到下面的代码:
Hello world! This is HTML5 Boilerplate. 修改为: <main role="main"> Content specific to this page goes here. <footer role="contentinfo"> Copyright © Luka Ye 这就是我们页面的基本结构和内容。 我们先把Bootstrap特有的元素设置好,那就是导航条。 作为起点,我们可以暂时就使用 Bootstrap基本的导航条。为此,从Bootstrap文档中拿来它的导航条代码,然后做出如下调整: □添加了 navbar-static-top 类,因为我们希望导航条能够定位到窗口顶部,但能够随页面滚动而滚动。 □把项目名称连接到 index.html; □把原来的父div标签改成了语义化的HTML5 nav 标签。 调整后,其header元素如下: 保存结果,其导航条的显示效果如下: 内容有了。现在,我们特别需要自己的样式表。先来变异并链接Bootstrap默认的样式表。 7.编译和链接默认的Bootstrap CSS7.1 编译Bootstrap CSS 找到less/bootstrap.less 并打开它,这个文件导入了less文件夹中所有其他文件。编译后,这个文件会生成完整的bootstrap.css样式表。而这就是我们第一步要做的。 PS:LESS的文档地址为
如果一切没有编译过LESS文件,需要下载和安装它的编译器。 □ Window 用户,下载和安装这个编译器: ■ WinLess(免费桌面应用),地址为
□ Mac 用户可以选择下载: ■ Crunch 应用(免费),地址为
■ CodeKit(收费),地址为
下载了选择的LESS编译器之后,安装,打开。然后就可以按照下面的步骤来做了。 (1) 在根目录创建css文件夹。 (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。 (6) css文件夹中会出现编译生成的 bootstrap.css文件。 (7) 编译成功后,唯一要注意的是这个文件名是否与index.html中链接的文件名相同。 (8) 在 index.html 中,删除指向 css/normalize.css 的样式表链接,因为这个样式表已经包含在 Bootstrap中了。 (9) 复制一份bootstrap.css,重命名为main.css。 (10) 浏览器打开index.html文件,可以看到起默认的导航样式如下,从排版和布局上有所增强,这说明CSS已经生效。 7.2 完成响应式导航条 为了在 Bootstrap 响应式导航条基础上完成我们的导航条,还得再增加两个新元素,以及相应的类和data属性。相关的用法可以参考 Bootstrap的Components 文档,在Navbar选项卡下:
先按照下列步骤添加额外的标记。 (1) 搜索到 简单解释下以上代码: ■ 按钮中的navbar-toggle 类用于应用CSS样式; ■ 后面的数据属性 data-toggle 和 data-target 是Bootstrap 的JavaScript 插件要用的,分部表示预期行为和预期目标(即 collapse 和类名为 navbar-collapse 的元素,这个元素后面会添加) ■ 类名为 icon-bar 的span 元素是CSS用来创建按钮中的三道杠按钮用的。 (2) 接下来把导航项包装在一个收起的div中,即用带有适当 Bootstrap类的div把 在前面两步中,我们把代码分分隔成两部分,而且都位于 中。
好了,在任何一个现代浏览器(IE9 或Firefox、Chrome、Safari等的最新版本)中,拖动窗口缩小到小于980像素。其显示效果如下: 7.3 排除故障 如果一切顺利,那么说明你已经成功地把LESS编译成CSS,而且也成功地包含了Bootstrap的JavaScript插件。如果不顺利,那就要仔细检查下咯。 7.4 支持IE8 要支持IE8,需要一段JavaScript代码让浏览器能响应媒体查询。这段代码就是Scott Jehl的 respond.js “腻子脚本”。 Bootstrap自身的文档推荐这样做以兼容IE8。相关信息可以参考这里: 为了针对IE8 应用这段脚本,需要针对IE8的条件注释: ... 另外,根据Andy Clarke的建议,为了不让并不需要这个脚本的Windows 移动设备加载该脚本,还应该排除IE移动版浏览器,具体参见他的在线代码块 320andup,地址是:https://github.com/malarkey/320andup/ 。 Clarke建议的条件注释如下: ... 有了条件注释,下面就是在站点模板文件中添加腻子脚本了,步骤如下: (1) 打开https://github.com/scottjehl/Respond ,下载源代码。 (2) 解压缩,找到名为respond.min.js 的压缩版。 (3) 把它复制到项目文件夹中的 js/vendor 目录下,与jQuery 和 Modernizr放到一块。 (4) 然后,把下面几行加载 respond.js 文件代码添加到 index.html 中,包括针对IE的条件注释,就加载 Modernizr的代码下面: 代码如下:
(5) 好了,这样IE8 就可以支持媒体查询响应视口大小变化了。 PS:如果你想测试添加腻子脚本的结果,但又没有IE8 浏览器,可以使用一个在线服务,叫Browsershots,地址是:
如果大家还想深入学习,可以点击进行学习,再为大家附两个精彩的专题: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |