图片样式

.img-rounded：添加 border-radius:6px 来获得图片圆角

.img-circle：添加 border-radius:500px 来让整个图片变成圆形。

img-circle优先级高于img-rounded

<body>

<img src="/wp-content/uploads/2014/06/download.png"

   class="img-rounded">

<img src="/wp-content/uploads/2014/06/download.png"

   class="img-circle">

</body>

图片边框

.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

<img src="/wp-content/uploads/2014/06/download.png"

   class="img-rounded img-thumbnail">

<img src="/wp-content/uploads/2014/06/download.png"

   class="img-circle img-thumbnail">

图片自适应

img-responsive：让图片支持响应式设计。 图片将很好地扩展到父元素。(图片可随页面大小自动调整宽度)

.img-responsive {

    display: block;

    max-width: 100%;

    height: auto;

}
      <img src="cinqueterre.jpg" class="img-circle img-thumbnail img-responsive" alt="Cinque Terre" width="304" height="236">

bootstrap -- css -- 图片的更多相关文章

  1. Bootstrap CSS概览代码文字标注篇

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. （二）Bootstrap CSS 概览

    在这一章中,我们将讲解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML 5 文档类型(Doctype) Bootstrap 使用了一些 H ...

  3. 3.Bootstrap CSS 概述

    1.HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 ...

  4. 2.Bootstrap CSS

    Bootstrap CSS 一.Bootstrap CSS概览 移动设备优先 移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动 ...

  5. Bootstrap 实现图片翻滚

    今天给大家带来的是Bootstrap 实现的图片翻滚 效果图如下 点击左右箭头可以实现向左向右转动,这个功能在Bootstrap 官网和菜鸟教程上都有讲解,有点bootstrap基础的都能看明白 ,这 ...

  6. Bootstrap.css 中请求googleapis.com/css?family 备忘录

    问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open ...

  7. Bootstrap CSS 栅格、代码和表格

    一.bootstrap栅格 Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. Bootstrap 网格系统(G ...

  8. 几种垂直居中的方式及CSS图片替换技术

    由于块级元素的高度是可以设置的,所以对于块级元素的垂直居中比较简单. 方法一: 在不定高的情况下,把元素的上下内边距设为同一个值即可实现,即padding :10px   0; 以上方法针对块级元素和 ...

  9. 利用bootstrap写图片轮播

    利用bootstrap写图片轮播 缺点是轮播没有固定样式图片样式会改变外框的大小,所以要再设置 以及左右按钮的style也要从新设置 <div class="carousel slid ...

随机推荐

  1. cocos2dx 3.x fullPathForFilename及isFileExist在ios/mac下与win32下行为不同

    一,fullPathForFilename 项目先开发了ios/mac版本,这两天想把win32工程也配好,但遇到了部分资源无法正确找到的问题. 进一步观察发现,对于那些找不到的资源路径,fullPa ...

  2. angular.js快速入门 hello world

    我们整个系列的学习会去写一个简单blog雏形,如果有精力再完善美化. 但是这篇还是要从HelloWorld开始学习. angular.js 文件加载我们选用 bootstrap中文网提供的一个cdn服 ...

  3. Socket网络编程 详细过程（转）

    我们深谙信息交流的价值,那网络中进程之间如何通信,如我们每天打开浏览器浏览网页时,浏览器的进程怎么与web服务器通信的?当你用QQ聊天时,QQ进程怎么与服务器或你好友所在的QQ进程通信?这些都得靠so ...

  4. 记一次Animator状态快速切换问题的解决

    事情是这样的,我尝试在一帧内多次切换一些状态(当前状态为Idle的情况下): public Animator animator; void OnEnable() { animator.CrossFad ...

  5. keepalived openssl 报错

    configure: error: !!! OpenSSL is not properly installed on your system. !!! !!! Can not include Open ...

  6. 使用 JavaScript 实现对 PDF 的全文索引

    Mozilla实验室最近已经收到了许多为一个项目做出的尝试,这一项目的野心令人印象深刻:在一个浏览器中仅仅使用Javascript来对PDF进行渲染.PDF文档的结构令人难以置信的复杂,因此要祝pdf ...

  7. How do I create a List in Scala?

    Scala List class FAQ: How do I create a List in Scala? You can create a Scala List in several differ ...

  8. gulp——myself配置

    var gulp = require('gulp'), uglify = require('gulp-uglify'), concat = require('gulp-concat'); var pu ...

  9. web-project的/WEB-INF/lib

    哪些jar包应该放到你的/WEB-INF/lib中?(目前为止,我的classpath只配置了dt.jar和tools.jar,也就是说,我的web-project所用的所有jar包都没有配置到cla ...

  10. WEB开发的标准目录结构

    刚才在书上看到的,感觉很重要,简单做个笔记 把你的jsp.css.js代码分别放到3个文件夹中(这3个文件夹就名为jsp,css,js),文件夹中设置子目录,这些子目录最好命名与html文件的子目录命 ...