本文档展示了如何使用Bootstrap框架来简化HTML和CSS的编写，通过下载并引入Bootstrap的相关文件，结合HTML代码，创建了一个包含导航栏、功能菜单、登录表单以及布局的后台管理页面模板。
一、下载bootstrap框架压缩包，进行解压，下载路径：
二、将下载好的压缩包进行解压，替换项目中的文件夹css、fonts、js
三、在js文件中加入jquery
用bootstrap简化了html和css，可直接使用已定制好的样式使用，静态效果图如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>后台管理系统</title>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"/>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">后台管理</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">功能 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">订餐</a></li>
<li><a href="#">取餐</a></li>
<li><a href="#">投诉</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">建议</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">退出</a></li>
</ul>
</li>
<li><a href="#">帮助</a></li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="用户名">
<input type="text" class="form-control" placeholder="密码">
</div>
<button type="button" class="btn btn-default">登录</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div id="main" style="margin-top: 50px; ">
<div id="left" class="col-xs-3 col-md-3">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" ><a href="#">首页</a></li>
<li role="presentation"><a href="#">订单申报</a></li>
<li role="presentation"><a href="#">业务审批</a></li>
<li role="presentation"><a href="#">员工招聘</a></li>
<li role="presentation"><a href="#">员工投诉</a></li>
</ul>
</div>
</div>
<div id="right" class="col-xs-9 col-md-9">
<h1>订单管理系统</h1>
<div class="btn-toolbar" role="toolbar" >
<div class="btn-group" role="group" >
<button type="button" class="btn btn-default">审批</button>
</div>
<div class="btn-group" role="group" >
<button type="button" class="btn btn-primary">对账</button>
</div>
<div class="btn-group" role="group" >
<button type="button" class="btn btn-success">退款</button>
</div>
<div class="btn-group" role="group" >
<button type="button" class="btn btn-info">发订单</button>
</div>
<div class="btn-group" role="group" >
<button type="button" class="btn btn-warning">紧急通知</button>
</div>
<div class="btn-group" role="group" >
<button type="button" class="btn btn-danger">会议</button>
</div>
</div>
<div id="box" style="margin-top: 20px;">
<div id="box1" class="col-xs-12 col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">我的任务</h3>
</div>
<ul class="list-group list-group-item-info">
<li class="list-group-item">
<span class="badge">14</span>
今日订单量
</li>
<li class="list-group-item">
<span class="badge">9</span>
客户反馈回访
</li>
<li class="list-group-item">
<span class="badge">5</span>
星级评定
</li>
<li class="list-group-item">
<span class="badge">3</span>
指定行程
</li>
</ul>
</div>
</div>
<div id="box2"class="col-xs-12 col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">今日提醒</h3>
</div>
<ul class="list-group list-group-item-info">
<li class="list-group-item">
<span class="badge">14</span>
今日订单量
</li>
<li class="list-group-item">
<span class="badge">9</span>
客户反馈回访
</li>
<li class="list-group-item">
<span class="badge">5</span>
星级评定
</li>
<li class="list-group-item">
<span class="badge">3</span>
指定行程
</li>
</ul>
</div>
</div>
<div id="box3"class="col-xs-12 col-md-6 panel panel-primary">
<div class="panel-heading">
最新订单
</div>
<table class="table text-info">
<tr>
<th>#</th>
<th>产品</th>
<th>数量</th>
<th>金额</th>
<th>业务量</th>
</tr>
<tr>
<td>1</td>
<td>螃蟹</td>
<td>1</td>
<td>120</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>螃蟹</td>
<td>1</td>
<td>120</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>螃蟹</td>
<td>1</td>
<td>120</td>
<td>12</td>
</tr>
</table>
</div>
<div id="box4"class="col-xs-12 col-md-6 pannel panel-primary">
<div class="panel-heading">
送单进度
</div>
<span class="label label-info">长城</span>
<div class="progress" style="margin-top: 1px;">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
<span class="label label-info">长城2</span>
<div class="progress" style="margin-top: 1px;">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
