编程练习，基于bootstrap的网页开发教程-慕课网

3-4 编程练习

本节编程练习不计算学习进度，请电脑登录imooc.com操作

编程练习

基于Bootstrap实现下图所示效果的页面，一个白底的带有两个菜单项、一个下拉菜单和一个登录表单的基本导航条：

效果图:

库引用地址:

bootstrap框架: //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css

jquery库: http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js

bootstrap.min.js：http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js

任务

1. 搭建基础的bootstrap页面

2. 根据课程所学或官方文档搭建基础的导航条结构

3. 注意表单的样式和右对齐所需要添加的样式（.navbar-right）

4. 根据课程所学或官方文档建立下拉菜单

5. 为下拉菜单设置标题和分割线

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello World</title>
 
 
</head>
 
<body>
 
 
 
 
</body>
</html>