Red de conocimiento informático - Computadora portátil - Cómo configurar dimensiones de contracción para navegación responsiva guiada

Cómo configurar dimensiones de contracción para navegación responsiva guiada

Para agregar funcionalidad de respuesta a la barra de navegación, el contenido que desea contraer debe estar encapsulado con la clase
.collapse, .navbar-collapse. La barra de navegación que se contrae es en realidad un botón con la clase .navbar-toggle y dos elementos de datos. El primero es el cambio de datos, que le dice a JavaScript qué hacer con el botón, y el segundo es el destino de datos, que le dice a qué elemento alternar. Tres elementos de la clase .icon-bar; crean los llamados botones de hamburguesa. Estos botones cambian a elementos dentro del .nav-collapse
. Para hacer todo esto, debes incluir el complemento Bootstrap Collapse.

Ejemplo de Bootstrap: barra de navegación responsiva< / título></p><p> < enlace href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"></p><p> <script src="/scripts/jquery.min . js"></script></p><p> <script src="/bootstrap/js/bootstrap.min.js"></script></p><p></head></p > <p><body></p><p><nav class=" barra de navegación navbar-default" role="navegación"></p><p> <div class="navbar-header"></ p ><p> <button type="button" class="navbar-toggle" data-toggle="collapse"</p><p> data-target="#example-navbar-collapse" </span > </p><p> </button></p><p> <a class="navbar-brand" href="#">W3Cschool</a></p><p> </div> </p><p> <.div class="collapse navbar-collapse" id="ejemplo-navbar-collapse"></p><p> <ul class="navbar-nav"></p><p> <li class="active"><a href="#">iOS</a></li></p><p> <li><a href="#">SVN</a > </li></p><p> <li class=" dropdown"></p><p> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> </p><p> Java <b class="caret"></b><p> </a></p><p> <ul class="menú desplegable"></p><p> <li><a href="#">jmetro</a></li></p><p> <li><a href="#" >jmetro</a></li>< / p><p> <li>& lt;a href="#">EJB</a></li></p><p> <li><a href="#">Informe Jasper</a a></li></p><p> <li class="divisor"></</p><p>li></p><p> <li><a href="#">Enlace dividido</a></li></p><p> <li class="divider"></li> </p><p> <li>/div& gt;</p><p> </nav></p><p> </body></p><p> </html></p> <p> Concéntrese en analizar las diferencias entre esta y la barra de navegación predeterminada: </p><p>1. En </p><p><div class="navbar-header"></p><p>. Se agregó un botón:</p><p><button type="button" class="navbar-toggle" data-toggle="collapse"</p><p> data-target="#example-navbar-colapso "></p><p> <span class="sr-only">Alternar navegación</span></p><p> <span class="icon-bar"></span></p > <p> <span class="icon-bar"></span></p><p> <span class="icon-bar"></span></p><p> </button > </p><p> Como se mencionó anteriormente, data-toggle se usa para decirle a JavaScript qué acciones deben realizarse en el botón, mientras que data-target indica a qué elemento cambiar. Tres <span>s con clase .icon-bar; crean lo que se llama un botón de hamburguesa.</p><p></p><p>.navbar-toggle {</p><p> posición: relativa;</p><p> flotador: derecha;</p><p> relleno: 9px 10px;</p> <p> margen superior: 8 px;</p><p> margen derecho: 15 px;</p><p> margen inferior: 8 px;</p><p> color de fondo: transparente;</ p> p><p> imagen-de-fondo: ninguna; </p><p> borde: 1px sólido transparente </p><p> imagen-borde: 0px sólido </p><p> radio-borde: 4px; </p><p>}</p><p>.navbar-toggle:focus {</p><p> contorno: 0;</p><p>}</p><p> .navbar -toggle .icon-bar {</p><p> pantalla: bloque;</p><p> ancho: 22px;</p><p> alto: 2px;</p><p> borde -radio: 1px;</p><p>}</p><p>.navbar-toggle .icon-bar + .icon-bar {</p><p> margen-top: 4px;</p ><p>}</p><p>@media (ancho mínimo: 768 px) {</p><p>.navbar-toggle {</p><p> visualización: ninguna;</p><p> }</p><p>}</p><p>.sr-only {< </p><p> posición: absoluta;</p><p> ancho: 1px;</p> <p> altura: 1px;</p><p> relleno: 0;</p><p> margen: -1px;</p><p> desbordamiento: oculto;</p><p> clip: 0; </p><p>}</p><p>.sr-only-focusable:activo,</p><p>.sr-only-focusable:focus {</p><p> posición : estático ; </p><p> ancho: automático;</p><p> alto: automático;</p><p> margen: 0;</p><p> desbordamiento: visible;</p ><p> clip: auto;</p><p>}</p><p>.navbar-toggle .icon-bar {< </p><p> display: bloque;</p><p> ancho: 22px;</p><p> alto: 2px;</p><p> radio del borde: 1px;</p><p>}</p><p>.navbar-toggle .icon -bar + .</p><p> margin-top: 4px;</p><p>}</p><p>.navbar-default .navbar-toggle .icon-bar {</p><p> color de fondo: #888;</p><p>}</p><p>.navbar-inverse .navbar-toggle .icon-bar {</p><p> color de fondo: #fff ;</p><p>}</p><p>2. La lista de elementos se agrega adicionalmente <div> </p><p><.</p><p>div class="collapse navbar-collapse" id="example-navbar-collapse"></p><p>.collapse {</p><p> mostrar: ninguno;</p><p>}</ p><p>. p> padding-right: 15px;</p><p> padding-left: 15px;</p><p> overflow-x: visible;</p><p> -webkit- desplazamiento de desbordamiento: táctil;</p><p> border-top.1px sólido transparente;</p><p> -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1) ;</p><p> box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); </p><p>}</p><p>@media (ancho mínimo: 768px) {</p><p> .navbar-collapse {</p><p> ancho: auto;</p><p> borde-superior: 0;</p><p> -webkit-box -shadow: ninguno;</p><p> box-shadow: ninguno;</p><p> }</p><p> .navbar-collapse.collapse {</p><p> display: bloquear !important;</p><p> altura: auto !important;</p><p> padding-bottom: 0;</p><p> desbordamiento: visible !important;</p><p> } </p><p>@media (ancho máximo: 480 px) y (orientación: horizontal) {</p><p> .navbar -fixed-top .navbar-collapse, </p><p> .navbar -fondo fijo .navbar-collapse {</p><p> altura máxima: 200px;</p><p> }</p><p>}</p><p>}</p> <p>}</p></div> </div> <div class="nextinfo"><a href="mae0c8ensw.html">上篇: Dirección de descarga de AutoDesk.Auto.CAD.2006</a> <a href="mae2aoqnz6.html">下篇: 09 Gala del Festival de Primavera Jay Chou</a></div> </div> </div> <div class="aside l_box"> <div class="sidebar diyModule"> <div class="side-title"><h3 class="function_t">Artículos populares</h3></div> <ul><li><a href="re6y3atjac.html">acer5750G, tarjeta gráfica GT540G, después de actualizar el controlador de la tarjeta gráfica, a menudo aparece una pantalla azul cuando juego, ¡y sucede lo mismo cuando reemplazo el controlador con una versión inferior!</a></li><li><a href="kpubfg5ii0.html">¿En qué ventana se pueden almacenar los materiales de After Effects?</a></li><li><a href="avplzorwfj.html">Material de contenido de periódico escrito a mano de ciencia y tecnología en papel 4k.</a></li><li><a href="qld5pnj2ij.html">Estamos en 2020 y mi mejor socio no es otro que Roewe i6. Gracias por conocerme.</a></li><li><a href="ffmyj2jyni.html">¡Charles & Keith "Dark Moss Green" es una nueva opción para los trabajadores de oficina! 8 bolsos pequeñoburgueses súper elegantes</a></li></ul> </div> </div> </div> <footer class="jz52bq footer_style"><p>copyright 2024 <a href="https://www.diannaozhishiwang.com/"><b>Red de conocimiento informático</b></a> All Rights Reserved.<script type="text/javascript" src="../css/tongji.js"></script></p></footer> </body> </html>