Bootstrap3.3.7全面解读和Bootstrap4.0全面分析----------001（全局CSS样式）

看到网上很多帖子介绍这个Bootstrap，介绍的一点也不系统。首先在我的印象中，Bootstrap一直的定位是“不懂美工的前端工程师的利器”，它的很多命令基本是基于class的定义来实现的。如果你的英文很不错，那Bootstrap的学习会如鱼得水，因为它的很多命令基本都是英语的本意。我会从Bootstrap的全局css样式，组件JavaScript插件三个方面，详细的介绍一下。并把Bootstrap4.0的最新特性讲述一下。

我们看一下，全部的代码，如图：所有源代码的地址：点击打开链接

我介绍的采取的是Bootstrap3.3.7的版本，就是现在3.0的最后一个版本。闲话不说，开始我们的介绍。

1.全局CSS样式介绍:

这部分内容，包括了栅格系统，排版，表格，表单，按钮，图片，辅助类，以及LESS的配合使用。当然从4.0开始预处理代码全面移动到SASS上面了。所以我建议大家学习sass，这个以后会好些.之前我写过less的介绍和使用，我会在后续介绍sass的使用。想学习less的，可以看我以前的文章。

㈠先说栅格系统：

3.3.7中栅格系统原理是基于less的媒体查询的来创建关键的分界点阈值，源码布局如下：

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

主要的一个宗旨就是一行12列，你按照一行总数12来布局，就能到达你想要的效果。参数如下：

代码如下：你只要对参数理解到位了，那就直接添加样式就可以。sm，md，lg规定大小规格。

			
			

		  
.col-md-1
		  
.col-md-1
		  
.col-md-1
		  
.col-md-1
		  
.col-md-1
		  
.col-md-1
		  
.col-md-1
		  
.col-md-1
		  
.col-md-1
		  
.col-md-1
		  
.col-md-1
		  
.col-md-1
		
		

		  
.col-md-8
		  
.col-md-4
		
		

		  
.col-md-4
		  
.col-md-4
		  
.col-md-4
		
		

		  
.col-md-6
		  
.col-md-6
		
		

结果如下：

㈡排版部分：

Bootstrap对文档的很多样式进行了复写，Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予  元素和所有段落元素。另外，

（段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin），这部分，我将代码都全部整理了出来，如下：

	
		
h1. Bootstrap heading Secondary text
		行内元素具有h1的class，就是不一样
		
		
我被设置了等于 1/2 行高（即 10px）的底部外边距margin
		
我上面和我一样的段落元素设置了底部外边距（margin）
		
我加了lead的class样式，我会突出显示
		
Bootstrap教程
 
		对于被删除的文本使用

		对于没用的文本使用

		为文本添加下划线
		
		
Left aligned text.
		
Center aligned text.
		
Right aligned text.
		
Justified text.
		
No wrap text.
		
		
Lowercased text.
		
Uppercased text.
		
Capitalized text.
		
		
		

  			
列表类
  			
列表类
  			
列表类
        
        
        

            
同一行的列表
            
同一行的列表
            
同一行的列表
        

效果如下：所有的代码格式，怎么达到这个效果，我都写在了代码中。可以看上面的代码。

㈢表格介绍

为任意 

 标签添加 .table 类可以为其赋予基本的样式 ，如果想创建响应式的表格，就把你创建的表格包裹，将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格。所有关键代码如下：

姓名	年龄	地址
张三	22	北京
李四	23	深圳
王五	24	上海

结果如图：

㈣表单的介绍

表单主要的就是form表单的使用，对这个标签进行样式定义，包括input的定义，以及多选框（checkbox），单选框（radio）的使用。更加详细的介绍在代码中：

		
			

				  

				    Email address
				    
				  
				  

				    Password
				    
				  
				  

				    File input
				    
				    
Example block-level help text here.
				  
				  

				    
				       Check me out
				    
				  
				  Submit
			
	
			
			
			

			  

			    Amount (in dollars)
			    

			      
$
			      
			      
.00
			    
			  
              Transfer cash
             


            
	     

				  

				    Email
				    

				      
				    
				  
				  

				    Password
				    

				      
				    
				  
				  

				    

				      

				        
				           Remember me
				        
				      
				    
				  
				  

				    

				      Sign in
				    
				  
		
		
		


		
		
		
			
			   乒乓球
			
			
			   篮球
			
			
			   足球
			
			

			
			   1
			
			
			   2
			
			
			   3
			
	

结果如图：

表单中的内联表单和水平排列的表单，就是在form标签上面，添加.form-inline 和 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类。其实最好的方式就是多使用，多练习。这样就会很快掌握。

㈤按钮，图片，辅助类

按钮：为 、 或  元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。在按钮上也可以预定义样式，比如颜色，状态（激活还是禁用）等。

按钮：
		    
			Link
			

Button danger



（大按钮）Large button （大按钮）Large button

（默认尺寸）Default button （默认尺寸）Default button

（小按钮）Small button （小按钮）Small button

（超小尺寸）Extra small button （超小尺寸）Extra small button

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素 如下：

active设置为激活状态，disabled设置为禁用状态

（块级元素）Block level button （块级元素）Block level button结果如下：

图片：在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。还有可以改变图片的形状。

图片：
			
			

结果如图：支持响应式。我缩小了浏览窗口。

辅助类：文本颜色，背景颜色，关闭按钮，三角按钮，快速浮动，清浮动，内容居中，显示和隐藏等等。代码如下：

辅助类:
				
1.文本颜色：
				
我是什么颜色
				
我是什么颜色
				
我是什么颜色
				
我是什么颜色
				
我是什么颜色
				
我是什么颜色
			    
2.背景颜色：
			    
我是什么背景颜色
				
我是什么背景颜色
				
我是什么背景颜色
				
我是什么背景颜色
				
我是什么背景颜色
				
×
				三角符号：


				
				
				

				
我是左浮动哦
                
我是右浮动哦
                


					
				
我是显示的
                
我是隐藏的

结果如下：

下一节介绍，组件的使用。