mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-02 16:04:07 +03:00
Code Activity

Remove custom example plugin. (#25784)

Browse Source
This commit is contained in:
m5o
2018-03-14 16:44:38 +01:00
committed by XhmikosR
parent 03b7f52e82
commit d01b4eb025
41 changed files with 923 additions and 695 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/4.0/components/dropdowns.md
+39 -26
View File
@@ -30,7 +30,7 @@ Wrap the dropdown's toggle (your button or link) and the dropdown menu within `.
Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here's how you can put them to work with either `<button>` elements:
{% example html %}
{% capture example %}
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
@@ -41,11 +41,12 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes.
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
And with `<a>` elements:
{% example html %}
{% capture example %}
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
@@ -57,7 +58,8 @@ And with `<a>` elements:
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
The best part is you can do this with any button variant, too:
@@ -539,7 +541,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the
Historically dropdown menu contents *had* to be links, but that's no longer the case with v4. Now you can optionally use `<button>` elements in your dropdowns instead of just `<a>`s.
{% example html %}
{% capture example %}
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
@@ -550,42 +552,46 @@ Historically dropdown menu contents *had* to be links, but that's no longer the
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
You can also create non-interactive dropdown items with `.dropdown-item-text`. Feel free to style further with custom CSS or text utilities.
{% example html %}
{% capture example %}
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<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>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Active
Add `.active` to items in the dropdown to **style them as active**.
{% example html %}
{% capture example %}
<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>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Disabled
Add `.disabled` to items in the dropdown to **style them as disabled**.
{% example html %}
{% capture example %}
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled" href="#">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Menu alignment
@@ -596,7 +602,7 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
{% endcapture %}
{% include callout.html content=callout type="info" %}
{% example html %}
{% capture example %}
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Right-aligned menu
@@ -607,7 +613,8 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Menu content
@@ -615,19 +622,20 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
Add a header to label sections of actions in any dropdown menu.
{% example html %}
{% capture example %}
<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>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Dividers
Separate groups of related menu items with a divider.
{% example html %}
{% capture example %}
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
@@ -635,13 +643,14 @@ Separate groups of related menu items with a divider.
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Text
Place any freeform text within a dropdown menu with text and use [spacing utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/). Note that you'll likely need additional sizing styles to constrain the menu width.
{% example html %}
{% capture example %}
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
<p>
Some example text that's free-flowing within the dropdown menu.
@@ -650,13 +659,14 @@ Place any freeform text within a dropdown menu with text and use [spacing utilit
And this is more example text.
</p>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### 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 %}
{% capture example %}
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="form-group">
@@ -679,9 +689,10 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar
<a class="dropdown-item" href="#">New around here? Sign up</a>
<a class="dropdown-item" href="#">Forgot password?</a>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% example html %}
{% capture example %}
<form class="dropdown-menu p-4">
<div class="form-group">
<label for="exampleDropdownFormEmail2">Email address</label>
@@ -699,13 +710,14 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Dropdown options
Use `data-offset` or `data-reference` to change the location of the dropdown.
{% example html %}
{% capture example %}
<div class="d-flex">
<div class="dropdown mr-1">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
@@ -731,7 +743,8 @@ Use `data-offset` or `data-reference` to change the location of the dropdown.
</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Usage