使用前端后台管理模板库admin-lte(转)
使用前端后台管理模板库admin-lte
安装
安装admin-lte,可以通过以下几种办法安装,下图是GitHub中admin-lte的主页:
通过github直接克隆安装
git clone https://github.com/almasaeed2010/AdminLTE.git adminlte # 将这个resposity 克隆到adminlte
- 1
可以看到上图的目录结构
通过bower 安装
bower安装可以去查看bower官网,需要nodejs 环境支持。bower地址: https://bower.io/
- 1
- 2
搭建环境
依赖下载
目录说明
上图为目录说明。
我们主要使用的事dist这个目录
- 1
- 2
在adminlte/libs目录存放框架库。
建立第一个index.html 如下图
直接导入css和js压缩文件
AdminLTE.css 和 AdminLTE.min.css、 adminlte.min.js和 adminlte.js两个文件内容都是一样的,不过带min的都是通过压缩后的文件。
- 1
- 2
直接打开/libs/admin-lte/index.html 看到如下内容:
现在将四个不同颜色的框框显示出来,就说明我们项目搭建成功了。
我们找到adlte中index.html 搜索关键词 Orders
找到四个框框源码的位置。然后复制,如下图:
找到代码以后复制进入index.html
得到下图的index.html
然后用浏览器打开index.html如下图:
这就说明了,adminlt环境基本搭建成功。
后续: 实际自己需要的样式或者组件库,导入不同的css,即可实现和admin-lte一样的效果。adminlte.min.js 依赖于jquery,在admin的bower组件中所有依赖都下载完成了,直接导入使用就可以了。
祝您好运…
使用前端后台管理模板库admin-lte(转)的更多相关文章
- 28个漂亮的React.js后台管理模板
React管理模板 为您的React Web应用程序开发一个管理区域可能非常耗时.它与设计所有前端页面一样重要. 这是2020年设计出色的顶级React.js后台管理模板的列表. 这些模板确实有价值, ...
- Metronic – 超赞!基于 Bootstrap 的响应式后台管理模板
Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架实现.Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,76 个模板页 ...
- Bootstrap的响应式后台管理模板推荐
1.Admin LTE 该模版开源免费.已用到项目中,客户评价说UI很好看... AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3的框架.高度可定制的,易于使用.支持很多的屏幕 ...
- 最值得拥有的免费Bootstrap后台管理模板
在PHP开发项目中,后台管理因为面向群体相对比较固定,大部分以实现业务逻辑和功能.使用Bootstrap后台模板可以让后端开发很轻松的就展现给客户一个响应式的后台,节约前端开发的时间.下面PHP程序员 ...
- JAVAEE——Solr:安装及配置、后台管理索引库、 使用SolrJ管理索引库、仿京东的电商搜索案例实现
1 学习回顾 1. Lucene 是Apache开源的全文检索的工具包 创建索引 查询索引 2. 遇到问题? 文件名 及文件内容 顺序扫描法 全文检索 3. 什么是全文检索? 这种先创建索引 再 ...
- 推荐几款基于Bootstrap的响应式后台管理模板
1.Admin LTE 该模版开源免费. AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3的框架.高度可定制的,易于使用.支持很多的屏幕分辨率适合从小型移动设备到大型台式机. ...
- [转]最值得拥有的免费Bootstrap后台管理模板
在PHP开发项目中,后台管理因为面向群体相对比较固定,大部分以实现业务逻辑和功能.使用Bootstrap后台模板可以让后端开发很轻松的就展现给客户一个响应式的后台,节约前端开发的时间.下面PHP程序员 ...
- Vue.js+vue-element搭建属于自己的后台管理模板:什么是Vue.js?(一)
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js是什么?(一) 前言 本教程主要讲解关于前端Vue.js框架相关技术知识,通过学习一步一步学会搭建属于自己的后台管理模板,并 ...
- 基于 Blazui 的 Blazor 后台管理模板 BlazAdmin 正式尝鲜
简介 BlazAdmin 是一个基于Blazui的后台管理模板,无JS,无TS,非 Silverlight,非 WebForm,一个标签即可使用. 我将在下一篇文章讨论 Blazor 服务器端渲染与客 ...
随机推荐
- MATLAB 最优化计算 (二)
matlab 程序设计 1, for start:increment:end 若默认步长为1,则为 for start:end ———— end while condition ———— end ...
- Poj1734题解
题目大意 求一个无向图的最小环 题解 假设是有向图的话.仅仅须要令f[i][i]=+∞,再floyd就可以: 对无向图.应该在floyd算法循环至k的一開始进行例如以下操作: 枚举i和j,假设点i存在 ...
- layoutParams-动态更改某个控件的margin
其实它的方法也非常的简单,如下 LinearLayout.LayoutParams layoutParams = (LayoutParams) bt1.getLayoutParams(); int a ...
- ubuntu-查看iso文件的md5
直接使用命令md5sum +文件名就可以了.例如 md5sum ~/YLMF_GHOSTWIN7SP1_X86_YN2015.iso 执行结果如下 cdbb7fdc8bbc30e5e0a398f71b ...
- golang panic and recover
panic 是一个内置函数,当一个函数 F 调用 panic,F 的执行就会停止,F 中 deferred 函数调用会被执行,然后 F 返回控制到它的调用者.这个过程会沿着调用栈执行下去,直到当前 g ...
- [React] Call setState with null to Avoid Triggering an Update in React 16
Sometimes it’s desired to decide within an updater function if an update to re-render should be trig ...
- android adb常见问题的解决方法!
** adb的常见问题 adb:android debug bridge,用于连接模拟器/手机与PC端软件(比如:eclipse或者xx手机助手) adb devices -> ...
- C Tricks(十八)—— 整数绝对值的实现
为正还是为负:(对 int 类型而言,第一位为符号位,其余为数值,则右移 31 位,再与 1 求与) 如果为正 ⇒ 返回原值 如果为负 ⇒ 对其二进制形式各位取反 + 1 int abs(int x) ...
- 2.写给设计师看的HTML&CSS入门指导
转自:http://www.uisdc.com/html-and-css-guide 整体简介 在开始学习HTML&CSS之前,首先要搞清楚两者的区别.两者在整体上有着很明显的差异. 整体看来 ...
- SqlParameter的用法
SqlParameter的用法 关于Sql注入的基本概念,相信不需多说,大家都清楚,经典的注入语句是' or 1=1--单引号而截断字符串,“or 1=1”的永真式的出现使得表的一些信息被暴露出来,如 ...