Bootstrap学习笔记

Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 的文件类型。因此这一文档类型必须出现在项目的每个页面的开始部分

? ? ? ?

HTML中定义的所有标题标签, 从

到

都是可用的。Bootstrap定义的全局 font-size 是 14px，line-height 是 20px。这些样式应用到了 和所有的段落上。另外，对

(段落)还定义了1/2行高(默认为10px)的底部外边距(margin)属性。

在使用Bootstrap之前必须要将bootstrap.css或者bootstrap.min.css（压缩版）引入到页面中，它定义了Bootstrap的基本样式。如果需要使用Bootstrap提供的组件，要将bootstrap.js或者bootstrap.min.js（压缩版）引入到页面中。因为bootstrap的JS插件需要Jquery的支持，所有在引入bootstrap.js之前必须将Jquery.js也引入到页面上。另外如果你希望你的页面支持响应式布局，必须引入bootstrap-responsive.css或者bootstrap-responsive.min.css（压缩版），它主要提供页面在移动设备上的显示样式支持，需要注意的是bootstrap-responsive.css必须放置在bootstrap.css之后，否则便不具有响应式布局功能。当然在Bootstrap3的版本中，bootstrap.css和bootstrap-responsive.css已经合并了。

一、代码样式

Bootstrap提供了代码样式，用于在页面上展示代码，以此来区分于正文的区别，如果是行内嵌套代码，可以用标签，但是对于代码中的符号要进行转换（<是<、>是>）例如：

? ?

For example, <section> should be wrapped as inline.

如果是代码块可以用

标签，同样的，代码中的要将代码中的尖括号做转换。例如： 
? ? ? ? ? ? ? ? ? 
    
    <p>Sample text here...</p>     <p class=\    <p class=\    <p class=\    <p class=\    <p class=\
??     <p class=\??     ??    
 
 
二、表格 
 
基本的表格样式可以用 
 标签。例如： 
? ? ? ? ? ? ? ? ? 
正常表格
   
     
??      
 ??    ??     ??    
??      
 ??       ??    ??     ??    
??      
 ??       ??    ??     ??    
 
First Name
 
Last Name
Username
 
Mark
Otto
@mdo
 
Jacob
Thornton
@fat
 
如果想让表格的内容更紧凑一点可以为表格添加 .table-condensed 类，如果想为表格添加颜色可以选择情景类，情景类有：  .success .error .warning .info 表示成功或积极的行为。 表示一个危险或存有潜在危险的行为。 表示警告，可能需要注意。 作为一个默认样式的一个替代样式。 例如： 
? ? ? ? ? ? ? ? ? 
  
   
     
   
Mark
??      
 ??    ??    
??    
Jacob ??       ??    ??    
??    
Larry ??       ??    ??     ??    
 
First Name
      
Last Name
   
Username
    
 
 
Otto
@mdo
 
Thornton
@fat
 
the Bird
@twitter
 
 
三、表单 
 
基本的表单可以用
标签，只要定义了标签，标签里面的每个单独的表单控件都已经被赋予了样式。默认是堆叠、label左侧对齐并在控件之上。例如： 
? ? ? ? ? ? ? ? ? 
   
 
    
普通表单
     Label name 
    
    
       
??