百度360必应搜狗淘宝本站头条
框架图cad怎么画框架grpc框架flask框架scrapy框架
当前位置：网站首页 > 技术文章 > 正文

网站技术干货之Bootstrap框架实现通用版网站后台管理界面

ccwgpt 2024-09-15 14:58 31 浏览 0 评论

本案例综合运用bootstrap框架中多个知识点实现较为复杂的网站前端效果，对大家的学习有一定的促进作用。

案件中涉及到的知识点包括导航（nav）、栅格、警告框（alert）、面板（panel）、下拉菜单（dropdown）等，网页部分只做了首页和用户管理，其他页面类似。案例效果如下：

制作的步骤大致是先制作后台首页，然后以另存为的方式制作其他分页。

后台首页index.html的代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<!--移动设备优先 -->

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

<title>网站后台管理2</title>

<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>

</head>

<body>

<!--导航-->

<nav class="navbar navbar-default">

<div class="container">

<div class="navbar-header">

<a href="index.html" class="navbar-brand logo">网站后台管理2</a>

<button class="navbar-toggle" data-toggle="collapse" data-target="#dh">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

</div>

<div class=" navbar-collapse collapse" id="dh">

<ul class="nav navbar-nav">

<li class="active"><a href="index.html">后台首页</a></li>

<li><a href="use-m.html">用户管理</a></li>

<li><a href="cont-m.html">内容管理</a></li>

<li><a href="tag-m.html">标签管理</a></li>

</ul>

<ul class="nav navbar-nav navbar-right">

<li class="dropdown">

<a href="#" data-toggle="dropdown">admin<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><a href="#">我的收藏</a></li>

</ul>

</li>

<li><a href="#">退出</a></li>

</ul>

</div>

</div>

</nav>

<!-- -->

<div class="container">

<div class="row">

<div class="col-md-12">

<div class="alert alert-danger fade in">

<button class="close" data-dismiss="alert"><span>&times;</span></button>

<h4>提示：</h4>

<p>此部分模块升级中...</p>

<p>

<button class="btn btn-danger" data-dismiss="alert">关闭</button>

</p>

</div>

</div>

<div class="col-md-6">

<div class="panel panel-default">

<div class="panel-heading">

网站数据统计

</div>

<div class="panel-body">

<table class="table table-hover">

<thead>

<tr><th>统计项目</th><th>今日</th><th>昨日</th></tr>

</thead>

<tbody>

<tr><td>注册会员</td><td>340</td><td>200</td></tr>

<tr><td>VIP会员</td><td>305</td><td>170</td></tr>

<tr><td>发帖数量</td><td>450</td><td>210</td></tr>

<tr><td>转载数量</td><td>810</td><td>520</td></tr>

</tbody>

</table>

</div>

</div>

</div>

<div class="col-md-6">

<div class="panel panel-default">

<div class="panel-heading">

网站热贴

</div>

<!--<div>-->

<ul class="list-group">

<li class="list-group-item">

<a href="#">爱学习资源网，学习随时随地<small class="pull-right">2017/10/15</small></a>

</li>

<li class="list-group-item">

<a href="#">爱学习资源网，学习随时随地<small class="pull-right">2017/10/15</small></a>

</li>

<li class="list-group-item">

<a href="#">爱学习资源网，学习随时随地<small class="pull-right">2017/10/15</small></a>

</li>

<li class="list-group-item">

<a href="#">爱学习资源网，学习随时随地<small class="pull-right">2017/10/15</small></a>

</li>

<li class="list-group-item">

<a href="#">爱学习资源网，学习随时随地<small class="pull-right">2017/10/15</small></a>

</li>

</ul>

</div>

</div>

</div>

</div>

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>

<script type="text/javascript" src="js/bootstrap.min.js"></script>

</body>

</html>

用户管理页use-m.html的代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<!--移动设备优先 -->

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

<title>网站后台管理2</title>

<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>

</head>

<body>

<!--导航-->

<nav class="navbar navbar-default">

<div class="container">

<div class="navbar-header">

<a href="index.html" class="navbar-brand logo">网站后台管理2</a>

<button class="navbar-toggle" data-toggle="collapse" data-target="#dh">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

</div>

<div class=" navbar-collapse collapse" id="dh">

<ul class="nav navbar-nav">

<li><a href="index.html">后台首页</a></li>

<li class="active"><a href="use-m.html">用户管理</a></li>

<li><a href="cont-m.html">内容管理</a></li>

<li><a href="tag-m.html">标签管理</a></li>

</ul>

<ul class="nav navbar-nav navbar-right">

<li class="dropdown">

<a href="#" data-toggle="dropdown">admin<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><a href="#">我的收藏</a></li>

</ul>

</li>

<li><a href="#">退出</a></li>

</ul>

</div>

</div>

</nav>

<!-- -->

<div class="container">

<div class="row">

<div class="col-md-12">

<ul class="nav nav-tabs">

<li class="active">

<a href="use-m.html">用户列表</a>

</li>

</ul>

<table class="table">

<thead>

<tr>

<th>ID</th>

<th>用户名</th>

<th>邮箱</th>

<th>操作</th>

</tr>

</thead>

<tbody>

<tr>

<th scope="row">1</th>

<td>小明</td>

<td>4365645353@qq.com</td>

<td>

<div role="presentation" class="dropdown">

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">

操作<span class="caret"></span>

</button>

<ul class="dropdown-menu">

<li><a href="#">编辑</a></li>

<li><a href="#">删除</a></li>

<li><a href="#">锁定</a></li>

<li><a href="#">修改密码</a></li>

</ul>

</div>

</td>

</tr>

<tr>

<th scope="row">2</th>

<td>小新</td>

<td>121265489@qq.com</td>

<td>

<div role="presentation" class="dropdown">

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">

操作<span class="caret"></span>

</button>

<ul class="dropdown-menu">

<li><a href="#">编辑</a></li>

<li><a href="#">删除</a></li>

<li><a href="#">锁定</a></li>

<li><a href="#">修改密码</a></li>

</ul>

</div>

</td>

</tr>

</tbody>

</table>

<nav class="pull-right">

<ul class="pagination">

<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>

<li class="active"><a href="#">1</a></li>

<li><a href="#">2 </a></li>

<li><a href="#">3 </a></li>

<li><a href="#">4 </a></li>

<li><a href="#">5 </a></li>

<li><a href="#">6 </a></li>

<li><a href="#"><span aria-hidden="true">&raquo;</span></a></li>

</ul>

</nav>

</div>

</div>

</div>

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>

<script type="text/javascript" src="js/bootstrap.min.js"></script>

</body>

</html>

至此，案例制作完成。

相关推荐

css布局方案汇总(28个实例图文并茂)

简介布局在我们前端日常开发来说是非常重要的，一个好的布局能简化代码的同时还能提高网页的性能。常见的布局方法有浮动(float)布局、绝对定位(position)布局、表格布局(table)、弹性(fl...

十款免费的CSS框架加速Web开发

Pure这是Yahoo最新推出的一款CSS框架，它只有HTML和CSS，没有使用任何JavaScript语言。总大小只有4.4kb，但功能却非常丰富，支持响应式样式和各种导航、表格、表单、按钮、网格和...

Tailwind CSS 是不是目前世上最好的CSS框架?

转载说明：原创不易，未经授权，谢绝任何形式的转载今天看了一篇国外大佬对TailwindCSS的看法，在这里分享给大家，看看大家是否赞同，以下是其相关内容的整理，由于翻译水平有限，欢迎大家讨论和指...

下一代 CSS 框架:Mojo CSS，为何如此受欢迎?

TailwindCSS推出即受到广大开发者的欢迎，当前Githubstar数已达77.8k。它是一个功能类优先（utility-first）的CSS框架，它提供了一系列功能类，让开发者...

常见的几种摄影构图方式

摄影构图，是一种在摄影画面中表现结构美、形式美的方式。构图能让摄影主体更加突出，画面更加有序。所以说，构图在摄影中是非常重要的一个环节。无论是前期构图还是后期构图，摄影者都要对构图有一个比较深的了解。...

风光摄影10大构图技巧，会用构图，照片更容易好看

风光摄影10大构图技巧，会用构图，照片更容易好看先解释一下，为什么会使用构图之后，照片更容易好看？因为，构图是根据很多好看的照片，总结出来的技巧，使用这些构图技巧，就相当于站在了巨人的肩膀上，也就是用...

掌握框式构图的摄影技巧，会让摄影爱好者的作品更有魅力!

很多摄影爱好者都知道摄影构图中有个框式构图，但大多数人对框式构图的摄影技巧，却一知半解。所以摄影爱好者们有必要更全面、深入的了解，并掌握框式构图，会对你摄影水平的提高更有帮助。【欢迎点击上方关注：金立...

这个构图很简洁，但为什么不耐看?

摄影爱好者最常犯的错就是过于复杂、主体不明确，但当遇到简单的场景往往又会出现单调、不耐看的状况。为什么会这样？说白了还是观察力不够。下面是本周的摄影入围习作，我们一起来看看这些照片中主体、陪体以及背景...

初学者需要记牢的八种常用构图法

作者：冯海军摄影中，构图很关键，决定照片是否成功，所以在构图上要加以重视和推敲，虽然说构图无定法，但是也有很多的规律可循，以下列举几种常用构图，会对初学者有很大的帮助。多彩刘卫洲摄苏州姑苏俱乐部（...

构图这件事不难!掌握14种构图模式就稳了

如果说视觉元素是视觉信息的载体，那么构图就是视觉元素的载体。没有适当形式的构图对视觉元素有机、有序地承载，平面设计将无法传达预定的设计意图和视觉信息。因此，对于平面设计而言，构图是平面设计不可或缺的重...

框架构图如何使用?

1分钟教你用手机拍大片。今天我们利用框架构图，在不同的运镜方法下拍摄。·首先将手机贴近地面，拍摄人物走过的画面。·然后利用3D效果的背景衬托，将手机贴近地面，以低角度仰拍人物。·最后我们用高清画质来呈...

面构图的5种超实用的构图形式 前景构图，框架构图，填充构图

面构图的5种超实用的构图形式。为什么有的人拍摄的照片好看又舒适？仔细观察会发现他们善用构图。大家好，今天带大家了解摄影中5种超实用的面构图形式。·一、前景构图。前景是构图中的神奇要素，可以提升照片的表...

一看就懂!跟着马格南的大师学构图

马格南图片社是迄今为止全球最重要的摄影图片社，其网站包涵了太多经典的名字和照片。细细品味这些经典图片，能够学到很多有用的构图手法。跟着大师走，总不会错吧？前后景的运用这似乎是非常常见的一种手法，仔细看...

这才是框架构图，有想法!能给你启发么?

框架构图大家并不陌生，但并不是有一个框就行了。框架构图用得不好，就很死板生硬，给人感觉很假。如果你理解透了，拍出的作品不会单调。今天就给大家分享一下框架构图，你看看有哪些妙用？1.广角与长焦的应用长焦...

7B小模型写好学术论文，新框架告别AI引用幻觉

ScholarCopilot团队投稿量子位|公众号QbitAI学术写作通常需要花费大量精力查询文献引用，而以ChatGPT、GPT-4等为代表的通用大语言模型（LLM）虽然能够生成流畅文本，但...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表