Share
Hasta ahora ya has visto varias de las nuevas características de CSS que están disponibles en la versión 3 de Bootstrap. En este tutorial entraremos en un poco más de detalle sobre qué se considera nuevo y qué no..
En muchos casos, estas nuevas clases son solo nombres de las antiguas, pero las tratamos como nuevas aquí para que pueda hacer la distinción fácilmente..
Las diversas clases que conforman la sección de tipografía de BS3 no han cambiado tanto como algunos de los otros elementos. Etiquetas H1mediante H6se siguen tratando de la misma manera que en v2, con la adición de que ahora puede usar en línea con cualquier elemento de cabecera sin que primero tenga que ser envuelto en una divutilizando la encabezado de páginaclase. Esto significa que no hay marcas adicionales ahora, a menos que desee que el encabezado de su bloque esté subrayado con un margen de párrafo diferente.
Esta es mi super página web Es lo mejor que hay
En v2 no tenía más remedio que envolver su H1 en una división de encabezado de página, ya que esta era la única forma en que la salida de etiquetas pequeñas se alinearía perfectamente. Ahora se ha rectificado y también se ha aplicado a todos los niveles de encabezado, en lugar de solo los tres primeros..
Esta es mi super página web es lo mejor que hay
Continuando, la clase de copia de cuerpo estándar no tiene cambios y permanece en un tamaño predeterminado de 14 píxeles con una altura de línea de aproximadamente 1.4.
La copia del cuerpo se aplica a todo el texto dentro de una etiqueta de párrafo automáticamente, por lo que no se necesitan clases a menos que desee usar algunas de las características especiales (como veremos pronto).
Copia del cuerpo principal (párrafos con el nombre de la clase de dirigir) tampoco tienen cambios en sus nombres o estilos, y al igual que con v2, están diseñados para darle a su párrafo de apertura un poco más de énfasis que la otra copia normal del cuerpo. Combinando estas tres reglas CSS, podría tener algo como lo siguiente:
Esta es mi super pagina Es lo mejor que hay
Bienvenido a mi página web super-duper, no hay otra página web como esta en todo el mundo, mi página es lo mejor en Internet que debe visitar.
En esta fantástica página tengo texto y un poco más de texto, e incluso hay un texto que puedes leer, así como un título de página de aspecto agradable.
Cuando se representa en su navegador, debe tener el siguiente aspecto:
los La etiqueta ahora también se puede usar por sí misma, ya que su estilo ahora se maneja y aplica correctamente en el contexto en el que se usa, por lo que su estilo seguirá su posición en el documento, independientemente de la etiqueta principal..
Del mismo modo, el texto en negrita todavía se crea utilizando la etiqueta y cursiva usando el etiqueta; Al igual que con muchas de las clases de tipografía, esto no es diferente del marco v2..
Las clases de alineación también mantienen sus mismos nombres de clase de texto-izquierda, centro de texto, derecho de texto, y justificar el texto, y sigue realizando las mismas funciones que se describen en el libro BS2 que precede a esta serie.
Del mismo modo, las abreviaturas todavía se crean utilizando el etiqueta con el títuloatributo que actúa como la descripción completa de la abreviatura. Hay una nueva clase, inicialismo, que se puede agregar a una etiqueta de abreviatura y le da a la salida renderizada un aspecto y una sensación ligeramente más pequeños que el texto circundante.
Direcciones (usando el etiqueta) y comillas en bloque (usando la etiqueta) tampoco tienen cambios en el CSS o las reglas básicas entre v2 y v3 del marco.
Las últimas etiquetas que permanecen en la categoría tipográfica incluyen , Se utiliza para crear un ejemplo de código en línea. Nuevamente, esto no ha cambiado de ninguna manera, y su uso previsto sigue siendo para las muestras de código que coinciden con el texto del cuerpo regular.
Para las muestras de código (o cualquier cosa que sea texto sin formato) que deben permanecer formateadas según la sangría y los retornos de carro, aún debe usar el etiqueta; de nuevo, el estilo aquí no ha cambiado desde v2, y el diseño que usa esta etiqueta aún debería comportarse como se esperaba.
El último elemento tipográfico es la adición de un nuevo elemento llamado .
El propósito de esta nueva etiqueta es mostrar el texto de una manera que indique que el usuario debe ingresar la información en la computadora de alguna manera, generalmente al escribirla.
Por ejemplo:
Abre un símbolo del sistema escribiendo cmd en la casilla y haciendo clic en el botón "Ejecutar" del mercado, cuando se abre, escriba mi programa y presiona enter, momento en el cual la aplicación debería ejecutarse
Que cuando se representa en un documento HTML, debería tener un aspecto similar al siguiente:
En general, los elementos de la lista normal compuestos por lista-sin estilo, lista en líneajunto con dl-horizontallas clases para las listas de definiciones también permanecen sin cambios en BS3 y tienen el mismo comportamiento que en BS2.
Sin embargo, hay algunos cambios en los elementos de la lista, pero como estos ocurren con las clases especializadas que se utilizan para crear menús y listas de navegación, los trataremos cuando abordemos los cambios a los elementos de navegación en el siguiente tutorial de la serie..
Las tablas aún tienen un estilo tal como estaban en BS2 al crear un estándar Este marcado debería darte lo siguiente: Al igual que con BS2, las clases para agregar los estilos opcionales a una tabla- Este código, por ejemplo, le dará una tabla que tiene un borde exterior y colores alternos en cada fila de la tabla. Una cosa a tener en cuenta, sin embargo, es que la división de tablas ahora usa el El resto de las clases de tabla para colorear las filas de la tabla ha cambiado ligeramente. En primer lugar hay una nueva clase llamada Las clases contextuales restantes, como con BS2, están diseñadas para resaltar las filas de la tabla para mostrar diferentes condiciones, y son las mismas, excepto por un pequeño cambio. El nombre de la clase que representa una acción peligrosa o negativa ha sido renombrado a Cuando está renderizado, debería verse algo como esto: Hay dos nuevas adiciones a las clases usadas para soportar tablas. Primero, hay una nueva clase de respuesta que toma en cuenta el tamaño de su sistema de cuadrícula y proporciona barras de desplazamiento vertical o una tabla realineada para adaptarse a diferentes pantallas de tamaño. En segundo lugar, existe la posibilidad de utilizar las clases de filas de colores mencionadas anteriormente en celdas individuales, en lugar de solo filas completas, como fue el caso en BS2. Para usar las clases de coloreado en un nivel de celda, solo necesita agregar las clases a Este código debe resultar en lo siguiente: La adición relacionada con la mesa final es una clase llamada Cuando esta nueva clase se usa en una pantalla con más de 768 píxeles (es decir, cualquier pantalla que use una clase de tamaño diferente a Al igual que con BS2, todos los elementos de forma normal tienen, por defecto, un nivel mínimo de marcado que les otorga un estilo base. Esto significa que simplemente marcando una etiqueta de formulario normal y los controles asociados le darán a su formulario la apariencia y la sensación de inicio predeterminadas.. Tomemos el siguiente ejemplo: Si mostramos este ejemplo en un navegador, veremos que obtenemos una salida razonablemente buena sin agregar clases adicionales, como se puede ver en la siguiente imagen: Nota: Desde que se escribió el ejemplo anterior, ha habido una actualización menor al código BS3. Si prueba el ejemplo como está escrito aquí, es probable que la salida no se vea como se esperaba. El cambio que se ha realizado en BS3 parece significar ahora que el hecho de marcar un formulario sin ninguna clase de BS3 no tendrá el efecto de darle a la forma un aspecto y una sensación consistentes. He dejado el ejemplo aquí, ya que está de acuerdo con la información que todavía está presente en el sitio de documentación, y como tal todavía parece ser el consejo oficial de los autores del marco.. Como mencioné en la sección de migración, las clases y los componentes en torno a los formularios HTML han sido algunas de las mayores víctimas cuando se trata de cambios de nombre de clase, pero esto es por una buena razón.. Antes de BS3, muchas de las clases utilizadas para los formularios tenían un alcance muy limitado: había clases individuales para muchos propósitos individuales, en lugar de una sola clase que cubría muchas bases. Por ejemplo, había clases separadas para manejar las alineaciones de las casillas de verificación y los botones de radio, y había clases separadas para manejar las casillas de entrada y las áreas de texto con respecto a la alineación de sus filas.. En BS3, muchas de estas clases se han eliminado y ahora están todas agrupadas bajo un número menor de clases y elementos. Tomando nuestro ejemplo anterior y agregando el marcado recomendado como se muestra en la documentación de BS3, obtenemos lo siguiente: Externamente, si representa este código, no verá ninguna diferencia en la salida generada para la muestra 18. Internamente, sin embargo, Bootstrap ahora puede encontrar y trabajar con elementos individuales mucho más fácilmente que antes.. En BS2 no había ningún requisito para agrupar controles a menos que quisiera trabajar con las clases de validación automática. Todavía no hay un requisito absoluto para usarlos, pero hacerlo permite a BS cambiar el tamaño y la posición de las cosas correctamente al usar su cuadrícula (entre muchas otras cosas). También notará que cada control ahora tiene un solo También tenga en cuenta que la etiqueta de formulario en sí ahora tiene una Por último, si nos fijamos en el Desafortunadamente, todavía hay un área en el soporte para formularios que falta: el control de carga de archivos. Al igual que BS2, esto se debe al hecho de que la seguridad en todos los recortes actuales de los navegadores restringe la capacidad de personalizar los controles de entrada de archivos para que coincidan con el resto de los controles de entrada disponibles. Sin embargo, como mencioné en el libro anterior, todavía hay adiciones de terceros que tienen esta área cubierta, y debido a que ahora puede fabricar su propio sistema de carga utilizando las clases HTML5, estrictamente hablando, no necesita la carga del archivo. control-usted puede fabricar su propio. En BS2 había varios tipos de formularios específicos, como el los En el ejemplo del ejemplo de código anterior, agregando los Nota: En el nuevo y feliz mundo de HTML 5 de hoy, es más importante que nunca marcar los elementos de entrada correctamente con una etiqueta asociada. Debido a que los usuarios desfavorecidos pueden usar ayudas para ayudarlos, no proporcionar las piezas necesarias para permitir que estas funcionen correctamente se verá como algo malo, y las compañías que las abandonan podrían ser rechazadas por hacerlo. No se preocupe, sin embargo, BS3 lo tiene cubierto. Si decide que no desea etiquetas en sus formularios, puede marcarlos con una clase opcional, Si representa el código de este ejemplo en su navegador, debería tener el siguiente aspecto: Como puede ver en el código de la muestra 20, el margen de beneficio adicional no es realmente mucho más, y la mayoría existe solo para alinear las columnas correctamente para que todo se sienta bien.. Los principales puntos a tener en cuenta en la muestra 20 son: Para el resto de las clases y partes asociadas en la sección de formularios de BS3, nada más que las clases mencionadas hasta ahora ha cambiado. Sin embargo, desde un punto de vista de la aplicación real, los controles de entrada ahora debe tener un tipo correcto en ellos para ser peinados. Esto significa que como mínimo debe tener al menos Sin embargo, es muy recomendable que uses los tipos correctos. Como verá pronto cuando lleguemos a los grupos de validación, tener el tipo correcto permitirá que la mayoría de las cosas de validación realmente funcionen correctamente sin realizar cambios en su marca.. Las casillas de verificación y los botones de opción, como en BS2, se apilan de forma predeterminada. Si desea que se representen verticalmente en la pantalla, debe utilizar el La representación de la muestra 21 en su navegador debería tener el siguiente aspecto: Los cuadros de selección y selección múltiple están marcados con estilos estándar simplemente usando los elementos como están; Esto no es un cambio de BS2, donde el marcado y el estilo de estos elementos son idénticos.. Un nuevo estilo que se ha introducido en BS3 es el estilo de control estático. En BS2, a menudo tenía que usar un control de formulario deshabilitado para representar datos de formulario estáticos que no se podían cambiar. BS3 cambia esto proporcionando una Cuando se representa en el navegador, esto produce un diseño de formulario regular, con el control estático claramente marcado como no editable o como un control de entrada, como muestra la siguiente imagen: El estilo deshabilitado de los controles de formulario todavía se marca y utiliza de la misma manera que en BS2, simplemente agregando el atributo "deshabilitado" al elemento de entrada como se muestra a continuación: Esto producirá el aspecto clásico de control desactivado y sombreado, algo como lo siguiente: Si agrega el Lo último que quiero mencionar sobre el tema de las formas son las clases de validación y enfoque. Como mencioné anteriormente, agregar los tipos de entrada correctos en elementos HTML5 realmente te ayuda cuando se trata de usar las clases de validación. Porqué es eso? Además de tener nombres y estilos de clase dedicados para que los use, las clases de validación también conectan los nuevos pseudo-elementos HTML5 como Esto significa que si marca un cuadro de texto como Si no es así, o si tiene alguna otra forma de hacer que su validación funcione, simplemente puede usar la Si representa este código en su navegador, debería ver algo como lo siguiente: Los puntos a tener en cuenta son que he agregado las clases a los grupos de formularios para producir una visualización estática; sin embargo, también debe intentar marcar el formulario con los tipos de entrada correctos. He encontrado que el soporte del navegador en las pseudo-clases todavía es un poco irregular, aunque no se menciona en los documentos de BS3, así que le recomiendo que también haga uso de los nombres de las clases al manipular sus elementos con JavaScript.. También tenga en cuenta que la etiqueta y el texto de ayuda a nivel de bloque también toman el color correcto del grupo, por lo que no es necesario agregar colores o estilos a estos por separado al grupo de control de formulario. Recuerda que el Lo último que se debe mencionar para los grupos de validación es que también puede proporcionar iconos de comentarios opcionales directamente en los controles de formulario para ayudar con el estado. Usted hace esto proporcionando un elemento span inmediatamente después del elemento de entrada con el que se debe utilizar. Este elemento span tiene aplicadas las clases de iconos habituales (que veremos en el siguiente tutorial), junto con una clase de Si expandimos el ejemplo de código anterior para tenerlo en cuenta y agregar íconos de comentarios, este es el aspecto que debe tener: Una vez que volvamos a renderizar con estos cambios, debería ver lo siguiente: Este tutorial representa un capítulo de Bootstrap 3 sucintamente, un libro electrónico gratuito del equipo en Syncfusion.arreglo, luego agregando un
mesaClase para el marcado. Como en BS2, las tablas siempre deben construirse utilizando toda la gama de ,
, y Elementos HTML como muestra el siguiente ejemplo:
Col A Col B Col C Val A Val B Val C Val A Val B Val C 
mesa a rayas, bordeado de mesa, sobre la mesa, y mesa condensada-funciona exactamente igual que en BS2; estas clases adicionales se agregan como clases secundarias a la clase de la tabla principal en el propio elemento de la tabla. : nth-child pseudo selector, lo que significa que ya no funcionará en IE8 o en una versión anterior sin un relleno de polietileno u otra solución para ayudar. activo. Antes de BS3, el activoLa clase no estaba disponible en todos los elementos, pero principalmente solo en los elementos de navegación y botón. A partir de BS3 ahora se puede aplicar a un elemento para mostrar esa fila como una fila resaltada, que por defecto es un gris claro. peligro. En BS2 se nombró la clase roja. error. Aparte de eso, las clases se aplican de la misma manera a la Elemento como el siguiente código muestra:
Clase Col B Col C Activo Val B Val C Éxito Val B Val C Información Val B Val C Advertencia Val B Val C Peligro Val B Val C 
o Elementos de la siguiente manera:
Clase Col B Col C Val A Val B Val C 
sensible a la mesa, que puede utilizar aplicándolo a una como sigue:
Col A Col B Col C Val A Val B Val C * -xs- *), entonces la visualización de la tabla se comportará como una tabla que responde a bootstrap normal. Sin embargo, si la tabla se muestra en un dispositivo que se dirige a un * -xs- *clase y tiene menos de 768 píxeles, el contenedor se modificará para que haya un desplazamiento vertical disponible, lo que permite mover la tabla completa hacia la izquierda y hacia la derecha sin afectar el resto de la página. 
Salida de código de muestra en un dispositivo de más de 768 píxeles de ancho
Salida del ejemplo de código en un dispositivo de menos de 768 píxeles de anchoCambios de formulario
control de formaclase asignada a él, en lugar de muchos diferentes que apuntan a diferentes aspectos. papelasignado a ello Esto, además de ser una buena práctica en todos los aspectos, ahora es aplicado por BS3 para ayudar con los roles y estándares de aria que guían el uso de aplicaciones web por personas con discapacidades.. etiqueta con un bloque de ayuda, notará que ahora también se usa para el texto de formulario en línea en todos los casos, mientras que en BS2 tuvimos varias clases diferentes, como información de formulario. Formulario de búsqueda; Bajo BS3, todos estos se han agrupado en tres tipos principales de forma. Primero, tienes la forma estándar; Como hemos visto, este es un formulario normal sin clases adicionales agregadas a la etiqueta del formulario. Los otros dos tipos de formas son forma en líneay forma horizontal. forma en líneaLa clase está diseñada para formularios en lugares pequeños y de altura limitada, como menús y barras de navegación. Sin embargo, una advertencia: todos los elementos de entrada en esta clase y los otros tipos de formulario tienen un tamaño del 100 por ciento de manera predeterminada, por lo que si necesita el formulario para ocupar solo una pequeña cantidad de espacio (especialmente en la barra de navegaciónformularios), deberá colocar tamaños manuales en los controles individuales. forma en líneao forma horizontalA su vez, debe cambiar el diseño básico de su formulario para que se vea como sigue: 
Formulario producido por el ejemplo de código anterior con la clase de formulario en línea agregada a la etiqueta de formulario.forma horizontal class se usa para crear formularios regulares de arriba hacia abajo con controles de entrada que tienen sus etiquetas asociadas a la izquierda de ellos, en lugar de sobre ellos como lo hace el formulario predeterminado. Sin embargo, tenga en cuenta que para que el formulario horizontal funcione correctamente, debe agregar un pequeño margen de beneficio adicional al formulario en general, como se muestra en el siguiente ejemplo de código.. sr-solo. La adición de esta clase impedirá visualmente que la etiqueta o el texto de ayuda asociado aparezcan en su documento, pero se asegurará de que esté marcado de tal manera que sea visible por lectores de pantalla y otros dispositivos o software similares..
Salida mostrada del ejemplo de código anterior que muestra nuestro formulario marcado como horizontal.
etiqueta de controladicional. Esto no es necesario para los otros tipos de formulario, y BS2 simplemente lo ignorará. forma horizontalse aplica a la etiqueta de forma más exterior. tipo = "texto"para BS3 hacer su magia. casilla de verificación en líneay radio en líneaclases de la siguiente manera: 
control de forma-estáticoClase que se puede aplicar a controles individuales en lugar de los regulares control de forma, como muestra el siguiente código: 
discapacitadoatribuir a un conjunto de campos que rodea un formulario, todos los controles de ese grupo se deshabilitarán al mismo tiempo, utilizando el mismo estilo. Esto es algo que no sucedió en BS2; en su lugar, tuvo que marcar cada control individual. atención:, error:, y otros. type = "email", y luego no ingrese una dirección de correo electrónico al enviar, el navegador debería resaltar automáticamente el campo en rojo para usted. tiene éxito, has-warning, y tiene errorclases en sus grupos de formularios como muestra el siguiente código: 
grupo de formaslas secciones también pueden usar todo lo demás que hemos mencionado hasta ahora para deshabilitar, sombrear y redimensionar los elementos de formulario según sea necesario en forma agrupada. control de forma-retroalimentación. Esta debe debe colocarse después del control de entrada, y antes de cualquier otro marcado en el grupo de entrada, debido a la forma en que se reposiciona el control para que aparezca en el control. Una vez que agregue el intervalo, también deberá agregar una clase de tiene retroalimentaciónen la lista de clases de grupo de formulario junto con el otro has-xxxxxClases utilizadas para mostrar el estado de validación.. 
Accentsconagua