📁 PHP Dosya Yöneticisi
/
/
home
/
demodesigncom
/
blog.demodesign.com.tr
/
admin
/
templates
/
admin
📝
list-group.html
← Geri Dön
<!DOCTYPE html> <html lang="en"> <!-- Mirrored from phantom-themes.com/circl/theme/templates/admin/list-group.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 14 Jul 2021 10:36:10 GMT --> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Responsive Admin Dashboard Template"> <meta name="keywords" content="admin,dashboard"> <meta name="author" content="stacks"> <!-- The above 6 meta tags *must* come first in the head; any other head content must come *after* these tags --> <!-- Title --> <title>Circl - Responsive Admin Dashboard Template</title> <!-- Styles --> <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,700,800&display=swap" rel="stylesheet"> <link href="../../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="../../assets/plugins/font-awesome/css/all.min.css" rel="stylesheet"> <link href="../../assets/plugins/perfectscroll/perfect-scrollbar.css" rel="stylesheet"> <!-- Theme Styles --> <link href="../../assets/css/main.min.css" rel="stylesheet"> <link href="../../assets/css/custom.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class='loader'> <div class='spinner-grow text-primary' role='status'> <span class='sr-only'>Loading...</span> </div> </div> <div class="page-container"> <div class="page-header"> <nav class="navbar navbar-expand-lg d-flex justify-content-between"> <div class="" id="navbarNav"> <ul class="navbar-nav" id="leftNav"> <li class="nav-item"> <a class="nav-link" id="sidebar-toggle" href="#"><i data-feather="arrow-left"></i></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Settings</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Help</a> </li> </ul> </div> <div class="logo"> <a class="navbar-brand" href="index.html"></a> </div> <div class="" id="headerNav"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link search-dropdown" href="#" id="searchDropDown" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i data-feather="search"></i></a> <div class="dropdown-menu dropdown-menu-end dropdown-lg search-drop-menu" aria-labelledby="searchDropDown"> <form> <input class="form-control" type="text" placeholder="Type something.." aria-label="Search"> </form> <h6 class="dropdown-header">Recent Searches</h6> <a class="dropdown-item" href="#">charts</a> <a class="dropdown-item" href="#">new orders</a> <a class="dropdown-item" href="#">file manager</a> <a class="dropdown-item" href="#">new users</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link notifications-dropdown" href="#" id="notificationsDropDown" role="button" data-bs-toggle="dropdown" aria-expanded="false">3</a> <div class="dropdown-menu dropdown-menu-end notif-drop-menu" aria-labelledby="notificationsDropDown"> <h6 class="dropdown-header">Notifications</h6> <a href="#"> <div class="header-notif"> <div class="notif-image"> <span class="notification-badge bg-info text-white"> <i class="fas fa-bullhorn"></i> </span> </div> <div class="notif-text"> <p class="bold-notif-text">faucibus dolor in commodo lectus mattis</p> <small>19:00</small> </div> </div> </a> <a href="#"> <div class="header-notif"> <div class="notif-image"> <span class="notification-badge bg-primary text-white"> <i class="fas fa-bolt"></i> </span> </div> <div class="notif-text"> <p class="bold-notif-text">faucibus dolor in commodo lectus mattis</p> <small>18:00</small> </div> </div> </a> <a href="#"> <div class="header-notif"> <div class="notif-image"> <span class="notification-badge bg-success text-white"> <i class="fas fa-at"></i> </span> </div> <div class="notif-text"> <p>faucibus dolor in commodo lectus mattis</p> <small>yesterday</small> </div> </div> </a> <a href="#"> <div class="header-notif"> <div class="notif-image"> <span class="notification-badge"> <img src="../../assets/images/avatars/profile-image.png" alt=""> </span> </div> <div class="notif-text"> <p>faucibus dolor in commodo lectus mattis</p> <small>yesterday</small> </div> </div> </a> <a href="#"> <div class="header-notif"> <div class="notif-image"> <span class="notification-badge"> <img src="../../assets/images/avatars/profile-image-3.jpg" alt=""> </span> </div> <div class="notif-text"> <p>faucibus dolor in commodo lectus mattis</p> <small>yesterday</small> </div> </div> </a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link profile-dropdown" href="#" id="profileDropDown" role="button" data-bs-toggle="dropdown" aria-expanded="false"><img src="../../assets/images/avatars/profile-image-1.png" alt=""></a> <div class="dropdown-menu dropdown-menu-end profile-drop-menu" aria-labelledby="profileDropDown"> <a class="dropdown-item" href="#"><i data-feather="user"></i>Profile</a> <a class="dropdown-item" href="#"><i data-feather="inbox"></i>Messages</a> <a class="dropdown-item" href="#"><i data-feather="edit"></i>Activities<span class="badge rounded-pill bg-success">12</span></a> <a class="dropdown-item" href="#"><i data-feather="check-circle"></i>Tasks</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#"><i data-feather="settings"></i>Settings</a> <a class="dropdown-item" href="#"><i data-feather="unlock"></i>Lock</a> <a class="dropdown-item" href="#"><i data-feather="log-out"></i>Logout</a> </div> </li> </ul> </div> </nav> </div> <div class="page-sidebar"> <ul class="list-unstyled accordion-menu"> <li class="sidebar-title"> Main </li> <li> <a href="index.html"><i data-feather="home"></i>Dashboard</a> </li> <li class="sidebar-title"> Apps </li> <li> <a href="email.html"><i data-feather="inbox"></i>Email</a> </li> <li> <a href="calendar.html"><i data-feather="calendar"></i>Calendar</a> </li> <li> <a href="social.html"><i data-feather="user"></i>Social</a> </li><li> <a href="file-manager.html"><i data-feather="message-circle"></i>File Manager</a> </li> <li class="sidebar-title"> Elements </li> <li class="active-page"> <a href="index.html" class="active"><i data-feather="code"></i>Components<i class="fas fa-chevron-right dropdown-icon"></i></a> <ul class=""> <li><a href="alerts.html"><i class="far fa-circle"></i>Alerts</a></li> <li><a href="typography.html"><i class="far fa-circle"></i>Typography</a></li> <li><a href="icons.html"><i class="far fa-circle"></i>Icons</a></li> <li><a href="badge.html"><i class="far fa-circle"></i>Badge</a></li> <li><a href="buttons.html"><i class="far fa-circle"></i>Buttons</a></li> <li><a href="dropdowns.html"><i class="far fa-circle"></i>Dropdowns</a></li> <li><a href="list-group.html" class="active"><i class="far fa-circle"></i>List Group</a></li> <li><a href="toasts.html"><i class="far fa-circle"></i>Toasts</a></li> <li><a href="modal.html"><i class="far fa-circle"></i>Modal</a></li> <li><a href="pagination.html"><i class="far fa-circle"></i>Pagination</a></li> <li><a href="popovers.html"><i class="far fa-circle"></i>Popovers</a></li> <li><a href="progress.html"><i class="far fa-circle"></i>Progress</a></li> <li><a href="spinners.html"><i class="far fa-circle"></i>Spinners</a></li> <li><a href="accordion.html"><i class="far fa-circle"></i>Accordion</a></li> </ul> </li> <li> <a href="index.html"><i data-feather="gift"></i>Plugins<i class="fas fa-chevron-right dropdown-icon"></i></a> <ul class=""> <li><a href="block-ui.html"><i class="far fa-circle"></i>Block UI</a></li> <li><a href="session-timeout.html"><i class="far fa-circle"></i>Session Timeout</a></li> <li><a href="tree-view.html"><i class="far fa-circle"></i>Tree View</a></li> </ul> </li> <li> <a href="index.html"><i data-feather="edit"></i>Form<i class="fas fa-chevron-right dropdown-icon"></i></a> <ul class=""> <li><a href="form-elements.html"><i class="far fa-circle"></i>Form Elements</a></li> <li><a href="form-layout.html"><i class="far fa-circle"></i>Form Layout</a></li> <li><a href="form-validation.html"><i class="far fa-circle"></i>Form Validation</a></li> </ul> </li> <li> <a href="cards.html"><i data-feather="layers"></i>Cards</a> </li> <li> <a href="index.html"><i data-feather="list"></i>Tables<i class="fas fa-chevron-right dropdown-icon"></i></a> <ul class=""> <li><a href="tables.html"><i class="far fa-circle"></i>Basic Tables</a></li> <li><a href="data-tables.html"><i class="far fa-circle"></i>Data Tables</a></li> </ul> </li> <li> <a href="charts.html"><i data-feather="pie-chart"></i>Charts</a> </li> <li class="sidebar-title"> Other </li> <li> <a href="index.html"><i data-feather="star"></i>Pages<i class="fas fa-chevron-right dropdown-icon"></i></a> <ul class=""> <li><a href="invoice.html"><i class="far fa-circle"></i>Invoice</a></li> <li><a href="404.html"><i class="far fa-circle"></i>404 Page</a></li> <li><a href="500.html"><i class="far fa-circle"></i>500 Page</a></li> <li><a href="blank-page.html"><i class="far fa-circle"></i>Blank Page</a></li> <li><a href="login.html"><i class="far fa-circle"></i>Login</a></li> <li><a href="register.html"><i class="far fa-circle"></i>Register</a></li> <li><a href="lockscreen.html"><i class="far fa-circle"></i>Lockscreen</a></li> <li><a href="price.html"><i class="far fa-circle"></i>Price</a></li> </ul> </li> <li> <a href="#"><i data-feather="check-circle"></i>Documentation</a> </li> </ul> </div> <div class="page-content"> <div class="main-wrapper"> <div class="row"> <div class="col"> <div class="card"> <div class="card-body"> <h5 class="card-title">Basic example</h5> <p class="card-description">The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.</p> <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="row"> <div class="col"> <div class="card"> <div class="card-body"> <h5 class="card-title">Active items</h5> <p class="card-description">Add <code>.active</code> to a <code>.list-group-item</code> to indicate the current active selection.</p> <ul class="list-group"> <li class="list-group-item active" aria-current="true">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="row"> <div class="col"> <div class="card"> <div class="card-body"> <h5 class="card-title">Disabled items</h5> <p class="card-description">Add <code>.disabled</code> to a <code>.list-group-item</code> to make it appear disabled. Note that some elements with <code>.disabled</code> will also require custom JavaScript to fully disable their click events (e.g., links).</p> <ul class="list-group"> <li class="list-group-item disabled" aria-disabled="true">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="row"> <div class="col"> <div class="card"> <div class="card-body"> <h5 class="card-title">Links and buttons</h5> <p class="card-description">Use <code><a></code>s or <code><button></code>s to create actionable list group items with hover, disabled, and active states by adding <code>.list-group-item-action</code>. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like <code><li></code>s or <code><div></code>s) don’t provide a click or tap affordance.</p> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action active" aria-current="true"> Cras justo odio </a> <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a> <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a> <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a> </div> </div> </div> </div> </div> <div class="row"> <div class="col"> <div class="card"> <div class="card-body"> <h5 class="card-title">Flush</h5> <p class="card-description">Add <code>.list-group-flush</code> to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).</p> <ul class="list-group list-group-flush"> <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="row"> <div class="col"> <div class="card"> <div class="card-body"> <h5 class="card-title">Contextual classes</h5> <p class="card-description">Use contextual classes to style list items with a stateful background and color.</p> <ul class="list-group"> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item list-group-item-primary">A simple primary list group item</li> <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li> <li class="list-group-item list-group-item-success">A simple success list group item</li> <li class="list-group-item list-group-item-danger">A simple danger list group item</li> <li class="list-group-item list-group-item-warning">A simple warning list group item</li> <li class="list-group-item list-group-item-info">A simple info list group item</li> <li class="list-group-item list-group-item-light">A simple light list group item</li> <li class="list-group-item list-group-item-dark">A simple dark list group item</li> </ul> </div> </div> </div> </div> <div class="row"> <div class="col"> <div class="card"> <div class="card-body"> <h5 class="card-title">With badges</h5> <p class="card-description">Add badges to any list group item to show unread counts, activity, and more with the help of some utilities.</p> <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> Cras justo odio <span class="badge bg-primary rounded-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Dapibus ac facilisis in <span class="badge bg-primary rounded-pill">2</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Morbi leo risus <span class="badge bg-primary rounded-pill">1</span> </li> </ul> </div> </div> </div> </div> <div class="row"> <div class="col"> <div class="card"> <div class="card-body"> <h5 class="card-title">Custom content</h5> <p class="card-description">Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities.</p> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action active" aria-current="true"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> <small>3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> </a> <a href="#" class="list-group-item list-group-item-action"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> <small class="text-muted">3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small class="text-muted">Donec id elit non mi porta.</small> </a> <a href="#" class="list-group-item list-group-item-action"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> <small class="text-muted">3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small class="text-muted">Donec id elit non mi porta.</small> </a> </div> </div> </div> </div> </div> <div class="row"> <div class="col"> <div class="card"> <div class="card-body"> <h5 class="card-title">Checkboxes and radios</h5> <p class="card-description">Place Bootstrap’s checkboxes and radios within list group items and customize as needed. You can use them without <code><label></code>s, but please remember to include an <code>aria-label</code> attribute and value for accessibility.</p> <ul class="list-group"> <li class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value="" aria-label="..."> Cras justo odio </li> <li class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value="" aria-label="..."> Dapibus ac facilisis in </li> <li class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value="" aria-label="..."> Morbi leo risus </li> <li class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value="" aria-label="..."> Porta ac consectetur ac </li> <li class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value="" aria-label="..."> Vestibulum at eros </li> </ul> </div> </div> </div> </div> <div class="row"> <div class="col"> <div class="card"> <div class="card-body"> <h5 class="card-title">JavaScript behavior</h5> <p class="card-description">Use the tab JavaScript plugin—include it individually or through the compiled <code>bootstrap.js</code> file—to extend our list group to create tabbable panes of local content.</p> <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-bs-toggle="list" href="#list-home" role="tab" >Home</a> <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab">Profile</a> <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab">Messages</a> <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab">Settings</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">Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.</div> <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.</div> <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.</div> <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-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. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- Javascripts --> <script src="../../assets/plugins/jquery/jquery-3.4.1.min.js"></script> <script src="https://unpkg.com/@popperjs/core@2"></script> <script src="../../assets/plugins/bootstrap/js/bootstrap.min.js"></script> <script src="https://unpkg.com/feather-icons"></script> <script src="../../assets/plugins/perfectscroll/perfect-scrollbar.min.js"></script> <script src="../../assets/js/main.min.js"></script> </body> <!-- Mirrored from phantom-themes.com/circl/theme/templates/admin/list-group.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 14 Jul 2021 10:36:10 GMT --> </html>
💾 Kaydet
İptal
📝 Yeniden Adlandır
İptal
Kaydet
🔐 Dosya İzinleri (chmod)
İzin Değeri:
Hızlı Seçim:
777
755
644
600
777
= Herkes okur/yazar/çalıştırır
755
= Sahip tam, diğerleri okur/çalıştırır
644
= Sahip okur/yazar, diğerleri okur
600
= Sadece sahip okur/yazar
İptal
Uygula