乐码库:一个极速、放心、纯净的下载站! 更新: 资源发布
  • 您的位置:首页 > 技术文档 > JavaScript > Bootstrap基本样式学习笔记之图片(6)
  • 收藏本页
      Bootstrap基本样式学习笔记之图片(6)
      发布时间:2016-12-21 08:10:41 关键词: Bootstrap图片基本样式,Bootstrap图片样式,Bootstrap图片
      内容简介:这篇文章主要介绍了Bootstrap学习笔记之图片基本样式的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    直接看Bootstrap图片基本样式例子:

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="../../css/bootstrap.min.css" rel="stylesheet">
     <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
     <script src="../../js/bootstrap.min.js"></script>
     <title>图片</title>
    </head>
    <body>
    <div class="container">
     <div class="page-header">
     <h1>照片样式</h1>
     </div>
     <div class="col-lg-3">
     <h3>原始照片</h3>
     <img src="../../img/girl.jpg">
     </div>
     <div class="col-lg-3">
     <h3>圆形效果</h3>
     <img src="../../img/girl.jpg" class="img-circle">
     </div>
     <div class="col-lg-3">
     <h3>圆角效果</h3>
     <img src="../../img/girl.jpg" class="img-rounded">
     </div>
     <div class="col-lg-3">
     <h3>边框效果</h3>
     <img src="../../img/girl.jpg" class="img-thumbnail">
     </div>
    </div>
    </body>
    </html>
    
    

    效果如下:

    如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

    Bootstrap学习教程

    Bootstrap实战教程

    Bootstrap插件使用教程

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持乐码库。

      最新更新
      热门排行榜