项目二 任务3 使用Bootstrap组件和JS插件制作网页导航条-【鹑首文化】HTML5+CSS3网页设计与制作配套电子课件PPT

HTML5+CSS3网页设计与制作 使用Bootstrap开源框架快速搭建响应式网页 项目二 能够学习Bootstrap的导航条组件，利用Bootstrap导航条组件相关内容，完成不同样式导航条的制作； 能够利用Bootstrap的JavaScript插件，对导航条进行移动化（响应式）改造。 任务目标 任务3 使用Bootstrap组件和JS插件制作网页导航条 本次任务要求通过学习Bootstrap的导航条及相关组件，完成项目网页的导航条制作。完成后的导航条如图2-3所示。 任务描述 图2-3 移动端和电脑端导航条测试效果图 任务3 使用Bootstrap组件和JS插件制作网页导航条 在上一任务的基础上，完成D清单页面导航条制作。需要： 学习Bootstrap的菜单框架、菜单样式、字体图标等知识； 学习Bootstrap的响应式菜单、下拉菜单等JavaScript插件知识； 综合运用Bootstrap相关知识，完成D清单页面响应式导航条制作。 任务分析 任务3 使用Bootstrap组件和JS插件制作网页导航条 知识与技能准备 网页的组件，是指包括下拉菜单、导航、警告框、弹出框等可以在各个网页上常见的一般可以复用的页面元素。 为了完成页面导航条的制作，需要学习Bootstrap组件部分的相关知识，可以查阅Bootstrap框架中文网址（非官方，官方网址是http://getbootstrap.com/components）的“组件”（网址http://v3.bootcss.com/components/）来学习Bootstrap的组件。 根据本次任务的要求，为了能够顺利应用Bootstrap组件来制作招生页面的导航条，我们需要先学习Bootstrap的导航条组件和字体图标等相关知识。 Bootstrap中的导航组件都共同使用一个已经写好了的nav类，状态类也是共用的。通过修改nav类的样式我们就可以得到我们想要的样式。 知识与技能准备 1、导航条的框架样式 导航条框架包括创建一个导航条栏底色和布局容器，Bootstrap为导航条设置了.navbar和.navbar-default类预定义样式来设置导航条的高宽、边框、边距和导航项背景色等格式，.container布局容器则已经在任务2中学习了。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 .navbar { position: relative; min-height: 50px; margin-bottom: 20px; border: 1px solid transparent; }/*在平板以上设备增加了border-radius: 4px;*/ .navbar-default { background-color: #f8f8f8; border-color: #e7e7e7; }/*设置导航条底色，反色样式为.navbar-inverse，你也可以自己设置*/ .container-fluid > .navbar-collapse,.container-fluid > .navbar-header,.container > .navbar-collapse,.container > .navbar-header { margin-right: -15px; margin-left: -15px; }/*用于抵消.container和.container-fluid布局容器设置的两个边距，一般用于导航条的左右两端*/ 知识与技能准备 1、导航条的框架样式 应用时可以参考如下代码： 完成后的效果图如下： 1 2 3 4 5 <nav class="navbar navbar-default"> <div class="container "> <div class="navbar-header">头部</div> </div> </nav> 图2-3-1 导航条框架效果图 知识与技能准备 2、导航条内容优化样式 在搭建好框架后，我们需要在导航条中创建各种内容。 2.1列表导航 使用<ul>列表来创建导航是行业的习惯，为此，Bootstrap也为使用<ul>创建导航条创建了各种样式，主要以.nav和.navbar-bar类为主，且一般会同时使用。 2.2常用格式优化 为了保证导航容器内的相关内容有正确的行距和颜色等格式，Bootstrap预设了一些常用的样式格式。 某网站导航条效果图如图2-3-3所示，请使用Bootstrap导航条组件完成其网页效果的实现。 可参考如下方式实现： （1）搭建导航框架； （2）创建列表，并输入相应内容； （3）利用Bootstrap的导航条格式优化