bootstrap响应式网站开发实例教程课件第3章第1节.pptx
- 【下载声明】
1. 本站全部试题类文档,若标题没写含答案,则无答案;标题注明含答案的文档,主观题也可能无答案。请谨慎下单,一旦售出,不予退换。
2. 本站全部PPT文档均不含视频和音频,PPT中出现的音频或视频标识(或文字)仅表示流程,实际无音频或视频文件。请谨慎下单,一旦售出,不予退换。
3. 本页资料《bootstrap响应式网站开发实例教程课件第3章第1节.pptx》由用户(晟晟文业)主动上传,其收益全归该用户。163文库仅提供信息存储空间,仅对该用户上传内容的表现方式做保护处理,对上传内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(点击联系客服),我们立即给予删除!
4. 请根据预览情况,自愿下载本文。本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
5. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007及以上版本和PDF阅读器,压缩文件请下载最新的WinRAR软件解压。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- bootstrap 响应 网站 开发 实例教程 课件
- 资源描述:
-
1、bootstrap响应式网站开发实例教程课件第3章第1节Bootstrap响应式网站开发 栅格系统的实现原理非常简单,仅仅是通过容器大小,平均分配12份,在调整内外边距,最后结合媒体查询,从而实现强大的响应式栅格系统。栅格系统把网页的总宽度平均分成12份,可以按份自由组合。有名的960Grid System(网址https:/960.gs/demo.html),它把960像素宽的区块切分成12栏,在视觉设计与网页排版时就按照所需要的大小对齐栏线,如图3-1所示。Bootstrap栅格系统-Bootstrap栅格系统的原理栅格系统的实现原理图3-1 960Grid 样例Bootstrap响应式网
2、站开发网站应用栅格系统后页面效果如图3-2所示。Bootstrap栅格系统-Bootstrap栅格系统的原理栅格系统的实现原理a)b)图3-2 应用栅格系统布局网站的效果a)网站页面效果 b)网站上的栅格呈现Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。栅格系统使用的总宽度可以不固定,Bootstrap会按百分比进行平分。12栅格系统是整个Bootstrap的核心功能,也是响应式设计核心理念的一个实现形式。Bootstrap响应式
3、网站开发栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,在内容中就可以放入这些创建好的布局中。Bootstrap栅格系统-Bootstrap栅格系统的原理栅格系统的工作原理Bootstrap 栅格系统的工作原理l“行(row)”必须包含在.container(固定宽度)或.container-fluid(100%宽度)中,以便为其赋予合适的对齐方式(aligment)和内边距(padding)。l通过“行(row)”在水平方向创建一组“列(column)”。页面内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元
4、素。l行使用样式.row,列使用样式“.col-*-*”,内容应当放置于列(column)内,这种预定义的类,可以用来快速创建栅格布局。例如:.col-md-4就表示占4列宽度。l通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔。通过包含.row类的元素设置负值 margin 从而抵消掉为.container元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding。l栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,四个等宽的列可以使用三个.col-xs-3 来创建。如果一“行(row)”中包含了的“
5、列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。Bootstrap响应式网站开发 Bootstrap3使用了4种栅格选项来形成栅格系统,这4种栅格选项的区别在于适合不同尺寸的屏幕设备,官网上Bootstrap的栅格参数如表3-1所示。Bootstrap栅格系统-Bootstrap栅格系统的原理栅格系统的工作原理超小设备手机(768px)小型设备平板电脑(768px)中型设备台式电脑(992px)网格行为一直是水平的以折叠开始,断点以上是水平的以折叠开始,断点以上是水平的.container最大容器宽度None(auto)750px970pxC
6、lass前缀.col-xs-.col-sm-.col-md-列数量和121212最大列宽Auto60px78px间隙宽度30px列的两侧分别 15px30px列的两侧分别 15px30px列的两侧分别 15px可嵌套YesYesYes偏移量YesYesYes列排序YesYesYes表3-1 Bootstrap3的栅格参数Bootstrap响应式网站开发Bootstrap3的栅格设置具体含义:l 手机(小于768px),class语句为:.col-xs-1.col-xs-12。l 平板(大于768px),class语句为:.col-sm-1.col-sm-12。l 一般计算计小型显示器(大于99
7、2px),class语句为:.col-md-1.col-md-12。l 一般计算计大型显示器(大于1200px),class语句为:.col-lg-1.col-lg-12。Bootstrap栅格系统-Bootstrap栅格系统的原理栅格系统的工作原理Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理栅格系统的工作原理【实例3-1】Bootstrap栅格系统原理演示,代码如下所示。第1列第2列第3列第4列第5列第6列第7列第8列第9列第10列第11列第12列 占8列占4列 占6列一半占6列一半 占3列(四分之一)占3列(四分之一)占3列(四分之一)占3列
8、(四分之一)【实例3-1】Bootstrap栅格系统原理演示page1Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理栅格系统的工作原理【实例3-1】Bootstrap栅格系统原理演示,代码如右所示。第1列第2列第3列第4列第5列第6列第7列第8列第9列第10列第11列第12列 占8列占4列 占6列一半占6列一半 占3列(四分之一)占3列(四分之一)占3列(四分之一)占3列(四分之一)【实例3-1】Bootstrap栅格系统原理演示Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理在栅格系统中使用的各个样式类
9、:.container左右各有15px的内边距,.row是column的容器,最多只能放入12个column。行左右各有-15px的外边距,可以抵消.container的15px的内边距。.column左右各有15px的内容边距,可以保证内容不挨着浏览器的边缘。两个相邻的column的内容之间则有30px的间距。通过图3-3可以看出,本例的“”在屏幕照中水平居中,左右两侧有同等留白,“.container”共包含了4个“”。栅格类适用于与屏幕宽度大于或等于分界点大小的设备,例如,在元素上应用任何.col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备。图3-3bootstrap栅格布
展开阅读全文