- 1、本文档共66页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
第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
您可能关注的文档
- 网络营销教学PPT-网络营销环境.pptx
- 网络营销教学PPT-网络营销渠道策略.pdf
- 网络营销教学PPT-网络营销渠道策略.ppt
- 网络营销教学PPT-网络营销系统与调查.pdf
- 网络营销教学PPT-网络营销系统与调查.ppt
- 网络营销教学PPT-网络营销战略与计划.pdf
- 网络营销教学PPT-网络营销战略与计划.ppt
- Bootstrap响应式Web开发-Bootstrap常用布局样式.pdf
- Bootstrap响应式Web开发-Bootstrap框架常用组件.pdf
- Bootstrap响应式Web开发-初识Bootstrap.pdf
- 新的一年工作展望.docx
- 医生年终个人工作的述职报告(3篇).docx
- 2023年消防设施操作员之消防设备中级技能考前冲刺练习题附答案详解.docx
- 2022-2023年环境影响评价工程师之环评技术导则与标准通关练习题包括详细解答.docx
- 2023年中级注册安全工程师之安全生产管理考前冲刺检测卷和答案.docx
- 2023年中级银行从业资格之中级银行管理考前冲刺测试卷提供答案解析.docx
- 2023年公共营养师之二级营养师通关模拟考试试卷附带答案.docx
- 证券分析师之发布证券研究报告业务考前冲刺模拟题库.docx
- 2022-2023年二级建造师之二建建设工程法规及相关知识综合提升测试卷附答案.docx
- 2023年二级建造师之二建机电工程实务通关模拟考试试卷提供答案解析.docx
文档评论(0)