611 lines
50 KiB
HTML
611 lines
50 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
@@include("partials/title-meta.html", {"title": "Dropdowns"})
|
||
|
||
@@include('./partials/head-css.html')
|
||
|
||
</head>
|
||
|
||
<body class="loading">
|
||
|
||
<!-- Begin page -->
|
||
<div id="wrapper">
|
||
|
||
@@include('./partials/topbar.html')
|
||
|
||
@@include('./partials/left-sidebar.html')
|
||
|
||
<!-- ============================================================== -->
|
||
<!-- Start Page Content here -->
|
||
<!-- ============================================================== -->
|
||
|
||
<div class="content-page">
|
||
<div class="content">
|
||
|
||
<!-- Start Content-->
|
||
<div class="container-fluid">
|
||
|
||
<!-- start page title -->
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="page-title-box">
|
||
<h4 class="page-title">Dropdowns</h4>
|
||
<div class="page-title-right">
|
||
<ol class="breadcrumb m-0">
|
||
<li class="breadcrumb-item"><a href="javascript: void(0);">Minton</a></li>
|
||
<li class="breadcrumb-item"><a href="javascript: void(0);">UI</a></li>
|
||
<li class="breadcrumb-item active">Dropdowns</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end page title -->
|
||
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="header-title">Examples</h4>
|
||
<p class="sub-header">
|
||
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
|
||
</p>
|
||
|
||
<div class="row">
|
||
<div class="col-xl-6">
|
||
|
||
<div>
|
||
<h5>Single button dropdowns</h5>
|
||
<p class="text-muted font-13 mb-2">
|
||
Any single <code
|
||
class="highlighter-rouge">.btn</code> can be turned into a dropdown
|
||
toggle with some markup changes. Here’s how you can put them to work
|
||
with either <code class="highlighter-rouge"><button></code>
|
||
elements:
|
||
</p>
|
||
|
||
<div class="row">
|
||
<div class="col-6">
|
||
<div class="dropdown mt-2">
|
||
<button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Dropdown button <i class="mdi mdi-chevron-down"></i>
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-6">
|
||
<div class="dropdown mt-2">
|
||
<a class="btn btn-light dropdown-toggle" href="https://example.com" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Dropdown link <i class="mdi mdi-chevron-down"></i>
|
||
</a>
|
||
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
</div>
|
||
</div>
|
||
</div> <!-- end col -->
|
||
</div> <!-- end row -->
|
||
</div>
|
||
|
||
<div class="mt-5">
|
||
<h5 class="mb-1">Variant</h5>
|
||
<p class="text-muted font-13 mb-2">
|
||
The best part is you can do this with any button variant, too:
|
||
</p>
|
||
|
||
<div class="btn-group mr-1 mt-2">
|
||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary <i class="mdi mdi-chevron-down"></i></button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div><!-- /btn-group -->
|
||
<div class="btn-group mr-1 mt-2">
|
||
<button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary <i class="mdi mdi-chevron-down"></i></button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div><!-- /btn-group -->
|
||
<div class="btn-group mr-1 mt-2">
|
||
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success <i class="mdi mdi-chevron-down"></i></button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div><!-- /btn-group -->
|
||
<div class="btn-group mr-1 mt-2">
|
||
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info <i class="mdi mdi-chevron-down"></i></button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div><!-- /btn-group -->
|
||
<div class="btn-group mr-1 mt-2">
|
||
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning <i class="mdi mdi-chevron-down"></i></button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div><!-- /btn-group -->
|
||
<div class="btn-group mr-1 mt-2">
|
||
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger <i class="mdi mdi-chevron-down"></i></button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div><!-- /btn-group -->
|
||
</div>
|
||
|
||
<div class="mt-5">
|
||
<h5 class="mb-1">Dropright variation</h5>
|
||
<p class="text-muted font-13 mb-2">
|
||
Trigger dropdown menus at the right of the elements by adding <code>.dropright</code> to the parent element.
|
||
</p>
|
||
|
||
<!-- Default dropright button -->
|
||
<div class="btn-group mt-2 mr-1 dropright">
|
||
<button type="button" class="btn btn-primary waves-effect waves-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Dropright <i class="mdi mdi-chevron-right"></i>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Split dropright button -->
|
||
<div class="btn-group mt-2 mr-1 dropright">
|
||
<button type="button" class="btn btn-light waves-effect">
|
||
Split dropright
|
||
</button>
|
||
<button type="button" class="btn btn-light waves-effect dropdown-toggle-split dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<i class="mdi mdi-chevron-right"></i>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-5">
|
||
<h5 class="mb-1">Dropup variation</h5>
|
||
<p class="text-muted font-13 mb-2">
|
||
Trigger dropdown menus above elements
|
||
by adding <code class="highlighter-rouge">.dropup</code> to the parent
|
||
element.
|
||
</p>
|
||
|
||
<!-- Default dropup button -->
|
||
<div class="btn-group dropup mt-2 mr-1">
|
||
<button type="button" class="btn btn-purple waves-effect waves-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup <i class="mdi mdi-chevron-up"></i></button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Split dropup button -->
|
||
<div class="btn-group dropup mt-2 mr-1">
|
||
<button type="button" class="btn btn-light">
|
||
Split dropup
|
||
</button>
|
||
<button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<i class="mdi mdi-chevron-up"></i>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-5">
|
||
<h5 class="mb-1">Active Item</h5>
|
||
<p class="text-muted font-13 mb-2">
|
||
Add <code>.active</code> to item in the dropdown to <strong>style them as active</strong>.
|
||
</p>
|
||
|
||
<!-- Active Item -->
|
||
<div class="btn-group mt-2">
|
||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Active Item <i class="mdi mdi-chevron-down"></i>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Regular link</a>
|
||
<a class="dropdown-item active" href="#">Active link</a>
|
||
<a class="dropdown-item" href="#">Another link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-5">
|
||
<h5 class="mb-1">Headers</h5>
|
||
<p class="text-muted font-13 mb-2">
|
||
Add a header to label sections of actions in any dropdown menu.
|
||
</p>
|
||
|
||
<!-- Header Item -->
|
||
<div class="btn-group mt-2">
|
||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Header <i class="mdi mdi-chevron-down"></i>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<h6 class="dropdown-header">Dropdown header</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-5">
|
||
<h5 class="mb-1">Forms</h5>
|
||
<p class="text-muted font-13 mb-2">
|
||
Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.
|
||
</p>
|
||
|
||
<!-- Forms -->
|
||
<div class="dropdown mt-2">
|
||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Form <i class="mdi mdi-chevron-down"></i>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<form class="px-4 py-3">
|
||
<div class="form-group">
|
||
<label for="exampleDropdownFormEmail1">Email address</label>
|
||
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="exampleDropdownFormPassword1">Password</label>
|
||
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="form-check">
|
||
<input type="checkbox" class="form-check-input" id="dropdownCheck">
|
||
<label class="form-check-label" for="dropdownCheck">
|
||
Remember me
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Sign in</button>
|
||
</form>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">New around here? Sign up</a>
|
||
<a class="dropdown-item" href="#">Forgot password?</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div> <!-- end col -->
|
||
|
||
<div class="col-xl-6">
|
||
<div class="mt-5 mt-xl-0">
|
||
<h5 class="mb-1">Split button dropdowns</h5>
|
||
<p class="text-muted font-13 mb-2">
|
||
Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of <code class="highlighter-rouge">.dropdown-toggle-split</code> for proper spacing around the dropdown caret.
|
||
</p>
|
||
|
||
<div class="btn-group dropdown mt-2 mr-1">
|
||
<button type="button" class="btn btn-primary">Primary</button>
|
||
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<i class="mdi mdi-chevron-down"></i>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div><!-- /btn-group -->
|
||
<div class="btn-group mt-2 mr-1">
|
||
<button type="button" class="btn btn-light">Secondary</button>
|
||
<button type="button" class="btn btn-light dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<i class="mdi mdi-chevron-down"></i>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div><!-- /btn-group -->
|
||
<div class="btn-group mt-2 mr-1">
|
||
<button type="button" class="btn btn-success">Success</button>
|
||
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<i class="mdi mdi-chevron-down"></i>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div><!-- /btn-group -->
|
||
<div class="btn-group mt-2 mr-1">
|
||
<button type="button" class="btn btn-info">Info</button>
|
||
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<i class="mdi mdi-chevron-down"></i>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div><!-- /btn-group -->
|
||
<div class="btn-group mt-2 mr-1">
|
||
<button type="button" class="btn btn-warning">Warning</button>
|
||
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<i class="mdi mdi-chevron-down"></i>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div><!-- /btn-group -->
|
||
<div class="btn-group mt-2 mr-1">
|
||
<button type="button" class="btn btn-danger">Danger</button>
|
||
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<i class="mdi mdi-chevron-down"></i>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div><!-- /btn-group -->
|
||
</div>
|
||
|
||
<div class="mt-5">
|
||
<h5 class="mb-1">Sizing</h5>
|
||
<p class="text-muted font-13 mb-2">
|
||
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
|
||
</p>
|
||
|
||
<!-- Large button groups (default and split) -->
|
||
<div class="btn-group mt-2 mr-1">
|
||
<button class="btn btn-primary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Large button <i class="mdi mdi-chevron-down"></i>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="btn-group mt-2 mr-1">
|
||
<button class="btn btn-light btn-lg" type="button">
|
||
Large button
|
||
</button>
|
||
<button type="button" class="btn btn-lg btn-light dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<i class="mdi mdi-chevron-down"></i>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Small button groups (default and split) -->
|
||
<div class="btn-group mt-2 mr-1">
|
||
<button class="btn btn-success btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Small button <i class="mdi mdi-chevron-down"></i>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="btn-group mt-2 mr-1">
|
||
<button class="btn btn-light btn-sm" type="button">
|
||
Small button
|
||
</button>
|
||
<button type="button" class="btn btn-sm btn-light dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<i class="mdi mdi-chevron-down"></i>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-5">
|
||
<h5 class="mb-1">Dropleft variation</h5>
|
||
<p class="text-muted font-13 mb-2">
|
||
Trigger dropdown menus at the right of the elements by adding <code>.dropleft</code> to the parent element.
|
||
</p>
|
||
|
||
<!-- Default dropright button -->
|
||
<div class="btn-group mt-2 mr-1 dropleft">
|
||
<button type="button" class="btn btn-info waves-effect waves-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<i class="mdi mdi-chevron-left"></i> Dropleft
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Split dropright button -->
|
||
<div class="btn-group mt-2 mr-1 dropleft">
|
||
<!-- Split dropleft button -->
|
||
<div class="btn-group">
|
||
<div class="btn-group dropleft" role="group">
|
||
<button type="button" class="btn btn-light dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<i class="mdi mdi-chevron-left"></i>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<button type="button" class="btn btn-light">
|
||
Split dropleft
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-5">
|
||
<h5 class="mb-1">Menu alignment</h5>
|
||
<p class="text-muted font-13 mb-2">
|
||
Add <code class="highlighter-rouge">.dropdown-menu-right</code>
|
||
to a <code class="highlighter-rouge">.dropdown-menu</code> to right
|
||
align the dropdown menu.
|
||
</p>
|
||
|
||
|
||
<div class="btn-group mt-2">
|
||
<button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Right-aligned <i class="mdi mdi-chevron-down"></i>
|
||
</button>
|
||
<div class="dropdown-menu dropdown-menu-right">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-5">
|
||
<h5 class="mb-1">Disabled Item</h5>
|
||
<p class="text-muted font-13 mb-2">
|
||
Add <code>.disabled</code> to items in the dropdown to <strong>style them as disabled</strong>.
|
||
</p>
|
||
|
||
<!-- Disabled -->
|
||
<div class="btn-group mt-2">
|
||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Disabled <i class="mdi mdi-chevron-down"></i>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Regular link</a>
|
||
<a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
|
||
<a class="dropdown-item" href="#">Another link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-5">
|
||
<h5 class="mb-1">Text</h5>
|
||
<p class="text-muted font-13 mb-2">
|
||
Place any freeform text within a dropdown menu with text and use spacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.
|
||
</p>
|
||
|
||
<!-- Text Example -->
|
||
<div class="btn-group mt-2">
|
||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Text Dropdown <i class="mdi mdi-chevron-down"></i>
|
||
</button>
|
||
<div class="dropdown-menu p-3 text-muted" style="max-width: 200px;">
|
||
<p>
|
||
Some example text that's free-flowing within the dropdown menu.
|
||
</p>
|
||
<p class="mb-0">
|
||
And this is more example text.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div> <!-- end col -->
|
||
</div>
|
||
<!-- end row -->
|
||
</div>
|
||
</div> <!-- end card -->
|
||
</div> <!-- end col -->
|
||
</div>
|
||
<!-- end row-->
|
||
|
||
</div> <!-- container -->
|
||
|
||
</div> <!-- content -->
|
||
|
||
@@include('./partials/footer.html')
|
||
|
||
</div>
|
||
|
||
<!-- ============================================================== -->
|
||
<!-- End Page content -->
|
||
<!-- ============================================================== -->
|
||
|
||
|
||
</div>
|
||
<!-- END wrapper -->
|
||
|
||
@@include('./partials/right-sidebar.html')
|
||
|
||
<!-- Vendor js -->
|
||
<script src="../assets/js/vendor.min.js"></script>
|
||
|
||
<!-- App js -->
|
||
<script src="../assets/js/app.min.js"></script>
|
||
|
||
</body>
|
||
</html> |