《Web前端框架应用bootstrap》课件-项目二 栅格系统

任务1：栅格系统的工作原理和基本用法项目二栅格系统主讲人：CONTENTS010203实现原理使用规则实例展示课程导入Bootstrap框架提供了一套响应式、移动设备优先的栅格系统，用于页面布局设计。使用栅格系统提供的容器、行、列等元素，可以很容易的实现响应式页面布局，降低前端开发的复杂度。实现原理/01实现原理

通过定义容器大小，将屏幕或视口尺寸平分为12份，再调整内外边距，最后再结合媒体查询，制作出响应式的栅格系统。1234567891012实现原理栅格系统使用的总宽度可以不固定，Bootstrap是按百分比进行平分。12栅格系统是整个Bootstrap的核心功能，也是响应式设计核心理念的一个实现形式。1234567891012实现原理flexbox（弹性盒子）实现原理容器类.container.container-fluid.container-{sm|md|lg|xl|xxl}左右内边距0.75rem行类.row左右外边距-0.75rem列类.col.col-*.col-auto.col-{sm|md|lg|xl|xxl}-*左右内边距0.75rem栅格系统布局的类使用规则/02使用规则行（row）必须包含在.container（固定宽度）或.container-fluid（100%宽度）中，以便为其赋予合适的排列（alignment）和内边距(padding)。01“行（row）”包含列（col），在水平方向创建一组“列（column）”。02内容应当放置于“列（col）”内，并且，只有“列（col）”可以作为行（row）”的直接子元素。03使用规则栅格系统中的列是通过指定1～12的值来表示其跨越的范围。例如，3个等宽的列，可以使用3个.col-4。04对于flexbox（弹性盒子），没有指定宽度的网格列将自动作为等宽列进行布局。例如，一行中如果放4个.col-sm列，则每一列自动获取百分比为25%。05通过为column设置padding属性，从而创建列与列之间的间隔。06使用规则栅格系统的水平和垂直间距是响应和可定制的。通过.gx-*来改变栅格的水平间距，.gy-*来改变栅格的垂直间距，g-*同时改变水平垂直间距，g-0去掉间距。07如果一“行（row）”中包含的“列（column）”大于12，则多余的“列（column）”所在的元素将被作为一个整体另起一行排列。08为了使栅格具有响应性，屏幕宽度有6个栅格断点：extra-small、small、medium、large、extra-large、extraextra-large。09实例展示/03实例展示实例展示断点断点和容器屏幕大小宽度范围手机超小设备extra-small<576px平板设备smallsm576px~768px桌面显示器mediummd768px~992px大桌面显示器largelg992px~1200px特大桌面显示器extra-largexl1200px~1400px超大桌面显示器extraextra-largexxl>=1400px实例展示容器类类超小设备<576px平板设备>=576px桌面显示器>=768px大桌面显示器>=992px特大桌面显示器>=1200px超大桌面显示器extraextra-large.container100%540px720px960px1140px1320px.container-sm100%540px720px960px1140px1320px.container-md100%100%720px960px1140px1320px.container-lg100%100%100%960px1140px1320px.container-xl100%100%100%100%1140px1320px.container-xxl100%100%100%100%100%1320px.container-fluid100%100%100%100%100%100%左右padding为：0.75rem（12px）实例展示行、列类行类列类

.col等列宽，对所有设备都是一样的，进行等分。col-**代表数字，表示占了*格。例如，col-3，表示对所有设备都是一样的，这一列占3格。col-X-*：X表示的是设备宽度，其取值为：sm（平板设备）、md（桌面显示器）、lg（大桌面显示器）、xl（超大桌面显示器）。*表示占了*格。col-auto，列宽根据内容自适应。.row，将容器的display属性设置为flex。左右marging为-0.75rem实例展示行、列类

超小设备<576px平板设备>=576px桌面显示器>=768px大桌面显示器>=992px特大桌面显示器>=1200px超大桌面显示器>=1400px最大容器宽度None(auto)540px720px960px1140px1320pxClass前缀.col-.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-列数量和121212121212间隙宽度1.5rem(左、右0.75rem)可嵌套Yes列排序Yes任务2：匹配多种设备、自动列宽、列嵌套、列排序项目二栅格系统主讲人：CONTENTS010203匹配多种类型设备自动布局列列嵌套04列排序匹配多种类型设备/01匹配多种类型设备xs或smmdlg及其以上设备自动布局列/02自动布局列自动布局列主要是指列的宽度根据行的宽度或列包含内容的宽度自动分配。包括等列宽和自动列宽两者情况。自动布局列等列宽自动布局列等列宽自动布局列自动列宽lg设备显示效果md设备显示效果列嵌套/03列嵌套列排序/04列排序

列排序其实就是改变列的前后排列顺序在栅格系统中，可以通过.order-*、.order-X-*，来实现这一目的。其中，*是first、last或者0-5的数字，排序是按数字大小排序，first最前面，last最后面，X代表xs、sm、md、lg、xl、xxl，对应不同的屏幕大小。任务3：列偏移、行列类、间距类项目二栅格系统主讲人：CONTENTS010203列偏移行列类间距类列偏移/01列偏移offset-*：*为数字1-11，表示向右偏移的列数。offset-X-*：X为设备宽度前缀sm、md、lg、xl、xxl。*为数字0~11。offset-X-0，表示该宽度下不偏移。列偏移md设备列偏移.ms-auto设置margin-left：auto，使元素居右排列。.me-auto设置margin-right：auto，使元素居左排列。

在Bootstrap框架中，提供了外边距工具ms-auto、me-auto。在弹性盒子中可以使用边距自动来改变子项目的布局。列偏移行列类/02行列类使用行列类.row-cols-*、.row-cols-X-*类可以快速设置布局中一行的列数。其中，*是1～6的数字，X代表sm、md、lg、xl、xxl，对应不同的屏幕大小。普通的.col-*类应用于各个列，但行列类应用在父级.row上，可是快捷指定列数。行列类使用.row-col-*时，也可以指定列的宽度，其他未指定列宽的列依旧为平分的宽度。行列类使用.row-col-auto类时，每列的宽度自适应内容宽度。也可以设置响应式行列类，例如.row-col-md-auto.行列类间距类/03间距类.gx-*改变.row中.col元素内容的水平间距。.gy-*改变.row中.col元素内容的垂直间距。g-*同时改变.row中.col元素内容的水平、垂直间距。使用.g-*、gx-*、gy-*（*的取值为0~5）可以修改.row元素的内外边距和.row下的.col列元素的内外边距，从而达到改变一行中.col列元素内容的水平、垂直间距。对应响应式类：.g-X-*、.gx-X-*、.gy-X-*，其中X的取值为sm、md、lg、xl、xxl。间距类g-0：0remg-1：0.25remg-2：0.5remg-3：1remg-4：1.5remg-5：3rem间距类有2种方式解决溢出问题：给.container添加更大的内边距，添加.px-4，会将.container的内边距设置为24px；在.container容器上添加类..overflow-hidden，让溢出部分隐藏。案例：W3school项目二栅格系统主讲人：CONTENTS0102W3School首页框架分析具体实现课程导入如何灵活运用栅格系统进行页面布局课程导入栅格系统通过将页面划分为等宽的列来创建一个清晰的布局结构。这种方法不仅有助于设计师快速构建响应式和自适应的网页，还能够确保内容的一致性和可读性。课程导入W3School首页框架分析/01W3School首页框架分析W3School首页框架分析<divclass="container"><!--第1行Logo部分-->

<divclass="row"><divclass="col"></div></div><!--第2行

导航部分-->

<divclass="row"><divclass="col"></div></div><!--第3行

主体-->

<divclass="row"><divclass="col-3"></div><divclass="col-6"></div><divclass="col-3"></div></div><!--第4行

页脚-->

<divclass="row"><divclass="col"></div></div></div>具体实现/02具体实现Logo行<divclass="row"><divclass="col">

<divclass="bg-logo"><imgsrc="img/logo.png"></div></div></div>.bg-logo{

/*设置背景颜色为图片的背景色*/background-color:#fdfcf8;width:100%;}具体实现导航栏<divclass="row"><divclass="col">

<divid="main-nav"><ul><li><ahref="#">HTML/CSS</a></li><li><ahref="#">JavaScript</a></li><li><ahref="#">ServerSide</a></li><li><ahref="#">ASP.NET</a></li><li><ahref="#">XML</a></li><li><ahref="#">WebServices</a></li><li><ahref="#">WebBuilding</a></li></ul></div></div></div>#main-nav{background-color:#eee;}#main-navul{list-style-type:none;font-size:18px;padding:15px0;margin:0px;}#main-navli{display:inline;}#main-nava{padding:15px20px;color:#999;text-decoration:none;}#main-nava:hover{background-color:#444;color:#fff;}具体实现导航栏具体实现主体行具体实现主体部分左侧侧边栏#leftside{ font-size:12px; border-left:1pxsolid#ccc; border-right:1pxsolid#ccc; padding-top:10px;

}#leftsideh3{ margin:10px05px8px;}#leftsideul{ list-style-type:none;}#leftsidea{ text-decoration:none; color:#333; display:block; padding:5px05px15px;}#leftsidea:hover{ background-color:#999; color:#fff;}具体实现主体部分右侧侧边栏与左侧侧边栏的实现方式类似。#rightside{ font-size:12px;

border-left:1pxsolid#ccc; border-right:1pxsolid#ccc; padding-top:10px;

}#rightsideh3{ margin:10px05px8px;}#rightsideul{ list-style-type:none; }#rightsidea{ text-decoration:none; color:#930; display:block; padding:5px05px15px;}#rightsidea:hover{ background-color:#C30; color:#fff;}具体实现主体部分#maincontent{font-size:16px;padding:020px;}#maincontenth2{margin-top:20px;margin-bottom:10px;}#maincontentp{margin:10px0;}具体实现页脚部分<divclass="row"><divclass="col-sm-12"><footer><p>W3school提供的内容仅用于培训，但我们不保证内容的正确性...</p><p>W3school简体中文版的所有内容仅供测试...</p></footer></div></div>footer{background-color:#eee;font-size:12px;text-align:center;