Bootstrap响应式Web开发-Bootstrap栅格系统.pdf

第5章 Bootstrap栅格系统 《Bootstrap响应式Web开发 》 学习目标/Target 了解Bootstrap栅格系统地概念 掌握Bootstrap布局容器使用方法 掌握栅格系统地基本使用方法 掌握栅格系统中地列嵌套与列偏移地使用方法 章节概述/ Summary 在第4章中,我们学习了媒体查询地使用。在通过CSS媒体查询进行响应式We 开发时,我 们需求编写媒体查询相关地代码,使用起来比较麻烦。为了更好地进行响应式We 开发 ,Bootstrap框架为我们提供了栅格系统地解决方案,极大地提高了开发效率。本章将针对 Bootstrap栅格系统地基本概念以和使用方式进行详细讲解。 目录 /Contents 01 栅格系统简介 02 Bootstrap布局容器 03 栅格系统地基本使用 04 栅格系统地屏幕适配 05 栅格系统中列地操作 5.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