diff options
| author | m5o <[email protected]> | 2018-03-14 16:44:38 +0100 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2018-03-14 17:44:38 +0200 |
| commit | d01b4eb02560ba67b61b1b2c0496e9f8281c154d (patch) | |
| tree | 9c32c81f44be15d729fc8351360921aa1b42e572 /docs/4.0/components/input-group.md | |
| parent | 03b7f52e820c80e244479c59c0920c541ee1277b (diff) | |
| download | bootstrap-d01b4eb02560ba67b61b1b2c0496e9f8281c154d.tar.xz bootstrap-d01b4eb02560ba67b61b1b2c0496e9f8281c154d.zip | |
Remove custom example plugin. (#25784)
Diffstat (limited to 'docs/4.0/components/input-group.md')
| -rw-r--r-- | docs/4.0/components/input-group.md | 50 |
1 files changed, 30 insertions, 20 deletions
diff --git a/docs/4.0/components/input-group.md b/docs/4.0/components/input-group.md index 8018ea42a..670e563ec 100644 --- a/docs/4.0/components/input-group.md +++ b/docs/4.0/components/input-group.md @@ -10,7 +10,7 @@ toc: true Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple form-controls in a single input group** and `<label>`s must come outside the input group. -{% example html %} +{% capture example %} <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1">@</span> @@ -49,7 +49,8 @@ Place one add-on or button on either side of an input. You may also place one on </div> <textarea class="form-control" aria-label="With textarea"></textarea> </div> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Sizing @@ -57,7 +58,7 @@ Add the relative form sizing classes to the `.input-group` itself and contents w **Sizing on the individual input group elements isn't supported.** -{% example html %} +{% capture example %} <div class="input-group input-group-sm mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-sm">Small</span> @@ -78,13 +79,14 @@ Add the relative form sizing classes to the `.input-group` itself and contents w </div> <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm"> </div> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Checkboxes and radios Place any checkbox or radio option within an input group's addon instead of text. -{% example html %} +{% capture example %} <div class="input-group mb-3"> <div class="input-group-prepend"> <div class="input-group-text"> @@ -102,13 +104,14 @@ Place any checkbox or radio option within an input group's addon instead of text </div> <input type="text" class="form-control" aria-label="Text input with radio button"> </div> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Multiple inputs While multiple `<input>`s are supported visually, validation styles are only available for input groups with a single `<input>`. -{% example html %} +{% capture example %} <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="">First and last name</span> @@ -116,13 +119,14 @@ While multiple `<input>`s are supported visually, validation styles are only ava <input type="text" class="form-control"> <input type="text" class="form-control"> </div> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Multiple addons Multiple add-ons are supported and can be mixed with checkbox and radio input versions. -{% example html %} +{% capture example %} <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">$</span> @@ -138,11 +142,12 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve <span class="input-group-text">0.00</span> </div> </div> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Button addons -{% example html %} +{% capture example %} <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary" type="button">Button</button> @@ -172,11 +177,12 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve <button class="btn btn-outline-secondary" type="button">Button</button> </div> </div> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Buttons with dropdowns -{% example html %} +{% capture example %} <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button> @@ -204,11 +210,12 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve </div> </div> </div> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Segmented buttons -{% example html %} +{% capture example %} <div class="input-group mb-3"> <div class="input-group-prepend"> <button type="button" class="btn btn-outline-secondary">Action</button> @@ -242,7 +249,8 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve </div> </div> </div> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Custom forms @@ -250,7 +258,7 @@ Input groups include support for custom selects and custom file inputs. Browser ### Custom select -{% example html %} +{% capture example %} <div class="input-group mb-3"> <div class="input-group-prepend"> <label class="input-group-text" for="inputGroupSelect01">Options</label> @@ -298,11 +306,12 @@ Input groups include support for custom selects and custom file inputs. Browser <button class="btn btn-outline-secondary" type="button">Button</button> </div> </div> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} ### Custom file input -{% example html %} +{% capture example %} <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Upload</span> @@ -342,7 +351,8 @@ Input groups include support for custom selects and custom file inputs. Browser <button class="btn btn-outline-secondary" type="button">Button</button> </div> </div> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Accessibility |
