494 lines
15 KiB
HTML
494 lines
15 KiB
HTML
|
<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-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<span class="sr-only">Toggle Dropdown</span>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
<div class="btn-group">
|
||
|
|
<button type="button" class="btn btn-outline-primary">Primary outline</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<span class="sr-only">Toggle Dropdown</span>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br /><br />
|
||
|
|
|
||
|
|
<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-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<span class="sr-only">Toggle Dropdown</span>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
<div class="btn-group">
|
||
|
|
<button type="button" class="btn btn-outline-secondary">
|
||
|
|
Secondary outline
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<span class="sr-only">Toggle Dropdown</span>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br /><br />
|
||
|
|
|
||
|
|
<div class="btn-group">
|
||
|
|
<button type="button" class="btn btn-primary" disabled>Disabled</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
|
||
|
|
disabled
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<span class="sr-only">Toggle Dropdown</span>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
<div class="btn-group">
|
||
|
|
<button type="button" class="btn btn-outline-primary" disabled>
|
||
|
|
Disabled outline
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split"
|
||
|
|
disabled
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<span class="sr-only">Toggle Dropdown</span>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br /><br />
|
||
|
|
|
||
|
|
<div class="btn-group dropup">
|
||
|
|
<button type="button" class="btn btn-primary">Primary UP</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<span class="sr-only">Toggle Dropdown</span>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
<div class="btn-group dropup">
|
||
|
|
<button type="button" class="btn btn-outline-primary">
|
||
|
|
Primary outline UP
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<span class="sr-only">Toggle Dropdown</span>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br /><br />
|
||
|
|
|
||
|
|
<div class="btn-group">
|
||
|
|
<button type="button" class="btn btn-sm btn-primary">
|
||
|
|
<i class="material-icons">ac_unit</i> Small group
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<span class="sr-only">Toggle Dropdown</span>
|
||
|
|
</button>
|
||
|
|
<div class="dropdown-menu menu-sm">
|
||
|
|
<a class="dropdown-item" href="#">
|
||
|
|
<i class="material-icons">ac_unit</i>
|
||
|
|
Action
|
||
|
|
</a>
|
||
|
|
<a class="dropdown-item" href="#">Another action</a>
|
||
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="btn-group">
|
||
|
|
<button type="button" class="btn btn-primary">
|
||
|
|
<i class="material-icons">ac_unit</i> Normal group
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<span class="sr-only">Toggle Dropdown</span>
|
||
|
|
</button>
|
||
|
|
<div class="dropdown-menu">
|
||
|
|
<a class="dropdown-item" href="#">
|
||
|
|
<i class="material-icons">ac_unit</i>
|
||
|
|
Action
|
||
|
|
</a>
|
||
|
|
<a class="dropdown-item" href="#">Another action</a>
|
||
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="btn-group">
|
||
|
|
<button type="button" class="btn btn-lg btn-primary">
|
||
|
|
<i class="material-icons">ac_unit</i> Large group
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-lg btn-primary dropdown-toggle dropdown-toggle-split"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<span class="sr-only">Toggle Dropdown</span>
|
||
|
|
</button>
|
||
|
|
<div class="dropdown-menu">
|
||
|
|
<a class="dropdown-item" href="#">
|
||
|
|
<i class="material-icons">ac_unit</i>
|
||
|
|
Action
|
||
|
|
</a>
|
||
|
|
<a class="dropdown-item" href="#">Another action</a>
|
||
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="btn-group">
|
||
|
|
<button type="button" class="btn btn-lg btn-secondary">Large group</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<span class="sr-only">Toggle Dropdown</span>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
<div class="btn-group">
|
||
|
|
<button type="button" class="btn btn-secondary">Normal group</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<span class="sr-only">Toggle Dropdown</span>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
<div class="btn-group">
|
||
|
|
<button type="button" class="btn btn-sm btn-secondary">Small group</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<span class="sr-only">Toggle Dropdown</span>
|
||
|
|
</button>
|
||
|
|
<div class="dropdown-menu menu-sm">
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<br /><br />
|
||
|
|
|
||
|
|
<div class="btn-group">
|
||
|
|
<button type="button" class="btn btn-sm btn-outline-primary">
|
||
|
|
Small group
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-sm btn-outline-primary dropdown-toggle dropdown-toggle-split"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<span class="sr-only">Toggle Dropdown</span>
|
||
|
|
</button>
|
||
|
|
<div class="dropdown-menu menu-sm">
|
||
|
|
<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 class="btn-group">
|
||
|
|
<button type="button" class="btn btn-outline-primary">Normal group</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<span class="sr-only">Toggle Dropdown</span>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
<div class="btn-group">
|
||
|
|
<button type="button" class="btn btn-lg btn-outline-primary">
|
||
|
|
Large group
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-lg btn-outline-primary dropdown-toggle dropdown-toggle-split"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<span class="sr-only">Toggle Dropdown</span>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
<div class="btn-group">
|
||
|
|
<button type="button" class="btn btn-lg btn-outline-secondary">
|
||
|
|
Large group
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-lg btn-outline-secondary dropdown-toggle dropdown-toggle-split"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<span class="sr-only">Toggle Dropdown</span>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
<div class="btn-group">
|
||
|
|
<button type="button" class="btn btn-outline-secondary">Normal group</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<span class="sr-only">Toggle Dropdown</span>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
<div class="btn-group">
|
||
|
|
<button type="button" class="btn btn-sm btn-outline-secondary">
|
||
|
|
Small group
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-sm btn-outline-secondary dropdown-toggle dropdown-toggle-split"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<span class="sr-only">Toggle Dropdown</span>
|
||
|
|
</button>
|
||
|
|
<div class="dropdown-menu menu-sm">
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<br /><br />
|
||
|
|
|
||
|
|
<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-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<span class="sr-only">Toggle Dropdown</span>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
<div class="btn-group">
|
||
|
|
<button type="button" class="btn btn-outline-success">Success</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-outline-success dropdown-toggle dropdown-toggle-split"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<span class="sr-only">Toggle Dropdown</span>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="btn-group">
|
||
|
|
<button type="button" class="btn btn-danger">Danger</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-danger dropdown-toggle dropdown-toggle-split"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<span class="sr-only">Toggle Dropdown</span>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
<div class="btn-group">
|
||
|
|
<button type="button" class="btn btn-outline-danger">Danger</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<span class="sr-only">Toggle Dropdown</span>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="btn-group">
|
||
|
|
<button type="button" class="btn btn-warning">Warning</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-warning dropdown-toggle dropdown-toggle-split"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<span class="sr-only">Toggle Dropdown</span>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
<div class="btn-group">
|
||
|
|
<button type="button" class="btn btn-outline-warning">Warning</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-outline-warning dropdown-toggle dropdown-toggle-split"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<span class="sr-only">Toggle Dropdown</span>
|
||
|
|
</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>
|
||
|
|
</div>
|