图片样式

.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. 深入理解Docker Volume(二)

      一开始,认为Volume是用来持久化的,但是这实际上不对,因为认为Volume是用来持久化的同学一定是认为容器无法持久化,所以有了Volume来帮助容器持久化,事实上,容器会一直存在,除非你删除他 ...

  2. 在 Windows 8 中启用可匿名访问的共享

    就是不用输入用户名和密码,直接通过网上邻居可以访问的共享. 1.打开本地组策略编辑器(快捷键Win+R,打开运行,输入gpedit.msc,确定): 2.打开:"本地计算机策略->计算 ...

  3. Android Hawk数据库 github开源项目

    Android Hawk数据库 github开源项目 Hawk 是一个很便捷的数据库  . 操作数据库仅仅需一行代码 , 能存不论什么数据类型 . github 地址: https://github. ...

  4. C#操作txt文件并清空添加操作

    C#操作txt文件,进行清空添加操作的例子.代码: //把txt清空 FileStream stream = File.Open(Adr,FileMode.OpenOrCreate,FileAcces ...

  5. [svc][op]磁盘MBR分区机制- inode/Block深入实战

    一 思路: 1,磁盘物理结构及大小计算 2,分区 MBR GPT知识 3,fdisk分区 挂载 自动挂载 4,格式化文件系统 5,inode block 6,软硬链接 查看磁盘: [root@moba ...

  6. 特效effects(二)

    CCActionInterval* createEffect(int nIndex, float t) { CCDirector::sharedDirector()->setDepthTest( ...

  7. javaperformanceoptimization

    http://javaperformanceoptimization.nirmaldelli.com/ http://stackoverflow.com/questions/42824366/sql- ...

  8. ny509 因子和阶乘

    因子和阶乘 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 给你一个正整数n,把n!=1x2x3x.....xn分解成素因子相乘的形式,并从小到大输出每个素因子的指数 ...

  9. ORACLE 仿照原表建表语法

    用于: 1.修改表前,可用于对原表表结构或表数据的备份 2.仿照原表的表结构建立一张新表 CREATE TABLE T_XXXX_BAK_130810 AS SELECT * FROM T_XXXX ...

  10. VC++编程之道读书笔记（2）

    第三篇 技术细节 第七章:细说开发人员必知必会的39个开发细节 细节36:单例模式的应用 在开发程序时,往往需要在整个工程中只需要一个类的实例.而这个实例一旦被创建就不能被其他的实例再创建了,通常我们 ...