first init
This commit is contained in:
arifal
546
resources/views/ui/dropdown.blade.php
Executable file
546
resources/views/ui/dropdown.blade.php
Executable file
@@ -0,0 +1,546 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Dropdown'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Dropdown'])
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Single Button Dropdowns
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Any single <code>.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><button></code> elements.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-3">
|
||||
<!-- Button Dropdown -->
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
|
||||
<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>
|
||||
|
||||
<!-- Link Dropdown -->
|
||||
<div class="dropdown">
|
||||
<a href="#" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
Dropdown link
|
||||
</a>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Single Button Variant Dropdowns
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Any single <code>.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><button></code> elements.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Primary
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Secondary
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Success
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Info
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Split Button Dropdowns
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Similarly, create split button dropdowns with virtually the same markup as single button dropdowns,
|
||||
but with the addition of <code>.dropdown-toggle-split</code> for proper spacing around the dropdown
|
||||
caret.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"
|
||||
data-bs-toggle="dropdown" aria-expanded="false"></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
|
||||
data-bs-toggle="dropdown" aria-expanded="false"></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split"
|
||||
data-bs-toggle="dropdown" aria-expanded="false"></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split"
|
||||
data-bs-toggle="dropdown" aria-expanded="false"></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Dark Dropdowns
|
||||
</h5>
|
||||
<p class="card-subtitle">Opt into darker dropdowns to match a dark navbar or custom style by adding
|
||||
<code>.dropdown-menu-dark</code> onto an existing <code>.dropdown-menu</code>. No changes are
|
||||
required to the dropdown items.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">Dark Dropdown</button>
|
||||
<ul class="dropdown-menu dropdown-menu-dark">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Dropdown Direction
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Trigger dropdown menus above elements by adding <code>.dropup</code>, dropdown menus at the left of
|
||||
the
|
||||
elements by adding <code>.dropstart</code> or dropdown menus at the right of the elements by adding
|
||||
<code>.dropend</code>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Drop Down
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Drop Up
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group dropend">
|
||||
<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Drop Right
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group dropstart">
|
||||
<button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Drop Left
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Dropdown Menu Items
|
||||
</h5>
|
||||
<p class="card-subtitle">Add <code>.active</code> to items in the dropdown to <strong>style them as
|
||||
active</strong>. To convey the active state to assistive technologies, use the
|
||||
<code>aria-current</code> attribute — using the <code>page</code> value for the current page, or
|
||||
<code>true</code> for the current item in a set.
|
||||
</p>
|
||||
<p class="card-subtitle">Add <code>.disabled</code> to items in the dropdown to <strong>style them as
|
||||
disabled</strong>.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<ul class="dropdown-menu show block position-static">
|
||||
<li><a class="dropdown-item" href="#">Regular link</a></li>
|
||||
<li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another link</a></li>
|
||||
</ul>
|
||||
|
||||
<ul class="dropdown-menu show block position-static">
|
||||
<li><a class="dropdown-item" href="#">Regular link</a></li>
|
||||
<li><a class="dropdown-item disabled" href="#" aria-current="true">Active link</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Dropdown options
|
||||
</h5>
|
||||
<p class="card-subtitle">Use <code>data-bs-offset</code> or <code>data-bs-reference</code> to change
|
||||
the location of the dropdown.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-expanded="false" data-bs-offset="10,20">
|
||||
Offset
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary">Reference</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
|
||||
data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Auto close behavior
|
||||
</h5>
|
||||
<p class="card-subtitle">By default, the dropdown menu is closed when clicking inside or outside the
|
||||
dropdown menu. You can use the <code>autoClose</code> option to change this behavior of the
|
||||
dropdown.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
||||
data-bs-auto-close="true" aria-expanded="false">
|
||||
Default dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
||||
data-bs-auto-close="inside" aria-expanded="false">
|
||||
Clickable outside
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
||||
data-bs-auto-close="outside" aria-expanded="false">
|
||||
Clickable inside
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
||||
data-bs-auto-close="false" aria-expanded="false">
|
||||
Manual close
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Menu Content
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Add a header to label sections of actions in any dropdown menu.</p>
|
||||
<p>Separate groups of related menu items with a divider.</p>
|
||||
<p>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>
|
||||
<p>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>
|
||||
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown Header
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-header">Dropdown header</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown Divider
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown Text
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-lg p-3">
|
||||
<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 class="dropdown">
|
||||
<button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown Menu Forms
|
||||
</button>
|
||||
<form class="dropdown-menu dropdown-lg p-3">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="exampleDropdownFormEmail">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleDropdownFormEmail"
|
||||
placeholder="email@example.com">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="exampleDropdownFormPassword">Password</label>
|
||||
<input type="password" class="form-control" id="exampleDropdownFormPassword"
|
||||
placeholder="Password">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<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>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
</div> <!-- end row -->
|
||||
<!-- end dropdown -->
|
||||
@endsection
|
||||
Reference in New Issue
Block a user