uikit实现简洁响应式自适应后台管理页面代码
代码语言：html
所属分类：响应式
代码描述：uikit实现简洁响应式自适应后台管理页面代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" as="style">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" media="all" onload="this.media='all'">
<noscript><link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet"></noscript>
<!-- UIkit CSS -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/uikit.min.css">
<!-- UIkit JS -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/uikit.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/uikit-icons.min.js"></script>
</head>
<body>
<div class="uk-background-primary uk-light uk-preserve-color uk-hidden@m" uk-sticky>
<nav class="uk-navbar" uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-toggle" uk-navbar-toggle-icon uk-toggle href="#offcanvas"></a>
</div>
<div class="uk-navbar-center">
<a class="uk-navbar-item uk-logo" href="#">_board</a>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
<a href="#">
<img class="uk-border-circle" data-src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" width="30" height="30" alt="Jane Doe" uk-img>
</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li>
<a href="#"><span class="uk-margin-small-right" uk-icon="icon: user"></span>Profile</a>
</li>
<li>
<a href="#"><span class="uk-margin-small-right" uk-icon="icon: settings"></span>Settings</a>
</li>
<li class="uk-nav-divider"></li>
<li>
<a href="#"><span class="uk-margin-small-right" uk-icon="icon: sign-out"></span>Logout</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</div>
<header class="uk-background-primary uk-navbar-container uk-navbar-transparent uk-light uk-preserve-color uk-visible@m" uk-sticky>
<div class="uk-container uk-container-expand">
<nav class="uk-navbar" uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">_board</a>
<div class="uk-navbar-item">
<div uk-version></div>
</div>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
<a class="uk-navbar-toggle" uk-search-icon href="#"></a>
<div class="uk-drop" uk-drop="mode: click; pos: left-center; offset: 0">
<form class="uk-search uk-search-navbar uk-width-1-1">
<input class="uk-search-input" type="search" placeholder="Search..." autofocus>
</form>
</div>
</li>
<li>
<a class="uk-navbar-item" href="#"><span uk-icon="icon: mail"></span></a>
</li>
<li>
<a class="uk-navbar-item" href="#"><span uk-icon="icon: bell"></span></a>
</li>
</ul>
<ul class="uk-navbar-nav">
<li>
<a class="uk-navbar-item" href="#">
<img class="uk-border-circle" src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" width="40" height="40" alt="Jane Doe">
</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li>
<a href="#"><span class="uk-margin-small-right" uk-icon="icon: user"></span>Profile</a>
</li>
<li>
<a href="#"><span class="uk-margin-small-right" uk-icon="icon: settings"></span>Settings</a>
</li>
<li class="uk-nav-divider"></li>
<li>
<a href="#"><span class="uk-margin-small-right" uk-icon="icon: sign-out"></span>Logout</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="uk-flex">
<aside class="uk-width-medium uk-position-relative uk-visible@m">
<div class="uk-tile uk-tile-default uk-tile-small uk-width-medium uk-position-fixed uk-overflow-auto uk-box-shadow-medium" style="top: 80px; bottom: 0;">
<ul class="uk-nav-default uk-nav-parent-icon" uk-nav>
<li class="uk-nav-header">Dashboard</li>
<li class="uk-parent">
<a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span>Menu</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-parent">
<a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span>Menu</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-parent">
<a href="#"><span class="uk-margin-small-right" uk-icon="icon: users"></span>Users</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Examples</li>
<li class="uk-parent">
<a href="#"><span class="uk-margin-small-right" uk-icon="icon: calendar"></span>Calendar</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-parent">
<a href="#"><span class="uk-margin-small-right" uk-icon="icon: image"></span>Gallery</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0