css - personalizar - menu con bootstrap
¿Cómo cambiar el umbral de colapso de la barra de navegación usando Twitter bootstrap-responsive? (13)
Estoy usando Twitter Bootstrap 2.0.1 en un proyecto de Rails 3.1.2, implementado con bootstrap-sass. Estoy cargando tanto el archivo bootstrap.css como el archivo bootstrap-responsive.css , así como también el archivo bootstrap-collapse.js Javascript.
Tengo un diseño fluido con una barra de navegación similar al example . Esto sigue las instrucciones de "variación receptiva" de la barra de navegación here . Funciona bien: si la página es más estrecha que alrededor de 940px, la barra de navegación colapsa y muestra un "botón" en el que puedo hacer clic para expandir.
Sin embargo, mi barra de navegación se ve bien hasta alrededor de 550 píxeles de ancho, es decir, no necesita colapsarse a menos que la pantalla sea muy estrecha.
¿Cómo le digo a Bootstrap que solo contraiga la barra de navegación si la pantalla tiene menos de 550 píxeles de ancho?
Tenga en cuenta que en este punto no quiero modificar los otros comportamientos receptivos, por ejemplo, apilar elementos en lugar de mostrarlos uno al lado del otro.
Bootstrap 3.x
usando LESS , puede cambiar el valor de @screen-small para enfocar su tamaño mínimo
ejemplo: @screen-small: 600px;
Utilizo esto para cambiar solo al modo "dispositivo pequeño" una vez que el ancho es inferior a 600 px
Bootstrap> 2.1 && <3
- Usa la versión menos de bootstrap
- Cambie la variable @navbarCollapseWidth en variables.less
- Recompilar
Actualización 2013: la manera más fácil
- Visita http://getbootstrap.com/customize/#less-variables
- Cambiar @navbarCollapseWidth en el formfield
- Haga clic en "Compilar y descargar".
(THX a Archonic a través de un comentario)
Actualización 2014: Bootstrap 3.1.1 y 3.2 (incluso lo agregaron a la documentación )
Si está customizing o reemplazando / editando variables .less , está buscando:
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
A partir de agosto de 2013, se puede encontrar una página de Bootstrap 3 "Personalizar y descargar" en customizing
Con Bootstrap 3, la variable relevante es @ grid-float-breakpoint.
La siguiente página de desbordamiento de pila tiene detalles adicionales: Bootstrap 3 Navbar Collapse
Aquí está mi código (Toda la otra solución mostró una barra de desplazamiento funky cuando la barra de navegación se cayó, así que edité el código para que no lo hiciera). No pude publicar en otra respuesta, así que lo haré aquí para que otros lo encuentren. Estoy usando raíles para hacer esto con Bootstrap 3.0.
assets / stylesheets / framework y overrides pegar esto: (Ajustar el ancho máximo a cualquier valor para lograr su objetivo.)
@media (max-width: 2500px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-collapse.collapse.in {
display: block!important;
}
.navbar-nav {
float: none!important;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
Creé un archivo SCSS separado que enumeró todos los parciales que necesita el programa de arranque, de esa manera puedo activar y desactivar los parciales dependiendo de lo que nuestro sitio necesite. De esta manera, puedo anular la variable de punto de interrupción fácilmente. Esto es lo que obtuve:
// Core variables and mixins
$grid-float-breakpoint: 991px;
@import "bootstrap/variables";
@import "bootstrap/mixins";
// Reset
@import "bootstrap/normalize";
//@import "bootstrap/print";
// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
//@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";
// Components
@import "bootstrap/component-animations";
@import "bootstrap/glyphicons";
@import "bootstrap/dropdowns";
//@import "bootstrap/button-groups";
//@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
//@import "bootstrap/jumbotron";
//@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
//@import "bootstrap/progress-bars";
//@import "bootstrap/media";
//@import "bootstrap/list-group";
@import "bootstrap/panels";
//@import "bootstrap/wells";
@import "bootstrap/close";
// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
//@import "bootstrap/popovers";
//@import "bootstrap/carousel";
// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";
Está buscando la línea 239 de bootstrap-responsive.css
@media (max-width: 979px) {...}
Donde el valor de max-width máximo desencadena la navegación receptiva. Cambie a 550px o menos y debería cambiar el tamaño fino.
Este es un gran ejemplo de dónde podría estar utilizando la versión LESS de los archivos CSS de Bootstrap. Cómo hacer esto está abajo.
Aún mejor sería enviar esto como una solicitud de extracción en Github para que todos puedan beneficiarse y su "código personalizado" sería, con suerte, parte de Bootstrap en el futuro.
- Agregue una variable a
variables.lessque especifique cuándo colapsar la barra de navegación. Algo como:@navCollapseWidth: 979px - Luego modifique
responsive-navbar.less...- Subir cambio superior
@media (max-width: 979px)a@media (max-width: @navCollapseWidth) - En la parte inferior, cambie
@media (min-width: 980px)a@media (max-width: @navCollapseWidth - 1)
- Subir cambio superior
Por supuesto ... tendrías que compilar LESS usando uno de los métodos sugeridos .
Puede establecer una nueva consulta @media para soltar los elementos de la barra de navegación como mejor le parezca, todo lo que tiene que hacer es restablecer el primero para acomodar su nueva consulta con el ancho de gota deseado. Toma esto por ejemplo:
CSS
/** Modified Responsive CSS **/
@media (max-width: 979px) {
.btn-navbar {
display: none;
}
.navbar .nav-collapse {
clear: none;
}
.nav-collapse {
height: auto;
overflow: auto;
}
.navbar .nav {
float: left;
margin: 0 10px 0 0;
}
.navbar .brand {
margin-left: -20px;
padding: 8px 20px 12px;
}
.navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
display: block;
}
.navbar .nav > li > a, .navbar .dropdown-menu a {
border-radius: 0;
color: #999999;
font-weight: normal;
padding: 10px 10px 11px;
}
.navbar .nav > li {
float: left;
}
.navbar .dropdown-menu {
background-clip: padding-box;
background-color: #FFFFFF;
border-color: rgba(0, 0, 0, 0.2);
border-radius: 0 0 5px 5px;
border-style: solid;
border-width: 1px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
display: none;
float: left;
left: 0;
list-style: none outside none;
margin: 0;
min-width: 160px;
padding: 4px 0;
position: absolute;
top: 100%;
z-index: 1000;
}
.navbar-form, .navbar-search {
border:none;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
float: left;
margin-bottom: 0;
margin-top:6px;
padding: 9px 15px;
}
.navbar .nav.pull-right {
float: right;
margin-left: auto;
}
}
@media (max-width: 550px) {
.btn-navbar {
display: block;
}
.navbar .nav-collapse {
clear: left;
}
.nav-collapse {
height: 0;
overflow: hidden;
}
.navbar .nav {
float: none;
margin: 0 0 9px;
}
.navbar .brand {
margin: 0 0 0 -5px;
padding-left: 10px;
padding-right: 10px;
}
.navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
display: none;
}
.navbar .nav > li > a, .navbar .dropdown-menu a {
border-radius: 3px 3px 3px 3px;
color: #999999;
font-weight: bold;
padding: 6px 15px;
}
.navbar .nav > li {
float: none;
}
.navbar .dropdown-menu {
background-color: transparent;
border: medium none;
border-radius: 0 0 0 0;
box-shadow: none;
display: block;
float: none;
left: auto;
margin: 0 15px;
max-width: none;
padding: 0;
position: static;
top: auto;
}
.navbar-form, .navbar-search {
border-bottom: 1px solid #222222;
border-top: 1px solid #222222;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
float: none;
margin: 9px 0;
padding: 9px 15px;
}
.navbar .nav.pull-right {
float: none;
margin-left: 0;
}
}
En el siguiente código, puede ver cómo @media consulta @media original que maneja el drop antes de la marca de 979px y la nueva consulta para soportar el punto de caída deseado de 550px . Modifiqué la consulta original directamente desde el css sensible a la rutina de arranque para restablecer todos los estilos aplicados a esa consulta específica para los elementos de la barra de navegación y los porté a la nueva consulta que lleva el punto de inserción que necesita. De esta forma, podemos conmutar todos los estilos desde la consulta original hasta la nueva consulta sin perder el tiempo en la hoja de estilo con capacidad de arranque, de esta manera los valores predeterminados se seguirán aplicando a los otros elementos en su documento.
Aquí hay una breve demostración con una consulta de medios configurada para soltar a 550px según lo requiera: http://jsfiddle.net/wU8MW/
Nota: @media consultas de @media modificadas debajo del marco css, ya que se supone que el nuevo css modificado se debe cargar primero que el css receptivo.
Simplemente escriba este código en su archivo personalizado style.css y funcionará
@media (min-width: 768px) and (max-width: 991px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse.collapse.in {
display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
display:block !important;
}
.navbar-header {
float:none;
}
.navbar-nav {
float: none !important;
margin: 0px;
}
.navbar-nav {
margin: 7.5px -15px;
}
.nav > li {
position: relative;
display: block;
}
.navbar-nav > li {
float: none !important;
}
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}
.navbar-collapse {
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
border-top: 1px solid transparent;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
}
.nav {
padding-left: 0px;
margin-bottom: 0px;
list-style: outside none none;
}
}
Sospecho (y espero) que esto se implementará de manera oficial pronto. Mientras tanto, estoy haciendo un simple hack de CSS, usando el teléfono visible en el botón desplegable y la tableta visible en un segundo conjunto de botones que coloqué en la barra de navegación. Entonces antes de que se viera así:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a href="<%= root_url %>" class="brand brandtag"></a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav">
<li>Navigation 1</li>
<li>Navigation 2</li>
<li>Navigation 3</li>
</ul>
</div>
</div>
</div>
</div>
Y ahora parece que:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a href="<%= root_url %>" class="brand brandtag"></a>
<a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="visible-tablet">
<ul class="nav">
<li>Navigation 1</li>
<li>Navigation 2</li>
<li>Navigation 3</li>
</ul>
</div>
<div class="nav-collapse">
<ul class="nav">
<li>Navigation 1</li>
<li>Navigation 2</li>
<li>Navigation 3</li>
</ul>
</div>
</div>
</div>
</div>
Tenga en cuenta que el orden de los elementos es importante, de lo contrario puede tener problemas con los elementos que entran en la siguiente línea
Tomando el truco de Tyler aún más añadiendo un bloque clasificado de teléfono visible y una clase de teléfono oculto a un elemento en la navegación principal plegable, puede ''sacar'' uno o dos de los artículos colapsados para mostrar incluso en la barra de navegación del teléfono.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a href="<%= root_url %>" class="brand brandtag"></a>
<a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="visible-tablet">
<ul class="nav">
<li>Navigation 1</li>
<li>Navigation 2</li>
<li>Navigation 3</li>
</ul>
</div>
<div class="visible-phone">
<ul class="nav">
<li>Navigation 1</li>
</ul>
</div>
<div class="nav-collapse">
<ul class="nav">
<li class="hidden-phone">Navigation 1</li>
<li>Navigation 2</li>
<li>Navigation 3</li>
</ul>
</div>
</div>
</div>
</div>
bootstrap-sass soportará la variable $ navbarCollapseWidth en la próxima versión (2.2.1.0). ¡Podrás actualizarlo para hacer exactamente lo que quieras una vez que la versión esté en vivo!
Bootstrap 3.x
usando SASS, puede cambiar el valor de $ screen-sm para orientar su tamaño mínimo
ejemplo: $ screen-sm: 600px;
Debe poner este valor en su archivo application.scss antes del @import "bootstrap";
$screen-sm:600px;
@import "bootstrap";
Menos variables comienzan con "@" simplemente las cambian a "$" para anularlas antes de la importación.