将Twitter Bootstrap样式应用于CodeMirror？

Question

我有一个带有textarea的表单，用户可以在其中编写一些代码。我正在使用CodeMirror代码编辑器框替换textarea，所以我想将Bootstrap样式应用到它。

这就是现在的表单，除了代码编辑器之外的所有表单元素都有Bootstrap样式：

所以特别是，我认为我需要在鼠标悬停时给代码编辑器圆角，边框，正确的宽度（input-xxlarge）和蓝色高光。

我该怎么做？除了手动复制必要的CSS之外，有没有办法做到这一点？

更新

我尝试从Bootstrap复制textarea CSS，当我在代码编辑器中单击时，除了焦点CSS之外所有看起来都很好。这就是我得到的：

亮点在内部，而不是外部。我是如何解决这个问题的？

这是我通过从Bootstrap复制添加的CSS：

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

Answer 1

CodeMirror隐藏原始textarea并创建div和pre元素的（相当复杂）结构。您可以设置具有div类的最外层.CodeMirror的样式，以达到相同的效果。

这将需要自定义CodeMirror样式表或为类/元素添加自己的样式。如果您使用LESS构建Bootstrap，可能有一种方法可以应用mixin以避免重复textarea样式，尽管重复量可能很小。

Answer 2

（Code Mirror / Bootstrap v3）textarea主题：
尚未支持验证状态（has-error，has-warning，has-success）

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