通过添加一下的class来实现bootstrap对图片的支持

  • img-round 通过border-radius：6px 来获得图片圆角
  • img-circle 通过 border-radius:50%来让整个图片编程圆形
  • img-thumbnail 添加一些内边距和一个灰色的框
  • img-responsive 增加图片的响应式支持

    这几个功能可以混合使用，如果想实现一个支持响应式的有框的圆形图片
<img class=" img-circle img-thumbnail img-responsive"src="snap.jpg" alt="snap" >

Bootstrap学习笔记系列5------Bootstrap图片显示的更多相关文章

  1. Bootstrap学习笔记系列3-------Bootstrap简单表单显示

    表单布局 垂直或基本表单 基本的表单结构时BootStrap自带的,创建基本表单的步骤如下: 向父<form>元素添加role = "form": 为了获取最佳的间距, ...

  2. Bootstrap学习笔记系列1-------Bootstrap网格系统

    Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...

  3. bootstrap学习笔记系列4------bootstrap按钮

    按钮标签 在<a>,<button>或input元素上使用按钮class.但是为了避免跨浏览器的不一致性,建议使用<button>标签. <!DOCTYPE ...

  4. bootstrap学习笔记<一>（bootstrap用法）

    首先引入bootstrap官网链接:http://www.bootcss.com/ bootstrap 3下载地址:http://v3.bootcss.com/getting-started/#dow ...

  5. bootstrap学习笔记<八>（bootstrap核心布局风格——栅格系统）

    栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...

  6. Bootstrap学习笔记系列6-----Bootstrap文本显示

    通过对文本或者链接添加下面的类,会使其展示不同的颜色,如果文本是个链接,鼠标移动到文本上,颜色会变暗. text-muted柔和的文本(深色) text-primary 表示基础的文本(蓝色) tex ...

  7. bootstrap 学习笔记（5）---- 图片和响应式工具

    (一)响应式图片: 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局.其实质是为图片设置了 max-width: 100%;. heig ...

  8. Bootstrap学习笔记系列7-----Bootstrap简单背景CSS及其他辅助类

    背景 通过添加下列类,可以快捷的变换背景颜色,如果是链接的话,鼠标移动上去会变暗 bg-primary 被修饰元素将会应到primary类,显示吃淡蓝色,文本颜色会变成白色. bg-success 被 ...

  9. Bootstrap学习笔记系列2-------Bootstrap简单表格处理

    标签 <table> 为表格添加基础样式 <thead> 表格标题行的容器元素,用来识别列 <tbody> 表格主提中的表格行的容器元素 <tr> 单行 ...

随机推荐

  1. 自制Unity小游戏TankHero-2D(1)制作主角坦克

    自制Unity小游戏TankHero-2D(1)制作主角坦克 我在做这样一个坦克游戏,是仿照(http://game.kid.qq.com/a/20140221/028931.htm)这个游戏制作的. ...

  2. 远程调试 Azure Web App

    当我们将 Web App 部署在 Azure 上时,如果能够实现远程调试,将会极大的提高我们修复 bug 的效率.Visual Studio 一贯以功能强大.易用著称,当然可以实现基于 Azure 应 ...

  3. Java处理Radius access-challenge

    最近使用 RSA Authentication Manager, 并且与其自带的Radius server整合, RSA的Radius server 配置不太透明, 目前只配成功了PAP方式的验证,C ...

  4. 缓存篇~第七回　Redis实现基于方法签名的数据集缓存（可控更新，分布式数据缓存）

    返回目录 本篇文章可以说是第六回 Microsoft.Practices.EnterpriseLibrary.Caching实现基于方法签名的数据集缓存(可控更新,WEB端数据缓存)的续篇,事实上,有 ...

  5. ssh文件传输命令：sz与rz命令

    内容概要: rz 上传文件到linux服务器,会出现选择框 sz filename 下载linux文件到windows 一般来说,linux服务器大多是通过ssh客户端来进行远程的登陆和管理的,使用s ...

  6. Atitit 基于dom的游戏引擎

    Atitit 基于dom的游戏引擎 1. 添加sprite控件(cocos,createjs,dom)1 1.1.1. Cocos1 1.1.2. createjs1 1.1.3. Dom模式2 1. ...

  7. fir.im Weekly - 如何打造真正的工程师文化

    好的工程师,无法忍受低效且无趣的工作.优秀的技术团队应该自上而下的地推进技术平台化建设.DevOps.自动化构建.测试和部署流程,积极采用合适的第三方工具或创造工具,进行周期性的前沿技术分享等等. 先 ...

  8. 被废了的display:box弹性盒模型

    这几天在研究弹性布局,看书中写的是display:box,结果在chrome浏览器中是正常的,想着移动端大部分浏览器也是webkit内核的应该也没啥问题,结果确实没问题,但仔细一看,高度呢?好吧,严重 ...

  9. 冒泡排序java代码

    冒泡排序就是依次取出最大数,然后依次交换放到数组最后边. 直观写法: public long[] sort(long[] a){ int n = a.length - 1; // Step:1 选出最 ...

  10. javascript运算符——位运算符

    × 目录 [1]二进制 [2]非 [3]与[4]或[5]异或[6]左移[7]右移[8]>>>[9]应用 前面的话 位运算符是非常底层的运算,由于其很不直观,所以并不常用.但是,其速度 ...