时间:2021-05-25
在本章中,我们将学习 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四种图片样式的相关知识,希望大家喜欢。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
CSS的四种引用方式:1、行内样式、内联样式2、内嵌样式、内部样式3、链接样式4、导入样式行内样式、内联样式行内样式是最简单的一种css(CascadingSt
Android中Tweenedanimation的实例详解Tweenedanimation有四种类型,下面主要介绍Scale类型。运行效果如下:AndroidS
MySQL四种事务隔离级别详解及对比按照SQL:1992事务隔离级别,InnoDB默认是可重复读的(REPEATABLEREAD)。MySQL/InnoDB提供
钻展推广四种方方式是什么?如果您想了解钻展推广四种方式请往下看小小编整理的钻展推广四种方式。感谢大家的支持和阅读。以下的内容供大家借鉴。 钻展推广四种方式
荣耀手环4较旧的版本表盘样式有两种,后续版本有新增星座表盘和指针表盘,总共有四种表盘,表盘样式会随着版本的更新进行增加及优化。 荣耀手环4是由华为公司于201