ACE Minimum HTML Boostrap Template

最新推荐文章于 2021-11-27 09:26:52 发布
最新推荐文章于 2021-11-27 09:26:52 发布
阅读量370 收藏
点赞数
分类专栏： J2EE/UI 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dfaldflafladl/article/details/84816609
版权 
Good Admin Html Template for Back End Developers


[img]http://dl2.iteye.com/upload/attachment/0119/9440/d052354c-6c7e-36b6-849d-fe786c813996.png[/img] 


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title> ADMIN Portal HTML TEMPLATE</title>

		<meta name="description" content="" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css" />

		<!-- page specific plugin styles -->

		<!-- text fonts -->
		<link rel="stylesheet" href="assets/css/fonts.googleapis.com.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

		<!--[if lte IE 9]>
			<link rel="stylesheet" href="assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
		<![endif]-->

		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->


		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="assets/js/html5shiv.min.js"></script>
		<script src="assets/js/respond.min.js"></script>
		<![endif]-->
	</head>

	<body class="no-skin">
		<div id="navbar" class="navbar navbar-default          ace-save-state">
			<div class="navbar-container ace-save-state" id="navbar-container">
				<button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
					<span class="sr-only">Toggle sidebar</span>

					<span class="icon-bar"></span>

					<span class="icon-bar"></span>

					<span class="icon-bar"></span>
				</button>

				<div class="navbar-header pull-left">
					<a href="index.html" class="navbar-brand">
						<small>
							<i class="fa fa-leaf"></i>
						  ADMIN Portal HTML TEMPLATE
						</small>
					</a>
				</div>

				<div class="navbar-buttons navbar-header pull-right" role="navigation">
					<ul class="nav ace-nav">


						<li class="light-blue dropdown-modal">
							<a data-toggle="dropdown" href="#" class="dropdown-toggle">
								<span class="user-info">
									<small>Welcome,</small>
									Wilson
								</span>

								<i class="ace-icon fa fa-caret-down"></i>
							</a>

							<ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
								<li>
									<a href="profile.html">
										<i class="ace-icon fa fa-user"></i>
										Profile
									</a>
								</li>

								<li class="divider"></li>

								<li>
									<a href="#">
										<i class="ace-icon fa fa-power-off"></i>
										Logout
									</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div><!-- /.navbar-container -->
		</div>

		<div class="main-container ace-save-state" id="main-container">
			<script type="text/javascript">
				try{ace.settings.loadState('main-container')}catch(e){}
			</script>

			<div id="sidebar" class="sidebar                  responsive                    ace-save-state">
				<script type="text/javascript">
					try{ace.settings.loadState('sidebar')}catch(e){}
				</script>


				<ul class="nav nav-list">
					<li class="">
						<a href="#">
							<i class="menu-icon fa fa-tachometer"></i>
							<span class="menu-text"> Dashboard </span>
						</a>

						<b class="arrow"></b>
					</li>

					<li class="active open">
						<a href="#" class="dropdown-toggle">
							<i class="menu-icon fa fa-file-o"></i>

							<span class="menu-text">
								Tab One

								<span class="badge badge-primary">5</span>
							</span>

							<b class="arrow fa fa-angle-down"></b>
						</a>

						<b class="arrow"></b>

						<ul class="submenu">
							<li class="">
								<a href="#">
									<i class="menu-icon fa fa-caret-right"></i>
									Page One
								</a>

								<b class="arrow"></b>
							</li>


							<li class="active">
								<a href="#">
									<i class="menu-icon fa fa-caret-right"></i>
									Page Two
								</a>

								<b class="arrow"></b>
							</li>
						</ul>
					</li>

					<li class="">
						<a href="#" class="dropdown-toggle">
							<i class="menu-icon fa fa-file-o"></i>

							<span class="menu-text">
								Tab Two
								<span class="badge badge-primary">5</span>
							</span>

							<b class="arrow fa fa-angle-down"></b>
						</a>

						<b class="arrow"></b>

						<ul class="submenu">
							<li class="">
								<a href="#">
									<i class="menu-icon fa fa-caret-right"></i>
									Page Three
								</a>

								<b class="arrow"></b>
							</li>



							<li class="">
								<a href="#">
									<i class="menu-icon fa fa-caret-right"></i>
									Page Four
								</a>

								<b class="arrow"></b>
							</li>
						</ul>
					</li>

				</ul><!-- /.nav-list -->

				<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
					<i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
				</div>
			</div>

			<div class="main-content">
				<div class="main-content-inner">
					<div class="breadcrumbs ace-save-state" id="breadcrumbs">
						<ul class="breadcrumb">
							<li>
								<i class="ace-icon fa fa-home home-icon"></i>
								<a href="#">Home</a>
							</li>

							<li>
								<a href="#">Other Pages</a>
							</li>
							<li class="active">Blank Page</li>
						</ul><!-- /.breadcrumb -->


						<div class="nav-search" id="nav-search">
							<form class="form-search">
								<span class="input-icon">
									<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
									<i class="ace-icon fa fa-search nav-search-icon"></i>
								</span>
							</form>
						</div><!-- /.nav-search -->
					</div>

					<div class="page-content">

						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->

								<!-- PAGE CONTENT ENDS -->
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content -->
				</div>
			</div><!-- /.main-content -->

			<div class="footer">
				<div class="footer-inner">
					<div class="footer-content">
						<span class="bigger-120">
							<span class="blue bolder">XXX</span>
							Application © 2013-2014
						</span>
					</div>
				</div>
			</div>

			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
			</a>
		</div><!-- /.main-container -->

		<!-- basic scripts -->

		<!--[if !IE]> -->
		<script src="assets/js/jquery-2.1.4.min.js"></script>

		<!-- <![endif]-->

		<!--[if IE]>
<script src="assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="assets/js/bootstrap.min.js"></script>

		<!-- page specific plugin scripts -->

		<!-- ace scripts -->
		<script src="assets/js/ace.min.js"></script>

		<!-- inline scripts related to this page -->
	</body>
</html>


CSS/JS/Font reference resource
[url]https://github.com/bopoda/ace/tree/master/assets[/url]
dfaldflafladl
关注
专栏目录
ace-min.css
aibiba0894的博客
05-03 427
textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="num...
基于bootstrap 的AceAdmin 1.4版本（iframe修改）
峰少少博文
10-19 1743
AceAdmin 界面简洁，适合于后端开发者的快速搭建 官方地址： http://ace.jeka.by/timeline.html 这边我下载了ace Admin的1.4版本，并参考其他资料修改了比较常用的iframe的版本，并已项目的形式，可运行。 主要代码： <%@ page contentType="text/html;charset=UTF-8" language="jav...
0、Bootstrap前端base模板
02-07 829
一、base模板(base.html) <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&g...
ACE ADMIN中 JQGrid Table(简单实用)
weixin_33911824的博客
03-07 1289
2019独角兽企业重金招聘Python工程师标准>>> ...
ace bootstrap
02-20
Ace Bootstrap 是一个结合了 Ace 编辑器和 Bootstrap 框架的项目，旨在提供一个高效、美观且功能丰富的Web开发工具集。Ace编辑器是一款强大的代码编辑器，广泛用于在线编程环境和代码预览功能；Bootstrap则是最受...
ace admin template bootstrap 1.2源码版
05-10
Ace Admin Template是一款基于Bootstrap框架的高级后台管理界面模板，它为开发者提供了丰富的界面元素和功能模块，便于快速构建美观且功能强大的Web应用后台。V1.2版本是该模板的一个重要迭代，它在前一版本的基础上...
bootstrap-ace_tab
07-29
Bootstrap Ace Tab是一个基于Bootstrap和ACE框架的前端页面模板，用于实现管理界面的页签功能。Ace是一个功能丰富的代码编辑器，而Bootstrap则是一个流行的前端开发框架，提供了响应式布局和一系列预先设计的组件。...
ACE Admin 基于 bootstrap的 后台模板
08-10
ACE Admin 网页模板。...Ace 是一个轻量、功能丰富、HTML5、响应式、支持手机及平板电脑上浏览的管理后台模板，基于CSS框架Bootstrap制作，Bootstrap版本更新至 3.3,4，Ace Responsive Admin Template当前最新版！
Bootstrap ACE后台管理界面模板-中文.zip_ace 中文_bootstrap_bootstrap 界面_boots
最新发布
09-23
Bootstrap ACE 是一个基于Bootstrap框架和ACE编辑器设计的后台管理界面模板，专为开发者和设计师提供了一套完整的、中文支持的界面解决方案。这个模板旨在帮助快速构建高效、响应式的Web应用后台界面，使得用户能够...
文件(图片)上传保存与展示
love_yr的博客
11-27 971
前端发起请求插入图片(单图)到数据库 数据库单图回显到页面 数据库多图回显到页面 页面上传多图到数据库
html ul4032,tables.html
weixin_30177835的博客
06-18 235
Tables - Ace AdminToggle sidebarAce Admin44 Tasks to completeSoftware Update65%Hardware Upgrade35%Unit Testing15%Bug Fixes90%See tasks with details88 NotificationsNew Comments+12Bob just signed up as ...
Bootstrap Ace+addTables后端管理页面
yiye2017zhangmu的博客
03-15 925
刚刚完成一个后端管理页面优化，从最基础实用的easyUI+zTree过渡过来，页面大大改观 首先导入js和css 导入相依赖的字体（生成小图标） 这里面有些js还在持续更新，每个版本不同，影响不大，bootstrap.addtabs的js、css和bootstrap.table差不多。 静态页面布局: &lt;!DOCTYPE html&gt; &lt;html&gt; ...
ace--2.基本布局
村西头的俏寡妇
09-23 1868
1      结构   2      Jsp 2.1  总体布局Index.jsp   方正管理系统 try{ace.settings.check('main-container' , 'fixed')}catch(e){}
HTML的grid教学,grid.html
weixin_35907331的博客
06-07 189
Grid - Ace Admin/* styling the grid page's grid elements */.center {text-align: center;}.center [class*="col-"] {margin-top: 2px;margin-bottom: 2px;position: relative;text-overflow: ellipsis;}.center ...
js try{}catch(e){}的理解
vcxiaohan的博客
07-30 3431
js如果出现错误，浏览器则会在console面板中打印出错误，那么我们为什么还要使用try catch呢？ 结论：为了在js出现错误的时候，把异常捕获掉，这样程序仍能正常运行下去 a.如下，如果我们这样写： console.log(i); var a = 6; console.log(++a); 因为i未定义，出现错误，那么js就卡在这里了，我们预期的输出a的结果也
AceAdminUi框架的学习
热门推荐
wang623145708的专栏
11-26 2万+
国外货，最近公司为了统一后台页面选中此框架，，学习中，先来看看这款Ui的截图 登陆页面： 显示数据页面 添加数据页面 修改数据页面 接着是代码， 首先是登陆页面。。 登陆页面
基于Bootstrap Ace模板+bootstrap.addtabs.js的菜单
weixin_30510153的博客
11-12 568
这几天研究了基于bootstrap Ace模板+bootstra.addtabs.js实现菜单的效果 参考了这个人的博客https://www.cnblogs.com/landeanfen/p/7601880.html 但是由于我没能找到bootstrap.tab.js（我不太确定bootstrap.addtabs.js和bootstrap.tabs.js是不是一个JS）也没太看明...
八.ACE模板的布局简介
陈磊的博客
03-14 1万+
ACE的具体资料可以参加其文档。这里仅介绍其布局。 ACE遵循bootstrap3的12格栅原则，12格栅原则可以参加bootstrap3的介绍。   1.ACE的整体布局 根据ACE模板的官方文档，ACE的基本布局如下： o   1) Navbar：导航条 o   Inside main-container area: § 2) Sidebar：竖直选项条
Bootstrap Ace模板实现菜单与Tab页效果详解
"这篇文章主要介绍了如何使用Bootstrap Ace模板创建菜单和Tab页效果，适用于需要在网页中构建交互式导航的开发者。" Bootstrap Ace是一个强大的基于Bootstrap的前端框架，提供了丰富的UI元素和功能，包括菜单和Tab...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值