botón de arranque

objetivo

Botón ampliamente utilizado sitio web o aplicación. En este tutorial, vamos a discutir cómo utilizar boostrap 3 botones, y cómo personalizar el botón predeterminado se explica a modo de ejemplo, instancia.

Utilice el botón predeterminado

Los siguientes ejemplos demostrarán cómo crear rápidamente Bootstrap botón 3.

La salida del código anterior es como sigue. Puede hacer clic aquí para ver los ejemplos en línea .

CSS

Exploramos el futuro puede utilizar para crear reglas CSS para estos botones. La clase principal se utiliza para crear el BTN botón, como se muestra a continuación.

.btn {
  display: inline-block;
  padding: 12px 6px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: media;
  cursor: puntero;
  Imagen de fondo: ninguno;
  frontera: 1px solid transparente;
  la frontera de radio: 4 píxeles;
  -webkit-user-select: ninguno;
	 -moz-user-select: ninguno;
	  -ms-user-select: ninguno;
	   -o-user-select: ninguno;
		  user-select: ninguno;
}

Debido al botón código CSS (con clase de BTN) rendido como inline-block, en el botón Permitir asociada al mismo se han rendido en los elementos comunes de base adyacentes, pero se puede dar para añadir anchura y altura de atributos. Llenándolo hasta el relleno superior e inferior eran 6 y 12 píxeles. margen inferior se establece en 0.

Tamaño de la fuente se establece en 14 píxeles y ajustar el peso de la fuente a la normalidad. La fila de botones con la clase alta BTN es 1,428571429, 1 altura ligeramente mayor que el valor predeterminado. Texto centrado.

atributo de espacio en blanco se establece en nowrap, por lo que la nueva línea, los espacios y las pestañas se doblarán. elementos relacionados serán posicionados verticalmente centrada en la altura media. Al pasar por encima de los elementos interrelacionados, el cursor aparecerá como una forma del puntero. Aquí no mostrar la imagen de fondo.

Aquí vamos a mostrar una, de 1 píxel borde sólido de espesor transparente. Desde la frontera de radio: 4PX ;, los botones serán redondeados forma de la esquina. Al aumentar o disminuir el valor de 4 píxeles, se puede tener la redondez redondeada se hace más grande o más pequeño. Dado que el usuario seleccione: ninguno de texto, botones y sub-elementos relacionados no será opcional. Con el fin de obtener una consistencia entre navegadores en la aplicación de las mismas propiedades múltiples proveedores con prefijos.

Cada botón que se muestra el ejemplo anterior, excepto BTN hay otra clase CSS, como BTN-default, btn-primaria, y así sucesivamente. Estas clases de botones de ajuste de color, color de fondo y propiedades de borde. Se utilizan con los botones convencionales y el estado del enlace (es decir, vuelo estacionario, activa, enfoque, etc.) botón de regla CSS.

código de clase BTN-primaria es el siguiente

.btn-primaria {
  de color: #ffffff;
  background-color: # 428bca;
  border-color: # 357ebd;
}

Diferentes tamaños de botones

Hay tres tamaños pueden ser establecidos. Con el fin de ajustar cada tamaño, es necesario agregar una clase extra.

btn-lg para establecer botón grande.

<Tipo botón = "botón" class = "btn btn-primaria BTN-lg"> botón grande </ botón>

btn-lg código CSS clase como sigue

.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1,33;
  la frontera de radio: 6px;
}

Utilice el botón de configuración BTN-xs btn-sm y con diferentes dimensiones.

<Tipo botón = "botón" class = "btn btn-primaria btn-sm"> botón grande botón </>
<Tipo botón = "botón" class = "BTN BTN-primaria btn-xs"> botón grande </ botón>

btn-sm y el código CSS classe BTN-x de la siguiente

.btn-SM,
.btn-xs {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  la frontera de radio: 3px;
}

.btn-xs {
  padding: 5px 1px;
}

El siguiente código muestra botones con diferentes tamaños de diferentes tipos. Puede hacer clic aquí para ver la demostración en línea . Aquí es el efecto de capturas de pantalla y código.

botón de nivel de bloque

Para utilizar todos los botones cuando la anchura de contenedores, Bootstrap 3 ofrece una opción de botón a nivel de bloque. Es necesario añadir la clase BTN-bloque a clase se discutió anteriormente para crear el botón de nivel de bloque.

<Tipo botón = "botón" class = "btn btn-primaria BTN-lg-BTN bloque"> botón grande </ botón>
<Tipo botón = "botón" class = "btn btn-éxito BTN-lg-BTN bloque"> botón grande botón </>  

Crear a nivel de bloque botones CSS se define como sigue

.btn bloque {
  display: block;
  width: 100%;
  padding-right: 0;
  padding-left: 0;
}

.btn-bloque-bloque + .btn {
  margin-top: 5px;
}

A continuación se muestra un botón de captura de pantalla y el nivel de bloque de código. Puede hacer clic aquí para ver los ejemplos en línea .

actividad en los botones

Puede utilizar la clase CSS activa para añadir un enlace a un botón o un aspecto diferente para mostrar que está activa. He aquí un ejemplo de la demo , capturas de pantalla y código.

Al utilizar las herramientas de desarrollo de Chrome, nos encontramos con que cuando se agrega el botón a la clase de activo, las reglas CSS están en vigor.

botones de actividad por defecto

.btn-default: flotar, .btn-default: enfoque, .btn-default: activo, .btn-default.active, .open .dropdown-toggle.btn-default {
color: # 333;
background-color: #ebebeb;
border-color: #adadad;
}

botones de actividad primaria

.btn-primaria: activable, .btn-primaria: enfoque, .btn-primaria: activo, .btn-primary.active, .open .dropdown-toggle.btn-primaria {
Color: #fff;
background-color: # 3276b1;
border-color: # 285e8e;
}

El éxito botón Eventos

.btn-éxito: flotar, .btn-éxito: el enfoque, .btn-éxito: activo, .btn-success.active, .open .dropdown-toggle.btn-{éxito
Color: #fff;
background-color: # 47a447;
border-color: # 398439;
}

Botón de información Eventos

.btn-info: flotar, .btn-info: enfoque, .btn-info: activo, .btn-info.active, .open .dropdown-toggle.btn-info {
Color: #fff;
background-color: # 39b3d7;
border-color: # 269abc;
}

Advertencia botón activo

.btn de alerta: flotar, .btn de alerta: el enfoque, .btn de alerta: activa, warning.active-.btn, .open .dropdown-toggle.btn de alerta {
Color: #fff;
background-color: # ed9c28;
border-color: # d58512;
}

botón activo Peligro

.btn-peligro: flotar, .btn-peligro: el enfoque, .btn-peligro: activo, .btn-danger.active, .open .dropdown-toggle.btn-peligro {
Color: #fff;
background-color: # d2322d;
border-color: # ac2925;
}

Botones de actividad de enlace

.btn-link, enlace .btn: activable, .btn-link: enfoque, .btn-link: activa {
border-color: transparente;
}

Por lo tanto, se puede ver que cambiando el atributo de color, backgound-color y border-color de lograr.

botones de movilidad

Puede utilizar la clase CSS desactivada para añadir un enlace a un botón o un aspecto diferente a demostrar que está deshabilitado. He aquí un ejemplo de la demo , capturas de pantalla y código.

Con el fin de hacer que el botón un poco borrosa, utilizar la siguiente regla CSS (buscar a través de las herramientas de desarrollo de Chrome)

.btn [desactivada], fieldset [desactivada] {.btn
puntero-eventos: ninguno;
cursor: no permitidos;
Opacidad: 0,65;
filtro: alfa (opacidad = 65);
webkit-box-shadow: ninguno;
box-shadow: ninguno;
}

elemento de anclaje de movilidad reducida

Cuando el elemento de anclaje con BTN y otra presentación relacionada con la clase está desactivada, es un poco diferente de lo habitual. En primer lugar, el elemento de unión de anclaje todavía existe sólo el aspecto y la sensación ha cambiado. Además, no se puede utilizar en la barra de navegación.

Haga clic aquí para ver la demostración en línea . Código es el siguiente:

Atención: role = "botón" para facilitar su uso y propósito de uso.

etiqueta del botón

Puede botón, un botón y el elemento de entrada se utiliza la clase, utilizar el botón como una etiqueta. Sin embargo, se recomienda que por lo general a través del elemento botón para utilizar, de lo contrario va a dar lugar a inconsistencias entre navegadores.

El siguiente ejemplo muestra cómo utilizar la etiqueta del botón

Haga clic aquí para ver la demostración en línea.

botón personalizado

Ahora vamos a empezar a personalizar el botón predeterminado, tiene una apariencia completamente diferente.

Nos código del botón comenzará la siguiente

<Tipo botón = "botón" class = "btn btn-default"> Por defecto el botón </>

Ahora tenemos que crear una clase CSS BTN-w3r, y reemplazarlo con BTN-default. Por lo tanto, vamos a escribir el siguiente código para reemplazar el código de seguridad

<Tipo botón = "botón" class = "btn btn-w3r"> Por defecto el botón </>

En primer lugar vamos a cambiar el color de fondo, añadir el siguiente CSS

.btn-w3r {
	background: # cb60b3; / * / * Los navegadores antiguos
	fondo: -moz-linear-gradiente (arriba, # cb60b3 0%, # ad1283 50%, # de47ac 100%); / * + * FF3.6 /
	fondo: -webkit-degradado (lineal, superior izquierda, inferior izquierda, el color de ventanilla (0%, # cb60b3), el color de ventanilla (50%, # ad1283), el color de ventanilla (100%, # de47ac)); / * Chrome, Safari4 + * /
	fondo: -webkit-lineal de gradiente (arriba, # cb60b3 0%, # ad1283 50%, # de47ac 100%); / * + Chrome10, Safari5.1 + * /
	fondo: -o-lineal de gradiente (arriba, # cb60b3 0%, # ad1283 50%, # de47ac 100%); / * Opera 11.10+ * /
	fondo: -ms-lineal-gradiente (arriba, # cb60b3 0%, # ad1283 50%, # de47ac 100%); / * + * IE10 /
	fondo: lineal gradiente (a abajo, # cb60b3 0%, # ad1283 50%, # de47ac 100%); / * * W3C /
	Filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# cb60b3', endColorstr = '# de47ac', GradientType = 0); / * * IE6-9 /
	}

Ahora son los siguientes botones

Para cambiar el color de la fuente, vamos a añadir el siguiente CSS en el código CSS de clases existente BTN-w3r

Color: #fff;

Ahora, para que el botón que se parece a una forma circular, añadiremos el siguiente CSS delante del código CSS de clases existente BTN-w3r

Anchura: 200px;
	altura: 200px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	la frontera de radio: 50%;

Para añadir un efecto de vuelo estacionario, añadiremos el siguiente código CSS

.btn-w3r: hover {
	background: # 333; 
	color: # e75616;
	}

Aquí está el código CSS después de añadir el efecto botón activable

Puede hacer clic aquí para ver nuestros botones personalizados de demostración en línea creado .