详解Bootstrap四种图片样式

在本章中，我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了四个可对图片应用简单样式的class，分别是：

img-rounded 添加 border-radius:6px 来获得图片圆角
img-circle 添加 border-radius:50% 来让整个图片变成圆形
img-thumbnail 添加一些内边距（padding）和一个灰色的边框
img-responsive 图片响应式

1、img-rounded

<!doctype html>
<html lang="en">
<head>
  <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="Keywords" content="关键词一，关键词二">
  <meta name="Description" content="网站描述内容">
  <meta name="Author" content="Yvette Lau">
  <meta name = "viewport" content = " width = device-width, initial-scale = 1 ">
  <title>BootstrapDemo</title>
  <!--css js 文件的引入-->
  <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
  <body style="padding: 20px;">
    <div class = "container">
      <img src = "5.jpg" class="img-rounded" >
    </div>
  </body>
</html>

.img-rounded{border-radius:6px;}

效果：

2、img-circle

<body style="padding: 20px;">
  <div class = "container">
    <img src = "5.jpg" class="img-circle" >
  </div>
</body>

.img-circle{border-radius:50%;}

效果(因为本图片的宽高大小不同，所以呈现出椭圆，如果将width和height设置相同，那么会呈现出一个圆)：

3、img-thumbnail

<body style="padding: 20px;">
  <div class = "container">
    <img src = "5.jpg" class="img-thumbnail" >
    <img src = "4.jpg" class="img-thumbnail" >
    <img src = "3.jpg" class="img-thumbnail" >
  </div>
</body>

.img-thumbnail{display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;
                  background-color:#FFF;border:1px solid #DDD;border-radius:4px;transition:all 0.2s ease-in-out;}

效果：

4、img-responsize

<body style="padding: 20px;">
  <div class = "container" style = "width:150px;">
    <img src = "5.jpg" class="img-responsive" width="400px" >
  </div>
</body>

.img-responsive{display:block;max-width:100%;height:auto;}

效果(img中的width属性值被忽略)：

以上内容分步骤给大家介绍了Bootstrap四种图片样式的相关知识，希望大家喜欢。

赞 (0)

相关推荐

  • Bootstrap基本样式学习笔记之图片(6)

    Bootstrap基本样式学习笔记之图片(6)

    直接看Bootstrap图片基本样式例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../cs

  • Bootstrap Img 图片样式(推荐)

    Bootstrap Img 图片样式(推荐)

    Bootstrap提供了四种用于<img>类的样式,分别是: .img-rounded:圆角 (IE8 不支持),添加 border-radius:6px 来获得图片圆角: .img-circle:圆形 (IE8 不支持),添加 border-radius:50% 来让整个图片变成圆形. .img-thumbnail:缩略图功能,添加一些内边距(padding)和一个灰色的边框. .img-responsive:图片响应式 (将很好地扩展到父元素). 使用: 将类样式直接添加到class中即可

  • Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案

    UEditor组件是百度提供的一套开源的web在线所见即所得富文本编辑器,具有轻量,可定制,注重用户体验等特点,基于MIT协议,功能很强大.最近在使用的过程中发现其中上传的图片(或者插入已有的表情包图片)都无法正常缩放,选中图片,用鼠标点击并拖动图片边沿的小标签,图片只能缩小不能放大.尝试过很多方法都没办法解决,甚至检查了js源码,也没有发现有任何异常的地方. 后来无意中发现页面上引入了Bootstrap,而Bootstrap默认将box-sizing样式统一设成border-box了.具体内容

  • 详解Bootstrap四种图片样式

    详解Bootstrap四种图片样式

    在本章中,我们将学习 Bootstrap 对图片的支持.Bootstrap 提供了四个可对图片应用简单样式的class,分别是: img-rounded 添加 border-radius:6px 来获得图片圆角 img-circle 添加 border-radius:50% 来让整个图片变成圆形 img-thumbnail 添加一些内边距(padding)和一个灰色的边框 img-responsive 图片响应式 1.img-rounded <!doctype html> <html l

  • 详解SQL四种语言：DDL DML DCL TCL

    详解SQL四种语言：DDL DML DCL TCL

    看到很多人讨论SQL还分为四种类型,在这里知识普及一下,并总结下他们的区别吧. 1. DDL – Data Definition Language 数据库定义语言:定义数据库的结构. 其主要命令有CREATE,ALTER,DROP等,下面用例子详解.该语言不需要commit,因此慎重. CREATE – to create objects in the database   在数据库创建对象 例: CREATE DATABASE test; // 创建一个名为test的数据库 ALTER – a

  • 详解参数传递四种形式

    这篇文章是在日常的工作中总结出来的,下面把四种参数传递的形式展示给大家. 什么时候用GET,  查,删, 什么时候用POST,增,改  (特列:登陆用Post,因为不能让用户名和密码显示在URL上) 4种get传参方式 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; ch

  • 详解Android四种存储方式

    在Android程序开发中我们经常遇到四种数据存储方式,每种存储方式都各有不同:以下我分别列举了Android开发中的不同存储方式的特点 一,Preferences Preferences是一个较轻量级的存储数据的方法,具体使用方法: 在A中保存值: SharedPreferences.Editor sharedata = getSharedPreferences("data", 0).edit(); sharedata.putString("name","

  • JavaScript设计模式---单例模式详解【四种基本形式】

    本文实例讲述了JavaScript设计模式---单例模式.分享给大家供大家参考,具体如下: 单例模式也称为单体模式,其中: 1,单体模式用于创建命名空间,将系列关联的属性和方法组织成一个逻辑单元,减少全局变量. 逻辑单元中的代码通过单一的变量进行访问. 2,三个特点: ① 该类只有一个实例: ② 该类自行创建该实例,即在该类内部创建自身的实例对象: ③ 向整个系统公开这个实例接口 3,单体模式有四种基本形式: 第一种,最简单的单体,只被实例化一次    我简记为json对象 (1)基本结构 va

  • 详解IOS四种保存数据的方式

    在iOS开发过程中,不管是做什么应用,都会碰到数据保存的问题.将数据保存到本地,能够让程序的运行更加流畅,不会出现让人厌恶的菊花形状,使得用户体验更好.下面介绍一下数据保存的方式: 1.NSKeyedArchiver:采用归档的形式来保存数据,该数据对象需要遵守NSCoding协议,并且该对象对应的类必须提供encodeWithCoder:和initWithCoder:方法.前一个方法告诉系统怎么对对象进行编码,而后一个方法则是告诉系统怎么对对象进行解码.例如对Possession对象归档保存.

  • 详解Layer弹出层样式

    前言:学习layer弹出框,之前项目是用bootstrap模态框,后来改用layer弹出框,在文章的后面,我会分享项目的一些代码(我自己写的). layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,layer已成为国内最多人使用的web弹层组件,GitHub自然Stars3000+,官网累计下载量达30w+,大概有20万Web平台正在使用layer. 具体请

  • 详解BootStrap中Affix控件的使用及保持布局的美观的方法

    Affix是BootStrap中的一个很有用的控件,他能够监视浏览器的滚动条的位置并让你的导航始终都在页面的可视区域.一开始的时候,导航在页面中是普通的流式布局,占有文档中固定的位置,当页面滚动的时候,导航就自动变成了固定布局(fixed),始终处于用户的视区,下面来说说他的用法.首先来看看他的实现原理.它是通过实时修改页面元素的class属性来实现的 开始的时候应用affix的元素的class中会自动添加affxi-top属性 当滚动条滚动以至于导航快要到页面顶部的时候这时候在元素的class

  • 详解CSS玩转图片Base64编码

    详解CSS玩转图片Base64编码

    什么是 base64 编码? 我不是来讲概念的,直接切入正题,图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址. 这样做有什么意义呢?我们知道,我们所看到的网页上的每一个图片,都是需要消耗一个 http 请求下载而来的(所有才有了 csssprites 技术的应运而生,但是 csssprites 有自身的局限性,下文会提到). 没错,不管如何,图片的下载始终都要向服务器发出请求,要是图片的下载不用向服务器发出请求,而可以随着 HTML 的下载同时下载到本

  • 详解Bootstrap各式各样的按钮(推荐)

    详解Bootstrap各式各样的按钮(推荐)

    Bootstrap为我们提供了各式各样漂亮的按钮,我们无需自己给按钮写样式,直接使用它给我们提供的类样式,使用在我们的按钮上,非常的简单方便. 为尊重原创这里贴一下参考的教程:http://www.runoob.com/bootstrap/bootstrap-buttons.html.在我的很多笔记中,您可能会看到我贴的www.runoob.com相关的网址,在这里先声明这不是广告,我只是觉得每个人的劳动成果都应该被尊重.这个网站收集了很多的信息,供我学习,我非常的感激,借鉴于这些很好的教程,我

随机推荐