Bootstrap响应式Web开发第5章 Bootstrap栅格系统.pptxVIP

第5章 Bootstrap栅格系统《Bootstrap响应式Web开发》学习目标/Target 了解Bootstrap栅格系统的概念 掌握Bootstrap布局容器使用方法 掌握栅格系统的基本使用方法 掌握栅格系统中的列嵌套和列偏移的使用方法章节概述/ Summary在第4章中，我们学习了媒体查询的使用。在通过CSS媒体查询进行响应式Web开发时，我们需要编写媒体查询相关的代码，使用起来比较麻烦。为了更好地进行响应式Web开发，Bootstrap框架为我们提供了栅格系统的解决方案，极大地提高了开发效率。本章将针对Bootstrap栅格系统的基本概念以及使用方式进行详细讲解。目录/Contents01栅格系统简介Bootstrap布局容器02栅格系统的基本使用栅格系统的屏幕适配03栅格系统中列的操作04055.1栅格系统简介5.1.1 栅格系统概述栅格系统（Grid Systems），即网格系统，它是一种清晰、工整的设计风格，用固定的格子进行网页布局。栅格系统最早应用于印刷媒体上，一个印刷版面上划分了若干个格子，非常方便排版。印刷媒体的栅格系统5.1.1 栅格系统概述后来，栅格系统被应用于网页布局中，使用响应式栅格系统进行页面布局时，可以让一个网页在不同大小的屏幕上，呈现出不同的结构。例如，在小屏幕设备上有某些模块将按照不同的方式排列或者被隐藏。响应式栅格系统5.1.2 动手实现简单版栅格系统本节我们将会动手编写一个简单的响应式栅格系统，让大家更好地理解栅格系统的实现原理。编写HTML结构定义页头、导航、主要内容、侧边栏和页尾部分的HTML结构代码编写CSS样式案例实现步骤页头和页尾分别显示在网页的最上方和最下方，而中间的导航、主要内容和侧边栏根据浏览器窗口的大小进行排列编写CSS媒体查询样式浏览器窗口大于768px时，3个模块横向排列，小于或等于768px时纵向排列5.1.2 动手实现简单版栅格系统编写HTML结构案例5-1：简易版栅格系统body?div?class=rowheader页头/header/div?div?class=row?nav?class=col1导航/nav?div?class=col2主要内容/div?aside?class=col1侧边栏/aside?/div?div?class=rowfooter页尾/footer/div/body5.1.2 动手实现简单版栅格系统编写CSS样式代码style?.row?{?width:?100%;?}?.row?:after?{ ?/* 通过伪元素:after清除浮动 */?clear:?left; /* 清除左浮动 */?content:?; ?display:?table; ??/* 该元素会作为块级表格来显示（类似?table）?*/?}?[class^=col]?{?float:?left;?background-color:?#e0e0e0; }?.col1?{ width:?25%; }?.col2?{?width:?50%; }/style5.1.2 动手实现简单版栅格系统浏览器窗口大于768px时，导航、主要内容和侧边栏3个模块呈横向排列。浏览器窗口大于768px5.1.2 动手实现简单版栅格系统编写CSS媒体查询代码?@media?(max-width:?768px)?{?.row?{?width:?100%;?}?[class^=col]?{?float:?none;?width:?100%;?}?}5.1.2 动手实现简单版栅格系统打开Chrome的开发者工具，使用iPhone 6/7/8设备来测试该页面。浏览器窗口小于或等于768px时，导航、主要内容和侧边栏3个模块呈纵向排列。移动设备上显示效果5.2Bootstrap布局容器5.2.1 布局容器容器是Bootstrap中最基本的布局元素，容器用于在其中容纳、填充一些内容，以及有时需要使内容居中。在实现Bootstrap页面布局容器之前，需要了解设备屏幕的尺寸。屏幕大小常见宽度范围超小屏幕576px平板≥576px桌面显示器≥768px大桌面显示器≥992px超大桌面显示器≥1200px5.2.1 布局容器在前面讲解的内容中，媒体查询需要使用@media关键字检测设备的宽度变化。在Bootstrap中，我们不需要编写媒体查询的代码，而是使用一些内置的类名，用来检测不同的设备的宽度。5.2.1 布局容器Bootstrap带有3个不同的容器，具体如下。1.container容器它在每个响应断点处设置了一个max-width最大宽度012.container-fluid容器它在每个响应断点处设置布局容器的宽度为100%02033.container-{breakpoi