843 lines
52 KiB
HTML
843 lines
52 KiB
HTML
<!DOCTYPE html>
|
|
<html dir="ltr" lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<!-- Tell the browser to be responsive to screen width -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<!-- Favicon icon -->
|
|
<link rel="icon" type="image/png" sizes="16x16" href="../src/assets/images/favicon.png">
|
|
<title>Adminmart Template - The Ultimate Multipurpose admin template</title>
|
|
<!-- This page css -->
|
|
<!-- Custom CSS -->
|
|
<link href="../src/dist/css/style.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" type="text/css" href="highlights/highlight.min.css">
|
|
|
|
<!-- Custom CSS -->
|
|
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
|
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
<!-- Custom CSS -->
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<!-- ============================================================== -->
|
|
<!-- Preloader - style you can find in spinners.css -->
|
|
<!-- ============================================================== -->
|
|
<div class="preloader">
|
|
<div class="lds-ripple">
|
|
<div class="lds-pos"></div>
|
|
<div class="lds-pos"></div>
|
|
</div>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- Main wrapper - style you can find in pages.scss -->
|
|
<!-- ============================================================== -->
|
|
<div id="main-wrapper" data-theme="light" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full" data-sidebar-position="fixed" data-header-position="fixed" data-boxed-layout="full">
|
|
<!-- ============================================================== -->
|
|
<!-- Topbar header - style you can find in pages.scss -->
|
|
<!-- ============================================================== -->
|
|
<header class="topbar" data-navbarbg="skin6">
|
|
<nav class="navbar top-navbar navbar-expand-md">
|
|
<div class="navbar-header" data-logobg="skin6">
|
|
<!-- This is for the sidebar toggle which is visible on mobile only -->
|
|
<a class="nav-toggler waves-effect waves-light d-block d-md-none" href="javascript:void(0)"><i
|
|
class="ti-menu ti-close"></i></a>
|
|
<!-- ============================================================== -->
|
|
<!-- Logo -->
|
|
<!-- ============================================================== -->
|
|
<div class="navbar-brand">
|
|
<!-- Logo icon -->
|
|
<a href="docs.html">
|
|
<b class="logo-icon">
|
|
<!-- Dark Logo icon -->
|
|
<img src="../src/assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
|
|
<!-- Light Logo icon -->
|
|
<img src="../src/assets/images/logo-icon.png" alt="homepage" class="light-logo" />
|
|
</b>
|
|
<!--End Logo icon -->
|
|
<!-- Logo text -->
|
|
<span class="logo-text">
|
|
<!-- dark Logo text -->
|
|
<img src="../src/assets/images/logo-text.png" alt="homepage" class="dark-logo" />
|
|
<!-- Light Logo text -->
|
|
<img src="../src/assets/images/logo-light-text.png" class="light-logo" alt="homepage" />
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- End Logo -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- Toggle which is visible on mobile only -->
|
|
<!-- ============================================================== -->
|
|
<a class="topbartoggler d-block d-md-none waves-effect waves-light" href="javascript:void(0)"
|
|
data-toggle="collapse" data-target="#navbarSupportedContent"
|
|
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><i
|
|
class="ti-more"></i></a>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- End Logo -->
|
|
<!-- ============================================================== -->
|
|
<div class="navbar-collapse collapse" id="navbarSupportedContent">
|
|
<!-- ============================================================== -->
|
|
<!-- toggle and nav items -->
|
|
<!-- ============================================================== -->
|
|
<ul class="navbar-nav float-left mr-auto ml-3 pl-1">
|
|
<!-- ============================================================== -->
|
|
<!-- create new -->
|
|
<!-- ============================================================== -->
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="docs.html" role="button">
|
|
Documentation
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<!-- ============================================================== -->
|
|
<!-- End Topbar header -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- Left Sidebar - style you can find in sidebar.scss -->
|
|
<!-- ============================================================== -->
|
|
<aside class="left-sidebar" data-sidebarbg="skin6">
|
|
<!-- Sidebar scroll-->
|
|
<div class="scroll-sidebar" data-sidebarbg="skin6">
|
|
<!-- Sidebar navigation-->
|
|
<nav class="sidebar-nav">
|
|
<ul id="sidebarnav">
|
|
<li class="nav-small-cap"><span class="hide-menu">Getting Started</span></li>
|
|
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="docs.html"
|
|
aria-expanded="false"><i data-feather="bar-chart-2" class="feather-icon"></i>
|
|
<span class="hide-menu">Introduction</span></a>
|
|
</li>
|
|
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="docs-start.html"
|
|
aria-expanded="false"><i data-feather="clipboard" class="feather-icon"></i>
|
|
<span class="hide-menu">Gettings Started</span></a>
|
|
</li>
|
|
<li class="list-divider"></li>
|
|
<li class="nav-small-cap"><span class="hide-menu">UI Components</span></li>
|
|
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
|
|
aria-expanded="false"><i data-feather="grid" class="feather-icon"></i><span
|
|
class="hide-menu">Bootstrap
|
|
</span></a>
|
|
<ul aria-expanded="false" class="collapse first-level base-level-line">
|
|
<li class="sidebar-item"><a href="docs-ui-buttons.html" class="sidebar-link"><span class="hide-menu"> Buttons </span></a></li>
|
|
<li class="sidebar-item"><a href="docs-ui-modals.html" class="sidebar-link"><span class="hide-menu"> Modals </span></a></li>
|
|
<li class="sidebar-item"><a href="docs-ui-tabs.html" class="sidebar-link"><span class="hide-menu"> Tabs </span></a></li>
|
|
<li class="sidebar-item"><a href="docs-ui-tooltip-popover.html" class="sidebar-link"><span class="hide-menu"> Tooltip & Popover </span></a></li>
|
|
<li class="sidebar-item"><a href="docs-ui-notification.html" class="sidebar-link"><span class="hide-menu"> Notification </span></a></li>
|
|
<li class="sidebar-item"><a href="docs-ui-progressbar.html" class="sidebar-link"><span class="hide-menu"> Progressbar </span></a></li>
|
|
<li class="sidebar-item"><a href="docs-ui-typography.html" class="sidebar-link"><span class="hide-menu"> Typography </span></a></li>
|
|
<li class="sidebar-item"><a href="docs-ui-bootstrapui.html" class="sidebar-link"><span class="hide-menu"> Bootstrap UI </span></a></li>
|
|
<li class="sidebar-item"><a href="docs-ui-breadcrumb.html" class="sidebar-link"><span class="hide-menu"> Breadcrumb </span></a></li>
|
|
<li class="sidebar-item"><a href="docs-ui-listmedia.html" class="sidebar-link"><span class="hide-menu"> List Media </span></a></li>
|
|
<li class="sidebar-item"><a href="docs-ui-grid.html" class="sidebar-link"><span class="hide-menu"> Grid </span></a></li>
|
|
<li class="sidebar-item"><a href="docs-ui-carousel.html" class="sidebar-link"><span class="hide-menu"> Carousel </span></a></li>
|
|
<li class="sidebar-item"><a href="docs-ui-scrollspy.html" class="sidebar-link"><span class="hide-menu"> Scrollspy </span></a></li>
|
|
<li class="sidebar-item"><a href="docs-ui-toasts.html" class="sidebar-link"><span class="hide-menu"> Toasts </span></a></li>
|
|
<li class="sidebar-item"><a href="docs-ui-spinner.html" class="sidebar-link"><span class="hide-menu"> Spinner </span></a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
|
|
aria-expanded="false"><i data-feather="edit" class="feather-icon"></i><span
|
|
class="hide-menu">Customized
|
|
</span></a>
|
|
<ul aria-expanded="false" class="collapse first-level base-level-line">
|
|
<li class="sidebar-item"><a href="docs-custom-datatables.html" class="sidebar-link"><span class="hide-menu"> Datatables </span></a></li>
|
|
<li class="sidebar-item"><a href="docs-custom-widgets.html" class="sidebar-link"><span class="hide-menu"> Widgets </span></a></li>
|
|
<li class="sidebar-item"><a href="docs-custom-chart-chartjs.html" class="sidebar-link"><span class="hide-menu"> ChartJs </span></a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<!-- End Sidebar navigation -->
|
|
</div>
|
|
<!-- End Sidebar scroll-->
|
|
</aside>
|
|
<!-- ============================================================== -->
|
|
<!-- End Left Sidebar - style you can find in sidebar.scss -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- Page wrapper -->
|
|
<!-- ============================================================== -->
|
|
<div class="page-wrapper">
|
|
<!-- ============================================================== -->
|
|
<!-- Bread crumb and right sidebar toggle -->
|
|
<!-- ============================================================== -->
|
|
<div class="page-breadcrumb">
|
|
<div class="d-flex align-items-center">
|
|
<h4 class="page-title text-truncate text-dark font-weight-medium mb-0">List Media</h4>
|
|
<div class="ml-auto">
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb m-0 p-0">
|
|
<li class="breadcrumb-item text-muted active" aria-current="page">AdminMart</li>
|
|
<li class="breadcrumb-item text-muted" aria-current="page">List Media</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- End Bread crumb and right sidebar toggle -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- Container fluid -->
|
|
<!-- ============================================================== -->
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card overflow-hidden">
|
|
<div class="card-body border-bottom">
|
|
<h4 class="card-title mb-0">Bootstrap List Media</h4>
|
|
</div>
|
|
<div class="row justify-content-center bg-light p-5">
|
|
<div class="col-md-7">
|
|
<div class="card shadow-sm">
|
|
<div class="p-4 text-center">
|
|
<ul class="list-group">
|
|
<li class="list-group-item">Cras justo odio</li>
|
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
<li class="list-group-item">Morbi leo risus</li>
|
|
<li class="list-group-item">Porta ac consectetur ac</li>
|
|
<li class="list-group-item">Vestibulum at eros</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-4">
|
|
<h4 class="card-title mt-4">Code Here:</h4>
|
|
<hr>
|
|
<pre class="highlight html">
|
|
<code class="shadow-sm px-4" style="height: 200px;">
|
|
<ul class="list-group">
|
|
<li class="list-group-item">Cras justo odio</li>
|
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
<li class="list-group-item">Morbi leo risus</li>
|
|
<li class="list-group-item">Porta ac consectetur ac</li>
|
|
<li class="list-group-item">Vestibulum at eros</li>
|
|
</ul>
|
|
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="px-4">
|
|
<h4 class="card-title">Linked Items</h4>
|
|
</div>
|
|
<div class="row justify-content-center bg-light p-5 mt-4">
|
|
<div class="col-md-9">
|
|
<div class="card shadow-sm">
|
|
<div class="p-4 text-center">
|
|
<div class="list-group">
|
|
<a href="javascript:void(0)" class="list-group-item active">Cras justo odio</a>
|
|
<a href="javascript:void(0)" class="list-group-item">Dapibus ac facilisis in</a>
|
|
<a href="javascript:void(0)" class="list-group-item">Morbi leo
|
|
risus</a>
|
|
<a href="javascript:void(0)" class="list-group-item">Porta ac
|
|
consectetur ac</a>
|
|
<a href="javascript:void(0)" class="list-group-item">Vestibulum at eros</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-4">
|
|
<h4 class="card-title mt-4">Code Here</h4>
|
|
<hr>
|
|
<pre class="highlight html">
|
|
<code class="shadow-sm px-4" style="height: 250px;">
|
|
<div class="list-group">
|
|
<a href="javascript:void(0)" class="list-group-item active">Cras justo odio</a>
|
|
<a href="javascript:void(0)" class="list-group-item">Dapibus ac facilisis in</a>
|
|
<a href="javascript:void(0)" class="list-group-item">Morbi leo
|
|
risus</a>
|
|
<a href="javascript:void(0)" class="list-group-item">Porta ac
|
|
consectetur ac</a>
|
|
<a href="javascript:void(0)" class="list-group-item">Vestibulum at eros</a>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="px-4">
|
|
<h4 class="card-title">With Badges</h4>
|
|
</div>
|
|
<div class="row justify-content-center bg-light p-5 mt-4">
|
|
<div class="col-md-9">
|
|
<div class="card shadow-sm">
|
|
<div class="p-4 text-center">
|
|
<ul class="list-group list-group-full">
|
|
<li class="list-group-item"> Cras justo odio <span
|
|
class="badge badge-info ml-auto">6</span></li>
|
|
<li class="list-group-item"> Dapibus ac facilisis in </li>
|
|
<li class="list-group-item"> Morbi leo risus <span
|
|
class="badge badge-danger ml-auto">3</span></li>
|
|
<li class="list-group-item active"> Porta ac consectetur ac <span
|
|
class="badge badge-success ml-auto">10</span></li>
|
|
<li class="list-group-item"> Vestibulum at eros </li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-4">
|
|
<h4 class="card-title mt-4">Code Here</h4>
|
|
<hr>
|
|
<pre class="highlight html">
|
|
<code class="shadow-sm px-4" style="height: 250px;">
|
|
<ul class="list-group list-group-full">
|
|
<li class="list-group-item"> Cras justo odio <span
|
|
class="badge badge-info ml-auto">6</span></li>
|
|
<li class="list-group-item"> Dapibus ac facilisis in </li>
|
|
<li class="list-group-item"> Morbi leo risus <span
|
|
class="badge badge-danger ml-auto">3</span></li>
|
|
<li class="list-group-item active"> Porta ac consectetur ac <span
|
|
class="badge badge-success ml-auto">10</span></li>
|
|
<li class="list-group-item"> Vestibulum at eros </li>
|
|
</ul>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="px-4">
|
|
<h4 class="card-title">Media object</h4>
|
|
</div>
|
|
<div class="row justify-content-center bg-light p-5 mt-4">
|
|
<div class="col-md-9">
|
|
<div class="card shadow-sm">
|
|
<div class="p-4">
|
|
<ul class="list-unstyled">
|
|
<li class="media">
|
|
<img class="d-flex mr-3" src="../src/assets/images/users/1.jpg"
|
|
width="60" alt="Generic placeholder image">
|
|
<div class="media-body">
|
|
<h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet
|
|
nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
|
|
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
|
|
viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
|
|
Donec lacinia congue felis in faucibus.
|
|
</div>
|
|
</li>
|
|
<li class="media my-4">
|
|
<img class="d-flex mr-3" src="../src/assets/images/users/2.jpg"
|
|
width="60" alt="Generic placeholder image">
|
|
<div class="media-body">
|
|
<h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet
|
|
nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
|
|
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
|
|
viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
|
|
Donec lacinia congue felis in faucibus.
|
|
</div>
|
|
</li>
|
|
<li class="media">
|
|
<img class="d-flex mr-3" src="../src/assets/images/users/3.jpg"
|
|
width="60" alt="Generic placeholder image">
|
|
<div class="media-body">
|
|
<h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet
|
|
nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
|
|
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
|
|
viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
|
|
Donec lacinia congue felis in faucibus.
|
|
<div class="media mt-3">
|
|
<a class="d-flex pr-3" href="javascript:void(0)">
|
|
<img src="../src/assets/images/users/4.jpg" width="60"
|
|
height="60" alt="Generic placeholder image">
|
|
</a>
|
|
<div class="media-body">
|
|
<h5 class="mt-0">Media heading</h5> Cras sit amet nibh
|
|
libero, in gravida nulla. Nulla vel metus scelerisque ante
|
|
sollicitudin. Cras purus odio, vestibulum in vulputate at,
|
|
tempus viverra turpis. Fusce condimentum nunc ac nisi
|
|
vulputate fringilla. Donec lacinia congue felis in faucibus.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-4">
|
|
<h4 class="card-title mt-4">Code Here</h4>
|
|
<hr>
|
|
<pre class="highlight html">
|
|
<code class="shadow-sm px-4" style="height: 300px;">
|
|
<ul class="list-unstyled">
|
|
<li class="media">
|
|
<img class="d-flex mr-3" src="../assets/images/users/1.jpg"
|
|
width="60" alt="Generic placeholder image">
|
|
<div class="media-body">
|
|
<h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet
|
|
nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
|
|
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
|
|
viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
|
|
Donec lacinia congue felis in faucibus.
|
|
</div>
|
|
</li>
|
|
<li class="media my-4">
|
|
<img class="d-flex mr-3" src="../assets/images/users/2.jpg"
|
|
width="60" alt="Generic placeholder image">
|
|
<div class="media-body">
|
|
<h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet
|
|
nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
|
|
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
|
|
viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
|
|
Donec lacinia congue felis in faucibus.
|
|
</div>
|
|
</li>
|
|
<li class="media">
|
|
<img class="d-flex mr-3" src="../assets/images/users/3.jpg"
|
|
width="60" alt="Generic placeholder image">
|
|
<div class="media-body">
|
|
<h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet
|
|
nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
|
|
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
|
|
viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
|
|
Donec lacinia congue felis in faucibus.
|
|
<div class="media mt-3">
|
|
<a class="d-flex pr-3" href="javascript:void(0)">
|
|
<img src="../assets/images/users/4.jpg" width="60"
|
|
height="60" alt="Generic placeholder image">
|
|
</a>
|
|
<div class="media-body">
|
|
<h5 class="mt-0">Media heading</h5> Cras sit amet nibh
|
|
libero, in gravida nulla. Nulla vel metus scelerisque ante
|
|
sollicitudin. Cras purus odio, vestibulum in vulputate at,
|
|
tempus viverra turpis. Fusce condimentum nunc ac nisi
|
|
vulputate fringilla. Donec lacinia congue felis in faucibus.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="px-4">
|
|
<h4 class="card-title">Tabs JavaScript behavior</h4>
|
|
</div>
|
|
<div class="row justify-content-center bg-light p-5 mt-4">
|
|
<div class="col-md-9">
|
|
<div class="card shadow-sm">
|
|
<div class="p-4">
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<div class="list-group" id="list-tab" role="tablist">
|
|
<a class="list-group-item list-group-item-action active"
|
|
id="list-home-list" data-toggle="list" href="#list-home"
|
|
role="tab" aria-controls="home">Home</a>
|
|
<a class="list-group-item list-group-item-action"
|
|
id="list-profile-list" data-toggle="list" href="#list-profile"
|
|
role="tab" aria-controls="profile">Profile</a>
|
|
<a class="list-group-item list-group-item-action"
|
|
id="list-messages-list" data-toggle="list" href="#list-messages"
|
|
role="tab" aria-controls="messages">Messages</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-8">
|
|
<div class="tab-content" id="nav-tabContent">
|
|
<div class="tab-pane fade show active text-justify" id="list-home"
|
|
role="tabpanel" aria-labelledby="list-home-list">
|
|
Irure enim occaecat labore sit qui aliquip reprehenderit amet
|
|
velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia
|
|
magna sit occaecat laboris sunt dolor.
|
|
</div>
|
|
<div class="tab-pane fade text-justify" id="list-profile" role="tabpanel"
|
|
aria-labelledby="list-profile-list">
|
|
Irure enim occaecat labore sit qui aliquip reprehenderit amet
|
|
velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia
|
|
magna sit occaecat laboris sunt dolor.
|
|
</div>
|
|
<div class="tab-pane fade text-justify" id="list-messages" role="tabpanel"
|
|
aria-labelledby="list-messages-list">
|
|
Irure enim occaecat labore sit qui aliquip reprehenderit amet
|
|
velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia
|
|
magna sit occaecat laboris sunt dolor.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-4">
|
|
<h4 class="card-title mt-4">Code Here</h4>
|
|
<hr>
|
|
<pre class="highlight html">
|
|
<code class="shadow-sm px-4" style="height: 300px;">
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<div class="list-group" id="list-tab" role="tablist">
|
|
<a class="list-group-item list-group-item-action active"
|
|
id="list-home-list" data-toggle="list" href="#list-home"
|
|
role="tab" aria-controls="home">Home</a>
|
|
<a class="list-group-item list-group-item-action"
|
|
id="list-profile-list" data-toggle="list" href="#list-profile"
|
|
role="tab" aria-controls="profile">Profile</a>
|
|
<a class="list-group-item list-group-item-action"
|
|
id="list-messages-list" data-toggle="list" href="#list-messages"
|
|
role="tab" aria-controls="messages">Messages</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-8">
|
|
<div class="tab-content" id="nav-tabContent">
|
|
<div class="tab-pane fade show active" id="list-home"
|
|
role="tabpanel" aria-labelledby="list-home-list">
|
|
Irure enim occaecat labore sit qui aliquip reprehenderit amet
|
|
velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia
|
|
magna sit occaecat laboris sunt dolor.
|
|
</div>
|
|
<div class="tab-pane fade" id="list-profile" role="tabpanel"
|
|
aria-labelledby="list-profile-list">
|
|
Irure enim occaecat labore sit qui aliquip reprehenderit amet
|
|
velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia
|
|
magna sit occaecat laboris sunt dolor.
|
|
</div>
|
|
<div class="tab-pane fade" id="list-messages" role="tabpanel"
|
|
aria-labelledby="list-messages-list">
|
|
Irure enim occaecat labore sit qui aliquip reprehenderit amet
|
|
velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia
|
|
magna sit occaecat laboris sunt dolor.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="px-4">
|
|
<h4 class="card-title">Nesting Media</h4>
|
|
</div>
|
|
<div class="row justify-content-center bg-light p-5 mt-4">
|
|
<div class="col-md-9">
|
|
<div class="card shadow-sm">
|
|
<div class="p-4">
|
|
<div class="media">
|
|
<img class="mr-3 w-25" src="../src/assets/images/big/img1.jpg"
|
|
alt="Generic placeholder image">
|
|
<div class="media-body">
|
|
<h5 class="mt-0 text-dark">Media heading</h5> Cras sit amet nibh libero, in
|
|
gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus
|
|
odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
|
|
condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
|
|
in faucibus.
|
|
<div class="media mt-3">
|
|
<a class="pr-3 w-25" href="#">
|
|
<img src="../src/assets/images/big/img1.jpg" class="w-100"
|
|
alt="Generic placeholder image">
|
|
</a>
|
|
<div class="media-body">
|
|
<h5 class="mt-0 text-dark">Media heading</h5> Cras sit amet nibh libero,
|
|
in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
|
|
Cras purus odio, vestibulum in vulputate at, tempus viverra
|
|
turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
|
|
Donec lacinia congue felis in faucibus.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-4">
|
|
<h4 class="card-title mt-4">Code Here</h4>
|
|
<hr>
|
|
<pre class="highlight html">
|
|
<code class="shadow-sm px-4" style="height: 300px;">
|
|
<div class="media">
|
|
<img class="mr-3 w-25" src="../assets/images/big/img1.jpg"
|
|
alt="Generic placeholder image">
|
|
<div class="media-body">
|
|
<h5 class="mt-0 text-dark">Media heading</h5> Cras sit amet nibh libero, in
|
|
gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus
|
|
odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
|
|
condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
|
|
in faucibus.
|
|
<div class="media mt-3">
|
|
<a class="pr-3 w-25" href="#">
|
|
<img src="../assets/images/big/img1.jpg" class="w-100"
|
|
alt="Generic placeholder image">
|
|
</a>
|
|
<div class="media-body">
|
|
<h5 class="mt-0 text-dark">Media heading</h5> Cras sit amet nibh libero,
|
|
in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
|
|
Cras purus odio, vestibulum in vulputate at, tempus viverra
|
|
turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
|
|
Donec lacinia congue felis in faucibus.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="px-4">
|
|
<h4 class="card-title">Alignment Media</h4>
|
|
</div>
|
|
<div class="row justify-content-center bg-light p-5 mt-4">
|
|
<div class="col-md-9">
|
|
<div class="card shadow-sm">
|
|
<div class="p-4">
|
|
<h4 class="card-title">Top Alignment</h4>
|
|
<div class="media">
|
|
<img class="align-self-start w-25 mr-3"
|
|
src="../src/assets/images/big/img1.jpg" alt="Generic placeholder image">
|
|
<div class="media-body">
|
|
<h5 class="mt-0">Top-aligned media</h5>
|
|
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
|
|
scelerisque ante sollicitudin. Cras purus odio, vestibulum in
|
|
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
|
|
vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
|
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu
|
|
leo. Cum sociis natoque penatibus et magnis dis parturient montes,
|
|
nascetur ridiculus mus.</p>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<h4 class="card-title">Center Alignment</h4>
|
|
<div class="media">
|
|
<img class="align-self-center w-25 mr-3"
|
|
src="../src/assets/images/big/img1.jpg" alt="Generic placeholder image">
|
|
<div class="media-body">
|
|
<h5 class="mt-0">Center-aligned media</h5>
|
|
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
|
|
scelerisque ante sollicitudin. Cras purus odio, vestibulum in
|
|
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
|
|
vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
|
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis
|
|
ornare vel eu leo. Cum sociis natoque penatibus et magnis dis
|
|
parturient montes, nascetur ridiculus mus.</p>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<h4 class="card-title">Bottom Alignment</h4>
|
|
<div class="media">
|
|
<img class="align-self-end mr-3 w-25" src="../src/assets/images/big/img1.jpg"
|
|
alt="Generic placeholder image">
|
|
<div class="media-body">
|
|
<h5 class="mt-0">Bottom-aligned media</h5>
|
|
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
|
|
scelerisque ante sollicitudin. Cras purus odio, vestibulum in
|
|
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
|
|
vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
|
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis
|
|
ornare vel eu leo. Cum sociis natoque penatibus et magnis dis
|
|
parturient montes, nascetur ridiculus mus.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-4">
|
|
<h4 class="card-title mt-4">Code Here</h4>
|
|
<hr>
|
|
<pre class="highlight html">
|
|
<code class="shadow-sm px-4" style="height: 300px;">
|
|
<h4 class="card-title">Top Alignment</h4>
|
|
<div class="media">
|
|
<img class="align-self-start w-25 mr-3"
|
|
src="../assets/images/big/img1.jpg" alt="Generic placeholder image">
|
|
<div class="media-body">
|
|
<h5 class="mt-0">Top-aligned media</h5>
|
|
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
|
|
scelerisque ante sollicitudin. Cras purus odio, vestibulum in
|
|
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
|
|
vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
|
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu
|
|
leo. Cum sociis natoque penatibus et magnis dis parturient montes,
|
|
nascetur ridiculus mus.</p>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<h4 class="card-title">Center Alignment</h4>
|
|
<div class="media">
|
|
<img class="align-self-center w-25 mr-3"
|
|
src="../assets/images/big/img1.jpg" alt="Generic placeholder image">
|
|
<div class="media-body">
|
|
<h5 class="mt-0">Center-aligned media</h5>
|
|
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
|
|
scelerisque ante sollicitudin. Cras purus odio, vestibulum in
|
|
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
|
|
vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
|
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis
|
|
ornare vel eu leo. Cum sociis natoque penatibus et magnis dis
|
|
parturient montes, nascetur ridiculus mus.</p>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<h4 class="card-title">Bottom Alignment</h4>
|
|
<div class="media">
|
|
<img class="align-self-end mr-3 w-25" src="../assets/images/big/img1.jpg"
|
|
alt="Generic placeholder image">
|
|
<div class="media-body">
|
|
<h5 class="mt-0">Bottom-aligned media</h5>
|
|
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
|
|
scelerisque ante sollicitudin. Cras purus odio, vestibulum in
|
|
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
|
|
vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
|
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis
|
|
ornare vel eu leo. Cum sociis natoque penatibus et magnis dis
|
|
parturient montes, nascetur ridiculus mus.</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="px-4">
|
|
<h4 class="card-title">Media list</h4>
|
|
</div>
|
|
<div class="row justify-content-center bg-light p-5 mt-4">
|
|
<div class="col-md-9">
|
|
<div class="card shadow-sm">
|
|
<div class="p-4">
|
|
<ul class="list-unstyled">
|
|
<li class="media">
|
|
<img class="mr-3 w-25" src="../src/assets/images/big/img1.jpg"
|
|
alt="Generic placeholder image">
|
|
<div class="media-body">
|
|
<h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet
|
|
nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
|
|
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
|
|
viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
|
|
Donec lacinia congue felis in faucibus.
|
|
</div>
|
|
</li>
|
|
<li class="media my-4">
|
|
<img class="mr-3 w-25" src="../src/assets/images/big/img1.jpg"
|
|
alt="Generic placeholder image">
|
|
<div class="media-body">
|
|
<h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet
|
|
nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
|
|
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
|
|
viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
|
|
Donec lacinia congue felis in faucibus.
|
|
</div>
|
|
</li>
|
|
<li class="media">
|
|
<img class="mr-3 w-25" src="../src/assets/images/big/img1.jpg"
|
|
alt="Generic placeholder image">
|
|
<div class="media-body">
|
|
<h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet
|
|
nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
|
|
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
|
|
viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
|
|
Donec lacinia congue felis in faucibus.
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-4">
|
|
<h4 class="card-title mt-4">Code Here</h4>
|
|
<hr>
|
|
<pre class="highlight html">
|
|
<code class="shadow-sm px-4" style="height: 300px;">
|
|
<ul class="list-unstyled">
|
|
<li class="media">
|
|
<img class="mr-3 w-25" src="../assets/images/big/img1.jpg"
|
|
alt="Generic placeholder image">
|
|
<div class="media-body">
|
|
<h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet
|
|
nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
|
|
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
|
|
viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
|
|
Donec lacinia congue felis in faucibus.
|
|
</div>
|
|
</li>
|
|
<li class="media my-4">
|
|
<img class="mr-3 w-25" src="../assets/images/big/img1.jpg"
|
|
alt="Generic placeholder image">
|
|
<div class="media-body">
|
|
<h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet
|
|
nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
|
|
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
|
|
viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
|
|
Donec lacinia congue felis in faucibus.
|
|
</div>
|
|
</li>
|
|
<li class="media">
|
|
<img class="mr-3 w-25" src="../assets/images/big/img1.jpg"
|
|
alt="Generic placeholder image">
|
|
<div class="media-body">
|
|
<h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet
|
|
nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
|
|
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
|
|
viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
|
|
Donec lacinia congue felis in faucibus.
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- End Container fluid -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- footer -->
|
|
<!-- ============================================================== -->
|
|
<footer class="footer text-center">
|
|
All Rights Reserved by Adminmart. Designed and Developed by <a
|
|
href="https://wrappixel.com">WrapPixel</a>.
|
|
</footer>
|
|
<!-- ============================================================== -->
|
|
<!-- End footer -->
|
|
<!-- ============================================================== -->
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- End Page wrapper -->
|
|
<!-- ============================================================== -->
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- End Wrapper -->
|
|
<!-- ============================================================== -->
|
|
<!-- End Page -->
|
|
<!-- ============================================================== -->
|
|
<!-- All Jquery -->
|
|
<!-- ============================================================== -->
|
|
<script src="../src/assets/libs/jquery/dist/jquery.min.js"></script>
|
|
<script src="../src/assets/libs/popper.js/dist/umd/popper.min.js"></script>
|
|
<script src="../src/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
<!-- apps -->
|
|
<script src="../src/dist/js/app-style-switcher.js"></script>
|
|
<script src="../src/dist/js/feather.min.js"></script>
|
|
<script src="../src/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
|
|
<script src="../src/dist/js/sidebarmenu.js"></script>
|
|
<!--Custom JavaScript -->
|
|
<script src="../src/dist/js/custom.min.js"></script>
|
|
<script src="highlights/highlight.min.js"></script>
|
|
<script>
|
|
hljs.initHighlightingOnLoad();
|
|
</script>
|
|
<!-- End JS -->
|
|
</body>
|
|
|
|
</html> |