diff options
| author | Jonathan <[email protected]> | 2017-08-11 13:28:51 +0200 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-08-11 10:22:01 -0700 |
| commit | d9d9c4b6537fe22d355b85b0fe39879be4818b01 (patch) | |
| tree | 73588962659a3574c923c14424c4c950b8acb297 /docs | |
| parent | 53786e7a814bedf72c8a41d1ecf3698a65849efd (diff) | |
| download | bootstrap-d9d9c4b6537fe22d355b85b0fe39879be4818b01.tar.xz bootstrap-d9d9c4b6537fe22d355b85b0fe39879be4818b01.zip | |
Use input type search for search fields
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/4.0/components/navbar.md | 18 |
1 files changed, 9 insertions, 9 deletions
diff --git a/docs/4.0/components/navbar.md b/docs/4.0/components/navbar.md index d3d005e52..3e47dc7e8 100644 --- a/docs/4.0/components/navbar.md +++ b/docs/4.0/components/navbar.md @@ -51,7 +51,7 @@ Here's an example of all the sub-components included in a responsive light-theme </li> </ul> <form class="form-inline my-2 my-lg-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> @@ -186,7 +186,7 @@ Place various form controls and components within a navbar with `.form-inline`. {% example html %} <nav class="navbar navbar-light bg-light"> <form class="form-inline"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </nav> @@ -198,7 +198,7 @@ Align the contents of your inline forms with utilities as needed. <nav class="navbar navbar-light bg-light justify-content-between"> <a class="navbar-brand">Navbar</a> <form class="form-inline"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </nav> @@ -294,7 +294,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl </li> </ul> <form class="form-inline"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button> </form> </div> @@ -322,7 +322,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl </li> </ul> <form class="form-inline"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">Search</button> </form> </div> @@ -350,7 +350,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl </li> </ul> <form class="form-inline"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button> </form> </div> @@ -452,7 +452,7 @@ With no `.navbar-brand` shown in lowest breakpoint: </li> </ul> <form class="form-inline my-2 my-lg-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> @@ -481,7 +481,7 @@ With a brand name shown on the left and toggler on the right: </li> </ul> <form class="form-inline my-2 my-lg-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search"> + <input class="form-control mr-sm-2" type="search" placeholder="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> @@ -510,7 +510,7 @@ With a toggler on the left and brand name on the right: </li> </ul> <form class="form-inline my-2 my-lg-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> |