AdminLTE框架的基本使用

AdminLTE框架的基本使用框架介绍:AdminLTE是一个完全响应管理模板。基于Bootstrap3,jQuery3.3.1这两个框架框架,易定制模板。适合多种屏幕分辨率,从小型移动设备到大型台式机。内置了多个页面,包括仪表盘、邮箱、日历、锁屏、登录及注册、404错误、500错误等页面。对于后台站点的模板渲染,有很大的作用。下载可以使用gitclone到本地gitclonehttp…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

框架介绍:AdminLTE是一个完全响应管理模板。基于Bootstrap3,jQuery 3.3.1 这两个框架框架,易定制模板。适合多种屏幕分辨率,从小型移动设备到大型台式机。内置了多个页面,包括仪表盘、邮箱、日历、锁屏、登录及注册、404错误、500错误等页面。对于后台站点的模板渲染,有很大的作用。

下载

  1. 可以使用git clone到本地            git clone https://github.com/almasaeed2010/AdminLTE.git
  2. 也可以在github中将其下载到本地,点击

文件结构介绍

AdminLTE框架的基本使用

  1. bower_components:存放了这个框架依赖的其他框架,如bootstrap,jquery、字体样式、图标样式等。
  2. build: 编译前的源文件目录
  3. dist:编译后的静态资源目录
  4. pages:目录下是一些示例页面
  5. plugins:目录存放依赖的插件
  6. starter.html :是 AdminLTE 建议用来作为起点的参考示例
  7. index.html:是AdminLTE中比较完善的展示品,用于参考、借鉴。

下面以 starter.html 为例,来认识 AdminLTE 页面的基本结构。

初识start.html

start.html所涉及到的基本js、css来自于bower_components目录、dist目录。

head 区域

在 head 区域,由三类标签组成,分别是meta、title、link。css链接包括bootstrap、字体样式、图标样式、站点基本布局、皮肤颜色。下面是省略了用于引入外部样式表的 links 标签的示例。

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <title>AdminLTE 2 | Starter</title>
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  .......
 
</head>

body区域

body区域由三部分组成,分别是头部、侧面导航栏、右侧内容展示。

 <header class="main-header">
     ......
 </header>
<aside class="main-sidebar">
     .......
</aside>
<div class="content-wrapper">
     .......
</div>

AdminLTE框架的基本使用

  • 自定义主题样式
<body class="hold-transition skin-yellow sidebar-mini">
......
</body>
  1. skin-blue:主题颜色,如果引入了_all-skins.min.css,有很多颜色可以选择,默认是蓝色。该样式表位于dist/css/skin。
  2. sidebar-mini:布局主题,在AdminLTE.css中可以找到。有五种选择fixed、layout-boxed、layout-top-nav 、sidebar-collapse、sidebar-mini
| SKINS         | skin-blue                               |
|               | skin-black                              |
|               | skin-purple                             |
|               | skin-yellow                             |
|               | skin-red                                |
|               | skin-green                              |
  • 头部区域
<header class="main-header">

    <!-- Logo -->
    <a href="{% url 'news:index' %}" class="logo">
      <!-- mini logo for sidebar mini 50x50 pixels -->
      <span class="logo-mini"><b>P</b>Y</span>
      <!-- logo for regular state and mobile devices -->
      <span class="logo-lg"><b>Admin</b></span>
    </a>

    <!-- Header Navbar -->
    <nav class="navbar navbar-static-top" role="navigation">
      <!-- Sidebar toggle button-->
      <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
        <span class="sr-only">Toggle navigation</span>
      </a>
      <!-- Navbar Right Menu -->
      <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">
          <!-- Messages: style can be found in dropdown.less-->
          <!-- User Account Menu -->
          <li class="dropdown user user-menu">
            <!-- Menu Toggle Button -->
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <!-- The user image in the navbar-->
              <img src="{% static 'images/liuyifei.jpg' %}" class="user-image" alt="User Image">
              <!-- hidden-xs hides the username on small devices so only the image appears. -->
              <span class="hidden-xs">{
  
  { request.user }}</span>
            </a>
            <ul class="dropdown-menu">
              <!-- The user image in the menu -->
              <li class="user-header">
                <img src="{% static 'images/liuyifei.jpg' %}" class="img-circle" alt="User Image">

                <p>
                  学习使我快乐
                  <small>Member since Nov. 2019</small>
                </p>
              </li>

              <!-- Menu Footer-->
              <li class="user-footer">
                <div class="pull-left">
                  <a href="#" class="btn btn-default btn-flat">个人详情</a>
                </div>
                <div class="pull-right">
                  <a href="#" class="btn btn-default btn-flat">登出</a>
                </div>
              </li>
            </ul>
          </li>
          <!-- Control Sidebar Toggle Button -->
          <li>
            <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  1. logo-lg隐藏,logo-mini显示
    
  • 左侧导航

AdminLTE框架的基本使用

AdminLTE框架的基本使用

​​​​​​​

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/164539.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • c语言里void什么作用,C语言中void是什么意思?

    c语言里void什么作用,C语言中void是什么意思?C语言中void是什么意思?C语言中“void”表示为无类型,相应的“void*”为无类型指针,常用在程序编写中对定义函数的参数类型、返回值、函数中指针类型进行声明,其作用是对函数返回和参数的进行限定。C语言关键字auto:声明自动变量break:跳出当前循环case:开关语句分支char:声明字符型变量或函数返回值类型const:声明只读变量continue:结束当前循环,开始下一轮循环…

  • 领悟@Page指令中的AutoEventWireup

    领悟@Page指令中的AutoEventWireupAsp.NET中可以修改AutoEventWireup=”true”,使页面与某些特殊的事件方法绑定,自动识别这些具有特定名称的事件,而不需要进行委托。这些特定名称包括:Page_Init,Page_Load,Page_DataBind,Page_PreRender和Page_Unload等。.aspx设置AutoEventWireup=false情况下,Pag…

  • 面渣逆袭:三万字,七十图,详解计算机网络六十二问(收藏版)

    面渣逆袭:三万字,七十图,详解计算机网络六十二问(收藏版)新年第一篇,开工大吉,虎年“豹”富!面渣逆袭系列继续,三万字+七十图详解六十二道网络面试题!强烈建议收藏!

  • cameralink转hdmi_输入电阻和输出电阻

    cameralink转hdmi_输入电阻和输出电阻FMC202是北京青翼科技的一款基于FMC接口标准的1路CameraLinkFull模式(或者2路CameraLinkBase模式)采集、1路HDMI(DVI)视频输出的子卡模块,该模块具有2个CameraLink端口(SDR,26PIN),可通过硬件配置成1路Full输入或者2路Base模式输入,CameraLink接口支持80BitDeca模式(即FullPlus模式)。该模块支持1

  • python分子化学模拟_#分子模拟#MDTraj分子模拟python包(一)

    python分子化学模拟_#分子模拟#MDTraj分子模拟python包(一)MDTraj是分子动力学模拟的一个python包,相对于MDAnalysis个人觉得操作性更强,更加Python范一些。其能够进行不同模拟软件的轨迹转换,常规计算,分析等等一体化。今天我们介绍其安装方法和简单使用。官方地址:点击进入安装方法推荐使用conda安装mdtraj.$condainstall-cconda-forgemdtraj同样也可以使用pip来安装mdtraj测试安装运…

  • MySQL索引原理及BTree(B-/+Tree)结构详解「建议收藏」

    MySQL索引原理及BTree(B-/+Tree)结构详解「建议收藏」目录摘要数据结构及算法基础索引的本质B-Tree和B+TreeB-TreeB+Tree带有顺序访问指针的B+Tree为什么使用B-Tree(B+Tree)主存存取原理磁盘存取原理局部性原理与磁盘预读B-/+Tree索引的性能分析MySQL索引实现MyISAM索引实现InnoDB索引实现索引使用策略及优化示例数据库最左前缀原理与…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号