bootstrap制作网站实例(用bootstrap做的网站有哪些)

最近几年以来，前端开发人员似乎就一直处在一种特殊的矛盾中，即：越来越庞大的前端代码，以及访问者越来越消失的耐性之间的矛盾，他们习惯了各种如本地应用般的即时性，恨不得所有的网页都能在1秒内加载完毕。

如果花费的时间比这更长，他们可能会不断的刷新，然后在继续一无所获后，离开你精心为他们准备的网站。甚至有时候，这甚至会导致你脆弱服务器的一次小型的奔溃。

而当你分析起，为何你的前端代码会变得如此庞大时，使用了Bootstrap，可能是你经常会得到的结果之一。似乎只要在项目中，一使用这种流行的前端UI库，你就得承受这种种的烦恼。

事实果真如此？今天，我将教大家，通过三个前端优化步骤，来确保基于Bootstrap的网站能够快速渲染并优化。

1、只需下载您需要的预编译程序包

如果你决定使用由Bootstrap进行预编译的下载包，那么，请你仔细的考虑下，哪些库是你真正需要的，下面是一些建议。

（1）如果可能，千万别使用包含完整的CSS库bootstrap.css或bootstrap.min.css，以及除jQuery外的所有依赖项的JavaScript组件库包bootstrap.bundle.js或bootstrap.bundle.min.js，虽然这很方便，但对于绝大部分的工程而言，这都太大了。

（2）如果你只需要包含Bootstrap基本风格的CSS类库，来写作你的HTML，以保证他们正常的按Bootstrap的原则，在各种不同尺寸的设备上进行合适的排版，那么bootstrap-reboot.min.css就是最合适的，你甚至不需要引入任何的Bootstrap JavaScript文件。而如果此时恰好你除了这些之外，还想使用Bootstrap的灵活且易于使用的网格系统，那么您应该去引入bootstrap-grid.min.css。

（3）与CSS类似，JavaScript代码的引入也应该采用这一原则，比如说当你知道项目中不会出现下拉菜单，弹出窗口和工具提示时，你就更应该去使用bootstrap.min.js，因为哪些包含在bootstrap.bundle.min.js的Popper.js什么的，其实你根本就用不着。

2、如果可能，应该选择从源开始的构建，而不是选择预编译的下载包

比刚才更好的主意，当然是从源代码开始，构建最符合你要求的“自己”的Bootstrap。毕竟，官方所给出的预编译的文件，仍可能包含您可能实际上并不需要的内容不是么？

这肯定是需要更多的一些知识和技巧的，因为，这通常就意味着，你需要了解几乎每一个Bootstrap所包含的CSS文件和JavaScript类库的作用，并且如果你是从LESS开始进行构建，你还需要非常熟悉和了解Grunt这样的工具的使用方式。

但相信我，这些都是值得的，一个最小但高效的，且无需重复覆盖样式的清洁的类库，不仅可以加快加载的速度，也更有利于浏览器进行UI的渲染。

3、千万别忘记，那些在非Bootstrap网站开发中，被反复经验验证过了的客户端优化技术

它们包括但不限于：

（1）编写更加精简的CSS和JavaScript代码

别忘了，代码中的每个字符，最后都会添加到网页中，并加重它的下载负荷。因此，编写干净简洁的CSS和JavaScript代码，同时保持可读性，对于任何一个前端开发人员而言，都是一个挑战。

良好的CSS实践包括：去除未使用的选择器，重复的风格，并避免过度嵌套等等。因此，在项目开始之初，就对整体页面组织有明确的规划，并真正理解Bootstrap的各种风格，以尽量避免自创风格是非常重要的，当然，模式上，在整个项目组推广LESS，也算是一个不二法门。

此外，还有很多很棒的工具可以帮助您清理代码。比如像CSS Lint和JSLint等，它们不仅仅是你检查语法错误的工具，也是你查找那些使用了低效的编码模式，或从未使用过的代码等方面内容的利器。

（2）最小化实践

每次HTTP请求都要进行一次和服务器的握手！因此，别犹豫，尽量的压缩（即从文档中删除无用的注释和空白）和拼合CSS和JavaScript文件，现在已经成为一种非常流行的整合实践方式，如果大家对此感兴趣，可以在回复中留言，我也非常乐意和大家分享这些方面的内容。

（3）注意图像文件

网页中最重要的部分，现在通常都是通过图像文件来表示（但也不尽然，尤其是在Canvas和WebGL技术高度发展的今天，但那个对于普通Web前端开发人员而言，难度不小），当然，音频和视频文件也是其中的一部分。因此，优化这些视觉要素，对于提高网站加性能，是至关重要的。

这里提供有两个有用的小贴士：

• 使用正确的图像格式：图像格式还有正确的？当然，这实际上也是近几年很多厂商竞争的一个热点，好吧，或者你并不关心这个。
• 在上传它们之前尽可能的进行优化，有很多工具可以干这个活，TinyPNG、SSVGOMG等。

或者您有更好的建议？欢迎您在回复中留言，毕竟，对于技术，我觉得，独乐了不如众乐乐，有时候，讨论会引发新的火花。

又或者您其实刚刚入门Bootstrap，并不清楚关于Bootstrap，尤其是Bootstrap 4的相关细节，欢迎大家关注我，因为我正在考虑就这些方面的内容，为相关初学者，准备一个还算有趣的课程中。