Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F92927970
dropdown.html
No One
Temporary
Actions
Download File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Subscribers
None
File Metadata
Details
File Info
Storage
Attached
Created
Sun, Nov 24, 21:35
Size
10 KB
Mime Type
text/html
Expires
Tue, Nov 26, 21:35 (2 d)
Engine
blob
Format
Raw Data
Handle
22497672
Attached To
rCOSTCALC Cost Calculator Source code
dropdown.html
View Options
<!doctype html>
<html
lang=
"en"
>
<head>
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1, shrink-to-fit=no"
>
<link
rel=
"stylesheet"
href=
"../../../dist/css/bootstrap.min.css"
>
<title>
Dropdown
</title>
</head>
<body>
<div
class=
"container"
>
<h1>
Dropdown
<small>
Bootstrap Visual Test
</small></h1>
<nav
class=
"navbar navbar-expand-md navbar-light bg-light"
>
<a
class=
"navbar-brand"
href=
"#"
>
Navbar
</a>
<button
class=
"navbar-toggler"
type=
"button"
data-toggle=
"collapse"
data-target=
"#navbarResponsive"
aria-controls=
"navbarResponsive"
aria-expanded=
"false"
aria-label=
"Toggle navigation"
>
<span
class=
"navbar-toggler-icon"
></span>
</button>
<div
class=
"collapse navbar-collapse"
id=
"navbarResponsive"
>
<ul
class=
"navbar-nav"
>
<li
class=
"nav-item active"
>
<a
class=
"nav-link"
href=
"#"
>
Home
<span
class=
"sr-only"
>
(current)
</span></a>
</li>
<li
class=
"nav-item"
>
<a
class=
"nav-link"
href=
"#"
>
Link
</a>
</li>
<li
class=
"nav-item"
>
<a
class=
"nav-link"
href=
"#"
>
Link
</a>
</li>
<li
class=
"nav-item dropdown"
>
<a
class=
"nav-link dropdown-toggle"
href=
"#"
id=
"dropdown"
data-toggle=
"dropdown"
aria-haspopup=
"true"
aria-expanded=
"false"
>
Dropdown
</a>
<div
class=
"dropdown-menu"
aria-labelledby=
"dropdown"
>
<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>
</li>
</ul>
</div>
</nav>
<ul
class=
"nav nav-pills mt-3"
>
<li
class=
"nav-item"
>
<a
class=
"nav-link active"
href=
"#"
>
Active
</a>
</li>
<li
class=
"nav-item"
>
<a
class=
"nav-link"
href=
"#"
>
Link
</a>
</li>
<li
class=
"nav-item"
>
<a
class=
"nav-link"
href=
"#"
>
Link
</a>
</li>
<li
class=
"nav-item dropdown"
>
<a
class=
"nav-link dropdown-toggle"
href=
"#"
id=
"dropdown2"
data-toggle=
"dropdown"
aria-haspopup=
"true"
aria-expanded=
"false"
>
Dropdown
</a>
<div
class=
"dropdown-menu"
aria-labelledby=
"dropdown2"
>
<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>
</li>
</ul>
<div
class=
"row"
>
<div
class=
"col-sm-12 mt-4"
>
<div
class=
"btn-group dropup"
>
<button
type=
"button"
class=
"btn btn-secondary"
>
Dropup split
</button>
<button
type=
"button"
class=
"btn btn-secondary dropdown-toggle"
data-toggle=
"dropdown"
aria-haspopup=
"true"
aria-expanded=
"false"
>
<span
class=
"sr-only"
>
Dropup split
</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-secondary dropdown-toggle"
data-toggle=
"dropdown"
aria-haspopup=
"true"
aria-expanded=
"false"
>
Dropup
</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 dropdown-toggle"
data-toggle=
"dropdown"
aria-haspopup=
"true"
aria-expanded=
"false"
>
This dropdown's menu is right-aligned
</button>
<div
class=
"dropdown-menu dropdown-menu-right"
>
<button
class=
"dropdown-item"
type=
"button"
>
Action
</button>
<button
class=
"dropdown-item"
type=
"button"
>
Another action
</button>
<button
class=
"dropdown-item"
type=
"button"
>
Something else here
</button>
</div>
</div>
</div>
<div
class=
"col-sm-12 mt-4"
>
<div
class=
"btn-group dropup"
role=
"group"
>
<a
href=
"#"
class=
"btn btn-secondary"
>
Dropup split align right
</a>
<button
type=
"button"
id=
"dropdown-page-subheader-button-3"
class=
"btn btn-secondary dropdown-toggle dropdown-toggle-split"
data-toggle=
"dropdown"
aria-haspopup=
"true"
aria-expanded=
"false"
>
<span
class=
"sr-only"
>
Product actions
</span>
</button>
<div
class=
"dropdown-menu dropdown-menu-right"
>
<button
class=
"dropdown-item"
type=
"button"
>
Action
</button>
<button
class=
"dropdown-item"
type=
"button"
>
Another action
</button>
<button
class=
"dropdown-item"
type=
"button"
>
Something else here with a long text
</button>
</div>
</div>
<div
class=
"btn-group dropup"
>
<button
type=
"button"
class=
"btn btn-secondary dropdown-toggle"
data-toggle=
"dropdown"
aria-haspopup=
"true"
aria-expanded=
"false"
>
Dropup align right
</button>
<div
class=
"dropdown-menu dropdown-menu-right"
>
<button
class=
"dropdown-item"
type=
"button"
>
Action
</button>
<button
class=
"dropdown-item"
type=
"button"
>
Another action
</button>
<button
class=
"dropdown-item"
type=
"button"
>
Something else here with a long text
</button>
</div>
</div>
</div>
<div
class=
"col-sm-12 mt-4"
>
<div
class=
"btn-group dropright"
role=
"group"
>
<a
href=
"#"
class=
"btn btn-secondary"
>
Dropright split
</a>
<button
type=
"button"
id=
"dropdown-page-subheader-button-4"
class=
"btn btn-secondary dropdown-toggle dropdown-toggle-split"
data-toggle=
"dropdown"
aria-haspopup=
"true"
aria-expanded=
"false"
>
<span
class=
"sr-only"
>
Product actions
</span>
</button>
<div
class=
"dropdown-menu"
>
<button
class=
"dropdown-item"
type=
"button"
>
Action
</button>
<button
class=
"dropdown-item"
type=
"button"
>
Another action
</button>
<button
class=
"dropdown-item"
type=
"button"
>
Something else here with a long text
</button>
</div>
</div>
<div
class=
"btn-group dropright"
>
<button
class=
"btn btn-secondary dropdown-toggle"
type=
"button"
id=
"dropdownMenuRight"
data-toggle=
"dropdown"
aria-haspopup=
"true"
aria-expanded=
"false"
>
Dropright
</button>
<div
class=
"dropdown-menu"
aria-labelledby=
"dropdownMenuRight"
>
<button
class=
"dropdown-item"
type=
"button"
>
Action
</button>
<button
class=
"dropdown-item"
type=
"button"
>
Another action
</button>
<button
class=
"dropdown-item"
type=
"button"
>
Something else here
</button>
</div>
</div>
<!-- dropleft -->
<div
class=
"btn-group dropleft"
role=
"group"
>
<a
href=
"#"
class=
"btn btn-secondary"
>
Dropleft split
</a>
<button
type=
"button"
id=
"dropdown-page-subheader-button-5"
class=
"btn btn-secondary dropdown-toggle dropdown-toggle-split"
data-toggle=
"dropdown"
aria-haspopup=
"true"
aria-expanded=
"false"
>
<span
class=
"sr-only"
>
Product actions
</span>
</button>
<div
class=
"dropdown-menu"
>
<button
class=
"dropdown-item"
type=
"button"
>
Action
</button>
<button
class=
"dropdown-item"
type=
"button"
>
Another action
</button>
<button
class=
"dropdown-item"
type=
"button"
>
Something else here with a long text
</button>
</div>
</div>
<div
class=
"btn-group dropleft"
>
<button
class=
"btn btn-secondary dropdown-toggle"
type=
"button"
id=
"dropleftMenu"
data-toggle=
"dropdown"
aria-haspopup=
"true"
aria-expanded=
"false"
>
Dropleft
</button>
<div
class=
"dropdown-menu"
aria-labelledby=
"dropleftMenu"
>
<button
class=
"dropdown-item"
type=
"button"
>
Action
</button>
<button
class=
"dropdown-item"
type=
"button"
>
Another action
</button>
<button
class=
"dropdown-item"
type=
"button"
>
Something else here
</button>
</div>
</div>
</div>
</div>
<div
class=
"row"
>
<div
class=
"col-sm-3 mt-4"
>
<div
class=
"btn-group dropdown"
>
<button
type=
"button"
class=
"btn btn-secondary dropdown-toggle"
data-toggle=
"dropdown"
data-offset=
"10,20"
>
Dropdown offset
</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>
<div
class=
"col-sm-3 mt-4"
>
<div
class=
"btn-group dropdown"
>
<button
type=
"button"
class=
"btn btn-secondary"
>
Dropdown reference
</button>
<button
type=
"button"
class=
"btn btn-secondary dropdown-toggle"
data-toggle=
"dropdown"
aria-haspopup=
"true"
aria-expanded=
"false"
data-reference=
"parent"
>
<span
class=
"sr-only"
>
Dropdown split
</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>
<div
class=
"col-sm-3 mt-4"
>
<div
class=
"dropdown"
>
<button
class=
"btn btn-secondary dropdown-toggle"
type=
"button"
id=
"dropdownMenuButton"
data-toggle=
"dropdown"
data-display=
"static"
aria-haspopup=
"true"
aria-expanded=
"false"
>
Dropdown menu without Popper.js
</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>
</div>
<script
src=
"../../../node_modules/jquery/dist/jquery.slim.min.js"
></script>
<script
src=
"../../../node_modules/popper.js/dist/umd/popper.min.js"
></script>
<script
src=
"../../dist/util.js"
></script>
<script
src=
"../../dist/dropdown.js"
></script>
<script
src=
"../../dist/collapse.js"
></script>
</body>
</html>
Event Timeline
Log In to Comment