Bootstarp Learning (5) image, bootstarp learning image

Bootstarp Learning (5) image, bootstarp learning image
Image

Images are also frequently used in Webpage creation. The Bootstrap framework provides the following styles for image styles:

1. img-responsive:Response images, mainly for responsive design
2. img-rounded:Rounded corner Image
3. img-circle:Circular Image
4. img-thumbnail:Thumbnail slices

Usage:

The usage is very simple, you only needAdd the corresponding class name on the tag, as shown in the following code:

The running effect is as follows or the result window on the right is displayed:

For the source code corresponding to each state, you can view the 306th lines of the bootstrap.css file ~ Row 3:

img {vertical-align: middle;}.img-responsive,.thumbnail>img,.thumbnail a >img,.carousel-inner > .item >img,.carousel-inner > .item > a >img {display: block;max-width: 100%;height: auto;}.img-rounded {border-radius: 6px;}.img-thumbnail {display: inline-block;max-width: 100%;height: auto;padding: 4px;line-height: 1.42857143;background-color: #fff;border: 1px solid #ddd;border-radius: 4px;  -webkit-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}.img-circle {border-radius: 50%;}

Set the image size:

Because the style does not limit the size of the image, you need to process the image size in other ways. For example, you can control the image container size. (Note that you cannot directly modify the size of the img image through the css style, so the operation will not respond)

Note:

For rounded and circular images, the CSS 3 rounded corner style is used. Therefore, IE8 and earlier versions are not supported, and there is no rounded corner effect.

The Bootstrap framework also isolates the image styles to better maintain the image styles:
1. For the LESS version, see scaffolding. less.
2. For the Sass version, see _ scaffolding. scss.
You can modify one of them and re-compile them to get the desired image style effect.

 

<Div class = "container"> <div class = "row"> <div class = "col-sm-4">  <div> default picture </div> <div class = "col-sm-4">  <div> rounded corner image </div> <div class =" col-sm-4 ">  <div> circular image </div> <div class = "row"> <div class = "col-sm-6">  <div> thumbnail </div> <div class =" col-sm-6 ">  <div> responsive image </div>> </div>