css3 - tablas - jquery
Diseñando los botones Bootstrap 3.x de Twitter (6)
Agregue colores adicionales a sus menos archivos y vuelva a compilar. Consulte también las mejores prácticas de personalización de Twitter Bootstrap . actualizar
Como lo menciona @ ow3n desde v3.0.3, use:
.btn-custom {
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}
Tenga en cuenta lo anterior @btn-default-color establece el @btn-default-color la fuente, @btn-default-bg el color de fondo y @ btn-default-border el color del borde. Los colores para estados como activo, desplazado y deshabilitado se calculan en función de estos parámetros.
Por ejemplo:
.btn-custom {
.button-variant(blue; red; green);
}
resultará en:
Para los que quieran usar CSS directo, reemplace los colores en este código:
.btn-custom {
color: #0000ff;
background-color: #ff0000;
border-color: #008000;
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active,
.open .dropdown-toggle.btn-custom {
color: #0000ff;
background-color: #d60000;
border-color: #004300;
}
.btn-custom:active,
.btn-custom.active,
.open .dropdown-toggle.btn-custom {
background-image: none;
}
.btn-custom.disabled,
.btn-custom[disabled],
fieldset[disabled] .btn-custom,
.btn-custom.disabled:hover,
.btn-custom[disabled]:hover,
fieldset[disabled] .btn-custom:hover,
.btn-custom.disabled:focus,
.btn-custom[disabled]:focus,
fieldset[disabled] .btn-custom:focus,
.btn-custom.disabled:active,
.btn-custom[disabled]:active,
fieldset[disabled] .btn-custom:active,
.btn-custom.disabled.active,
.btn-custom[disabled].active,
fieldset[disabled] .btn-custom.active {
background-color: #ff0000;
border-color: #008000;
}
.btn-custom .badge {
color: #ff0000;
background-color: #0000ff;
}
fin de la actualización
Para generar un botón personalizado:
.btn-custom {
.btn-pseudo-states(@yourColor, @yourColorDarker);
}
Lo anterior generará el siguiente css:
.btn-custom {
background-color: #1dcc00;
border-color: #1dcc00;
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active {
background-color: #19b300;
border-color: #169900;
}
.btn-custom.disabled:hover,
.btn-custom.disabled:focus,
.btn-custom.disabled:active,
.btn-custom.disabled.active,
.btn-custom[disabled]:hover,
.btn-custom[disabled]:focus,
.btn-custom[disabled]:active,
.btn-custom[disabled].active,
fieldset[disabled] .btn-custom:hover,
fieldset[disabled] .btn-custom:focus,
fieldset[disabled] .btn-custom:active,
fieldset[disabled] .btn-custom.active {
background-color: #1dcc00;
border-color: #1dcc00;
}
En el anterior # 1dcc00 será tu color personalizado y # 19b300 tu color más oscuro. En lugar de la menor solución, también puede agregar este CSS directamente a sus archivos html (después del bootstrap css).
O bien, obtenga su código CSS directamente del generador de botones Bootstrap 3 de Twitter
Los botones Bootstrap 3 de Twitter tienen colores limitados. Por defecto, habrá 5 7 colores (por defecto primario, error, advertencia, información, éxito y enlace) Ver:
Cada botón tiene 3 estados (predeterminado, activo y deshabilitado)
¿Cómo agregar más colores o crear botones personalizados? Esta pregunta ya está respondida para Bootstrap 2.x de Twitter: botones de arranque de estilo de twitter . Bootstrap 3 no es compatible con versiones anteriores. Habrá muchos cambios en los archivos less y css. Se eliminará el soporte para IE7. TB3 es el móvil primero. Los códigos de marcado también se cambiarán.
Aquí hay otra alternativa con la ventaja de que puede agregar tantas "acciones de botón" (colores) como desee. Aquí hay un breve video de demostración: usando los botones de UI del unicornio con Twitter Bootstrap
Si toma la biblioteca y compila usted mismo, puede definir tantas "acciones de botón" editando una lista Sass que se ve así:
$ubtn-colors: (''primary'' #1B9AF7 #FFF) (''plain'' #FFF #1B9AF7) (''inverse'' #222 #EEE) (''action'' #A5DE37 #FFF) (''highlight'' #FEAE1B #FFF)(''caution'' #FF4351 #FFF) (''royal'' #7B72E9 #FFF) !default;
Agregando tantos tipos personalizados como desee (y, por supuesto, eliminando aquellos que no necesita).
Aquí hay una manera agradable y fácil de personalizar los colores adicionales del botón Bootstrap
Generador de botones Bootstrap
A continuación se muestra una muestra del CSS que generará:
.btn-sample {
color: #ffffff;
background-color: #611BBD;
border-color: #130269;
}
.btn-sample:hover,
.btn-sample:focus,
.btn-sample:active,
.btn-sample.active,
.open .dropdown-toggle.btn-sample {
color: #ffffff;
background-color: #49247A;
border-color: #130269;
}
.btn-sample:active,
.btn-sample.active,
.open .dropdown-toggle.btn-sample {
background-image: none;
}
.btn-sample.disabled,
.btn-sample[disabled],
fieldset[disabled] .btn-sample,
.btn-sample.disabled:hover,
.btn-sample[disabled]:hover,
fieldset[disabled] .btn-sample:hover,
.btn-sample.disabled:focus,
.btn-sample[disabled]:focus,
fieldset[disabled] .btn-sample:focus,
.btn-sample.disabled:active,
.btn-sample[disabled]:active,
fieldset[disabled] .btn-sample:active,
.btn-sample.disabled.active,
.btn-sample[disabled].active,
fieldset[disabled] .btn-sample.active {
background-color: #611BBD;
border-color: #130269;
}
.btn-sample .badge {
color: #611BBD;
background-color: #ffffff;
}
Después de encontrar esta solución a través de google y entender mejor los botones de arranque, encontré la siguiente herramienta para generar diferentes colores para los botones de arranque.
Significa que tendrás que agregar esto a un css separado, pero es perfecto para lo que necesitaba. Aquí esperamos que sea útil para otros:
Es bastante fácil hacer esto también con CSS sin procesar
CSS
.btn-purple {
background: #9b59b6;
border-color: #9b59b6;
}
.btn-purple:hover {
background: #8e44ad;
border-color: #8e44ad;
}
.btn-teal {
background: #1abc9c;
border-color: #1abc9c;
}
.btn-teal:hover {
background: #16a085;
border-color: #16a085;
}
HTML
<button class="btn btn-purple">purple</button>
<button class="btn btn-teal">teal</button>
Violín en: http://jsfiddle.net/z7hV6/
He estado buscando una posible solución por bastante tiempo para estilizar los botones de arranque. Seguí el último estilo de estilo css (menos http://lesscss.org/ ) y bastantes soluciones para personalizar los botones, pero ninguna de ellas fue útil. Hay generadores de botones de arranque bastante sorprendentes disponibles en línea, como http://www.plugolabs.com/twitter-bootstrap-button-generator/ y muchos más. Pero para mi sorpresa, una sola línea de código en el archivo css me funcionó decentemente bien. (Nota: en lugar de "color de fondo", he usado "fondo" como parámetro para especificar el nombre del color del botón. En el código html, he usado btn-custom como el nombre de clase que he redefinido en el css archivo.)
código HTML
<a href="#" target="_blank" class="btn btn-custom pull-right">
<i class="fa fa-edit fa-lg"></i>
Create an Event
</a>
Código CSS
.btn-custom {
background: #colorname;
}