admui 框架源码 模板结构
QQ194633530
模板结构
一般情况下，模板的结构如下(具体代码见/html/index.html或/src/templates/pages/index.html)。
代码片段
头部(.site-navbar)
<nav class="site-navbar navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation"> <div class="navbar-header"> ...... </div> <div class="navbar-container container-fluid"> ...... </div></nav> |
内容(.site-page)
<main class="site-page"> <div class="page-container" id="admui-pageContent"> ...... </div> <div class="page-loading vertical-align text-center"> <div class="page-loader loader-default loader vertical-align-middle" data-type="default"></div> </div></main> |
菜单(.site-menubar)
如果您使用不同的主题，.site-menubar的内容可能会有所不同
<nav class="site-menubar"> <div class="site-menubar-body"> <div class="tab-content h-full" id="admui-navTabs"> <div class="tab-pane animation-fade h-full active" id="admui-navTabsItem-2" role="tabpanel"> <ul class="site-menu"> <li class="site-menu-category">二级菜单</li> <li class="site-menu-item has-sub"> <a href="javascript:;"> <i class="site-menu-icon fa-bars" aria-hidden="true"></i><span class="site-menu-title">三级菜单</span><span class="site-menu-arrow"></span> </a> <ul class="site-menu-sub"> <li class="site-menu-item"> <a class="animsition-link" href="/examples/menu.html"> <span class="site-menu-title">四级菜单</span> </a> </li> <li class="site-menu-item has-sub"> <a href="javascript:;"> <span class="site-menu-title">四级菜单</span><span class="site-menu-arrow"></span> </a> <ul class="site-menu-sub"> <li class="site-menu-item"> <a class="animsition-link" href="/examples/menu.html"> <span class="site-menu-title">五级菜单</span> </a> </li> ...... </ul> </li> ...... </ul> </li> ...... </ul> </div> ...... </div> ...... </div></nav> |
如果算上导航条，Admui 共支持5级菜单。
布局相关
Admui包含了几种可选布局：
默认布局
默认布局提供快速响应的菜单栏，在页面 js 未加载完成时，您可以在<html>标签上添加class="css-menubar"来调用菜单样式。
<html class="no-js css-menubar" lang="zh-cn"> ......</html> |
菜单折叠
如果您需要菜单默认是折叠的，您需要移除<html>标签上的class="css-menubar"，同时在<body>标签上添加class="site-menubar-fold site-menubar-keep"。示例代码如下：
<body class="site-menubar-fold site-menubar-keep" data-auto-menubar="false"> ......</body> |
菜单展开
如果您需要菜单默认是展开的，您需要移除<html>标签上的class="css-menubar"，同时在<body>标签上添加class="site-menubar-unfold site-menubar-keep"。示例代码如下：
<body class="site-menubar-unfold site-menubar-keep"> ......</body> |
使用标签页
如果需要使用标签页，请在<body>标签上添加class="site-contabs-open"。示例代码如下：
<body class="site-contabs-open"> ......</body> |
转载于:https://www.cnblogs.com/admui/p/11106925.html
admui 框架源码 模板结构相关推荐
- admui 框架源码 主题说明
QQ194633530 主题说明 如果您购买的前端源码是自动构建,则主题位于/src/themes/下,如果是基础源码,则主题位于/public/themes/下. 全局文件夹 自动构建 全局文件夹包 ...
- admui 框架源码 更新日志
QQ194633530 Admui-basic v2.0.0 是 Admui 产品的一次重大升级,UI 界面采用更为现代的设计,Admui 所采用的 Bootstrap 版本由 v3 升级到 v4,C ...
- admui 框架源码 入口文件
QQ194633530 入口文件 CSS <!-- 样式 --><link rel="stylesheet" href="/public/themes/ ...
- admui 框架源码 构建工具
QQ194633530 构建工具 开发工具 如果您使用 Admui 自动构建版本,我们推荐您配合 Admui 提供的 GUI 开发工具来快速构建您的项目,详细介绍及用法请参考:GUI开发工具. 也可以 ...
- 2300套php网站源码模板 完整后台程序 整站带数据,ID41:建材自适应PC手机平板微信Seo结构送2300套PHP整站源码...
多平台演示(兼容PC电脑/手机/平板/微信): http://www.2008o.com/jianwang/Html/jianwangzhan45/132.html(复制网址到浏览器访问) 源码大小1 ...
- linux与安卓系统目录,android系统架构及源码目录结构
1. android系统架构: android系统架构采用了分层架构的思想,如下图所示,从上到下共4层,分别为:应用程序层.应用程序框架层.系统库和android运行时层.linux内核层. 每层功能 ...
- Android系统源码学习——源码目录结构介绍
2019独角兽企业重金招聘Python工程师标准>>> Android 4.0源码目录结构: 本文介绍Android源码目录结构,以便读者理清Android编译系统核心代码在Andr ...
- Android4.0源码目录结构详解
Android4.0源码目录结构详解 Android4.0与2.1目录差不多 alsa这块,注意external/tinyalsa下有: include/tinyalsa/asoundlib.h mi ...
- 关于鸿蒙系统 JS UI 框架源码的分析
鸿蒙是华为研发的新一代终端操作系统,能适用于 IoT.手表.手机.Pad.电视等各种类型的设备上,扛起"国产操作系统"的大旗,也遭受了很多非议.2021 年 6 月初发布了 Ope ...
最新文章
- python 字符串输入时间_Python input()函数：获取用户输入的字符串
- wireshark协议解析器 源码分析 封装调用
- [Spring Framework]学习笔记－－Dependency injection(DI)
- 使用C语言将一个数组首尾互换后输出，函数实现体会地址传递
- 2021HDU多校10 - 7084 Pty loves string(KMPnext树+主席树+dfs序)
- 记录SQL server学习的存储过程的摘录
- 记录下面试中的回答的不好的问题
- canvas 平滑运动_什么是电视上的运动平滑？人们为什么讨厌它？
- 第 五 课 golang语言变量
- yii2 rbac权限控制之菜单menu详细教程
- VirtualBox安装完Linux却进不了系统
- ajax获取后生成元素,获取动态的子元素生成的内容与jQuery AJAX
- 深入学习.NET Web Services概念
- Python List pop()方法
- 计算机网络基础期末试题,计算机网络基础期末考试试题
- Janusgraph使用示例
- 2019年计算机一级考试pdf,2019年计算机一级考试试题及答案.pdf
- 脊柱外科病人资料管理系统的界面设计分析(2)--JOA评分记录的实现
- Ubuntu安装翻译软件（goldendcit）
- Revealing latent characteristics of mobility networks with coarsegraining