前端框架模版库使用AdminLTE快速搭建前端页面

最新推荐文章于 2024-04-13 17:15:08 发布

「已注销」

最新推荐文章于 2024-04-13 17:15:08 发布

阅读量2k

点赞数 1

本文链接：https://blog.csdn.net/LU_ZHAO/article/details/105062568

版权

AdminLTE

https://adminlte.io/themes/AdminLTE/index.html#

https://github.com/ColorlibHQ/AdminLTE/releases

https://adminlte.io/docs/3.0/

安装

git clone https://github.com/ColorlibHQ/AdminLTE.git

安装完后可以看一下效果。

下图是AdminLTE/index.html文件：
在这里插入图片描述

发现这个Collapsed Sidebar挺好的。

看看文件中有哪些库

举个例子

cat AdminLTE/pages/layout/collapsed-sidebar.html

大概就是这一些：

  <!-- Font Awesome -->
  <link rel="stylesheet" href="../../plugins/fontawesome-free/css/all.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">

<!-- jQuery -->
<script src="../../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>

新建一个前端项目,然后复制粘贴一下dist和plugins两个目录：

完了以后创建页面和文件，也复制粘贴然后照着改就好了。

只是做个页面还是简单的。

先删成这样子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>网页正文识别与提取</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Font Awesome -->
  <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../dist/css/adminlte.min.css">
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini sidebar-collapse">
<!-- Site wrapper -->
<div class="wrapper">
  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
    </ul>

    <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto">
      <!-- Messages Dropdown Menu -->
      <li class

最低0.47元/天解锁文章

「已注销」

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端框架模版库使用AdminLTE快速搭建前端页面

AdminLTEhttps://adminlte.io/themes/AdminLTE/index.html#https://github.com/ColorlibHQ/AdminLTE/releaseshttps://adminlte.io/docs/3.0/安装git clone https://github.com/ColorlibHQ/AdminLTE.git
复制链接

扫一扫