Bootstrap Learning (3): bootstrap Learning

Bootstrap Learning (3): bootstrap Learning
Bootstrap Image

Bootstrap supports images. Bootstrap provides three classes that can apply simple styles to images:

• . Img-rounded: AddBorder-radius: 6pxTo obtain the rounded corner of the image.
• . Img-circle: AddBorder-radius: 500pxTo make the entire image circle.
• . Img-thumbnail: Add some padding and a gray border.

See the following example:

<! DOCTYPE html> 
The result is as follows:
 class
The following types can be used in any image.

 

 
  
 
   
 
    
Class
 
    
Description
 
   
 
   
 
    
. Img-rounded
 
    
Add rounded corners for images (not supported by IE8)
 
   
 
   
 
    
. Img-circle
 
    
Change the image to a circle (not supported by IE8)
 
   
 
   
 
    
. Img-thumbnail
 
    
Thumbnail Function
 
   
 
   
 
    
. Img-responsive
 
    
Image response (well extended to the parent element)
 
   
 
  

 
Rounded image
<! DOCTYPE html> 
Shows the effect:
Circular Image
<! DOCTYPE html> 
Shows the effect.
Thumbnail
<! DOCTYPE html> 
Shows the effect:
Response Image
Add the. img-responsive class to the  label to enable responsive design for images. The image will be well extended to the parent element.
The. img-responsive class applies the max-width: 100%; and height: auto; styles to the image:
<! DOCTYPE html> 
Shows the effect.

Bootstrap Learning (1): http://www.cnblogs.com/0201zcr/p/4900062.html

Bootstrap Learning (2): http://www.cnblogs.com/0201zcr/p/4902930.html
Thank you!