mirror of https://github.com/ColorlibHQ/AdminLTE
Add more features to the starter template
Abdullah Almsaeed
parent
7041e65d3f
commit
fe617b68ca
103
starter.html
103
starter.html
|
|
@ -16,7 +16,7 @@ scratch. This page gets rid of all links and provides the needed markup only.
|
|||
<!-- Theme style -->
|
||||
<link rel="stylesheet" href="dist/css/adminlte.min.css">
|
||||
<!-- Google Font: Roboto -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
|
||||
</head>
|
||||
<!--
|
||||
BODY TAG OPTIONS:
|
||||
|
|
@ -38,18 +38,14 @@ to get the desired effect
|
|||
| | sidebar-mini |
|
||||
|---------------------------------------------------------|
|
||||
-->
|
||||
<body class="hold-transition skin-blue">
|
||||
<body class="hold-transition skin-blue sidebar-mini">
|
||||
<div class="wrapper">
|
||||
<!-- Navbar -->
|
||||
<nav class="main-header navbar navbar-sticky-top bg-primary navbar-dark">
|
||||
<!-- Logo -->
|
||||
<a class="navbar-brand text-xs-center" href="#">
|
||||
<span class="logo hidden-md-down">
|
||||
<b>Admin</b>LTE
|
||||
</span>
|
||||
<span class="logo logo-mini visible-md-down">
|
||||
<b>A</b>LT
|
||||
</span>
|
||||
<span class="logo hidden-md-down"><b>Admin</b>LTE</span>
|
||||
<span class="logo logo-mini"><b>A</b>LT</span>
|
||||
</a>
|
||||
|
||||
<!-- Left navbar links -->
|
||||
|
|
@ -59,19 +55,62 @@ to get the desired effect
|
|||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="navbar-"></div>
|
||||
|
||||
<!-- Right navbar links -->
|
||||
<ul class="nav navbar-nav pull-right">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#"><i class="fa fa-comments-o"></i></a>
|
||||
<ul class="nav navbar-nav float-sm-right">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" data-toggle="dropdown" href="#"><i class="fa fa-comments-o"></i></a>
|
||||
<div class="dropdown-menu dropdown-menu-lg">
|
||||
<a href="#" class="dropdown-item">
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<img src="/dist/img/user1-128x128.jpg" alt="User Avatar" class="navbar-img">
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<p class="no-margin">Lola Stockholm</p>
|
||||
<p class="text-sm no-margin">What are you up to?</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<img src="/dist/img/user1-128x128.jpg" alt="User Avatar" class="navbar-img">
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<p class="no-margin">Lola Stockholm</p>
|
||||
<p class="text-sm no-margin">What are you up to?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-footer">See All Messages</a>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#"><i class="fa fa-bell"></i></a>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" data-toggle="dropdown" href="#"><i class="fa fa-bell-o"></i></a>
|
||||
<div class="dropdown-menu dropdown-menu-lg">
|
||||
<a href="#" class="dropdown-item">
|
||||
Account
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#"><i class="fa fa-user"></i></a>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link has-img" data-toggle="dropdown" href="#"><img src="./dist/img/user4-128x128.jpg" alt="User Account Menu Image" class="navbar-img img-circle"></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="#" class="dropdown-item"><i class="fa fa-user margin-r-5"></i> Profile</a>
|
||||
<a href="#" class="dropdown-item"><i class="fa fa-user margin-r-5"></i> History</a>
|
||||
<a href="#" class="dropdown-item"><i class="fa fa-user margin-r-5"></i> Usage</a>
|
||||
<a href="#" class="dropdown-item"><i class="fa fa-user margin-r-5"></i> Logout</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" data-toggle="dropdown" href="#"><i class="fa fa-gears"></i></a>
|
||||
<div class="dropdown-menu dropdown-menu-lg">
|
||||
<a href="#" class="dropdown-item">Item</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -82,14 +121,21 @@ to get the desired effect
|
|||
<!-- Sidebar -->
|
||||
<div class="sidebar">
|
||||
<!-- Sidebar user panel (optional) -->
|
||||
<div class="user-panel">
|
||||
<div class="pull-left image">
|
||||
<div class="user-panel clearfix">
|
||||
<div class="image">
|
||||
<img src="dist/img/user2-160x160.jpg" class="img-rounded" alt="User Image">
|
||||
</div>
|
||||
<div class="pull-left info">
|
||||
<p>Alexander Pierce</p>
|
||||
<div class="info">
|
||||
<h6>Alexander Pierce</h6>
|
||||
<!-- Status -->
|
||||
<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
|
||||
<div class="dropdown">
|
||||
<a href="#" data-toggle="dropdown" class="dropdown-toggle status btn btn-default btn-xs">Account</a>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="#">Profile</a>
|
||||
<a class="dropdown-item" href="#">Settings</a>
|
||||
<a class="dropdown-item" href="#">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -110,14 +156,13 @@ to get the desired effect
|
|||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="fa fa-link nav-icon"></i> Dashboard v1.0
|
||||
</a>
|
||||
<a href="#" class="nav-link"><i class="fa fa-link nav-icon"></i> Dashboard v1.0</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="fa fa-link nav-icon"></i> Dashboard v1.0
|
||||
</a>
|
||||
<a href="#" class="nav-link"><i class="fa fa-link nav-icon"></i> Dashboard v2.0</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link"><i class="fa fa-link nav-icon"></i> Dashboard v3.0</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
|
@ -240,7 +285,7 @@ to get the desired effect
|
|||
<!-- Main Footer -->
|
||||
<footer class="main-footer">
|
||||
<!-- To the right -->
|
||||
<div class="pull-right hidden-xs">
|
||||
<div class="float-xs-right hidden-xs-down">
|
||||
Anything you want
|
||||
</div>
|
||||
<!-- Default to the left -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue