`
schy_hqh
  • 浏览: 541586 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

bootstrap3-Image 图片

 
阅读更多

 

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">

 

 

 

 

 

 

  • 大小: 3.6 KB
  • 大小: 967.3 KB
  • 大小: 923.8 KB
  • 大小: 792 KB
分享到：
| bootstrap3-Button 按钮
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics