Bootstrap响应式网页设计

第9章Bootstrap响应式网页设计引言网站各模块代码如何重用？如何快速制作响应式网站解决方案：Bootstrap框架9.1Bootstrap的使用Bootstrap内置了非常多的网页组件和漂亮样式，只要在HTML元素中调用相关的类名就可使用这些组件和样式，而无需编写CSS代码，从而减少了代码的编写，提高了网站的开发效率移动设备优先：浏览器支持：。响应式设计：组件丰富：Bootstrap包含了很多功能强大的内置组件9.1.1下载和引用Bootstrap框架Bootstrap的中文官方网站是：。目前Bootstrap最新的正式版为3.3.7，该版本压缩文件大小为362KB。2.在网站中引入Bootstrap第一步：将ZIP压缩包解压后的3个文件夹（css、js和fonts）复制到网站根目录下第二步：在HTML文件中引入Bootstrap，一个引入了Bootstrap的HTML文件（9-1.html）注意要在网页中使用Bootstrap，必须引入bootstrap.min.css、jquery.min.js和bootstrap.min.js为了使Bootstrap能够兼容IE8浏览器，必须采用条件注释[ifltIE9]的方式引入2个js文件，其中respond.min.js文件的作用是使IE8支持媒体查询，html5shiv.js是使IE8能够支持HTML5新增的标记。9.1.2Bootstrap栅格系统栅格系统通过一系列的行（row）与列（col）的组合来创建页面布局，开发者只要将网页模块放入这些创建好的栅格（格子）中就可以了“行”必须包含在布局容器.container类或container-fluid类中，以便为其赋予合适的对齐方式（alignment）和内边距（padding）。每一行（row）在水平方向包含若干列（col），并且只有“列”可以作为“行”的直接子元素。行使用类名“row”来定义，列使用类名“col-*-*”来定义，网页的内容应放在“列”中。每一行最多可等分为12列2.栅格参数Bootstrap区分了4种类型的浏览器尺寸（超小屏、小屏、中屏和大屏）其像素的分界点分别是768px、992px和1200px@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(自动)750px970px1170px类名前缀.col-xs-.col-sm-.col-md-.col-lg-基础列数12最大列宽自动约62px约81px约97px列中内容间隔30px（每列左右均有15px填充）可嵌套、可排序是可偏移（offsets）是9.1.3使用栅格系统进行响应式布局1.列合并形如col-md-3的类名表示把3个基础列合并成一列。因此列的类名“col-*-*”又称为列合并属性。列的col-类名是向大兼容的.例如col-md-3就暗含了col-lg-3，col-xs-6也暗含了col-sm-6divclass=containerdivclass=rowdivclass=col-md-3col-sm-61/divdivclass=col-md-3col-sm-62/divdivclass=col-md-3col-sm-63/divdivclass=col-md-3col-sm-64/div/div/div2.清除浮动问题divclass=rowdivclass=col-md-3col-xs-65/divdivclass=col-md-3col-xs-66/divdivclass=clearfix/divdivclass=col-md-3col-xs-67/divdivclass=col-md-3col-xs-68/div/div3.列偏移使用col-md-offset-*的类名就可以将列向右偏移n列在Bootstrap源码中，列偏移是通过margin-left属性实现的：.col-md-offset-6{margin-left:50%;}3.列隐藏以hidden-开头的类表示在当前屏幕上隐藏，在其他屏幕上可见，以visible开头的表示在当前屏幕上显示，在其他屏幕上都隐藏。4.列排序列排序是通过col-md-push-*和col-md-pull-*来实现的。其中，push表示把列向右推，pull表示把列向左拉。divclass=rowdivclass=col-md-4col-sm-6col-sm-push-6……/divdivclass=col-md-4col-md-offset-4col-sm-6col-sm-pull-6hidden-xs……/div/div5.列嵌套栅格系统还支持列的嵌套，即在一个列元素中再插入一个或者多个行（row）。此时，内部嵌套行（row）的宽度就是当前外部列的宽度。9.2Bootstrap中的网页组件9.2Bootstrap中的网页组件Bootstrap组件能帮助开发者快速构建出绚丽的页面。其中最常用的组件有：导航条（navbar）轮播图（Carousel）Tab面板（Tab）媒体对象（MediaObject）9.2.1基于组件的网页制作方法基于组件的网页制作技术，是指将网页中可能需要的各个组件（如导航条、栏目框）先制作出来，然后将这些组件装配进网页的布局框架中形成网页。（1）建立标准组件库（2）建立网页布局代码库（3）组装网页9.2.2导航条（1）插入一个容器nav或div标记，为其添加navbar类名和navbar-default类名（3）向导航条中添加导航项，方法是插入一个ul标记，再设置该标记的类名为nav类和navbar-nav类。如果要将某个导航项设置为当前导航项，可对该li标记添加active类。导航条实例navclass=navbarnavbar-defaultrole=navigation!--导航条的容器--ulclass=navnavbar-navliclass=activeahref=#研究机构/a/liliahref=#船山学人/a/liliahref=#船山科普/a/li/ul/nav2.响应式导航条（1）导航项折叠（隐藏）的实现。在ul标记外包裹一个div标记，并且为该div添加collapse和navbar-collapse两个类名，以及一个navbar-collapse的id属性值。（2）添加右侧的汉堡按钮，在nav标记中添加一个button标记，并为该button标记添加navbar-toggle和collapsed两个类名，以及data-toggle=collapse的属性，表示实现折叠。响应式导航条实例buttontype=“button”class=“navbar-togglecollapsed”data-toggle=“collapse”data-target=“#navbar-collapse”aria-expanded=“false”……!--汉堡按钮--/buttondivclass=collapsenavbar-collapseid=navbar-collapse!--实现折叠--ulclass=navnavbar-nav……/ul/div3.带有下拉菜单的导航条liclass=dropdownahref=#class=dropdown-toggledata-toggle=dropdown船山科普/aulclass=dropdown-menu!--下拉菜单--liahref=#王船山其人/a/li/ul/li4.修改导航条的默认样式.navbar-default{background-color:#900;}/*导航条背景色*/.navbar-default.navbar-navlia{color:#f9f9f9;}/*导航条前景色*/.navbar-navlia{padding:10px20px;}/*每个导航项的大小*/.navbar-default.navbar-navlia:focus,.navbar-default.navbar-navlia:hover{color:#fff;background-color:#8b8;}/*导航项hover时的样式*/.navbar{border-radius:0;min-height:40px;/*导航条的高度*/margin-bottom:10px;}/*导航条的下边界*/4.修改下拉菜单的默认样式.dropdown-menu{background-color:#9c9;}/*下拉菜单的背景色*/.dropdown-menulia{padding:8px20px;color:#333;}/*下拉菜单项的大小*/.dropdown-menulia:focus,.dropdown-menulia:hover{color:#fff;background-color:#c33;}/*下拉菜单项的hover样式*/.navbar-default.navbar-brand{color:#fff;}/*导航条头部的样式*/5.带有搜索表单的导航条divclass=collapsenavbar-collapseid=navbar-collapseulclass=navnavbar-nav……/ulformclass=navbar-formnavbar-leftrole=searchdivclass=form-groupinputtype=textclass=form-controlplaceholder=Search/divbuttontype=submitclass=btnbtn-default提交/button/form/div9.2.3轮播插件Bootstrap轮播插件是响应式的。轮播插件由三个部分组成：轮播的图片、计数器和控制按钮。轮播图的组成1.轮播图的容器插入一个容器标记如div，为其添加carousel类和slide类，其中carousel类名使它成为一个轮播容器2.轮播项目轮播项目必须放在一个类名为carousel-inner的div中，每个项目是一个类名为item的div3.轮播计数器用一个类名为carousel-indicators的ol元素定义的，有几张图片就在里面放几个li元素。4.轮播导航是一个类名为carousel-control的a标记5.轮播图的选项修改改变轮播图的切换速度为1秒，只要对轮播图的容器carousel元素添加data-interval=“1000”就可以了。当鼠标滑动到轮播图上时，轮播图会停止播放，如果不希望停止播放，可对carousel元素添加data-pause=false。9.2.4选项卡面板选项卡面板组成：上方是一组导航链接按钮，下方是一组内容面板（1）选项卡导航条。一个ul标记，对其应用nav和