3.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失效。