mirror of https://github.com/twbs/bootstrap.git
				
				
				
			Docs: offcanvas toggles accessibility fixes, fully hide layout template input
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
This commit is contained in:
		
							parent
							
								
									dbdfab8a95
								
							
						
					
					
						commit
						0d64dc6dfc
					
				|  | @ -682,7 +682,7 @@ In the example below, to create an offcanvas navbar that is always collapsed acr | |||
| <nav class="navbar bg-body-tertiary fixed-top"> | ||||
|   <div class="container-fluid"> | ||||
|     <a class="navbar-brand" href="#">Offcanvas navbar</a> | ||||
|     <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar"> | ||||
|     <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation"> | ||||
|       <span class="navbar-toggler-icon"></span> | ||||
|     </button> | ||||
|     <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel"> | ||||
|  | @ -727,7 +727,7 @@ To create an offcanvas navbar that expands into a normal navbar at a specific br | |||
| ```html | ||||
| <nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top"> | ||||
|   <a class="navbar-brand" href="#">Offcanvas navbar</a> | ||||
|   <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg"> | ||||
|   <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg" aria-label="Toggle navigation"> | ||||
|     <span class="navbar-toggler-icon"></span> | ||||
|   </button> | ||||
|   <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel"> | ||||
|  | @ -742,7 +742,7 @@ When using offcanvas in a dark navbar, be aware that you may need to have a dark | |||
| <nav class="navbar navbar-dark bg-dark fixed-top"> | ||||
|   <div class="container-fluid"> | ||||
|     <a class="navbar-brand" href="#">Offcanvas dark navbar</a> | ||||
|     <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar"> | ||||
|     <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation"> | ||||
|       <span class="navbar-toggler-icon"></span> | ||||
|     </button> | ||||
|     <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel"> | ||||
|  |  | |||
|  | @ -9,7 +9,7 @@ extra_css: | |||
|   <nav class="navbar navbar-dark bg-dark" aria-label="Dark offcanvas navbar"> | ||||
|     <div class="container-fluid"> | ||||
|       <a class="navbar-brand" href="#">Dark offcanvas navbar</a> | ||||
|       <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarDark" aria-controls="offcanvasNavbarDark"> | ||||
|       <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarDark" aria-controls="offcanvasNavbarDark" aria-label="Toggle navigation"> | ||||
|         <span class="navbar-toggler-icon"></span> | ||||
|       </button> | ||||
|       <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbarDark" aria-labelledby="offcanvasNavbarDarkLabel"> | ||||
|  | @ -51,7 +51,7 @@ extra_css: | |||
|   <nav class="navbar bg-body-tertiary" aria-label="Light offcanvas navbar"> | ||||
|     <div class="container-fluid"> | ||||
|       <a class="navbar-brand" href="#">Light offcanvas navbar</a> | ||||
|       <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarLight" aria-controls="offcanvasNavbarLight"> | ||||
|       <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarLight" aria-controls="offcanvasNavbarLight" aria-label="Toggle navigation"> | ||||
|         <span class="navbar-toggler-icon"></span> | ||||
|       </button> | ||||
|       <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbarLight" aria-labelledby="offcanvasNavbarLightLabel"> | ||||
|  | @ -93,7 +93,7 @@ extra_css: | |||
|   <nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Offcanvas navbar large"> | ||||
|     <div class="container-fluid"> | ||||
|       <a class="navbar-brand" href="#">Responsive offcanvas navbar</a> | ||||
|       <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar2" aria-controls="offcanvasNavbar2"> | ||||
|       <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar2" aria-controls="offcanvasNavbar2" aria-label="Toggle navigation"> | ||||
|         <span class="navbar-toggler-icon"></span> | ||||
|       </button> | ||||
|       <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbar2" aria-labelledby="offcanvasNavbar2Label"> | ||||
|  |  | |||
|  | @ -68,5 +68,5 @@ | |||
|   {{ range .Page.Params.extra_js -}} | ||||
|     <script{{ with .async }} async{{ end }} src="{{ .src }}"></script> | ||||
|   {{- end -}} | ||||
|   <div class="position-fixed"><input type="text" tabindex="-1"></div> | ||||
|   <div class="position-fixed" aria-hidden="true"><input type="text" tabindex="-1"></div> | ||||
| {{ end }} | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue