编程挑战，基于bootstrap的网页开发教程-慕课网

编程挑战

基于Bootstrap实现下图所示效果的页面，一个管理系统的首页，包含：

1.导航栏（带登录和下拉菜单，黑色背景）；

2.左侧导航栏（可参考栅格布局，并添加样式）；

3.右侧管理面板：栅格布局，包含标题、按钮、面板、警告框、表格、徽章、进度条等多个组件

效果图:

库引用地址:

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.左列制作成左侧导航，注意添加样式

4.右列是管理控制台，添加标题、按钮和下面的面板内容，内容为2列布局，面板使用bootstrap的panel

5.在面板中添加警告框、表格、徽章导航、进度条等多个组件

6.任务完成后，可以根据自己的想象，添加更多的组件

课后思考：

本案例代码没有针对移动设备优化，你可以试着添加一些样式，让本页面在移动设备中也能正常显示。

<!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>某管理系统</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<style>
</style>
</head>
<body>
</body>
</html>