Componentes de diseño de arranque
1. Icono de fuente de bootstrap
(1) Enlace de la lista de iconos de fuente
http://www.runoob.com/bootstrap/bootstrap-glyphicons.html
(2) Uso
Para usar iconos, simplemente use el siguiente código. Mantenga el espacio apropiado entre el icono y el texto. Sin CSS de Glyphicon.
<span> </span>
(3) icono de fuente personalizado
Hemos visto cómo usar íconos de fuentes, y luego veremos cómo personalizar los iconos de fuentes.
Comenzamos con el ejemplo anterior y personalizamos el icono cambiando el tamaño de fuente, el color y la aplicación de sombras de texto.
A. iconos personalizados
<botón tipo = "botón"> <span> </span> user </boton>
B. Tamaño de fuente personalizado
Al aumentar o disminuir el tamaño de fuente del icono, puede hacer que el icono se vea más grande o más pequeño.
<botón tipo = "botón" style = "font-size: 60px"> <span> </span> user </boton>
C. personalizar el color de la fuente
<botón type = "button" style = "color: RGB (212, 106, 64);"> <span> </span> user </boton>
D. Aplicar sombras de texto
<botón tipo = "botón" style = "text-shadow: negro 5px 3px 3px;"> <span> </span> user </boton>
2. Menú desplegable Bootstrap
(1) El menú desplegable es conmutable y es un menú contextual que muestra el enlace en un formato de lista. Esto se puede lograr a través de la interacción con el complemento JavaScript del menú desplegable (desplegable).
Para usar el siguiente menú, simplemente agregue un menú desplegable en clase .dropdown.
<div> <button type="button" id="dropdownMenu1" data-toggle="dropdown"> Topic <span></span> </button> <ul role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Java</a> </li> <li rol = "Presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> minería de datos </a> </li> <li rol role = "menuitem" tabindex = "-1" href = "#"> enlaces separados </a> </li> </ul> </div>
(2) Alinearse
Alinee el menú desplegable directamente agregando clase .Pull-Right a .dropdown-Menu.
(3) Título
Puede usar la clase desplegable de clase para agregar un título al área de etiqueta del menú desplegable.
3. Grupo de botones de arranque
(1) El grupo de botones permite que varios botones se apilen en la misma línea. Esto es muy útil cuando quieres alinear los botones juntos.
(2) Anidación
Puede anidar otro grupo de botones dentro de un grupo de botones, es decir, anidar otro grupo .BTN dentro de un grupo .BTN. Esto se usa cuando usa el menú desplegable en combinación con una serie de botones.
4. Menú desplegable del botón Bootstrap
Use la clase Bootstrap para agregar un menú desplegable al botón. Para agregar un menú desplegable a un botón, simplemente coloque el botón y el menú desplegable en un grupo .BTN. También puede usar <span> </span> para indicar botones como menús desplegables.
<div> <button type="button" data-toggle="dropdown"> Default <span></span> </button> <ul role="menu"> <li><a href="#">Function</a></li> <li><a href="#">Other</a></li> <li><a href="#">Other</a></li> <li><a href = "#"> otros </a> </li> <li> </li> <li> <a href = "#"> enlace separado </a> </li> </ul> </div>
(1) El menú desplegable del botón dividido
El menú desplegable del botón dividido utiliza aproximadamente el mismo estilo que el botón Menú desplegable, pero agrega la funcionalidad original al menú desplegable. En el lado izquierdo del botón dividido está la función original, y a la derecha está la alternancia que muestra el menú desplegable.
<div> <button type="button">Default</button> <button type="button" data-toggle="dropdown"> <span></span> <span>Switch the drop-down menu</span> </button> <ul role="menu"> <li><a href="#">Function</a></li> <li><a href="#">Other</a></li> <li><a href = "#"> otros </a> </li> <li> </li> <li> <a href = "#"> enlace desasedado </a> </li> </ul> </div>
(2) Menú desplegable Tamaño del botón
Puede usar el menú desplegable con botones de varios tamaños: .BTN-LARGE, .BTN-SM o .BTN-XS.
(3) Menú pull-up para botones
El menú también se puede estirar hacia arriba, simplemente agregue .dropup al contenedor .BTN-Group.
<div> </div>
5. Grupo de cuadro de entrada de bootstrap
Ingrese al grupo de caja. El grupo de cuadro de entrada se extiende desde el control del formulario. Con grupos de cuadros de entrada, puede agregar fácilmente texto o botones como prefijos y sufijos a cuadros de entrada basados en texto.
Al agregar contenido de prefijo y sufijos al campo de entrada, puede agregar elementos comunes a la entrada del usuario. Por ejemplo, puede agregar un signo de dólar o agregar @ antes del nombre de usuario de Twitter u otros elementos públicos requeridos por la interfaz de la aplicación.
Los pasos para agregar un elemento de prefijo o sufijo a .Form-Control son los siguientes:
A. Coloque el elemento de prefijo o sufijo en un <div> con clase .input-group.
B. Luego, dentro del mismo <Div>, coloque contenido adicional en el <span> de clase .input-group-addon.
C. Coloque el <span> delantero o detrás del elemento <put>.
Para mantener la compatibilidad del navegador cruzado, evite usar elementos <election>, ya que no representan completamente el efecto en un navegador WebKit. Además, no aplique la clase de grupo de cuadro de entrada directamente al grupo de formulario, el grupo de cuadro de entrada es un componente aislado.
<Form Role = "Form"> <div> <span> $ </span> <input type = "text" placeHolder = "twitterHandle"> <span> .00 </span> </div> </form>
(1) Ingrese el tamaño del grupo de caja
Puede cambiar el tamaño del grupo de cuadro de entrada agregando clases de tamaños de formulario relativo a .input-group (como .Input-Group-LG, Entrada-Group-SM, Entrada-Group-XS) a .Input-Group. El contenido en el cuadro de entrada se cambiará el tamaño automáticamente.
(2), casillas de verificación y complementos de radio
Puede usar casillas de verificación y complementos de radio como prefijos o elementos de sufijo para grupos de cuadros de entrada
<Viv> <span> <input type = "checkbox"> </span> <input type = "text"> </div>
(3) complemento de botones
También puede usar el botón como un elemento de prefijo o sufijo del grupo de cuadro de entrada. En este momento, no está agregando la clase .input-group-addon. Debe usar clase .input-group-btn para envolver el botón. Esto se requiere porque el estilo de navegador predeterminado no se reescribirá.
<Viv> <span> <botón type = "botón"> ¡Go! </botón> </span> <input type = "text"> </div>
(4) Botón con menú desplegable
Agregar un botón con un menú desplegable al grupo de cuadros de entrada simplemente está envuelto en una clase .Input-Group-BTN.
<div> <div> <button type = "button" data-toggle = "desplegable"> menú desplegable <span> </span> </boton> <ul> <li> <a href = "#"> function </a> </li> <li> <a href = "#"> otros </a> </li> <li> <a href = " href = "#"> otros </a> </li> <li> </li> <li> <a href = "#"> enlace separado </a> </li> </div> <input type = "text"> </div>
(5) Botón de menú desplegable dividido
Agregue un botón dividido con un menú desplegable en el grupo de cuadros de entrada, usando aproximadamente el mismo estilo que el botón Menú desplegable, pero agregando las características principales al menú desplegable,
<div> <div> <button type = "button" tabindex = "-1"> menú desplegable </botón> <botón type = "botón" data-toggle = "desplegable" tabindex = "-1"> <pan> </span> <span> cambie el menú desplegable </span> </button> <ul> <li> <a href = "#"> función </a> </li> <li> <a li. href = "#"> otros </a> </li> <li> <a href = "#"> Otro </a> </li> <li> </li> <li> <a href = "#"> enlace separado </a> </li> </div> <input type = "text"> </div> </div>
6. Elementos de navegación de bootstrap
Use las mismas etiquetas y clase base .nav. Bootstrap también proporciona una clase de ayuda para compartir etiquetas y estados. Cambie la clase modificada y se puede cambiar entre diferentes estilos.
(1), navegación o etiqueta de tabla
Cree un menú de navegación etiquetado:
A. Comience con una lista desordenada con clase .nav.
B. Agregar clase .nav-tabs.
<ul> <li> <a href = "#"> HOME </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios </a> </li> <li> <a href = "#"> vb.net </a> </li> <a href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li> </ul>
(2) Menú de navegación de estilo cápsula
A. Menú de navegación de cápsula básica
Si necesita cambiar la etiqueta al estilo de la cápsula, solo necesita usar la clase .nav-pills en lugar de .nav-Tabs, y los otros pasos son los mismos que anteriores.
<ul> <li> <a href = "#"> HOME </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios </a> </li> <li> <a href = "#"> vb.net </a> </li> <a href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li> </ul>
B. Menú de navegación de la cápsula vertical
Puede usar la clase .nav-aplazada mientras usa la clase .Nav y los píldoras .nav para hacer que las cápsulas se acumulen verticalmente.
<ul> <li> <a href = "#"> HOME </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios </a> </li> <li> <a href = "#"> vb.net </a> </li> <a href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li> </ul>
(3) Navegación con ambos extremos alineados
Puede hacer que el menú de navegación etiquetado o cápsula sea igualmente amplio al elemento principal utilizando la clase .nav-justificada mientras usa .nav, .nav-tabs o .nav y .nav-pils, respectivamente, cuando el ancho de la pantalla es mayor que 768px. En una pantalla más pequeña, los enlaces de navegación están apilados.
<ul> <li> <a href = "#"> Home </a> </li> <li> <a href = "#"> svn </a> </li> </ul> <ul> <li> <a href = "#"> home </a> </li> </ul> <li> <a href = "#"> Home </a> <//li> <ul>
(4) Desactivar el enlace
Para cada clase .NAV, si se agrega una clase .disable, se crea un enlace gris y el estado de ciervo del enlace está deshabilitado.
<ul> <li> <a href = "#"> HOME </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios (enlace de discapacidad) </a> </li> </ul> <ul> <li> <a href = "#"> Home </a> </li> <a li> <a li> href = "#"> svn </a> </li> <li> <a href = "#"> vb.net (enlace de disable) </a> </li> </ul>
(5) Menú desplegable
El menú de navegación utiliza una sintaxis similar al menú desplegable. De manera predeterminada, el ancla del elemento de la lista funciona junto con algunas propiedades de datos para activar una lista desordenada con la clase .dropdown-Menu.
A. Etiquetas con menú desplegable
Los pasos para agregar un menú desplegable a una etiqueta son los siguientes:
Comience con una lista desordenada con la clase .nav.
Agregar clase .nav-tabs.
Agregue una lista desordenada con la clase .dropdown-Menu.
<ul> <li> <a href = "#"> Inicio </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a data-toggle = "dropdown" href = "#"> java <span> </span> </a> <ul> <li> <li> <a href = "#"> swing </a> </li> <li> <a href = "#"> swing </a> </li> <li> <a href = "#"> enlaces separados </a> </li> </li> </li> <li> <a href = "#"> php </a> </li> </ul>
B. Cápsulas con menú desplegable
Los pasos son los mismos que crear una etiqueta con un menú desplegable, excepto que necesita cambiar la clase .nav-tabs a .nav-pills.
7. Barra de navegación de bootstrap
La barra de navegación es una buena característica y es una característica destacada del sitio web de Bootstrap. La barra de navegación sirve como un componente básico receptivo del encabezado de navegación en su solicitud o sitio web. La barra de navegación se derrumba en la vista del dispositivo móvil y la barra de navegación se expande horizontalmente a medida que aumenta el ancho de la ventana de la ventana gráfica disponible. En el núcleo de la barra de navegación Bootstrap, la barra de navegación incluye el nombre del sitio y los estilos básicos de definición de navegación.
(1) La barra de navegación predeterminada
Los pasos para crear una barra de navegación predeterminada son los siguientes:
A. Agregue clase .navbar y .navbar-default a la etiqueta <Al nav>.
B. Agregar rol = "navegación" a los elementos anteriores ayudará a aumentar la accesibilidad.
C. Agregue una clase de título .navbar-header al elemento <div>, que contiene el elemento <a> con la clase navbar de clase. Esto hará que el texto se vea más grande.
D. Para agregar enlaces a la barra de navegación, solo necesita agregar una lista desordenada con la clase .nav y .navbar-nav.
<nav role="navigation"> <div> <a href="#">W3Cschool</a> </div> <div> <ul> <li><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li> <a href="#">SVN</a></li> <li> <a href = "#" data-toggle = "desplegable"> java <b> </b> </a> <ul> <li> </li> <li> <a href = "#"> Enlace separado </a> </li> <li> </li> <li> <a href = "#"> un enlace separado </a> </li> </li> </li> </> </</</óbulo </</óbulo </</</</> </> </> </> </> </> </</> </</> </</> </</> </</> </</> </</> </</> </</</</</</</</</wri
(2) barra de navegación receptiva
Para agregar características receptivas a la barra de navegación, el contenido que desea colapsar debe envolverse en un <div> con clases .Collapse, .navbar-colapse. La barra de navegación colapsada es en realidad un botón con clase. Navbar-toggle y dos elementos de datos. El primero es Data-Toggle, que le dice a JavaScript qué hacer con el botón, y el segundo es Data-Target, que indica a qué elemento cambiar. Tres <span> con clase .icon-bar crea el llamado botón de hamburguesas. Estos cambiarán a elementos en .nav-colapse <Viv>. Para lograr estas funciones, debe incluir el complemento de colapso de Bootstrap.
<Nav role = "Navigation"> <div> <button type = "Button" data-toggle = "collapse" data-target = "#ejemplo de ejemplo-navbar-collapse"> <span> switch navigation </span> <span> </span> <span> </span> </span> <pan> <span> </boton> </boton> <a href = "#" w3cschool </span> id = "Ejemplo-Navbar-Collapse"> <ul> <li> <a href = "#"> iOS </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#" data-toggle = "desplegable"> java <b> </b> </a> <ul> <li> <a#" href = "#"> jmeter </a> </li> <li> </li> <li> <a href = "#"> enlace separado </a> </li> <li> </li> <li> <a href = "#"> otro enlace separado </a> </li> </li> </ul> </div> </ar Nav>
(3) Formularios en la barra de navegación
El formulario en la barra de navegación no utiliza la clase predeterminada mencionada en el capítulo de formulario Bootstrap, utiliza la clase .navbar-form. Esto garantiza una alineación vertical adecuada de la forma y el comportamiento del plegado en una ventana gráfica más estrecha. Use las opciones de alineación (esto se explicará en detalle en la sección de alineación de componentes) para decidir dónde se colocan los contenidos en la barra de navegación.
<Nav Role = "Navigation"> <iv> <a href = "#"> w3cschool </a> </div> <div> <borm role = "search"> <div> <input type = "text" placeHearter = "search"> </div> <button type = "Subt"> Subt </boton> </form> </div> </Arb>
(4) Botones en la barra de navegación
Puede usar clase .navbar-btn para agregar un botón al elemento <botón> que no está en <form>, que se centra verticalmente en la barra de navegación. .Navbar-BTN se puede usar en los elementos <a> y <input>. No use .navbar-btn en <a> elementos dentro .navbar-nave, porque no es una clase de botón estándar.
<Nav rol = "Navigation"> <iv> <a href = "#"> w3cschool </a> </div> <div> <form de role = "search"> <div> <input type = "text" placeHolder = "Bearch"> </div> <button type = "Subt"> Enviar botón </botón> </form> <button type = "botón de barra de navegación </botón </botón </botón Div Div Dive
(5) texto en la barra de navegación
Si necesita incluir cadenas de texto en su navegación, use la clase .navbar-text. Esto generalmente se usa con etiquetas <p>, asegurando el liderazgo y el color adecuados.
<Nav Role = "Navigation"> <Viv> <a href = "#"> W3CSchool </a> </div> <div> <p> firmado como Thomas </p> </div> </am>
(6) Enlace de no navegación
Si no desea usar enlaces estándar dentro del componente de navegación de barra de navegación regular, use la clase Navbar-Link para agregar los colores apropiados a las opciones de barra de navegación predeterminadas e invertidas.
<Nav Role = "Navigation"> <iv> <a href = "#"> w3cschool </a> </div> <div> <p> firmado en como <a href = "#"> Thomas </a> </p> </div> </div>
(7) Alineación de componentes
Puede usar la clase de utilidad .Navbar-Left o .Navbar-Right para alinear los enlaces de navegación, formularios, botones o componentes de texto en la barra de navegación a la izquierda o derecha. Ambas clases agregan flotadores CSS en la dirección especificada.
(8) fijado a la parte superior
La barra de navegación de bootstrap se puede ubicar dinámicamente. Por defecto, es un elemento de nivel de bloque, que se coloca en función de la ubicación colocada en HTML. Con algunas clases de ayuda, puede colocarlo en la parte superior o inferior de la página, o puede convertirlo en una barra de navegación estática que se desplaza junto con la página. Si desea que la barra de navegación se fije en la parte superior de la página, agregue la clase. Navbar fijada a la clase .navbar. El siguiente ejemplo demuestra esto: para evitar que la barra de navegación se entrelaze con la parte superior del contenido en el cuerpo de la página, agregue al menos 50 píxeles de relleno a la etiqueta <cody>, y el valor del relleno se puede establecer de acuerdo con sus necesidades.
<Nav Role = "Navigation">
</am>
(9) fijado a la parte inferior
Si desea que la barra de navegación se fije en la parte inferior de la página, agregue la clase. Navbar fijado a la clase .navbar.
<Nav Role = "Navigation"> </am>
(10), Top estática
Para crear una barra de navegación que se desplace junto con la página, agregue la clase .navbar-static-top. Esta clase no requiere que el relleno se agregue a <body>.
<Nav Role = "Navigation">
</am>
(11), barra de navegación invertida
Para crear una barra de navegación invertida con texto blanco de fondo negro, simplemente agregue la clase .navbar-inversa a la clase .navbar, como se muestra en el siguiente ejemplo:
Para evitar que la barra de navegación se intercalara con la parte superior del otro contenido en el cuerpo de la página, agregue al menos 50 píxeles de relleno a la etiqueta <body>, y el valor del relleno se puede establecer de acuerdo con sus necesidades.
<Nav Role = "Navigation"> </am>
8. Bootstrap Breadivumbs
BreadRumbs es un método de visualización basado en información a nivel de sitio web. Tome un blog como ejemplo, la navegación de Breadcrumb puede mostrar una fecha de lanzamiento, categoría o etiqueta. Representan la ubicación de la página actual dentro de la jerarquía de navegación.
Las migas de pan en bootstrap es una lista simple y desordenada con clase. Breadcrumb. El delimitador se agregará automáticamente a través de la clase que se muestra a continuación en CSS (bootstrap.min.css):
<Ol>
<li> <a href = "#"> Home </a> </li>
<li> <a href = "#"> 2013 </a> </li>
<li> noviembre </li>
</ol>
9. Paginación de bootstrap
(1) La paginación es una lista desordenada. Bootstrap maneja la paginación como otros elementos de la interfaz.
(2) Turn Page (buscapersonas)
Si desea crear un enlace de paginación simple para proporcionar navegación para los usuarios, se puede hacer girando la página. Al igual que los enlaces de paginación, Page Turn también es una lista desordenada. Por defecto, el enlace está centrado. La siguiente tabla enumera la clase que Bootstrap maneja el giro de la página.
10. Etiquetas de bootstrap
Etiqueta de arranque. Las etiquetas se pueden usar para contar, solicitar u otra pantalla de marcado en la página. Puede usar la clase modificada, la etiqueta, la etiqueta, la sello primaria, el éxito de etiquetas, la etiqueta-info, el control de etiquetas, la etiqueta-danger para cambiar la apariencia de la etiqueta.
<span> etiqueta predeterminada </span>
<span> etiquetas principales </span>
<span> Etiqueta de éxito </span>
<span> etiqueta de información </span>
<span> Etiquetas de advertencia </span>
<span> etiqueta de peligro </span>
11. Insignias de bootstrap
(1) La insignia es similar a la etiqueta, la principal diferencia es que las esquinas de la insignia son más suaves.
Las insignias se usan principalmente para resaltar elementos nuevos o no leídos. Para usar insignias, simplemente agregue <span> a enlaces, navegación de arranque y otros elementos. Cuando no hay elementos nuevos o no leídos, la insignia se plegará a través del: selector vacío de CSS para indicar que no hay contenido en el interior.
<a href = "#"> buzón <span> 50 </span> </a>
(2) activar el estado de navegación
Puede colocar insignias en la navegación de la cápsula y la navegación en la lista en el estado activo. Active el enlace usando <span>.
<h4> Estado de activación en la navegación de la cápsula </h4> <ul> <li> <a href = "#"> Página de inicio <Span> 42 </span> </a> </li> <li> <a href = "#"> Introducción </a> </li> <li> <a href = "#"> Mensaje </span> </a> </a> </li>
12. Bootstrap súper gran pantalla (Jumbotron)
Pantalla súper grande (jumbotron). Como su nombre lo indica, este componente puede aumentar el tamaño del título y agregar más márgenes al contenido de la página de inicio de sesión. Los pasos para usar un jumbotron son los siguientes:
A. Cree un contenedor <Viv> con clase .Jumbotron.
B. Además de la <h1> más grande, el peso de la fuente Font-Weight se reduce a 200px.
<Div> <Viv> <h1> ¡Bienvenido a iniciar sesión! </h1> <p> Esta es una instancia de un jumbotron. </p> <p> <a role = "botón"> Aprenda más </a> </p> </div> </div>
Para obtener una pantalla enorme que ocupa todo el ancho sin esquinas redondeadas, use la clase .Jumbotron fuera de toda la clase .continer.
13. Título de la página Bootstrap (encabezado de página)
El encabezado de la página es una buena característica, que agrega un espaciado apropiado alrededor del título de la página. La función de título de la página es particularmente útil cuando hay múltiples títulos en una página web y se debe agregar un cierto espacio entre cada título. Para usar el encabezado de la página, coloque su título en un <div> con clase. Page-Header:
<Viv> <h1> Ejemplo de título de la página <Small> Subtitle </small> </h1> </div>
14. Miniatura de bootstrap
(1) Miniatura de arranque. La mayoría de los sitios necesitan diseñar imágenes, videos, texto, etc. en una cuadrícula. Bootstrap proporciona una manera fácil de hacerlo con miniaturas. Los pasos para crear miniaturas usando bootstrap son los siguientes:
A. Agregue una etiqueta <a> con clase. Minail alrededor de la imagen.
B. Esto agregará cuatro píxeles y un borde gris.
C. Cuando el mouse se cierne sobre la imagen, se mostrará el esquema de la imagen.
<div> <a href = "#"> <img src = "/wp-content/uploads/2014/06/kittens.jpg"> </a> </div>
(2) Agregar contenido personalizado
Ahora que tenemos una miniatura básica, podemos agregar varios contenidos HTML a la miniatura, como títulos, párrafos o botones. Los pasos específicos son los siguientes:
A. Cambie la etiqueta <a> con clase. Thumbnail a <Viv>.
B. En este <div>, puede agregar todo lo que desee agregar. Dado que se trata de un <div>, podemos usar las reglas de nomenclatura predeterminadas basadas en el tramo para cambiar el tamaño.
C. Si desea agrupar varias imágenes, colóquelas en una lista desordenada, y cada elemento de la lista flota a la izquierda.
15. Advertencia de bootstrap (alertas)
Alertas y la clase proporcionada por Bootstrap para advertencias. Alerts proporciona a los usuarios una forma de definir los estilos de mensajes. Proporcionan comentarios de información contextual para las operaciones de usuario típicas. Puede agregar un botón de cierre opcional al cuadro de advertencia. Para crear un cuadro de advertencia cancelable en línea, use el complemento JQuery Alerts.
Puede agregar un cuadro de advertencia básico creando un <div> y agregando una de una clase .alert y cuatro clases de contexto (es decir.
<div> éxito! La sumisión se hizo muy bien. </div>
<div> información! Tenga en cuenta esta información. </div>
<div> Advertencia! Por favor no envíe. </div>
<div> error! Haga algunos cambios. </div>
(1) Advertencia cancelable (alertas de despido)
Los pasos para crear una advertencia cancelable (alerta de despido) son los siguientes:
A. Agregue un cuadro de advertencia básico creando un <div> y agregando una de las clases de clase .alert y cuatro de contexto (es decir.
B. Al mismo tiempo, agregue un. Alert Dissisable opcional a la clase <div> anterior.
C. Agregue un botón de cierre.
<div> <botón type = "botón" data-dismiss = "alert" aria-hidden = "true"> × </boton> ¡éxito! La sumisión se hizo muy bien. </div>
(2) Enlaces en alertas
Los pasos para crear un enlace en alertas son los siguientes:
A. Agregue un cuadro de advertencia básico creando un <div> y agregando una de las clases de clase .alert y cuatro de contexto (es decir.
B. Use la clase de entidad .alert-Link para proporcionar rápidamente enlaces con colores a juego.
<div>
<a href = "#"> ¡éxito! La sumisión se hizo muy bien. </a>
</div>
16. Barra de progreso de Bootstrap
Este capítulo explicará la barra de progreso de Bootstrap. En este tutorial, verá cómo usar Bootstrap para crear barras de progreso para la carga, la redireccionamiento o los estados de acción.
La barra de progreso de Bootstrap utiliza transiciones y animaciones CSS3 para obtener este efecto. Internet Explorer 9 y las versiones anteriores y las versiones anteriores de Firefox no admiten esta función, y Opera 12 no admite animaciones.
(1) La barra de progreso predeterminada
Los pasos para crear una barra de progreso básica son los siguientes:
A. Agregue un <div> con clase .progress.
B. A continuación, agregue un vacío <Div> con clase. Progress-Bar en el anterior <Viv>.
C. Agregue un atributo de estilo con un ancho representado por porcentaje, como Style = "60%"; para indicar que la barra de progreso es del 60%.
<div> <div role = "ProgressBar" Aria-Valuenow = "60" Aria-Valuemin = "0" Aria-Valuemax = "100"> <span> 40% Completo </span> </div> </div>
(2) barra de progreso alterna
Los pasos para crear barras de progreso de diferentes estilos son los siguientes:
A. Agregue un <div> con clase .progress.
B. A continuación, en el anterior <Div>, agregue un vacío <Div> con clase. Entre ellos, * puede ser éxito, información, advertencia, peligro.
C. Agregue un atributo de estilo con un ancho representado por porcentaje, como Style = "60%"; para indicar que la barra de progreso es del 60%.
<div> <div role = "ProgressBar" aria-valuenw = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> 90% completado (exitoso) </span> </div> </div>
(3) La barra de progreso de las rayas
Los pasos para crear una barra de progreso de rayas son los siguientes:
A. Agregue un <div> con clase .progress y .progress-striped.
B. A continuación, en el anterior <Div>, agregue un vacío <Div> con clase. Entre ellos, * puede ser éxito, información, advertencia, peligro.
C. Agregue un atributo de estilo con un ancho representado por porcentaje, como Style = "60%"; para indicar que la barra de progreso es del 60%.
<div> <div role = "ProgressBar" aria-valuenw = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> 90% completado (exitoso) </span> </div> </div>
(4) La barra de progreso de la animación
Los pasos para crear una barra de progreso de animación son los siguientes:
A. Agregue un <div> con clase .progress y .progress-striped. También agregue clase. Activa.
B. A continuación, agregue un vacío <Div> con clase. Progress-Bar en el anterior <Viv>.
C. Agregue un atributo de estilo con un ancho representado por porcentaje, como Style = "60%"; para indicar que la barra de progreso es del 60%.
Esto le dará a las rayas una sensación de movimiento de derecha a izquierda.
<div> <div role = "ProgressBar" Aria-Valuenow = "60" Aria-Valuemin = "0" Aria-Valuemax = "100"> <span> 40% Completo </span> </div> </div>
(5) barra de progreso apilada
Incluso puede apilar múltiples barras de progreso. Puede apilar múltiples barras de progreso en el mismo. Progress.
17. Objeto multimedia de bootstrap (objeto de medios)
Objeto multimedia en Bootstrap (objeto de medios). Estos estilos de objetos abstractos se utilizan para crear varios tipos de componentes (como los comentarios del blog). Podemos usar la mezcla gráfica y de texto en componentes, y las imágenes pueden estar alineadas a izquierda o derecha. Los objetos de los medios pueden usar menos código para lograr la disposición mixta de los objetos de medios y el texto.
El etiquetado ligero y las propiedades fáciles de escala de los objetos de los medios se logran aplicando la clase a etiquetas simples. Puede agregar los siguientes dos formularios a la etiqueta HTML para configurar el objeto Media:
A. Medios: esta clase permite que el multimedia (imagen, video, audio) en el objeto de los medios flote a la izquierda o a la derecha del bloque de contenido.
B. Lista de medios: si necesita una lista, cada elemento es parte de una lista desordenada, puede usar esta clase. Se puede usar para listas de comentarios y listas de artículos.
<Div> <a href = "#"> <img src = "/wp-content/uploads/2014/06/64.jpg"> </a> <div> <h4> Título de medios </h4> Aquí hay algún texto de muestra. Aquí hay algún texto de muestra. </div> </div>
18. Grupo de lista de bootstrap
Los componentes de la lista se utilizan para representar contenido complejo y personalizado en el formulario de lista. Los pasos para crear un grupo de lista básico son los siguientes:
A. Agregar clase .list-group a elemento <ul>.
B. Agregar clase .list-group-item a <li>.
<ul> <li> Registro de nombres de dominio gratuito </li> <li> Hosting gratuito de espacio de ventana </li> </ul>
(1) Agregue la insignia al grupo de la lista
Podemos agregar un componente de insignia a cualquier elemento de lista, que se coloque automáticamente a la derecha. Simplemente agregue <span> al elemento <li>.
<ul> <li> Registro de nombre de dominio gratuito </li> <li> <span> nuevo </span> 24*7 Soporte </li> </ul>
(2) Agregue el enlace al grupo de listas
Al usar etiquetas de anclaje en lugar de elementos de lista, podemos agregar enlaces a grupos de lista. Necesitamos usar <iv> en lugar de <ul> elemento.
<a href = "#"> 24*7 Soporte </a>
<a href = "#"> Hosting gratuito de espacio de ventana </a>
(3) Agregue contenido personalizado al grupo de listas
Podemos agregar cualquier contenido HTML al grupo de lista que se haya agregado al enlace anterior.
19. Paneles de arranque (paneles)
Paneles de arranque (paneles). El conjunto del panel se usa para insertar el conjunto DOM en una caja. Para crear un panel básico, simplemente agregue clase .Panel y clase .Panel-default al elemento <div>,
<div> <div> Este es un panel básico </div> </div>
(1) Título del panel
Podemos agregar títulos de panel de dos maneras:
A. El uso de la clase de cabecera .panel puede agregar fácilmente un contenedor de título al panel.
B. Use <h1>-<h6> con clase .panel-title para agregar el título del estilo predefinido.
<div> <div> Título de la plataforma sin título </div> <div> Contenido de plataforma </div> </div>
(2) Notas al pie del panel
Podemos agregar notas al pie al panel, simplemente colocar el botón o el subtexto en el <div> con clase.-Panel-Footer.
<Div> <Viv> Este es un panel básico </div> <div> Nota al pie del panón </div> </div>
(3) Panel con color contextual
Utilice las clases de estado de contexto Panel-Primary, panel-success, panel-Info, panel-ahorro y panel-amenazador para configurar un panel con colores contextuales.
<Div> <Viv> <h3> Título de la plataforma </h3> </div> <div> Este es un panel básico </div> </div>
(4) Panel con mesa
Para crear una tabla sin fronteras en el panel, podemos usar la clase de clase en el panel. Suponiendo que hay un <div> que contiene el cuerpo .panel, podemos agregar bordes adicionales a la parte superior de la tabla para separarla. Si no hay <iv> que contenga el cuerpo .panel, el componente se mueve del cabezal del panel a la tabla sin interrupción.
<Div> <Viv> <h3> Título de la plataforma </h3> </div> <div> Este es un panel básico </div> <table> <th> producto </th> <th> precio </th> <tr> <tr> <td> producto a </td> <td> 200 </td> </tr> <tr> <tr> <td> producto b </td> <td> <td> </td> </table> </table> </table>
(5) Panel con grupo de listas
Podemos incluir grupos de listas en cualquier panel, crear paneles agregando clases .Panel y .panel-default en el elemento <div> y agregar grupos de listas en el panel.
<div> <iv> Título de la plataforma </div> <div> <p> Este es un contenido básico del panel. </p> </div> <ul> <li> Registro de nombre de dominio gratuito </li> <li> Costo de actualización anual </li> </ul> </div>
20. Bootstrap bien
Bueno, es un contenedor que causa un efecto de abolladura o ilustración al contenido <Viv>. Para crear un pozo, simplemente coloque el contenido en un <div> con una clase.
<Div> ¡Hola, estoy bien! </div>
(1) Tamaño
Puede usar las clases opcionales Well-LG o Well-SM para cambiar el tamaño del pozo. Estas dos clases se usan junto con la clase .well. Estas dos clases afectan el acolchado, y dependiendo de la clase utilizada, bien parecerá más grande o más pequeña.
<Div> Hola, estoy en el gran pozo! </div>
<Div> Hola, estoy en el pequeño pozo! </div>
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.