background preloader

Bootstrap 3, el manual oficial

Bootstrap 3, el manual oficial
Related:  BootstrapBootstrap

Components Available glyphs Includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible. How to use For performance reasons, all icons require a base class and individual icon class. Don't mix with other components Icon classes cannot be directly combined with other components. Only for use on empty elements Icon classes should only be used on elements that contain no text content and have no child elements. Changing the icon font location Bootstrap assumes icon font files will be located in the .. Change the @icon-font-path and/or @icon-font-name variables in the source Less files. Use whatever option best suits your specific development setup. Accessible icons Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters.

6.7. Barras de navegación (Bootstrap 3, el manual oficial) Las barras de navegación son componentes adaptados al diseño web responsive y que se utilizan como elemento principal de navegación tanto en las aplicaciones como en los sitios web. En los dispositivos móviles se muestran inicialmente minimizadas y al pulsar sobre ellas, se despliegan todas sus opciones. Si la anchura del dispositivo aumenta hasta un nivel suficiente, las barras de navegación muestran todos sus contenidos horizontalmente. Dependiendo del contenido de tu barra de navegación, puede ser necesario modificar el punto a partir del cual se muestra horizontal en vez de minimizada. Para ello, modifica el valor de la variable @grid-float-breakpoint en tu archivo LESS o añade tu propia media query en el archivo CSS. Ejemplo: <nav class="navbar navbar-default" role="navigation"><! Así se ve este ejemplo en tu navegador cuando el dispositivo es pequeño: Y esta es la imagen del aspecto que debería tener este ejemplo: Así se ve este ejemplo en tu navegador cuando el dispositivo es grande:

Javascript · Twitter Bootstrap Haz clic en los tabs inferiores para hacer un flip-flop (toggle) entre los paneles escondidos, incluso vía menús depslegables Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Puedes activar una navegación de tabs o de pills sin escribir cualquier javascript especificando data-toggle="tab" o data-toggle="pill" en un elemento.

Bootstrap Sidebar, scrollspy and active submenu example code Content At Bootply we like to build simple Bootstrap templates that utilize the code Bootstap CSS without a lot of customization. Sure you can find a lot of Bootstrap themes and inspiration, but these templates tend to be heavy on customization. Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Hello. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Section 1 a Section 2 Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Section 3 Images are responsive sed @mdo but sum are more fun peratis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Section 4 Edit on Bootply

4.3. Utilidades (Bootstrap 3, el manual oficial) 4.3.1. Icono para cerrar Bootstrap 3 define la clase .close para mostrar la entidad HTML &times; como si fuera la típica X asociada con el cierre de una ventana o aplicación. Utilízalo para mostrar el icono de cerrar en las ventanas modales o en las alertas sin tener que utilizar una imagen. Ejemplo: <button type="button" class="close" aria-hidden="true">&times;</button> Así se ve este ejemplo en tu navegador (es una X gris claro a la derecha del todo): Y esta es la imagen del aspecto que debería tener este ejemplo: Figura 4.9 Icono de cierre en Bootstrap 3 4.3.2. Flotar un elemento a la derecha o a la izquierda es muy habitual en la mayoría de diseños web. <div class="pull-left">... Este es el código CSS aplicado a cada clase (la palabra reservada ! Bootstrap 3 también define mixins para que puedas utilizar estos estilos en tus archivos LESS: .elemento { .pull-left();} .otro-elemento { .pull-right();} No utilices estas clases para alinear los componentes de las barras de navegación .navbar.

Tutorial | Formularios y Formas con Bootstrap 3 En este tutorial vamos a ver como crear, o mejor dicho, como armar formularios y sus formas muy fácilmente con lo que nos ofrece Bootstrap 3. Los formulario en una pagina web son muy importantes, por que es una de las formas en que el usuario puede interactuar con el sitio web, enviar información, registrándose en el sitio, buscando algo o haciendo una consulta, pero a veces dar estilos a estos componentes HTML de forma manual suele ser algo tedioso. Bootstrap simplifica enormemente el proceso de estilizar formulario y sus componentes sin tanto esfuerzo, vamos a poder crear formularios de diferentes tipos (Verticales, Horizontales y Enlineas). Veamos. Formularios Verticales Podemos crear formularios de forma predeterminada en la que se aplican estilos básicos a los controles y componentes del formulario sin necesidad de crear clases, solamente con utilizar la etiqueta <form> y envolver los componentes del formulario con un elemento con clase .form-group tendremos. Formularios Horizontales

Tutorial #5 Bootstrap3, Tipografía básica y formato de texto Bootstrap 3 viene con una serie de estilos integrados y configurados para aplicar a la tipografía de nuestro sitio web. En este tutorial veremos como trabajar con Encabezados de textos, párrafos, formatos de textos, alineamientos, y citas, también como utilizar algunos estilos básicos que vienen por defecto en Bootstrap 3, que dan uniformidad y consistencia a nuestros diseños. Para mas información puedes ir a la documentación oficial donde se trata este tema: ☰ Encabezados de textos en Bootstrap Como bien sabes por medio de los encabezados de HTML definimos los títulos en nuestro documento web, estos son definidos desde los <h1>definiendo títulos importantes, hasta los <h6>definiendo títulos menos importantes. <div class="container"><h1>Encabezado h1 en Bootstrap</h1><h2>Encabezado h2 en Bootstrap</h2><h3>Encabezado h3 en Bootstrap</h3><h4>Encabezado h4 en Bootstrap</h4><h5>Encabezado h5 en Bootstrap</h5><h6>Encabezado h6 en Bootstrap</h6></div> Resultado:

Visual effects 11.1 Desbordamiento y recorte Generalmente, el contenido de una caja de bloque es confinado a los límites del contenido de la caja. En ciertos caso, una caja puede desbordar , significando que su contenido queda parcial o completamente fuera de la caja, por ej Una línea no puede ser cortada, provocando que la caja de línea sea más ancha que la caja de bloque. Siempre que ocurra el desbordamiento, la propiedad 'overflow' especifica cómo (y si) una caja es recortada. 11.1.1 Desbordamiento: la propiedad 'overflow' 'overflow' Esta propiedad especifica si el contenido de un elemento a nivel de bloque es recortado cuando desborda la caja del elemento (que está actuando como un bloque de contención para el contenido). visible Este valor indica que el contenido no es recortado, es decir, puede ser procesado fuera de la caja de bloque. hidden scroll auto Aún si 'overflow' es puesto como 'visible', el contenido puede ser recortado a la ventana del documento de la AU por el entorno operativo nativo. Una

Responsive Design: estructura adaptable Tras la introducción al Responsive Design ahora toca conocer lo esencial para crearlos: el meta-tag Viewport, las @media queries y tener en cuentas ciertas cosas más "clásicas", pero que son esenciales (cosas como las que permiten que los borradores y notas de W3C se adapten "casi" perfectamente al ancho de pantalla). Viewport Esta meta-etiqueta fue creada en principio por Apple para su móvil predilecto, pero se ha convertido en todo un estándar que es soportado por la mayoría de los dispositivos móviles (smartphones, tablets y gran parte de móviles de gama media y baja). Su uso es totalmente necesario, ya que sino el navegador establece el ancho con el que prefiere visualizar una página en lugar de usar el ancho del que dispone (es decir, si la pantalla de nuestro móvil tiene 400px y el navegador detecta que lo óptimo sería visualizarla con 700px así lo hará si no usamos esta meta-etiqueta). Se pueden usar los siguientes parámetros (separados por comas): @media queries

1.3. La primera plantilla Bootstrap (Bootstrap 3, el manual oficial) Si eres nuevo en Bootstrap, puedes empezar con la plantilla HTML básica que se muestra a continuación o puedes echar un vistazo a los ejemplos de plantillas que hemos preparado. La idea de estos ejemplos es que los utilices como punto de partida para crear tus propios diseños. El siguiente código HTML muestra una plantilla muy sencilla creada con Bootstrap: <! 1.3.1. Partiendo de la primera plantilla básica mostrada anteriormente se pueden crear muchos otros diseños de página. Ejemplos básicos Ejemplos con barras de navegación Páginas con componentes propios Diseños experimentales

6.3. Grupos de botones (Bootstrap 3, el manual oficial) Bootstrap 3 te permite agrupar varios botones relacionados entre sí para mostrarlos en una única línea. Opcionalmente puedes utilizar el plugin de JavaScript para hacer que los botones se comporten como radiobuttons o como checkboxes. 6.3.1. Ejemplo sencillo Para crear un grupo de botones, encierra varios botones con la clase .btn dentro de un elemento con la clase .btn-group. <div class="btn-group"><button type="button" class="btn btn-default">Izquierdo</button><button type="button" class="btn btn-default">Central</button><button type="button" class="btn btn-default">Derecho</button></div> Así se ve este ejemplo en tu navegador: Y esta es la imagen del aspecto que debería tener este ejemplo: Figura 6.5 Grupo de botones en Bootstrap 3 6.3.2. Combinando varios elementos .btn-group puedes crear una toolbar o barra de herramientas basada en botones. Figura 6.6 Botones en la barra de herramientas en Bootstrap 3 6.3.3. <div class="btn-group btn-group-lg">... 6.3.4. 6.3.5. 6.3.6.

Bootstrap Carousel

Related: