摘要: Bootstrap框架对图片样式的支持。

<img>类

Bootstrap 提供了对图片应用简单样式的 class。

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

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

.img-thumbnail:添加一些内边距(padding)和一个灰色的边框。

代码示例:

<img src="E://web/image/flower.jpg" class="img-rounded">
<img src="E://web/image/flower.jpg" class="img-circle">
<img src="E://web/image/flower.jpg" class="img-thumbnail">

响应式图片

通过在 <img> 标签添加 .img-responsive 类来让图片支持响应式设计。 图片将很好地扩展到父元素。

.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上

用法:

<img src="E://web/image/flower.jpg" class="img-responsive" alt="flower">

Bootstrap 图片的更多相关文章

  1. Bootstrap <基础八>图片

    Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来获得图片圆角. .img-circle:添加 border-r ...

  2. Scrapy基础(八)————图片下载后将本地路径添加到Item中

    前边讲到简单的图片下载,但是怎样将图片的本地路径和存储在Item中的数据对应起来,所以本篇博文讲解到如何将 本地的下载后的图片路径写入到Item中 思路:自定义pipline,多加个管道,该管道继承下 ...

  3. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  4. Bootstrap <基础十八>面包屑导航(Breadcrumbs)

    面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...

  5. Bootstrap <基础三十二>模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用  ...

  6. Bootstrap <基础三十一>插件概览

    在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...

  7. Bootstrap <基础三十>Well

    Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...

  8. Bootstrap <基础二十九>面板(Panels)

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  9. Bootstrap<基础二十七> 多媒体对象(Media Object)

    Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...

  10. Bootstrap <基础二十六>进度条

    Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...

随机推荐

  1. ARMV8 Procedure Call Standard

    1.前言 2.  术语说明 Term Note ABI Application Binary Interface 应用程序二进制接口 EABI Embedded ABI  嵌入式ABI PCS Pro ...

  2. navicat报caching_sha2_password异常

    使用navicat连接mysql报错(升级到mysql8版本时的错) 解决办法: 通过命令行登录mysql后, 输入: alter user 'root'@'localhost' IDENTIFIED ...

  3. mysql忘记root密码的处理方式

    1.停用mysql服务 service mysqld stop 2.修改my.cnf    利用vim命令打开mysql配置文件my.cnf 添加skip-grant-tables,添加完成后,执行w ...

  4. Expm 4_2 有向无环图中的最短路径问题

    [问题描述] 建立一个从源点S到终点E的有向无环图,设计一个动态规划算法求出从S到E的最短路径值,并输出相应的最短路径. 解: package org.xiu68.exp.exp4; import j ...

  5. JDBC辅助类封装 及应用

    一:代码图解: 二:配置文件: driverClassName=com.mysql.jdbc.Driver url=jdbc\:mysql\://127.0.0.1\:3306/xlzj_sh_new ...

  6. 20个实用的webApp前端开发技巧

    自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备). 开发者们都知道在高端智能手机 ...

  7. 搭建ssh框架项目(一)

    一.创建web项目 二.导入jar包 三.创建数据库(MySQL) 四.建立javaBean对象(ElecText.java),属于持久层对象(PO对象) package com.cppdy.ssh. ...

  8. 并发之线程封闭与ThreadLocal解析

    并发之线程封闭与ThreadLocal解析 什么是线程封闭 实现一个好的并发并非易事,最好的并发代码就是尽量避免并发.而避免并发的最好办法就是线程封闭,那什么是线程封闭呢? 线程封闭(thread c ...

  9. poj3061 poj3320 poj2566尺取法基础(一)

    poj3061 给定一个序列找出最短的子序列长度,使得其和大于等于S 那么只要用两个下标,区间和小于S时右端点向右移动,区间和大于S时左端点向右移动,在这个过程中更新Min #include < ...

  10. pytest八:skip 跳过用例

    这是一个快速指南,介绍如何在不同情况下跳过模块中的测试1.无条件地跳过模块中的所有测试:pytestmark = pytest.mark.skip("all tests still WIP& ...