图2 场地固定布局
Posted: Tue Jan 28, 2025 8:34 am
。网站上的所有元素和区块都没有改变，只是减少了。
灵活的（橡胶）网站布局
页面宽度根据浏览器窗口的工作区域进行调整。当大对角线的 印度尼西亚电报数据宽屏显示器出现时，灵活的布局就变得必要了。固定宽度页面不再在所有显示器上正确显示。
在响应式布局中，宽度以百分比表示，可以通过改变其尺寸来适应不同的屏幕。这解决了不同显示器对角线的问题。
但随后出现了具有巨大对角线的智能手机、平板电脑和台式机。对于这些设备来说，灵活的布局功能已经不够了。
图3 橡胶场地布置图。该网站横跨设备屏幕的整个宽度，但有时看起来是弯曲的。
自适应网站布局
如今，响应式布局用于确保网站在所有可能的设备上正确显示。它根据用户的设备类型更改页面结构。
在智能手机和平板电脑上，这些块是垂直排列的，在笔记本电脑上，水平排列的比例分别为 33.3% 和 66.7%，在电脑显示器上，分别为 25% 和 75%。我们在“为什么应该为网站选择自适应设计”一文中讨论了自适应布局的主题，所以现在我们不会详细描述它。
图4.自适应网站布局。站点布局设计的元素和块根据设备分辨率进行调整。
Bootstrap 是做什么用的？
Bootstrap 是一个多组件软件，是 CSS 和 JS 框架。它是连接到站点的一个或一组文件。 Bootstrap 中包含的现成代码可加快、简化和优化程序员创建网站时的工作。
当从头开始开发独立的自适应布局时，开发人员必须考虑所有细微差别并自己编写所有脚本和 CSS 样式。这是一个漫长且劳动密集型的过程，会显着增加最终产品的成本。而且，代码行数越多，出错的可能性就越高。因此，不能完全保证该网站在所有不同分辨率的设备上都能顺利运行。
Bootstrap功能解决了适应性和跨浏览器兼容性的问题。即使是在布局和 CSS 方面经验很少的程序员也能够创建 HTML 模板。
该框架使用网格提供自适应布局。用户只需创建一个块，设置宽度并将其包含在网站布局中。 Bootstrap 3 和 4 的版本是专门为创建自适应布局而设计的。它们的所有组件都是灵活的，有些组件是自适应的。
灵活的（橡胶）网站布局
页面宽度根据浏览器窗口的工作区域进行调整。当大对角线的 印度尼西亚电报数据宽屏显示器出现时，灵活的布局就变得必要了。固定宽度页面不再在所有显示器上正确显示。
在响应式布局中，宽度以百分比表示，可以通过改变其尺寸来适应不同的屏幕。这解决了不同显示器对角线的问题。
但随后出现了具有巨大对角线的智能手机、平板电脑和台式机。对于这些设备来说，灵活的布局功能已经不够了。
图3 橡胶场地布置图。该网站横跨设备屏幕的整个宽度，但有时看起来是弯曲的。
自适应网站布局
如今，响应式布局用于确保网站在所有可能的设备上正确显示。它根据用户的设备类型更改页面结构。
在智能手机和平板电脑上，这些块是垂直排列的，在笔记本电脑上，水平排列的比例分别为 33.3% 和 66.7%，在电脑显示器上，分别为 25% 和 75%。我们在“为什么应该为网站选择自适应设计”一文中讨论了自适应布局的主题，所以现在我们不会详细描述它。
图4.自适应网站布局。站点布局设计的元素和块根据设备分辨率进行调整。
Bootstrap 是做什么用的？
Bootstrap 是一个多组件软件，是 CSS 和 JS 框架。它是连接到站点的一个或一组文件。 Bootstrap 中包含的现成代码可加快、简化和优化程序员创建网站时的工作。
当从头开始开发独立的自适应布局时，开发人员必须考虑所有细微差别并自己编写所有脚本和 CSS 样式。这是一个漫长且劳动密集型的过程，会显着增加最终产品的成本。而且，代码行数越多，出错的可能性就越高。因此，不能完全保证该网站在所有不同分辨率的设备上都能顺利运行。
Bootstrap功能解决了适应性和跨浏览器兼容性的问题。即使是在布局和 CSS 方面经验很少的程序员也能够创建 HTML 模板。
该框架使用网格提供自适应布局。用户只需创建一个块，设置宽度并将其包含在网站布局中。 Bootstrap 3 和 4 的版本是专门为创建自适应布局而设计的。它们的所有组件都是灵活的，有些组件是自适应的。