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-獨立行,文字環繞,圖片自適應,隱藏元素

Bootstrap 3之美04-自定義CSS、Theme、Package

Bootstrap 3之美05-排版、Button、Icon、Nav和NavBar、List、Table、Form

Bootstrap 3之美06-Page Header、Breadcrumbs、Dropdowns、Button Dropdowns、用Button和Dropdowns模擬Select、Input Groups、Thumbnails、Panels、Wells

Bootstrap 3之美07-插件Collapse、Accordion、Modal、Tab、Tooltip、Alert、Carousel