bootstrap之图片的响应式

前面提到了内容段落的响应式采用栅格系统进行不同设备的响应式,下面简单进行图片的样式和响应式介绍.

在bootstrap中重新定义了图片的三种常用样式(css)

img-rounded实现图片边框的圆角,原理在选择器重写了表框圆角属性,是边框圆角(border-radius:6px)

<!-- img-rounded图片圆角 -->
	<img src="pic1.jpg" class="img-rounded">

img-circle实现图片边框的椭圆,原理在选择器重写了表框圆角属性和img-rounded属性一样,修改值不一样.

<!-- img-cricle边框椭圆 -->
	<img class="img-circle" src="pic1.jpg">

img-thumbnail实现了缩略图样式图片添加一些样式边框

<!-- 缩略图形式 -->
	<img class="thumbnail" src="pic1.jpg">

除了上述的正常图片三大样式,bootstrap还提供了图片的响应式,只需在图片的class使用img-responsive实现图片的响应式.

<!-- 图片响应式 -->
	<img class="img-responsive" src="pic1.jpg">

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学 Web 前端

html学习笔记(一)

单标签 <! Doctype html> 双标签 <html> </html> <head></head> <title></title>

4845
来自专栏24K纯开源

Qt Style Sheet实践(三):QCheckBox和QRadioButton

导读       单选按钮(QRadioButton)和复选框(QCheckBox)是界面设计中的重要元素。单选按钮只允许用户在一组选项中选择一个,且当其中一个...

6996
来自专栏地方网络工作室的专栏

图片自适应父元素大小,并左右上下居中的css方法

图片自适应父元素大小,并左右上下居中的css方法 前言 这种效果多见于矩形盒子里面调用不规则的图片,希望能够达到的效果。这个效果可以很简单的用css来实现,虽然...

2298
来自专栏Keegan小钢

Android样式的开发:layer-list篇

上图Tab的背景效果,和带阴影的圆角矩形,是怎么实现的呢?大部分的人会让美工切图,用点九图做背景。但是,如果只提供一张图,会怎么样呢?比如,中间的Tab背景红色...

1001
来自专栏一“技”之长

Bootstrap响应式前端框架笔记六——图片与其他辅助类

    在页面中插入图片,Bootstrap框架中定义了3中图片的Css类样式,分别为圆角图片img-rounded类,圆形图片img-circle类和带边框的...

892
来自专栏一场梦

给图片或文字加上鼠标悬浮时旋转动画

1863
来自专栏别先生

jQuery EasyUI一个基于 jQuery 的框架(创建网页所需的一切)

jQuery EasyUI学习网址:http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html jQuer...

55210
来自专栏青青天空树

认识基本的mfc控件

  几乎可以在每个windows程序中都看到按钮、复选框、文本框以及下拉列表等等,这些都是控件。而且很多常用的控件已经内置到操作系统当中了,在Visual C+...

902
来自专栏州的先生

周末玩个球,几行代码用PyQt5实现足球射门动画

QT作为一个全面的桌面应用程序开发包,其自然提供了对图像的动画支持。本篇文章中,就来简单地在PYQt5中使用Animation动画功能。

1532
来自专栏菩提树下的杨过

[silverlight基础]仿文字连接跑马灯效果-高手绕道

运行效果如下: ? 分析示意图: ? 代码:  <Canvas x:Name="a" Background="AliceBlue" MouseEnter="a_...

18710

扫码关注云+社区