304、bootstrap 之图片样式

图片样式
    1、class="img-responsiv：图片响应样式，图片可以自动缩放
    2、方形图片样式：class="img-rounded
    3、圆形图片样式：class="img-circle
    4、照片图片样式：class="img-thumbnail
    注意：可以多个样式组合使用

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap hello world</title><!-- Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="js/jquery-3.2.1.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="js/bootstrap.min.js"></script><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--    &lt;!&ndash;[if lt IE 9]>-->
<!--    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>-->
<!--    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>-->
<!--    <![endif]&ndash;&gt;-->
</head>
<body><img src="img/banner_1.jpg" class="img-responsive" alt="Responsive image"><hr/><img src="img/jiangwai_1.jpg" alt="01" class="img-rounded"><img src="img/jiangwai_1.jpg" alt="02" class="img-circle"><img src="img/jiangwai_1.jpg" alt="03" class="img-thumbnail"><hr/><!--多个样式组合--><img src="img/jiangwai_1.jpg" alt="01" class="img-responsive img-rounded"><img src="img/jiangwai_1.jpg" alt="02" class="img-responsive img-circle"><img src="img/jiangwai_1.jpg" alt="03" class="img-responsive img-thumbnail">
</body>
</html>

304、bootstrap 之图片样式相关推荐

2016年5月30日上午（传智Bootstrap笔记六（图片样式））
为了给段落添加强调文本,则可以添加 class="lead",这将得到更大更粗.行高更高的文本,如下面实例所示: <body style="padding:50px ...
Bootstrap 图片样式
Bootstrap为图片提供了 3 种显示效果,使用方法也非常简单,只需为 <img> 元素应用 .img-rounded..img-circle..img-polaroid 类即可.其中 ...
bootstrap图片叠加_详解Bootstrap四种图片样式
在本章中,我们将学习 Bootstrap 对图片的支持.Bootstrap 提供了四个可对图片应用简单样式的class,分别是: img-rounded 添加 border-radius:6px 来获 ...
bootstrap课程4 bootstrap的css样式有哪些内容需要注意
bootstrap课程4 bootstrap的css样式有哪些内容需要注意一.总结一句话总结: 1.如何选择产品(框架)的版本? 大版本下的最后一个版本,但是同时又要选择稳定的版本,也就是如果做产 ...
bootstrap php ajax,ThinkPHP 整合Bootstrap Ajax分页样式
ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...
Bootstrap常用布局样式
Bootstrap常用布局样式 1 内容布局 1.1 标题类 1.2 文本类 1.3 列表类 2 代码和图文布局 2.1 代码样式 2.2 图文样式 3 表格布局 4 辅助样式 4.1 添加或移除边框 ...
【最佳实践】授权子账号进行OSS图片样式设置
1.引子:如何授权子账号在控制台针对指定的Bucket设置图片样式呢? [使用场景]:某企业内部有众多Bucket,并且不同的Bucket分别指定了Bucket的管理员.目前Bucket A的管理员期 ...
Bootstrap 3 : 图片上传预览 image upload preview
头部均为: <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel= ...
一些上流的CSS3图片样式
译自:CSS3 Image Styles 中文:CSS3图片样式请尊重版权,转载请注明来源,多谢-- 直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radiu ...

304、bootstrap 之图片样式

304、bootstrap 之图片样式相关推荐

最新文章

热门文章

304、bootstrap 之 图片样式

304、bootstrap 之 图片样式相关推荐

最新文章

热门文章

304、bootstrap 之图片样式

304、bootstrap 之图片样式相关推荐