响应式网页开发基础ch8.pptx

第8章 Bootstrap响应式网页开发综合实例Bootstrap响应式网页开发综合实例搭建Bootstrap基本框架方法一：远程引入方式。方法二：本地引用方式。通用CSS设置设计导航栏（1）添加一个nav标签，类名选择navbar，如果是白色效果使用default，黑色效果使用navbar-inverse。（2）在nav下添加一个div标签，设置为.container类或.container-fluid类的容器，用来容纳导航条里的其他元素（链接、按钮等）。（3）navbar-header类用于设置网站logo，可以使用文字，也可以使用图片，添加在ul前面。（4）具体的菜单项必须选择ul标签而不能是div，否则在缩小宽度时，内容不会自动换行，影响响应式的效果。（5）具体子菜单内容设置在ul标签下的li中作为导航链接，常把第一个 li 的 class 指定为 active，表示激活状态。设计轮播图（1）div class=carousel-inner role=listbox 里面是主体内容区域，包括几张图片和对应说明，分别用 div class=item 包裹起来，设置轮播图片只需要更换li标签下的img标签中的链接即可。（2）ol class=carousel-indicators 是“指示器”，即下方的那白色小点，标记当前播放到哪张图片。（3）如果需要对图片增加文字说明，可在li标签下增加h标签，如h4。（4）最后的两个 a class=left carousel-control 元素是用于手动操作图片左右切换的按钮。设计内容布局页面主体栅格系统布局标签页布局主体内容结构