书签 分享 收藏 举报 版权申诉 / 22
上传文档赚钱

类型bootstrap响应式网站开发实例教程课件第3章第1节.pptx

  • 上传人(卖家):晟晟文业
  • 文档编号:4222382
  • 上传时间:2022-11-21
  • 格式:PPTX
  • 页数:22
  • 大小:2.36MB
  • 【下载声明】
    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栅格布

    10、局演示效果运行【实例3-1】代码,页面效果如下图3-3所示。Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理响应式栅格l当768px屏幕992px时,.container的宽度为750px。l当屏幕768px时,.container使用最大宽度,效果和.container-fluid一样。l当992px屏幕1200px时,.container的宽度为970px。l当屏幕1200px时,.container的宽度为1170px。在栅格系统中,.container支持响应式设计,其在媒体查询样式进行了定义。针对不同的设备,container的宽度不同。运

    11、行“实例1”的页面效果,拖动浏览器改变浏览器的宽度,可以看到不同的效果。当屏幕992px后,所有的列变成从上到下依次排列,在浏览器的宽度为800px和600px呈现的效果是一样的,如图3-4所示。a)图3-4 应用栅格系统布局网站的效果a)宽度为800px时的页面效果 b)宽度为600px时的页面效果Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理在使用.col-md-*为类名时,*号表示占了多少列的宽度,例如:col-md-3表示该列占了12列中三列的宽度。col-md-为中等屏幕列的前缀。依次类推,还有col-xs-为超小屏幕(手机)列的前缀,c

    12、ol-sm-为小屏幕(平板电脑)列的前缀,col-lg-为大屏幕(大桌面显示器)列的前缀。栅格系统是向大兼容的,打开CSS文件夹下的“bootstrap.css”文件中的媒体查询源码如左下:media(min-width:768px).container width:750px;media(min-width:992px).container width:970px;media(min-width:1200px).container width:1170px;所以,若想在不同设备上呈现一样的效果,可以针对同一行代码使用不同视口下的样式。例如,将如下代码:第1列 修改为:第1列,运行【实例3-2

    13、】代码,能够在不同视口下可以呈现同样的效果,效果如下所示。图3-5不同视口下呈现同样的页面效果Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理也可以针对同一元素,添加不同的类来控制页面的呈现效果,实现响应式栅格。例如,编写如下的代码:A1依据规则,可以实现在手机屏幕上(小于768像素)为水平的100%显示,在平板屏幕上(768px屏幕992px)时呈现每行可放置2个元素,在PC屏幕上(992px屏幕1200px)时呈现每行可放置3个元素,在PC大屏幕上(1200px)时呈现每行可放置4个元素。divborder:1px solid#000000;ba

    14、ckground-color:#D4D4D4;A1A1A1A1【实例3-3】中的HTML代码【实例3-3】中的添加样式代码Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理运行【实例3-3】代码,能够在不同视口下可以呈现同样的效果,效果如图3-6所示。a)b)c)d)图3-6不同视口下呈现同样的页面效果a)1200px以上PC呈现 b)992px以上PC呈现 c)768px以上平板呈现 d)768px以下手机呈现Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理注意,如果如下代码中的文字多少不同时,页面将会呈现

    15、出高度不一的情况。例如,将第一个如下代码A1A1,bootstrap栅格系统,当文字过多时的页面呈现效果。修改为:原本的设计应该是在平板状态下,为两行,每行呈现两列,各占6个栅格,但在浏览时,页面效果如图3-7所示。图3-7在平板电脑上呈现的页面效果Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理图3-7在平板电脑上呈现的页面效果这样呈现出的结果是出乎意料的,这主要因为col都是采用的左浮动,第一个div的高度过高,所以第三个div直接漂浮到第一个div的右侧,而第四个div进入第三行。如果想让第三和第四个div在一行呈现,则需要清除浮动。解决这个问

    16、题,需要使用Bootstrap中提供的“.clearfix”样式。添加样式后的代码如左下:A1,bootstrap栅格系统,当文字过多时的页面呈现效果。A1A1A1只需要针对pad清除浮动,所以还需要visible-sm样式将其显示,页面效果如下图3-8所示。图3-8添加清除浮动后的页面效果Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理响应式实用工具 为了更快地实现对移动设备的友好开放,Bootstrap提供了一套辅助类,使用这些工具类可以通过媒体查询相结合不同设备,实现内容的在不同设备上的显示与隐藏。目前,提供的响应式实用工具类如表3-2所示。响

    17、应式实用工具目前只适用于块和表切换。超小屏幕手机(768px)小屏幕平板(768px)中等屏幕桌面(992px).visible-xs-*可见隐藏隐藏.visible-sm-*隐藏可见隐藏.visible-md-*隐藏隐藏可见.visible-lg-*隐藏隐藏隐藏.hidden-xs隐藏可见可见.hidden-sm可见隐藏可见.hidden-md可见可见隐藏.hidden-lg可见可见可见表3-2 响应式实用工具类Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理响应式实用工具 divborder:1px solid#000000;特别小型 在超小屏幕

    18、上可见小型 在小屏幕平板上可见中型 在中屏幕上可见大型 在大屏幕上可见【实例3-4】中的HTML代码【实例3-4】中的添加样式Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理响应式实用工具运行【实例3-4】代码,能够在不同视口下可以呈现同样的效果,效果如图3-9所示。a)b)c)d)图3-9不同视口下呈现同样的页面效果a)1200px以上PC呈现 b)992px以上PC呈现 c)768px以上平板呈现 d)768px以下手机呈现Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理响应式实用工具运行【实例3-4】代码,能够在不同视口下可以呈现同样的效果,效果如图3-9所示。a)b)c)d)图3-9不同视口下呈现同样的页面效果a)1200px以上PC呈现 b)992px以上PC呈现 c)768px以上平板呈现 d)768px以下手机呈现bootstrapbootstrap响 应 式 网 站 开 发响 应 式 网 站 开 发第三章Bootstrap栅格系统

    展开阅读全文
    提示  163文库所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
    关于本文
    本文标题:bootstrap响应式网站开发实例教程课件第3章第1节.pptx
    链接地址:https://www.163wenku.com/p-4222382.html

    Copyright@ 2017-2037 Www.163WenKu.Com  网站版权所有  |  资源地图   
    IPC备案号:蜀ICP备2021032737号  | 川公网安备 51099002000191号


    侵权投诉QQ:3464097650  资料上传QQ:3464097650
       


    【声明】本站为“文档C2C交易模式”,即用户上传的文档直接卖给(下载)用户,本站只是网络空间服务平台,本站所有原创文档下载所得归上传人所有,如您发现上传作品侵犯了您的版权,请立刻联系我们并提供证据,我们将在3个工作日内予以改正。

    163文库