《移动Web前端开发》教学讲义 第30讲.docVIP

《移动WEB前端开发》 配套教学教案 第30讲 课时内容 BootStrap组件 授课时间 90分钟 课时 2 教学目标 ? 理解下拉菜单的实现方式 ? 掌握导航和导航条的实现方式 ? 能够应用BootStrap组件进行页面的快速开发 教学重点 ? 掌握各种组件的实现方式 ? 熟练应用导航和下拉菜单 教学难点 导航和菜单的自适应 教学设计 教学思路：通过公司登录页面的案例，完成对BootStrap组件的应用讲解，让学生能熟练使用下拉菜单和导航。 教学手段：（1）案例法，通过项目案例实现对BootStrap各种组件的使用；（2）讲授法，通过知识讲解帮助学生掌握教学重点。 教学内容 演示案例引入新课： 根据bootstrap的特性实现登录页面的制作，登录页面应该包含登录信息框、登录按钮，提示文字等相关信息。 案例效果 知识讲解：具体可结合本项目的PPT课件进行配合讲解。 1．下拉菜单组件 下拉菜单是BootStrap中使用最为频繁的一个组件，该组件的使用比较简单，只需要在class的属性中设置dropdown字样即可实现下拉菜单的快速生成，这样做的好处是可以自己设计符合需求的自定义的菜单样式。 下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单。 2．导航和导航条 导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。 默认的导航栏： 创建一个默认的导航栏的步骤如下： 向 nav 标签添加 class .navbar、.navbar-default。 向上面的元素添加 role=navigation，有助于增加可访问性。 向 div 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 a 元素。这会让文本看起来更大一号。 为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。 3面板组件 面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 div 元素添加 class .panel 和 class .panel-default 即可 面板标题： 我们可以通过以下两种方式来添加面板标题： 使用 .panel-heading class 可以很简单地向面板添加标题容器。 使用带有 .panel-title class 的 h1-h6 来添加预定义样式的标题 小结 了解什么是BootStrap组件 掌握下拉菜单的使用方法 掌握导航的使用方法 作业 谈一谈对公司首页的设计方法? 完成下拉菜单和导航的设计与实现。