Tengo un formulario con un área de texto donde los usuarios pueden escribir algunos códigos. Estoy reemplazando ese área de texto con un cuadro de editor de código CodeMirror, por lo que quiero aplicarle estilos de Bootstrap.¿Aplica estilos de Twitter Bootstrap a CodeMirror?

Esto es lo que la forma se parece en este momento, en el que todos los elementos del formulario excepto el editor de código tienen Bootstrap estilos de: enter image description here

Así, en particular, creo que es necesario para dar el editor de código esquinas redondeadas, una frontera , el ancho correcto (entrada-xxlarge) y las luces azules cuando se pasa el mouse.

¿Cómo puedo hacer esto? ¿Hay alguna manera de hacer esto además de copiar manualmente sobre el CSS necesario?

ACTUALIZACIÓN

He intentado copiar el CSS área de texto de Bootstrap, y todo se ve bien, a excepción de la CSS enfoque cuando hago clic en el editor de código. Esto es lo que me sale:

enter image description here

Lo más destacado es en el interior, en lugar de la parte exterior. ¿Alguna idea de cómo soluciono esto?

Este es el CSS añadí copiando de Bootstrap:

.CodeMirror { 
     line-height: 1.3em; 
     font-family: monospace; 

     /* Necessary so the scrollbar can be absolutely positioned within the wrapper on Lion. */ 
     position: relative; 
     /* This prevents unwanted scrollbars from showing up on the body and wrapper in IE. */ 
     overflow: hidden; 
     background-color: white; 
     width: 530px; 

     /* Copied from Bootstrap's textarea */ 
     display: inline-block; 
     padding: 4px 6px; 
     margin-bottom: 9px; 
     color: #555555; 
     border: 1px solid #ccc; 
     -webkit-border-radius: 3px; 
     -moz-border-radius: 3px; 
     border-radius: 3px; 
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
     -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; 
     -moz-transition: border linear 0.2s, box-shadow linear 0.2s; 
     -ms-transition: border linear 0.2s, box-shadow linear 0.2s; 
     -o-transition: border linear 0.2s, box-shadow linear 0.2s; 
     transition: border linear 0.2s, box-shadow linear 0.2s; 
    } 

    .CodeMirror-focused { 
     /* Copied from Bootstrap's textarea */ 
     border-color: rgba(82, 168, 236, 0.8); 
     outline: 0; 
     outline: thin dotted \9; 
     /* IE6-9 */ 

     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
       box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
    }

Fuente

2012-10-05 grautur

copiado su código y parece funcionar para mí sin ningún cambio, o tal vez lo solucionó ... –

CodeMirror esconde el original textarea y crea una estructura (bastante compleja) de div y pre elementos. Puede diseñar el div más externo que tenga una clase de .CodeMirror para lograr el mismo efecto.

Esto requerirá personalizar la hoja de estilo CodeMirror o agregar su propio estilo para la clase/elemento. Si está compilando Bootstrap utilizando LESS, puede haber una forma de aplicar un mixin para evitar la duplicación del estilo textarea, aunque la cantidad de duplicación es probablemente mínima.

Fuente

2012-10-05 08:07:35

¡Impresionante, gracias! Intenté copiar sobre el CSS desde el área de texto de Bootstrap, y parece más correcto, excepto cuando me concentro en el editor de código. (Actualicé mi pregunta más arriba.) Los resaltados azules son internos al editor de código, en lugar de rodearlo. ¿Tiene alguna sugerencia sobre cómo solucionar eso? – grautur

El esquema podría comportarse de manera diferente porque los tipos de elementos son diferentes. Configuraré un rápido JS Fiddle y veré si ese es el caso. –

http://jsfiddle.net/YhLjn/ - parece que el esquema se comporta de la misma manera en un 'div' y' textarea'. ¿Quizás la clase 'enfocada' se está aplicando a un elemento interior? –

(Código Espejo/Bootstrap v3) textarea tema:
aún no cuenta con el apoyo de los estados de validación (tiene errores, tiene de alerta, tiene éxito-)

.CodeMirror { 
    /* Bootstrap Settings */ 
    box-sizing: border-box; 
    margin: 0; 
    font: inherit; 
    overflow: auto; 
    font-family: inherit; 
    display: block; 
    width: 100%; 
    padding: 6px 12px; 
    font-size: 14px; 
    line-height: 1.42857143; 
    color: #555; 
    background-color: #fff; 
    background-image: none; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
    /* Code Mirror Settings */ 
    font-family: monospace; 
    position: relative; 
    overflow: hidden; 
} 

.CodeMirror-focused { 
    /* Bootstrap Settings */ 
    border-color: #66afe9; 
    outline: 0; 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); 
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
}

Fuente

2014-12-31 23:55:27 tfmontague

¿Aplica estilos de Twitter Bootstrap a CodeMirror?

ACTUALIZACIÓN

Respuesta

Cuestiones relacionadas