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; bot.........完整代码请登录后点击上方下载按钮下载查看
网友评论0