Bootstrap响应式网页设计.ppt

Bootstrap响应式网页设计.ppt第9章Bootstrap响应式网页设计引言网站各模块代码如何重用?如何快速制作响应式网站解决方案:,只要在HTML元素中调用相关的类名就可使用这些组件和样式,而无需编写CSS代码,从而减少了代码的编写,提高了网站的开发效率移动设备优先:浏览器支持:。响应式设计:组件丰富::,该版本压缩文件大小为362KB。:将ZIP压缩包解压后的3个文件夹(css、js和fonts)复制到网站根目录下第二步:在HTML文件中引入Bootstrap,一个引入了Bootstrap的HTML文件(9-)注意要在网页中使用Bootstrap,、,必须采用条件注释[ifltIE9]的方式引入2个js文件,,。(row)与列(col)的组合来创建页面布局,开发者只要将网页模块放入这些创建好的栅格(格子)中就可以了“行”-fluid类中,以便为其赋予合适的对齐方式(alignment)和内边距(padding)。每一行(row)在水平方向包含若干列(col),并且只有“列”可以作为“行”的直接子元素。行使用类名“row”来定义,列使用类名“col-*-*”来定义,网页的内容应放在“列”中。(超小屏、小屏、中屏和大屏)其像素的分界点分别是768px、992px和******@media(min-width:768px){.container{width:750px}} /*小型屏幕*/***@media(min-width:992px){.container{width:970px}} /*中型屏幕*/***@media(min-width:1200px){.container{width:1170px}} /*大型屏幕*/栅格系统的具体参数屏幕尺寸超小屏幕手机<768px小屏幕平板≥768px中等屏幕桌面≥992px大屏幕大桌面≥1200px栅格系统行为总是水平排列开始是堆叠在一起的,当大于这些阈值将变为水平排列container元素最大宽度None(自动)-xs-.col-sm-.col-md-.col-lg-基础列数12最大列宽自动约62px约81px约97px列中内容间隔30px(每列左右均有15px填充)可嵌套、可排序是可偏移(offsets)-md-3的类名表示把3个基础列合并成一列。因此列的类名“col-*-*”又称为列合并属性。列的col--md-3就暗含了col-lg-3,col-xs-6也暗含了col-sm-6<divclass="container"><divclass="row"><divclass="col-md-3col-sm-6">1</div><divclass="col-md-3col-sm-6">2</div><divclass="col-md-3col-sm-6">3</div><divclass="col-md-3col-sm-6">4</div></div></div>