图片样式

.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. nginx服务器下 PHP 出现 502 解决方案（转）

    nginx出现502有很多原因,但大部分原因可以归结为资源数量不够用,也就是说后端PHP-fpm处理有问题,nginx将正确的客户端请求发给了后端的php-fpm进程,但是因为php-fpm进程的问题 ...

  2. django1.8forms读书笔记

    一.HttpRequest对象的一些属性或方法 request.path,The full path, not including the domain but including the leadi ...

  3. mysql-5.7 调整mysql的复制方式由master_log_file+master_log_pos 到gtid 详解

    一.祖传的master_log_file + master_log_pos的复制方式面临的问题: 在很久以前 那个时候我还没有出道,mysql就已经就有复制这个功能了.如果要告诉slave库从mast ...

  4. CPD轮播广告库的简单算法

    在广告的领域中,有一种广告形式,采用的是CPD的售卖模式,为了对流量进行拆分,媒体方会对广告位进行轮播拆分.比如一个广告位,被拆成了10轮播,那么在广告主来预订广告位的时候,这个时候就可以告诉广告主, ...

  5. [Codility] CommonPrimeDivisors

    A prime is a positive integer X that has exactly two distinct divisors: 1 and X. The first few prime ...

  6. Android-Bug:RecyclerView的item不能横向充满的问题

    在使用 RecyclerView 的时候,出现了 item 不能横向充满屏幕的问题, 如下图所示: 解决办法:发现是在使用 Adapter 的时候,在 onCreateViewHolder() 方法的 ...

  7. nginx中配置404错误页面的教程

    什么是404页面如果网站出了问题,或者用户试图访问一个并不存在的页面时,此时服务器会返回代码为404的错误信息,此时对应页面就是404页面.404页面的默认内容和具体的服务器有关.如果后台用的是NGI ...

  8. zookeeper 安装 配置集群

    https://mirrors.tuna.tsinghua.edu.cn/apache/zookeeper/ [root@znode01 src]# tar -xzvf zookeeper--alph ...

  9. ny523 亡命逃串 hdoj 1253胜利大逃亡

    亡命逃窜 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描述 从前有个叫hck的骑士,为了救我们美丽的公主,潜入魔王的老巢,够英雄吧.不过英雄不是这么好当的.这个可怜的娃被魔 ...

  10. centos 中 修复 win 7 引导

    1. 我们可以清楚的看到 /boot/grub2/grub.cfg里面的话,里面说到:不要编辑这个文件,这个文件是由grub2-mkconfig 自动产生的(当然你也可以手动),修改这个文件虽然可以达 ...