css3 - tablas - jquery

Diseñando los botones Bootstrap 3.x de Twitter

Question

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.

Answer 1

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

Answer 2

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).

Answer 3

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; 
}

Answer 4

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:

http://twitterbootstrap3buttons.w3masters.nl/

Answer 5

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/

Answer 6

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; 
}