Bootstrap 图片
摘要: 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 图片的更多相关文章
- Bootstrap <基础八>图片
Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来获得图片圆角. .img-circle:添加 border-r ...
- Scrapy基础(八)————图片下载后将本地路径添加到Item中
前边讲到简单的图片下载,但是怎样将图片的本地路径和存储在Item中的数据对应起来,所以本篇博文讲解到如何将 本地的下载后的图片路径写入到Item中 思路:自定义pipline,多加个管道,该管道继承下 ...
- Bootstrap <基础二十八>列表组
列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...
- Bootstrap <基础十八>面包屑导航(Breadcrumbs)
面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...
- Bootstrap <基础三十二>模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 ...
- Bootstrap <基础三十一>插件概览
在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...
- Bootstrap <基础三十>Well
Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...
- Bootstrap <基础二十九>面板(Panels)
Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...
- Bootstrap<基础二十七> 多媒体对象(Media Object)
Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...
- Bootstrap <基础二十六>进度条
Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...
随机推荐
- ARMV8 Procedure Call Standard
1.前言 2. 术语说明 Term Note ABI Application Binary Interface 应用程序二进制接口 EABI Embedded ABI 嵌入式ABI PCS Pro ...
- navicat报caching_sha2_password异常
使用navicat连接mysql报错(升级到mysql8版本时的错) 解决办法: 通过命令行登录mysql后, 输入: alter user 'root'@'localhost' IDENTIFIED ...
- mysql忘记root密码的处理方式
1.停用mysql服务 service mysqld stop 2.修改my.cnf 利用vim命令打开mysql配置文件my.cnf 添加skip-grant-tables,添加完成后,执行w ...
- Expm 4_2 有向无环图中的最短路径问题
[问题描述] 建立一个从源点S到终点E的有向无环图,设计一个动态规划算法求出从S到E的最短路径值,并输出相应的最短路径. 解: package org.xiu68.exp.exp4; import j ...
- JDBC辅助类封装 及应用
一:代码图解: 二:配置文件: driverClassName=com.mysql.jdbc.Driver url=jdbc\:mysql\://127.0.0.1\:3306/xlzj_sh_new ...
- 20个实用的webApp前端开发技巧
自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备). 开发者们都知道在高端智能手机 ...
- 搭建ssh框架项目(一)
一.创建web项目 二.导入jar包 三.创建数据库(MySQL) 四.建立javaBean对象(ElecText.java),属于持久层对象(PO对象) package com.cppdy.ssh. ...
- 并发之线程封闭与ThreadLocal解析
并发之线程封闭与ThreadLocal解析 什么是线程封闭 实现一个好的并发并非易事,最好的并发代码就是尽量避免并发.而避免并发的最好办法就是线程封闭,那什么是线程封闭呢? 线程封闭(thread c ...
- poj3061 poj3320 poj2566尺取法基础(一)
poj3061 给定一个序列找出最短的子序列长度,使得其和大于等于S 那么只要用两个下标,区间和小于S时右端点向右移动,区间和大于S时左端点向右移动,在这个过程中更新Min #include < ...
- pytest八:skip 跳过用例
这是一个快速指南,介绍如何在不同情况下跳过模块中的测试1.无条件地跳过模块中的所有测试:pytestmark = pytest.mark.skip("all tests still WIP& ...