查字典图书网
查字典图书网
作为Web前端开发框架，Bootstrap的流行很容易理解。它为大多数标准的UI设计场景提供了用户友好、跨浏览器的解决方案。它现成可用且经受了社区考验的HTML标记、CSS样式及JavaScript行为的组合，极大提高了Web前端界面的开发效率，创造了令人愉悦效果。有了这些基本的元素，开发人员就有了... 查看全部[ 1.1 数量和质量 ]
下载Bootstrap的途径很多，但通过这些途径下载的文件并不完全一样。为了后面考虑，我们必须保证下载到LESS文件，因为这些文件可以为我们提供定制和创意的基础。在这里，我们直接溯本求源，打开GetBootstrap.com。 打开网站，一眼就能看到大大的“Download Bootstrap... 查看全部[ 1.2 下载Bootstrap ]
接下来，我们为第一个项目创建一个文件夹以及一些基本的文件。为此，我们还要用到HTML5样板文件HTML5 Boilerplate（H5BP），然后把Bootstrap的有用文件复制过去。 1.3.1 下载H5BP 在浏览器中打开h5bp.com。这是一个短链接，服务器解析后会重定向到H5BP的主... 查看全部[ 1.3 准备项目模板文件夹 ]
现在，我们可以考虑把Bootstrap的文件弄到Project Template 1文件夹里来了。我们会从Bootstrap提供的一大堆文件里选出需要的部分。为了加快进度，强烈建议大家分别在两个窗口中打开Bootstrap 3文件夹和项目的模板文件夹，以便于比较和拖放。 1.4.1 字体 从Bo... 查看全部[ 1.4 加入Bootstrap文件 ]
现在，Project Template 1文件夹应该如下图所示： 而fonts文件夹，包括新创建的.htaccess文件在内，应该如下图所示： 我一直在用自己的FTP客户端来查看文件，并将其设置为显示隐藏的文件。如果你没有像我这样，有可能看不到隐藏的.htaccess文件。 接... 查看全部[ 1.5 大盘点 ]
在新项目文件夹中，用编辑器打开index.html。这个示例标记文件来自H5BP，体现了一些最佳实践和建议方案。我们就以这个文件为基础，把它整合到Bootstrap的工作流中。下面先了解一下这个文件。 浏览一下整个文件，你会发现几个有意思的地方。这些地方在H5BP的文档中都有详细说明，访问这个链接... 查看全部[ 1.6 构造HTML模板 ]
先把index.html文件中<title>的内容加上。你可以随便给自己的作品起名字，比如Bootstrappin’ Portfolio。为准确起见，这里使用HTML实体'来表示单引号，结果如下所示： <title>Bootstrappin' ... 查看全部[ 1.7 设定站点标题 ]
还记得吧，咱们并没有借用Bootstrap预编译的CSS文件，而且也没有自己写LESS并编译自己的CSS；稍后我们会。在此之前，我们得先把Bootstrap特有的元素设置好，那就是导航条。 作为起点，我们可以就使用Bootstrap基本的导航条（后面再添加更多细节）。为此，我从Bootstrap文... 查看全部[ 1.8 导航条 ]
我们可以直接把Bootstrap默认的bootstrap.css文件拿来用，但不如借此机会学习一下编译LESS文件。这样可以为我们将来的设计打下基础。 1.9.1 编译Bootstrap CSS 可能大家有熟悉LESS，也有不熟悉LESS的。没关系，不管你是否熟悉，我都会教你怎么做。不过，我还是... 查看全部[ 1.9 编译和链接默认的Bootstrap CSS ]
如果大家一直跟着前面的教程在做，那到现在已经为继续实现更高级的设计打好了基础。我们来清点一下吧，我们已经有了： 一个完善的HTML5标记结构，内置了很多最佳实践； 一个标准的Bootstrap样式表文件，已链接； 能够正常工作的JavaScript插件； 一个响应式的导航条；... 查看全部[ 1.10 小结 ]