3.三、Bootstrap V4自學之路------內容---圖片

如下部分都是在<img>標籤中操做

響應式圖片

實驗失敗！已引入holder.js文件。data-src="holder.js/100x64時能夠出現佔位圖。但當holder.js/100%x64時，不顯示。

<div style="width:100%;height: 64px;display: block;">
    <img data-holder-rendered="true" data-src="holder.js/100%x64" class="img-responsive" style="width:100%;height: 64px;display: block;" alt="100%x64" >
</div>

找到緣由了。極客學院wiki文檔翻譯有誤。

正常狀況下使用 .img-fluid類。自動擴充到父類窗體大小!

在補充說明holder.js使用狀況。

若是按照百分比顯示，不要使用極客學院網站代碼上寫的data-src="holder.js/100%x250"

正常使用應當是  data-src="holder.js/100px250"   注：p是英文百分比的縮寫。坑爹！！！

圖片形狀

        正常的<img>標籤、圓角邊、圓形、長寬比例變形的圓形、縮略圖。

<img data-src="holder.js/100x100" alt="正常模式" >
<img data-src="holder.js/100x100" alt="圓角邊" class="img-rounded">
<img data-src="holder.js/100x100" alt="圓形圖" class="img-circle">
<img data-src="holder.js/200x100" alt="圓形圖" class="img-circle">
<img data-src="holder.js/100x100" alt="帶邊框的原型圖" class="img-thumbnail">

對齊圖片

使用浮動助手類或者文本對齊類能夠實現圖片的對齊。

PS：再講col-xx-*的時候有講過offset、push和pull。應該就是浮動助手類中的。

文本類，應當以text-xxxxx存在。

左右對齊：

翻看原版文檔時發現問題！

具體操做中注意:v4使用類名 .pull-xs-left .而非 .pull-left  ！！

具體操做中注意:v4使用類名 .pull-xs-left .而非 .pull-left  ！！

浮動在父類的兩測。當寬度不夠容納2個圖片時，自動換行。

<div class="container">
  <div class="row">
      <div class="col-sm-8" >
          <img data-src="holder.js/100x100" class="img-rounded pull-xs-left" alt="...">
          <img data-src="holder.js/100x100" class="img-rounded pull-xs-right" alt="...">
      <div>
  </div>
 </div>

中間對齊：

<div class="container">
  <div class="row">
      <div class="col-sm-8" >
          <img data-src="holder.js/100x100" class="img-rounded center-block" alt="...">
          <img data-src="holder.js/100x100" class="img-rounded center-block" alt="...">
      <div>
  </div>
 </div>

當兩個圖片都居中時會另起一行。

文本對齊方式：

在外層DIV使用文本對齊類 .text-xs-center類。而非極客學院wiki翻譯的text-center。

極客學院翻譯仍然有誤！

<div class="text-xs-center">
   <img data-src="holder.js/100x100" class="img-rounded" alt="...">
 </div>

拓展一下，xs眼熟吧？sm lg 能夠。可是當lg時，屏幕分辨率不夠，則text-lg-center失效。