Beauty of Bootstrap 3 03-independent lines, text wrapping, image adaptive, hidden elements,

Beauty of Bootstrap 3 03-independent lines, text wrapping, image adaptive, hidden elements,

This article mainly includes:

■ Add an independent row
■ Text surround
■ Image Adaptive
■ Hide Elements

 

Add an independent row

Add two images between section with id as body and section with id as main.

We found that the two newly added images pushed the subject content to the right.

 

So, how do we deal with the newly added two images?
-- We are unlikely to use container because it is the class name at the page layout layer. However, we can place the two images in the div with the class name row.

 

We can also add more images.

 

The current image is not centered. Considering that there are 12 cells in total, 4 images only occupy 8 cells, and 4 cells are left blank. So we can offset the first image by two cells to the right.

 

Text surround

Add a class = "pull-left" attribute to the img element, which places the image on the left and enclose the text.

 

However, when we narrow down the page width to a very small size, we can see the whole picture only by dragging the horizontal scroll bar. Is there a way to make images adaptive?

 

Image Adaptive

We add a class named img-thumbnail to an image.

We can see that after adding img-thumbnail, we not only add a border to the image, but also, when the page size becomes smaller, we can always see the entire picture without dragging the horizontal scroll bar.

 

Hide Element

Sometimes, when the page width is smaller than or greater than a certain size, we want to hide some elements. Add a class named hidden-xs to the row with four images.

 

Indicates hiding the row of an image when the page width is less than 768 pixels.

We adjusted the page width below 768 pixels, And the row of the picture was hidden.

 

Similarly, we can add visible-md and visible-lg to the image line, indicating that the image line is displayed when the width is greater than 992 pixels and 1200 pixels, respectively.

 

Reference: WilderMinds

 

The "Beauty of Bootstrap 3" series of classes include:

Beauty of Bootstrap 3 01-download and introduce the beauty of Bootstrap 3 on the page 02-Grid introduction and beauty of APP Bootstrap 3 03-independent lines, text wrapping, image adaptive, hidden elements