图片样式

.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. es6 解构赋值 新认知/新习惯

    es6 的解构赋值其实很早就学习了,但一直纠结于习惯和可读性问题,所以没有大规模使用.最近被 react调教一番之后.已经完全融入认知和习惯中去了.总结一下三个常用的技巧: 对象取值 取值并重命名 剩 ...

  2. C# POST与参数的字符串格式

    参数拼接方法:&  类似url参数.然后转化为字节型 string postdate = "Submit=" + Submit + "&dopost=&q ...

  3. javascript中字符串与数组互转的方法分享

    说明:1.join()方法:用于把数组中的所有元素放入一个字符串,元素是通过指定的分隔符进行分隔的.指定分隔符方法join("$");其中$可以是任意字符2.split()方法:用 ...

  4. [k8s]kubeadm k8s免费实验平台labs.play-with-k8s.com,k8s在线测试

    k8s实验 labs.play-with-k8s.com特色 这玩意允许你用github或dockerhub去登录 这玩意登录后倒计时,给你4h实践 这玩意用kubeadm来部署(让你用weave网络 ...

  5. GCC实现多文件编译,静态库,动态库

    一 代码 //add.h int add(int a, int b); //add.c int add(int a, int b) {     return a+b; } //main.c #incl ...

  6. linux io ports io memory

    http://m.blog.csdn.net/article/details?id=7204458

  7. GNU风格 ARM汇编语法4

    .GNU汇编语言定义入口点 汇编程序的缺省入口是_start标号,用户也可以在连接脚本文件中用ENTRY标志指明其它入口点. 例:定义入口点 .section .data < initializ ...

  8. sqlserver 针对预处理sql传入参数的处理方式

    在编写sql中,经常需要对sql进行预处理,动态拼接字符串,那么要获取在这预处理之后返回的的某个值并且赋值,传入参数的语法 USE [OA] GO /****** Object: StoredProc ...

  9. VBA学习笔记（5）--事件，记录每次操作改动

    说明(2017.3.24): 1. 记录sheet1里面的每次改动,和改动时间! 2. 不能记录大范围的删除.改动,会提示“类型不匹配” Private Sub Worksheet_Change(By ...

  10. 强大的CSS3动画库animate.css

    今天要给大家介绍一款强大的CSS3动画库animate.css,animate.css定义了大概50多种动画形式,包括淡入淡出,文字飞入.左右摇摆动画等等.使用animate.css也非常简单,你可以 ...