项目4任务3ppt课件.pptx
项目4任务3项目4 使用Bootstrap开源框架快速搭建响应式网页任务4.3使用Bootstrap组件和JS插件制作网页导航条HTML5+CSS3网页布局学校名称：任课老师：联系电话：目录CONTENTS0102学习目标03任务描述04知识学习与课堂练习05任务实施06任务回顾任务拓展01 1、能够学习Bootstrap的导航条组件，利用Bootstrap导航条组件相关内容，完成不同样式导航条的制作； 2、能够利用Bootstrap的JavaScript插件，对导航条进行移动化（响应式）改造。02 本次任务要求通过学习Bootstrap的导航条及相关组件，完成项目网页的导航条制作。学习 1、Bootstrap的菜单框架、菜单样式、字体图标等知识； 2、Bootstrap的响应式菜单、下拉菜单等JavaScript插件知识；完成 1、网页导航条的内容制作； 2、网页手机状态导航条的制作。04知识学习与课堂练习 网页的组件，是指包括下拉菜单、导航、警告框、弹出框等可以在各个网页上常见的一般可以复用的页面元素。 为了完成页面导航条的制作，需要学习Bootstrap组件部分的相关知识，可以查阅Bootstrap框架中文网址（非官方，官方网址是http:/ 根据本次任务的要求，为了能够顺利应用Bootstrap组件来制作招生页面的导航条，我们需要先学习Bootstrap的导航条组件和字体图标等相关知识。 Bootstrap中的导航组件都共同使用一个已经写好了的nav类，状态类也是共用的。通过修改nav类的样式我们就可以得到我们想要的样式。04知识学习与课堂练习 导航条框架包括创建一个导航条栏底色和布局容器，Bootstrap为导航条设置了.navbar和.navbar-default类预定义样式来设置导航条的高宽、边框、边距和导航项背景色等格式，.container布局容器则已经在任务2中学习了。其基本框架样式如右： 应用时可以参考如右代码1、导航条的框架样式1234567891011121314151617.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布局容器设置的两个边距，一般用于导航条的左右两端*/12345头部04知识学习与课堂练习 在搭建好框架后，我们需要在导航条中创建各种内容。 2.1列表导航 使用列表来创建导航是行业的习惯，为此，Bootstrap也为使用创建导航条创建了各种样式，主要以.nav和.navbar-bar类为主，且一般会同时使用，相关样式如右。 应用时，可以在框架代码的基础上添加，可参考如下代码： 完成后效果图如下：2、导航条内容优化样式123456789101112131415161718192021222324252627282930.nav padding-left: 0; margin-bottom: 0; list-style: none;.nav li position: relative; display: block;.nav li a position: relative; display: block; padding: 10px 15px;.nav li a:hover,.nav li a:focus text-decoration: none; background-color: #eee;.navbar-nav float: left;margin: 0;.navbar-nav li float: left;.navbar-nav li a padding-top: 15px;padding-bottom: 15px;12345list1list2list304知识学习与课堂练习 2.2常用格式优化 为了保证导航容器内的相关内容有正确的行距和颜色等格式，Bootstrap预设了一些常用的样式格式。 常用格式样式如右。 利用格式优化样式，我们可以做出比较完美的导航条了。2、导航条内容优化样式1234567891011121314151617181920212223242526272829.navbar-default .navbar-nav .active a,.navbar-default .navbar-nav .active a:hover,.navbar-default .navbar-nav .active a:focus color: #555; background-color: #e7e7e7;/*用于设置选中的列表*/.navbar-brand float: left; height: 50px; padding: 15px 15px; font-size: 18px; line-height: 20px;/*一般用于导航的标题类内容*/.navbar-text margin-top: 15px; margin-bottom: 15px;/*一般用于导航的非超链接类文本*/.navbar-left float: left !important;/*组件左排列*/.navbar-right float: right !important; margin-right: -15px;/*组件右排列*/.navbar-form padding: 10px 15px; margin-top: 8px; margin-right: -15px; margin-bottom: 8px; margin-left: -15px; border-top: 1px solid transparent; border-bottom: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);/*用于设置导航内的表单组件*/04知识学习与课堂练习 某网站导航条效果图如图4.3-3所示，请使用Bootstrap导航条组件完成其网页效果的实现。 可参考如下方式实现： （1）搭建导航框架； （2）创建列表，并输入相应内容； （3）利用Bootstrap的导航条格式优化样式来设置内容样式。课堂练习4.3-1 使用Bootstrap制作如下导航条04知识学习与课堂练习 3.1字体图标 在配置环境的时候，也许你已经留意到了Bootstrap存放字体的文件夹， Bootstrap提供了Glyphicons字体图标，包括250多个来自Glyphicon Halflings的字体图标。Glyphicons Halflings一般是收费的，但是他们的作者允许Bootstrap免费使用。部分图标样式可以看下图，你也可以在http:/ 每一个图标都有一个独立的类，图标类不能和其它组件直接联合使用，它们不能在同一个元素上与其他类共同存在。 所以，要使用图标必须创建一个嵌套的 标签，并将图标类应用到这个 标签上。 为了有正确的padding值，务必在图标和文本之间添加一个空格。 可参考如右代码：3、字体图标或品牌图片1204知识学习与课堂练习 3.2品牌图片 将导航条内放置品牌标志的地方（头部）替换为 元素即可展示自己的品牌图标。由于.navbar-brand已经被设置了内补（padding）和高度（height），所以在使用时需要设置自己的CSS代码来替换默认的样式。 可参考如下CSS样式代码：3、字体图标或品牌图片123456.navbar-brand padding: 5px !important;.navbar-brand img height: 40px;04知识学习与课堂练习 在上一个课堂练习的基础上，完成如下效果图：在Login前面添加字体图标，在Olimpia Trucks前面添加品牌图片。 可参考如下方式实现： （1）添加品牌图片 删除原有的文字品牌标志，添加标签，图片文件在4.3-2文件夹中； 修改的格式，让其在导航条上有正确的大小和边距，CSS代码可参考上面品牌图片内容中涉及的代码； （2）添加字体图标 参考字体图标内容中的标签代码，修改相应的样式即可。课堂练习4.3-2在导航条添加图标和品牌图片04知识学习与课堂练习 将课堂练习4.3-2中完成的导航条在手机端（768px），我们会发现导航条全部垂直排列了，如右图。 很明显，这个并不是我们要的效果。 Bootstrap已经为我们想好了一切，为此，你只需要添加适当的HTML代码即可得到你要的结果： （1）在navbar-header类的标签中添加按钮，并为其添加navbar-toggle和collapsed类； （2）用将要隐藏的列表包裹，并为其添加collapse和navbar-collapse类； （3）Bootstrap采用的是通过单击鼠标按钮来显示和隐藏的下拉菜单，所以其依赖于jquery.js和bootstrap.js文件。4、为手机端创建菜单图标04知识学习与课堂练习 为此，我们需要在中添加如下参数： data-toggle=collapse：触发事件 data-target=#bs-example-navbar-collapse-1：触发事件的目标 aria-expanded=false：用于无障碍设备检查切换动作的扩张属性 data属性是Bootstrap的API，是我们使用Bootstrap JS的首选方式，你可以仅仅通过data属性API就能使用所有Bootstrap中的插件，而不用写一行JavaScript代码，此处应用了Bootstrap JS的collapse插件。 aria-expanded是W3C WAI-ARIA（无障碍）的一个扩展属性，目前还是草案，可查看W3C文档了解详细，如果你的网页不针对网页无障碍进行设计的，则可省略此属性。 在navbar-collapse类的标签中添加id属性，并对应data-target的值： id=bs-example-navbar-collapse-1 当然你也可以自己定义属性值，只需要与data-target的属性对应即可。4、为手机端创建菜单图标04知识学习与课堂练习 将课堂练习4.3-2的导航条进行响应式处理，让其在移动端时按下图效果显示，且在单击图标时能够按下拉的方式显示隐藏的导航条。 可参考如右代码：课堂练习4.3-3 导航条的移动化12345678!-在navbar-header类的标签中添加- 1234505任务实施 在任务2中，我们已经对整个页面进行了布局，其中导航条的代码如右： 很明显，这是利用Bootstrap的删格系统进行的左右布局，通过前面知识的学习，我们知道利用Bootstrap的导航条来完成任务，不需要进行左右布局。 接下来，让我们来用Bootstrap的导航条来完成本次任务。 我们发现，我们要做的导航条比较简单，并不是Bootstrap提供的参考样式。12345678910logonav05任务实施 实施步骤如下，参考代码见课本 1、搭建导航条框架 2、为导航条添加品牌图片 3、制作导航条列表 4、修改navbar-default样式 5、为导航条创建响应式按钮以适应手机端06任务回顾学习 1、Bootstrap默认样式的导航条框架 2、Bootstrap默认样式的导航条列表 3、Bootstrap默认样式的导航条内部修饰内容：图标、品牌图片、对齐等 4、Bootstrap默认样式的导航条手机菜单、按钮完成 我们将这些知识运用到了我们的项目中，完成了导航条的制作，并实现了导航条的响应式效果。07任务拓展 1、下拉菜单 拓展练习4.3-1 在课堂练习4.3-3的基础上为Our Trucks加入下拉菜单 2、导航条固定 拓展练习4.3-2 在本次任务实施完成的基础上将导航条固定在页面顶部感谢聆听！THANK YOU!HTML5+CSS3网页布局学校名称：指导老师：联系电话：
