《Vue.js BootstrapWeb开发案例教程（在线实训版）》课件 14.pptx

Vue+Bootstrap 2021.06Vue+Bootstrap主讲：温谦 第14章 Bootstrap的栅格布局栅格布局理念上手案例屏幕分辨率——高分屏响应式断点常规用法常规用法举例产品列表页设置行间距和列间距边框对齐高级用法——栅格嵌套 第14章 Bootstrap的栅格布局 第14章 Bootstrap的栅格布局栅格布局理念在网页出现之前大约400年，报纸就开始发展并承担起向大众传递信息的使命。经过400年的发展，报纸已经成为世界上最成熟的大众传媒载体之一。网页与报纸在视觉上有着很多类似的地方，因此网页的布局和设计也可以把报纸作为非常好的参考和借鉴。报纸的排版通常都是基于一种称为“栅格”的方式进行的。传统的报纸经常使用的是8列设计，例如图中显示的这份报纸就是典型的8列设计，相邻的列之间会有一定的空白缝隙。 第14章 Bootstrap的栅格布局栅格布局理念这里我们仔细分析一下阅读报纸和阅读网页的动作差异，以及从而产生的效果。人们通常会手持报纸，每一个版分为6列，每一列文字的宽度大约15个汉字，在阅读时，看一行文字基本不用横向移动眼球，目光只聚焦于很窄的范围，这样阅读效率是很高的，特别适于报纸这样的“快餐”性媒体。而由于报纸宽度是固定的，又比较宽（可容纳正文文字近100个），因此通常都会分很多栏。浏览器窗口的宽度所能容纳的文字比报纸少得多，因此通常不会有像报纸那么多的列。如果读者研究一下就可以发现，现在网页的布局形式越来越复杂和灵活了，这是因为相关的技术在不断发展和成熟。 第14章 Bootstrap的栅格布局栅格布局的优点使用基于网格的设计可以使大量页面保持很好的一致性，这样无论是在一个页面内，还是在网站的多个页面之间，都可以具有统一的视觉风格，这显然是很重要的。均匀的网格以大多数认为合理的比例将网页划分为一定数目的等宽列，这样在设计中产生了很好的均衡感。使用网格可以帮助设计把标题、标志、内容和导航目录等各种元素合理地分配到适当的区域，这样可以为内容繁多的页面创建出一种潜在的秩序，或者称为“背后”的秩序。报纸的读者通常并不会意识到这种秩序的存在，但是这种秩序实际上起着重要的作用。 第14章 Bootstrap的栅格布局栅格布局的优点网格的设计不但可以约束网页的设计，从而产生一致性，而且具有高度的灵活性。在网格的基础上，通过跨越多列等手段，可以创建出各种变化的方式，这种方式既保持了页面的一致性，又具有风格的变化。网格可大大提高整个页面的可读性，因为在任何文字媒体上，一行文字的长度与读者的阅读效率和舒适度有直接的关系。如果一行文字过长，读者在换行的时候，眼睛就必须剧烈的运动，以找到下一行文字的开头，这样既打断了读者的思路，又使眼睛和脖子的肌肉紧张，使读者疲劳感明显增加。而通过使用网格，可以把一行文字的长度限制在适当的范围，使读者阅读起来既方便，又舒适。 第14章 Bootstrap的栅格布局栅格布局理念如果把报纸排版中的概念和CSS的术语进行对比，大致应该如图所示。 第14章 Bootstrap的栅格布局上手案例 第14章 Bootstrap的栅格布局屏幕分辨率十几年前主流的显示器的分辨率是1024像素×768像素，是指在整个屏幕上水平显示1024个像素，垂直显示768个像素。分辨率的水平像素和垂直像素的总数总是成一定比例的，一般为4:3、16:9等。每个显示器都有自己的最高分辨率，并且可以兼容其他较低的显示分辨率，所以一个显示器可以设置多种不同的分辨率。而近十年来移动设备大量普及，也导致分辨率变化极大，同时出现了“高分辨率显示屏”（简称“高分屏”），导致在高分屏上一个像素变得特别小，如果仍然都按照像素大小来做设计，那么一个页面如果显示在一个普通的屏幕上，或者显示一个高分屏上，二者将差别极大。 第14章 Bootstrap的栅格布局屏幕分辨率从实用角度，我们通常考虑以下几种情况即可：小于768像素宽度的都当作手机对待。从768开始考虑使用iPad竖屏观看时的效果。从1024开始考虑为ipad或者ipad Pro竖屏效果或者一些老旧的桌面电脑。从1200开始作为正常的桌面电脑，如果从1400开始则考虑更大的桌面电脑，或者一些特殊的大屏设备。有了以上概念以后，再下一节中我们来看Bootstrap具体是如何处理的。 第14章 Bootstrap的栅格布局响应式断点断点是响应式设计中的重要概念，由于设备的宽度差别很大，因此Bootstrap预定义了若干常用的特征点，对不同的宽度应用不同的样式，以达到响应式的目标。它内部使用了CSS的媒体查询（media query）功能来实现。视口（viewport）表示当前正在查看的区域。用Web浏览器来讲，它通常是指浏览器窗口，但不包括浏览器的菜单栏等部分，也就是真正