• 首页
• 域名注册
• 虚拟主机
• 网站建设
• 服务器租用
• 营销推广
• 网站程序
• 前端开发
• 移动互联网
• 企业邮箱

• 当前位置：创新互联 >> 常见问题 >> 前端开发 >> bootstrap教程 >> bootstrap img图片响应式、图片圆角、圆形设置

bootstrap img图片响应式、图片圆角、圆形设置

• 作者：创新互联 文章来源：网页前端技术 点击数： 更新时间：2016-03-19

• 在网站制作中如果没有Bootstrap提供图片响应式自动缩放要实现这个功能自已要写很多的代码。有了Bootstrap的img组件实现起来就特别简单了，现在我们来看几个实现案例
  Bootstrap 提供了一些丰富的图片样式供开发者使用。

  
  1.bootstrap img图片形状设置
  

  //三种形状

  <img src="img/pic.png" alt="图片" class="img-rounded">    //图片圆角
  <img src="img/pic.png" alt="图片" class="img-circle">     //图片圆形
  <img src="img/pic.png" alt="图片" class="img-thumbnail">  //缩略图片
  

  
  
  2.bootstrap响应式图片代码

  <img src="img/pic.png" alt="图片" class="img-responsive">
  

• bootstrap响应式 — 栅格系统和布局容器讲解 :上一篇
  bootstrap表单form元素组件样式类 :下一篇