bootstrap4.4实现点击图片弹出大图效果代码

bootstrap虽然没有提供可以直接点击图片弹出大图效果的功能，其实这个完全可以根据modal来实现，最重要的是效果非常，不需要考虑浏览器的兼容性，浏览器版本是否支持等问题，只要效果出来，支持bootstrap的浏览器上都可以，减少了很多的工作量。

代码如下，演示代码是本地电脑上使用的dedecms系统，需要测试的话要修改图片的路径：

<div class="container bg-white my-3 shadow-sm">
  <div class="row">
    <h4 class="col-12">关注站长自媒体<small> 获取更多优质内容</small></h4>
    <ul class="list-inline mx-auto">
      <li class="list-inline-item" data-toggle="modal" data-target=".bd-example-modal-sm"> <img src="{dede:global.cfg_templets_skin/}/images/zmt_baijia.png" alt="百家号" class="img-fluid zmt">
        <h5 class="text-center">百家号</h5>
        <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLongTitle">百度APP扫码关注</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
            </div>
            <div class="modal-content"> <img src="{dede:global.cfg_templets_skin/}/images/zmt_baijia.png" alt="百家号" class="img-fluid"> </div>
          </div>
        </div>
      </li>
      <li class="list-inline-item" data-toggle="modal" data-target=".toutiao-sm"> <img src="{dede:global.cfg_templets_skin/}/images/zmt_toutiao.jpg" alt="头条号" class="img-fluid mx-md-3 zmt">
        <h5 class="text-center">头条号</h5>
        <div class="modal fade toutiao-sm" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLongTitle">今日头条扫码关注</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
            </div>
            <div class="modal-content"> <img src="{dede:global.cfg_templets_skin/}/images/zmt_toutiao.jpg" alt="头条号" class="img-fluid mx-md-3"> </div>
          </div>
        </div>
      </li>
      <li class="list-inline-item" data-toggle="modal" data-target=".qiehao-sm"> <img src="{dede:global.cfg_templets_skin/}/images/zmt_qiehao.png" alt="企鹅号" class="img-fluid zmt">
        <h5 class="text-center">企鹅号</h5>
        <div class="modal fade qiehao-sm" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLongTitle">QQ|微信扫码关注企鹅号</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
            </div>
            <div class="modal-content"> <img src="{dede:global.cfg_templets_skin/}/images/zmt_qiehao.png" alt="企鹅号" class="img-fluid"> </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

把图片路径修改一下就可以了，注意不要忘记引入bootstrap的css和JS文件，否则无法运行哦。