adminlte 3基于bootstrap的自适应后台管理布局页面效果代码
代码语言:html
所属分类:响应式
代码描述:adminlte 3基于bootstrap的自适应后台管理布局页面效果代码
代码标签: bootstrap 的 自 适应 后台 管理 布局 页面 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <!-- 这是一个入门模板页面。通过此页面从头开发新的项目。 该页面删除了所有链接,仅提供所需的标签。 --> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>AdminLTE 3 | 起始页</title> <!-- Font Awesome 图标 --> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.11.2.css"> <!-- 主题样式 --> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/adminlte.min.css"> </head> <body class="hold-transition sidebar-mini"> <div class="wrapper"> <!-- 导航栏 --> <nav class="main-header navbar navbar-expand navbar-white navbar-light"> <!-- 左侧导航栏链接 --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a> </li> <li class="nav-item d-none d-sm-inline-block"> <a href="#" class="nav-link">主页</a> </li> <li class="nav-item d-none d-sm-inline-block"> <a href="#" class="nav-link">联系</a> </li> </ul> <!-- 右侧导航栏链接 --> <ul class="navbar-nav ml-auto"> <!-- Navbar Search --> <li class="nav-item"> <a class="nav-link" data-widget="navbar-search" href="#" role="button"> <i class="fas fa-search"></i> </a> <div class="navbar-search-block"> <form class="form-inline"> <div class="input-group input-group-sm"> <input class="form-control form-control-navbar" type="search" placeholder="搜索" aria-label="Search"> <div class="input-group-append"> <button class="btn btn-navbar" type="submit"> <i class="fas fa-search"></i> </button> <button class="btn btn-navbar" type="button" data-widget="navbar-search"> <i class="fas fa-times"></i> </button> </div> </div> </form> </div> </li> <!-- 消息下拉菜单 --> <li class="nav-item dropdown"> <a class="nav-link" data-toggle="dropdown" href="#"> <i class="far fa-comments"></i> <span class="badge badge-danger navbar-badge">3</span> </a> <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right"> <a href="#" class="dropdown-item"> <!-- 消息开始 --> <div class="media"> <img src="//repo.bfw.wiki/bfwrepo/image/6078f69f7e176.png" alt="用户头像" class="img-size-50 mr-3 img-circle"> <div class="media-body"> <h3 class="dropdown-item-title"> Brad Diesel <span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span> </h3> <p class="text-sm">有空的话就打电话给我...</p> <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 小时前</p> </div> </div> <!-- 消息结束 --> </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <!-- 消息开始 --> <div class="media"> <img src="//repo.bfw.wiki/bfwrepo/image/6078f69f7e176.png" alt="用户头像" class="img-size-50 img-circle mr-3"> <div class="media-body"> <h3 class="dropdown-item-title"> John Pierce <span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span> </h3> <p class="text-sm">我收到你的消息了</p> <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 小时前</p> </div> </div> <!-- 消息结束 --> </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <!-- 消息开始 --> <div class="media"> <img src="//repo.bfw.wiki/bfwrepo/image/6078f69f7e176.png" alt="用户头像" class="img-size-50 img-circle mr-3"> <div class="media-body"> <h3 class="dropdown-item-title"> Nora Silvester <span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span> </h3> <p class="text-sm">主题在这里</p> <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 小时前</p> </div> </div> <!-- 消息结束 --> </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item dropdown-footer">查看所有消息</a> </div> </li> <!-- 通知下拉菜单 --> <li class="nav-item dropdown"> <a class="nav-link" data-toggle="dropdown" href="#"> <i class="far fa-bell"></i> <span class="badge badge-warning navbar-badge">15</span> </a> <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right"> <span class="dropdown-header">15 条通知</span> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <i class="fas fa-envelope mr-2"></i> 4 条新消息 <span class="float-right text-muted text-sm">3 分钟前</span> </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <i class="fas fa-users mr-2"></i> 8 个好友请求 <span class="float-right text-muted text-sm">12 小时前</span> </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <i class="fas fa-file mr-2"></i> 3 个新报告 <span class="float-right text-muted text-sm">2 天前</span> </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item dropdown-footer">查看所有通知</a> </div> </li> <li class="nav-item"> <a class="nav-link" data-widget="fullscreen" href="#" role="button"> <i class="fas fa-expand-arrows-alt"></i> </a> </li> <li class="nav-item"> <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button"> <i class="fas fa-th-large"></i> </a> </li> </ul> </nav> <!-- /.navbar --> <!-- 主侧边栏容器 --> <aside class="main-sidebar sidebar-dark-primary elevation-4"> <!-- 品牌 Logo --> <a href="index3.html" class="brand-link"> <span class="brand-text font-weight-light">Bootstrap AdminLTE 3</span> </a> <!-- Sidebar --> <div class="sidebar"> <!-- 侧边栏用户面板(可选) --> <div class="user-panel mt-3 pb-3 mb-3 d-flex"> <div class="image"> <img src="//repo.bfw.wiki/bfwrepo/image/6078f69f7e176.png" class="img-circle elevation-2" alt="用户头像"> </div> <div class="info"> <a href="#" class="d-block">管理员</a> </div> </div> <!-- SidebarSearch Form --> <div class="form-inline"> <div class="input-group" data-widget="sidebar-search"> <input class="form-control form-control-sidebar" type="search" placeholder="搜索" aria-label="Search"> <div class="input-group-append"> <button class="btn btn-sidebar"> <i class="fas fa-search fa-fw"></i> </button> </div> </div> </div> <!-- 侧边栏菜单 --> <nav class="mt-2"> <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false"> <!-- 使用 .nav-icon 类添加图标, 或使用 font-awesome 或其他任何图标字体库 --> <li class="nav-item menu-open"> <a href="#" class="nav-link active"> <i class="nav-icon fas fa-tachometer-alt"></i> <p> 仪表盘 <i class="right fas fa-angle-left"></i> </p> </a> <ul class="nav nav-treeview"> <li class="nav-item"> <a href="" class="nav-link active"> <i class="far fa-circle nav-icon"></i> <p>仪表盘 v1</p> </a> </li> <li class="nav-item"> <a href="" class="nav-link"> <i class="far fa-circle nav-icon"></i> <p>仪表盘 v2</p> </a> </li> <li class="nav-item"> <a href="" class="nav-link"> <i class="far fa-circle nav-icon"></i> <p>仪表盘 v3</p> </a> </li> </ul> </li> <li class="nav-item"> <a href="" class="nav-link"> <i class="nav-icon fas fa-th"></i> <p> 小部件 <span class="right badge badge-danger">新</span> </p> </a> </li> <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon fas fa-copy"></i> <p> 布局选项 <i class="fas fa-angle-left right"></i> <span class="badge badge-info right">6</span> </p> </a> <ul class="nav nav-treeview"> <li class="nav-item"> <a href="" class="nav-link"> <i class="f.........完整代码请登录后点击上方下载按钮下载查看
网友评论0