bootstrap将代码块显示出来&bootstrap的form表单的form-group和form-control的区别与联系

1.多行代码可以使用 <pre> 标签。

为了正确的展示代码，注意将尖括号做转义处理。而且可以根据编写代码的缩进格式显示

<div> 
      <pre>
         &lt;script  type="text/javascript"&gt;
            $(function(){
              alert("Hello Jquery");
            });
          &lt;/script&gt;
      </pre>
    </div>

2.code会将字体背景改成红色

通过 <code> 标签包裹内联样式的代码片段。

<code>
        var n=3;
</code>

 3.通过 <kbd> 标签标记用户通过键盘输入的内容。

 <P>
        <kbd>ctl</kbd>+<kbd>F5</kbd>
 </P>

 

2 bootstrap的form表单的form-group和form-control的区别与联系

form-group一般用于div

form-control一般用于置于div中的标签元素，为了让控件在各种表单风格中样式不出错，需要添加类名“form-control”，如：

<form role="form">
    <div class="form-group">
        <input type="email" class="form-control" placeholder="Enter email">
    </div>
</form>

2.

表单除了这几个元素之外，还有input、select、textarea等元素，在Bootstrap框架中，通过定制了一个类名`form-control`，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。

1、宽度变成了100%

2、设置了一个浅灰色（#ccc）的边框

3、具有4px的圆角

4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化

5、设置了placeholder的颜色为#999