uikit实现简洁响应式自适应后台管理页面代码

代码语言:html

所属分类:响应式

代码描述:uikit实现简洁响应式自适应后台管理页面代码

代码标签: 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