bootstrap3-Image 图片

最新推荐文章于 2024-03-14 11:43:10 发布

schy_hqh

最新推荐文章于 2024-03-14 11:43:10 发布

阅读量256

点赞数

分类专栏： WEB前端@BootStrap3 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/schy_hqh/article/details/84515239

版权

WEB前端@BootStrap3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

Bootstrap内部对图片样式的默认设置

img {
	border: 0;/*This removes any border when images are rendered.*/
	page-break-inside: avoid;/*avoids page breaks inside images.*/
	max-width: 100% !important;/*make sure that even if the width of the image exceeds the container, it is restricted to the premise of the container.*/
	vertical-align: middle;/*an image is vertically centred within a div or other element*/
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Default buttons from Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css"
	rel="stylesheet" media="screen">
<style>
body {
	padding: 50px/*边距*/
}
.mdl {
	background-color: silver;/*背景*/
	padding: 7px/*上下左右边距*/
}

</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	
	<!-- 图片样式 -->
	<p class="mdl">
		<img src="../../bootstrap-3.0.0/image/icon-default-screenshot.png">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
	</p>
	
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="../../bootstrap-3.0.0/assets/js/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

为图片指定样式

img-rounded 圆角图片

	<!-- 图片样式 -->
	<p class="mdl">
		<!-- 圆角，响应式(自动根据屏幕尺寸调整到合适的大小) -->
		<img src="../../image/mobile.jpg" class="img-rounded img-responsive">
	</p>

img-thumbnail 缩略图样式，但不是真正的缩略图

图片四周有边框效果

<!-- 缩略图样式 -->
<img src="../../image/mobile.jpg" class="img-rounded img-thumbnail">

img-circle 圆形图片

<!-- 圆形图片 -->
<img src="../../image/mobile.jpg" class="img-rounded img-circle img-responsive">

Responsive image 响应式图片

Bootstrap没有把responsive样式设置为默认的，需要手动设置

.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

设置响应式图片最简单的办法：在img标签上设置class="img-responsive"

<!-- 让图片具有响应功能 -->
<img src="../../image/mobile.jpg" class=" img-responsive">

schy_hqh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录