Liz's Blog

Bootstrap#3:Responsive Image 響應式圖片

| Comments

響應式表格,當然也有伸縮自如的響應式圖片功能囉!

以下內容參考自Bootstrap Images,通常要插入圖片,可以這樣寫:

<img src="banner.jpg" alt="example">

但如果希望圖片可以有不同的形狀,則可以在src及alt間,加入 class="img-rounded"等,例如:
1.圓角圖片 <img src="banner.jpg" class="img-rounded alt="example">
2.橢圓形 <img src="banner.jpg" class="img-circle alt="example">

如果希望圖片也可以隨著瀏覽器縮小而縮小,只要加上以下就可以囉!
<img class="img-responsive" src="banner.jpg" alt="example">

【延伸閱讀】

  1. GemGem大亂鬥#1:Bootstrap
  2. Bootstrap#1:導覽列Navigation Bar
  3. Bootstrap#2:Responsive Table 響應式表格
  4. Bootstrap#3:Responsive Image 響應式圖片

Comments

comments powered by Disqus