将Twitter Bootstrap样式应用于CodeMirror？

Question

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

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

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

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

UPDATE

我尝试从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

代码镜像和Bootstrap v4（也适用于v3）：
样式尚不支持验证状态（具有错误，具有警告，具有成功）

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

Answer 2

CodeMirror隐藏原始内容textarea并创建(相当复杂)的结构div和pre元素.您可以设置最外层的样式div,.CodeMirror以实现相同的效果.

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