Bootstrap 3之美03-獨立行,文字環繞,圖片自適應,隱藏元素，

Bootstrap 3之美03-獨立行,文字環繞,圖片自適應,隱藏元素，

本篇主要包括：

■  添加獨立的一行
■  文字環繞
■  圖片自適應
■  隱藏元素

 

  添加獨立的一行

在id為body的section和id為main的section之間，添加2張圖片。

我們發現，新加的2張圖片把主體內容擠到了右側。

 

那麼，我們如何處理新加的2張圖片呢？
--我們不太可能用container，因為它是頁面配置層面的類名。但我們可以把這2張圖片放在class名為row的div中。

 

我們還可以加更多的圖片。

 

現在的圖片還沒有置中。考慮到總共有12個儲存格，而4張圖片只佔了8個儲存格，還空出4個儲存格。於是，我們可以讓第一張圖片向右位移2個儲存格。

 

  文字環繞

為img元素增加一個class="pull-left"屬性，這會讓圖片靠左，文字環繞。

 

但是，當我們把頁面寬度縮小到很小的尺寸，發現圖片需要拖拽水平捲軸才可以看到全貌。有沒有辦法讓圖片自適應呢？

 

  圖片自適應

我們為某個圖片增加一個名稱為img-thumbnail的class。

我們看到：添加img-thumbnail後，不僅為圖片加了一個邊框，並且，當頁面尺寸變得再小，我們總能看到圖片全貌，而不需要拖拽水平捲軸。

 

  隱藏元素

有時候，當頁面寬度小於或大於某個尺寸，我們希望隱藏一些元素。在有4個圖片的行添加一個名為hidden-xs的class。

 

意思是：當頁面寬度小於768像素的時候，隱藏圖片行。

我們把頁面寬度調到768像素以下，圖片行果然被隱藏了。

 

同理，我們也可以為圖片行加上visible-md, visible-lg,分別表示當寬度大於992像素和1200像素時顯示圖片行。

 

參考資料：WilderMinds  

 

“Bootstrap 3之美”系列類包括:

Bootstrap 3之美01-下載並引入頁面 Bootstrap 3之美02-Grid簡介和應用 Bootstrap 3之美03-獨立行,文字環繞,圖片自適應,隱藏元素