通过添加一下的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. js中各种跨域问题实战小结（二）

    这里接上篇:js中各种跨域问题实战小结(一) 后面继续学习的过程中,对上面第一篇有稍作休整.下面继续第二部分: -->5.利用iframe和location.hash -->6.windo ...

  2. JavaScript思维导图—数据类型

    JavaScript思维导图-来自@王子墨http://julying.com/blog/the-features-of-javascript-language-summary-maps/

  3. onSingleTapUp()和onSingleTapConfirmed()的区别

    onSingleTapUp() - 在按下并抬起时发生,只要符合这个条件就触发该函数,没有任何附加条件. onSingleTapConfirmed() 同上者,但有附加条件,就是Android会确保单 ...

  4. 微信分享调用 -- c#篇

    微信分享调用JS -- c#篇   1.前端 1.1 导入微信端的JS 如果你的网址是http,则地址为  http://res.wx.qq.com/open/js/jweixin-1.0.0.js ...

  5. Atiti  qq空间破解(3)------------gui图形化通用cli执行器atiuse

    Atiti  qq空间破解(3)------------gui图形化通用cli执行器atiuse 结构:::命令行+以及反馈log框1 cli_guiUI/index.htm1 /AtiPlatf_c ...

  6. 转载：Spring AOP (上)

    工 作忙,时间紧,不过事情再多,学习是必须的.记得以前的部门老大说过:“开发人员不可能一天到晚只有工作,肯定是需要自我学习.第一:为了更充实自己,保 持进步状态.第二:为了提升技术,提高开发能力.第三 ...

  7. iOS越狱开发（一）

    做越狱开发也有一些时间了,有很多东西想总结一下,希望给他人一些借鉴,也是自己对过去开发经历的一些总结.个人不推荐使用盗版,这里主要以技术介绍为主. 这个系列里面主要介绍怎样进行越狱开发,涉及到以下几个 ...

  8. 【WPF】制作自定义的列表项面板

    我们在使用像ListBox的列表控件时,我们都知道可以通过其ItemsPanel的依赖项属性来自定义一个面板来放置列表控件中的列表项.除了CLR库提供的几个面板外,我们完全可以把自己写的面板作为项列表 ...

  9. Android内存回收机制

    退出但不关闭: 这是Android对于Linux的优化.当 Android 应用程序退出时,并不清理其所占用的内存,Linux 内核进程也相应的继续存在,所谓“退出但不关闭”.从而使得用户调用程序时能 ...

  10. OpenCascade Modeling Algorithms Boolean Operations

    Modeling Algorithms Boolean Operations of Opencascade eryar@163.com 布尔操作(Boolean Operations)是通过两个形状( ...