【无标题】

BootStrap

  
     
     	
     
     
     
        
     
     
  
  
  	
Hello, world!
     
      
    
  	
  	
  	 
      

布局容器

1、.container 类用于固定宽度并支持响应式布局的容器。

2、.container-fluid类用于100% 宽度，占据全部视口（viewport）的容器。

栅格网格系统

列组合：

列总和数不能超12，大于12，则自动换到下一行

列偏移：只需要在列元素上添加类名"col-md-offset-*"(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。

列排序：列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。
在Bootstrap框架的网格系统中是通过添加类名 col-md-push- 和 col-md-pull-  (其中星号代表移动的列组合数)。往前pull，往后push。

列嵌套:Bootstrap框架的网格系统还支持列的嵌套。
你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列.

常用样式1

			1. 标题
				bootstrap对h1~h6的标题效果进行覆盖
				提供了对应的类名，为非标题元素设置样式  .h1~.h6
				副标题 small标签 或 .small类名
			2. 段落
				通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。
				:小号字
				:加粗				
				:斜体
			3. 强调
				.text-muted：提示，使用浅灰色（#999）					
				.text-primary：主要，使用蓝色（#428bca）					
				.text-success：成功，使用浅绿色(#3c763d)					
				.text-info：通知信息，使用浅蓝色（#31708f）					
				.text-warning：警告，使用黄色（#8a6d3b）					
				.text-danger：危险，使用褐色（#a94442）
			4. 对齐效果
				Bootstrap通过定义四个类名来控制文本的对齐风格：
					.text-left：左对齐 
					.text-center：居中对齐 
					.text-right：右对齐  
					.text-justify：两端对齐。

2. 代码
（1）使用来显示单行内联代码
（2）使用样式：pre-scrollable (height,max-height高度固定,为340px,超过存在滚动条)				
		（3）使用来显示用户输入代码,如快捷键

表单：

1. 文本框
   .form-control 表单元素的样式
   表单控件的大小 .input-lg .input-sm
   2. 下拉框
   .form-control 表单元素的样式
   multiple="multiple" 设置下拉框多选
   3. 文本域
   .form-control 表单元素的样式
   4. 复选框
   垂直显示   .checkbox
   水平显示  .checbox-inline
   5. 单选框
   垂直显示   .radio
   水平显示  .radio-inline
   6. 按钮
   1. 使用按钮
   基础样式： .btn
   附加样式：btn-primary  btn-info  btn-success  btn-warning  btn-danger  btn-link  btn-default
   2. 多标签使用
   其他标签可以通过添加按钮样式设置成按钮效果（a标签、span标签等）
   3. 按钮大小
   大按钮 .btn-lg
   正常按钮 .btn-sm
   小按钮 .btn-xs
   4. 按钮禁用
   1.通过disabled属性（真正的禁用元素）
   2.通过disabled样式（样式上禁用）

表单布局：

水平表单
设置样式： .form-horizontal
内联表单
设置样式： .form-inline

导航：

	
		
		
		
	
	
		
标签式的导航菜单
		

		  
Home
		  
SVN
		  
iOS
		  
VB.Net
		  
Java
		  
PHP
		
		
基本的胶囊式导航菜单
		

			
Home
			
SVN
			
iOS
			
VB.Net
			
Java
			
PHP
		
		
面包屑式导航菜单
		

		    
Home
		    
2013
		    
十一月
		
		

		
分页导航
		

			
«
			
1
			
2
			
3
			
4
			
5
			
»
		
		
翻页导航
		

		    
上一页
		    
下一页
		
	

模态框：

操作模态框
通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
通过 JavaScrip t：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框打开模态框：('#identifier').modal('hide')