rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Add examples of forms in dropdown menus

Browse Source
This commit is contained in:
Mark Otto 2017-06-17 20:56:26 -07:00 committed by Mark Otto
parent 09019a8ecd
commit d23813988a
1 changed files with 49 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
docs/4.0/components/dropdowns.md
View File

@ -474,6 +474,55 @@ Separate groups of related menu items with a divider.
</div>
{% endexample %}
## Menu forms
Put a form within a dropdown menu, or make it into a dropdown menu, and use [margin or padding utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) to give it the negative space you require.
{% example html %}
<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-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Remember me
</label>
</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>
{% endexample %}
{% example html %}
<form class="dropdown-menu p-4">
<div class="form-group">
<label for="exampleDropdownFormEmail2">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
</div>
<div class="form-group">
<label for="exampleDropdownFormEmail2">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormEmail2" placeholder="Password">
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
{% endexample %}
## Disabled menu items
Add `.disabled` to items in the dropdown to **style them as disabled**.