• 栅格实例效果
• tips
• 缩略图栅格
• 新需求
• 错误

栅格实例效果

这个东西，不需要我们自己写，要去bootstrap当中找，这个东西有个学名，叫做缩略图。上面是一张图片，下面是图片的介绍。

  

    

      
      

        
Thumbnail label
        
...
        
Button Button
      
    
  

tips

这么写的a标签，是不会被点击的。

缩略图栅格

	
		
		
		
		
		
		
	
	
		

			

			  
hello world!
			
			

			  

				

				  
				  

					
Bootstrap 编码规范
					by @mdo
					
Bootstrap 编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。
				  
				
			  
			  

				

				  
				  

					
Bootstrap 编码规范
					by @mdo
					
Bootstrap 编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。
				  
				
			  
			  

				

				  
				  

					
Bootstrap 编码规范
					by @mdo
					
Bootstrap 编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。
				  
				
			  
			  

				

				  
				  

					
Bootstrap 编码规范
					by @mdo
					
Bootstrap 编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。
				  
				
			  
			
		
	
	
	

效果如下：

新需求

当进行响应式的时候，卡片向下掉的顺序是：bootstrap-react-typescript-webpack。

这个就要用到列排序。

第一个向下掉，证明这个卡片是在html的最后的位置。

所以我们第一步，是要在html当中，调整卡片的顺序，编写为：webpack-typescript-react-bootstrap。

在这个基础上，我们使用列排序。

• lg的时候
  • bootstrap需要向左偏移，要增加right的距离，我们要设置col-lg-pull-9。
  • react需要向左偏移，要增加right的距离，我们要设置col-lg-pull-3。
  • typescript需要向右偏移，要增加left的距离，我们要设置col-lg-push-3。
  • webpack需要向右偏移，要增加left的距离，我们要设置col-lg-push-3。
• md的时候
  • 同上原理
• sm的时候
  • 同上原理。

错误

在这个实现新需求的过程中，我们遇到一个错误，效果如下：

最终需求实现的源码如下：

	
		
		
		
		
		
		
	
	
		

			

			  
hello world!
			
			

				

				

				  
				  

					
Bootstrap 编码规范
					by 4444
					
Bootstrap 编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。
				  
				
				
				

				

				  
				  

					
Bootstrap 编码规范
					by 3333
					
Bootstrap 编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。
				  
				
				
				

					

					  
					  

						
Bootstrap 编码规范
						by 2222
						
Bootstrap 编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。
					  
					
				
				

					

					  
					  

						
Bootstrap 编码规范
						by 1111
						
Bootstrap 编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。
					  
					
				
			
		
	
	
	

最终需求实现的效果如下：