资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,2020/6/24,#,栅格系统的常用方法,2,栅格系统的常用方法2,1,Bootstrap,响应式网站开发,Bootstrap,栅格系统,-,栅格系统的常用方法,移动与调整列的位置,col-md-offset-12 margin-left:100%;,.col-md-offset-11 margin-left:91.66666667%;,.col-md-offset-10 margin-left:83.33333333%;,.col-md-offset-9 margin-left:75%;,.col-md-offset-8 margin-left:66.66666667%;,.col-md-offset-7 margin-left:58.33333333%;,.col-md-offset-6 margin-left:50%;,.col-md-offset-5 margin-left:41.66666667%;,.col-md-offset-4 margin-left:33.33333333%;,.col-md-offset-3 margin-left:25%;,.col-md-offset-2 margin-left:16.66666667%;,.col-md-offset-1 margin-left:8.33333333%;,.col-md-offset-0 margin-left:0;,使用,offset,系列类可以将列偏移到右侧。这些,Class,通过使用“,.col-md-offset-*,”选择器将所有列增加了列的左侧,margin,。例如，,.col-md-offset-4,将,.col-md,设备下的列向右移动了,4,个列的宽度。,Offset,通过,margin-left,实现，因此会对右侧列产生影响，以,col-md,设备为例，在,Bootstrap3.3,的,CSS,源码中（,bootstrap.css,）可以看到如下样式集，这些样式集定义了,col-md,设备下,offset,的样式代码,，如右所示,：,offset,也会占据布局空间，因此使用设计列偏移时，必须把,offset,偏移宽度与,col,宽度进行合并计算，确保每个,row,中的列宽和偏移宽度之和等于或小于,12,格。,Bootstrap响应式网站开发Bootstrap栅格系,2,Bootstrap,响应式网站开发,Bootstrap,栅格系统,-,栅格系统的常用方法,.row,margin-top:5px;,margin-bottom:5px;,class*=col-,border:1px solid#000000;,background-color:#D4D4D4;,列宽,3,格,col-md-7 col-md-offset-2,列宽,7,偏移,2,格,列宽,3,格 偏移,3,格,col-md-3 col-md-offset-3,列宽,3,格 偏移,3,格,col-md-3 col-md-offset-3,【实例,3-5,】中的,HTML,代码,为了能让元素呈现清晰,【实例,3-5,】中的添加样式,【实例,3-5,】将在两个,row,行中配合,col,和,offset,设计列宽和列偏移效果，其中第一行设计为第一列宽度为,3,，第二列宽度为,7,，偏移为,2,；第二行设计为第一列和第二列宽度均为,3,，同时向右偏移,3,格。,Bootstrap响应式网站开发Bootstrap栅格系,3,Bootstrap,响应式网站开发,Bootstrap,栅格系统,-,栅格系统的常用方法,运行【实例,3-5,】代码，列偏移页面呈现效果如图,3-10,所示。,图,3-10,列偏移页面效果,Bootstrap响应式网站开发Bootstrap栅格系,4,Bootstrap,响应式网站开发,Bootstrap,栅格系统,-,栅格系统的常用方法,.,row,margin-top:5px;,margin-bottom:5px;,div,border:1px solid#000000;,background-color:#D4D4D4;,手机：列宽,4,，列偏移,2,平板：列宽,4,，列偏移,2,PC,中屏：列宽,6,，列偏移,6,PC,大屏：列宽,6,，列偏移,6,【实例,3-6,】中的,HTML,代码,为了能让元素呈现清晰,【实例,3-5,】中的添加样式,【实例,3-6,】将在一个,row,行中配合,col,和,offset,设计列宽和列偏移效果，其中在手机小屏与平板上时设计为“列宽,4,，列偏移,2,”，在,PC,上的中屏与大屏上时设计为“列宽,6,，列偏移,6,”,.,Bootstrap响应式网站开发Bootstrap栅格系,5,图,3-11,列偏移页面效果,Bootstrap,响应式网站开发,Bootstrap,栅格系统,-,栅格系统的常用方法,运行【实例,3-6,】代码，列偏移页面呈现效果如图,3-11,所示。,a),b),a,）手机呈现效果,b,）上,PC,中屏呈现效果,图3-11列偏移页面效果Bootstrap响应式网站开发,6,Bootstrap,响应式网站开发,Bootstrap,栅格系统,-,栅格系统的常用方法,调整列的排序,.col-md-pull-12 right:100%,.col-md-pull-11 right:91.66666667%,.col-md-pull-10 right:83.33333333%,.col-md-pull-9 right:75%,.col-md-pull-8 right:66.66666667%,.col-md-pull-7 right:58.33333333%,.col-md-pull-6 right:50%,.col-md-pull-5 right:41.66666667%,.col-md-pull-4 right:33.33333333%,.col-md-pull-3 right:25%,.col-md-pull-2 right:16.66666667%,.col-md-pull-1 right:8.33333333%,.col-md-pull-0 right:auto,在,Bootstrap,中“,col-xs,”“,col-sm,”“,col-md,”“,col-lg,”所有的列元素都使用了“,position:relative;,”，列排序通过,push,和,pull,相关类实现，利用这两个系列类可以调整列的显示位置，其中,push,向右偏移，通过,left,属性定义列左侧的偏移位置，而,pull,向左偏移，通过,right,属性定义列右侧的偏移位置。,push,和,pull,排序方法实现很简单，以,col-md-pull-*,为例，在,Bootstrap 3.3,的,CSS,源码中样式,如右所示,：,而在“,col-md-push-*,”与“,col-md-pull-*,”不同的是，使用“,left,属性”控制右移的量。,Bootstrap响应式网站开发Bootstrap栅格系,7,Bootstrap,响应式网站开发,Bootstrap,栅格系统,-,栅格系统的常用方法,div,height:100px;,border:1px solid#000000;,background-color:#D4D4D4;,左列,中列,右列,左列，显示在右侧,中列，显示在左侧,右列，显示在中间,【实例,3-7,】中的,HTML,代码,【实例,3-7,】中的添加样式,【实例,3-7,】中在,row,行中放置三个,div,，在,PC,中屏时分别置于左列（,col-md-3,）、中列（,col-md-6,）、右列（,col-md-3,），当视口缩小到平板大小时，调整其位置发生变化：“左列,-,显示在右侧”“中列,-,显示在左侧”“右列,-,显示在中间”,。,Bootstrap响应式网站开发Bootstrap栅格系,8,图,3-12,列顺序调整页面效果,Bootstrap,响应式网站开发,Bootstrap,栅格系统,-,栅格系统的常用方法,运行【实例,3-7,】代码，列偏移页面呈现效果如图,3-12,所示。,a,）,PC,中屏呈现效果,b,）平板上呈现效果,a),b),图3-12列顺序调整页面效果Bootstrap响应式网站开,9,Bootstrap,响应式网站开发,Bootstrap,栅格系统,-,栅格系统的常用方法,列嵌套排版,网页设计中会因为内容在排版显示上需要一个,DIV,中再加入数个,DIV,。这样将一组新的网格内容加入到原来已有的网格系统中就被称为嵌套。,Bootstrap,支持列嵌套，对于栅格系统中多层布局提供了简单的实现方式。用户只需在嵌套的列,column,内部新加入一行,row,，在,row,内继续使用栅格系统即可。,注意，内部所嵌套的,row,的宽度为,100%,，就是当前外部列的宽度。,div,height:100px;,border:1px solid#000000;,background-color:#D4D4D4;,第,1,列,第二列：嵌套,2-1,第二列：嵌套,2-2,【实例,3-8,】中的,HTML,代码,【实例,3-8,】实现列的嵌套排版,，其,中的添加样式,Bootstrap响应式网站开发Bootstrap栅格系,10,图,3-13,列嵌套布局页面效果,Bootstrap,响应式网站开发,Bootstrap,栅格系统,-,栅格系统的常用方法,运行【实例,3-8,】代码，列偏移页面呈现效果如图,3-13,所示。,a,）,PC,中屏呈现效果,b,）平板上呈现效果,a),b),实例,3-8,中在第二列“,”中嵌套了一个“,”元素，并在,row,内部嵌套了两个,，从而实现了图,3-13,所示的页面效果。,图3-13 列嵌套布局页面效果Bootstrap响应式网站,11,案例：企业内容展示页面制作,3,案例：企业内容展示页面制作3,12,Bootstrap,响应式网站开发,Bootstrap,栅格系统,-,案例：企业内容展示页面制作,淮安优博文化传播有限公司需要在主页上展示最新发布、合作伙伴和最新课程三个栏目。现根据需求实现的页面效果如图,3-14,所示。,案例展示,（,a,）,PC,宽屏状态下的页面效果,（,b,）,Pad,上的页面效果,图,3-14,网站整体页面效果,Bootstrap响应式网站开发Bootstrap栅格系,13,Bootstrap,响应式网站开发,Bootstrap,栅格系统,-,案例：企业内容展示页面制作,本案例基于基本的,Bootstrap,基本框架，分析图,3-14,可以看出“最新发布”部分在,PC,端为,4,栏，而在,Pad,上为,2,栏，所以可以使用,4,个“,class=col-sm-6 col-md-3,”来实现，在手机端页面中,4,个栏目独立成行，同时要求图片为响应式图片展示。,在“合作伙伴”部分在,PC,端为,6,栏，而在,Pad,上为,2,栏，所以可以使用,6,个“,class=col-sm-6 col-md-2,”来实现，在手机端页面中,6,个栏目独立成行，同时要求图片为响应式图片展示。而“最新课程”栏目与合作伙伴功能一样，可以直接复制使用。,案例,分析,具体分为四步：,第一步：创建基本样式表。,第二步：编写“最新发布”部分的,HTML,结构与,CSS,代码。,第三步：编写“合作伙伴”部分的,HTML,结构与,CSS,代码。,第四步：编写“最新课程”部分的,HTML,结构与,CSS,代码。,Bootstrap响应式网站开发Bootstrap栅格系,14,Bootstrap,响应式网站开发,Bootstrap,栅格系统,-,案例：企业内容展示页面制作,第一步：创建基本样式表。,案例,实现,bodyfont-family:,微软雅黑,;font-size:16px
展开阅读全文