Bootstrap实战[试读]
1.1 数量和质量
作为Web前端开发框架,Bootstrap的流行很容易理解。它为大多数标准的UI设计场景提供了用户友好、跨浏览器的解决方案。它现成可用且经受了社区考验的HTML标记、CSS样式及JavaScript行为的组合,极大提高了Web前端界面的开发效率,创造了令人愉悦效果。有了这些基本的元素,开发人员就有了构建自己定制方案的坚实基础。 不过,流行、高效、有效也不一定都是好事。由于工具便捷而导致人们养成坏习惯的例子屡见不鲜。然而,Bootstrap却没有这个问题,至少不一定存在这个问题。从它面世就一直关注它的人都知道,它的早期版本和更新有时候会更侧重实际效率,而非最佳实践。事实上,一些最佳实践不管是语... 查看全部[ 1.1 数量和质量 ]
1.2 下载Bootstrap
下载Bootstrap的途径很多,但通过这些途径下载的文件并不完全一样。为了后面考虑,我们必须保证下载到LESS文件,因为这些文件可以为我们提供定制和创意的基础。在这里,我们直接溯本求源,打开GetBootstrap.com。 打开网站,一眼就能看到大大的“Download Bootstrap”按钮。翻译本书时,最新的版本为v3.2.0。点击这个按钮,进入下载页面: 可以看到中间那个“Download source”按钮,点击下载即可。此外,也可以访问GitHub上的项目链接(https://github.com/twbs/bootstrap),点击“Download ZIP”按钮... 查看全部[ 1.2 下载Bootstrap ]
1.3 准备项目模板文件夹
接下来,我们为第一个项目创建一个文件夹以及一些基本的文件。为此,我们还要用到HTML5样板文件HTML5 Boilerplate(H5BP),然后把Bootstrap的有用文件复制过去。 1.3.1 下载H5BP 在浏览器中打开h5bp.com。这是一个短链接,服务器解析后会重定向到H5BP的主文档页面。可以在这个页面直接下载H5BP,也可以单击SOURCE CODE链接,在GitHub上下载。 解压下载到的ZIP文件,并把文件夹重命名为Project Template 1。 在这个文件夹中,可以看到类似下图所示的目录结构: 如果你的文件系统没有显示隐藏的文件,可能看不到.... 查看全部[ 1.3 准备项目模板文件夹 ]
1.4 加入Bootstrap文件
现在,我们可以考虑把Bootstrap的文件弄到Project Template 1文件夹里来了。我们会从Bootstrap提供的一大堆文件里选出需要的部分。为了加快进度,强烈建议大家分别在两个窗口中打开Bootstrap 3文件夹和项目的模板文件夹,以便于比较和拖放。 1.4.1 字体 从Bootstrap的主文件夹中,把fonts文件夹复制粘贴到Project Template 1文件夹中。这个文件夹里包含着Bootstrap附带的重要的Glyphicon字体。(如果你之前没用过图标字体,相信你会喜欢的。) 保险起见,建议大家再在这个文件夹里放一个跨域友好的.htaccess文件。为... 查看全部[ 1.4 加入Bootstrap文件 ]
1.5 大盘点
现在,Project Template 1文件夹应该如下图所示: 而fonts文件夹,包括新创建的.htaccess文件在内,应该如下图所示: 我一直在用自己的FTP客户端来查看文件,并将其设置为显示隐藏的文件。如果你没有像我这样,有可能看不到隐藏的.htaccess文件。 接下来,img文件夹应该是空的,H5BP原带的就是如此。 下面的js文件夹中应该包含以下子文件夹和文件: 由于采用了模块化的开发方式,Bootstrap的less文件夹中包含很多文件。下面几节在讲到编译它们的时候,我们会详细介绍。 首先,我们来构造出HTML文件。... 查看全部[ 1.5 大盘点 ]
1.6 构造HTML模板
在新项目文件夹中,用编辑器打开index.html。这个示例标记文件来自H5BP,体现了一些最佳实践和建议方案。我们就以这个文件为基础,把它整合到Bootstrap的工作流中。下面先了解一下这个文件。 浏览一下整个文件,你会发现几个有意思的地方。这些地方在H5BP的文档中都有详细说明,访问这个链接http://h5bp.com很容易找到。不过我们接下来也会简单介绍一些,我们按照次序来。 HTML5文档类型声明: <!DOCTYPE html> 针对IE的条件注释,开发者通过嵌套的选择符可以加入对旧版本浏览器的修复代码: <!--[if lt IE 7]>... 查看全部[ 1.6 构造HTML模板 ]
1.7 设定站点标题
先把index.html文件中<title>的内容加上。你可以随便给自己的作品起名字,比如Bootstrappin’ Portfolio。为准确起见,这里使用HTML实体'来表示单引号,结果如下所示: <title>Bootstrappin' Portfolio</title> 1.7.1 调整过时的浏览器消息 模板中的消息针对老浏览器用户。大概在第20行左右,消息内容如下: You are using an outdated browser. Please upgrade your browser or activ... 查看全部[ 1.7 设定站点标题 ]
1.8 导航条
还记得吧,咱们并没有借用Bootstrap预编译的CSS文件,而且也没有自己写LESS并编译自己的CSS;稍后我们会。在此之前,我们得先把Bootstrap特有的元素设置好,那就是导航条。 作为起点,我们可以就使用Bootstrap基本的导航条(后面再添加更多细节)。为此,我从Bootstrap文档中拿来它的导航条代码,然后做了如下调整: 添加了navbar-static-top类,因为我们希望导航条能够定位到窗口顶部,但能够随页面滚动而滚动; 把项目名称链接到index.html; 把原来的父div标签改成了语义化的HTML5 nav标签。 经过这一番调整后,得到如下h... 查看全部[ 1.8 导航条 ]
1.9 编译和链接默认的Bootstrap CSS
我们可以直接把Bootstrap默认的bootstrap.css文件拿来用,但不如借此机会学习一下编译LESS文件。这样可以为我们将来的设计打下基础。 1.9.1 编译Bootstrap CSS 可能大家有熟悉LESS,也有不熟悉LESS的。没关系,不管你是否熟悉,我都会教你怎么做。不过,我还是建议你看看LESS的文档:http://lesscss.org,再找几个LESS的教程看完。稍后你就会知道,LESS非常强大,也很好玩,使用它能够大大提高效率。 现在,我们只编译,而不写LESS文件。 找到less/bootstrap.less,在编辑器中打开它。你会发现这个文件导入了less文... 查看全部[ 1.9 编译和链接默认的Bootstrap CSS ]
1.10 小结
如果大家一直跟着前面的教程在做,那到现在已经为继续实现更高级的设计打好了基础。我们来清点一下吧,我们已经有了: 一个完善的HTML5标记结构,内置了很多最佳实践; 一个标准的Bootstrap样式表文件,已链接; 能够正常工作的JavaScript插件; 一个响应式的导航条; (可能更重要的)随时可以派上用场的LESS编译器。 这时候,或许把所有文件都备份一下比较好,因为后面的项目都可以把它作为基础。 下一章我们就来弄点好玩的,进一步挖掘Bootstrap的潜力,创建一个漂亮的个人作品展示站点。... 查看全部[ 1.10 小结 ]
书名: Bootstrap实战
作者:
出版社: 人民邮电出版社
原作名: Bootstrap Site Blueprints
译者: 李松峰 | [美] Ian Whitley
出版年: 2015-5
页数: 240
定价: 49.00元
装帧: 平装
ISBN: 9787115388872