码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap-响应式图片、辅助类样式

时间:2016-12-06 04:05:30      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:符号   关闭按钮   log   war   style   success   hid   img   pre   

响应式图片:

<div class="container">
	<!-- img-responsive 响应式图片 -->
	<div class="row">
		<div class="col-lg-2">
			<img src="user_photo.png" class="img-responsive">
		</div>
	</div>

	<!-- 图片的形状 -->
	<div class="row" style="margin-top: 30px">
		<div class="col-lg-2">
			<img src="user_photo.png" class="img-responsive img-rounded">
		</div>
		<div class="col-lg-2">
			<img src="user_photo.png" class="img-responsive img-circle">
		</div>
		<div class="col-lg-2">
			<img src="user_photo.png" class="img-responsive img-thumbnail">
		</div>
	</div>
</div>

效果:

技术分享

辅助类样式:

<!-- 字体颜色-->
	<div class="row">
		<p class="text-muted">字体颜色查看</p>
		<p class="text-primary">字体颜色查看</p>
		<p class="text-success">字体颜色查看</p>
		<p class="text-danger">字体颜色查看</p>
		<p class="text-info">字体颜色查看</p>
		<p class="text-warning">字体颜色查看</p>
	</div>

	<!-- 字体背景色-->
	<div class="row">
		<p class="bg-primary">字体颜色查看</p>
		<p class="bg-success">字体颜色查看</p>
		<p class="bg-danger">字体颜色查看</p>
		<p class="bg-info">字体颜色查看</p>
		<p class="bg-warning">字体颜色查看</p>
	</div>

  效果:

技术分享

<!-- 三角符号 关闭按钮-->
	<div class="row">
		<div class="col-lg-2">
			<span class="caret"></span>
			<button class="close">×</button>
		</div>
	</div>

	<!-- 浮动 row自带清除浮动-->
	<div class="row">
		<div class="col-lg-2">
			<div class="pull-left">judy</div>
			<div class="pull-right">judy</div>
		</div>
	</div>

	<!-- 隐藏与显示-->
	<div class="row sh" style="margin-top:30px">
		<div class="col-lg-2 show">1</div>
		<div class="col-lg-2 hidden">2</div>
		<div class="col-lg-2">3</div>
		<div class="col-lg-2 invisible">4</div>
		<div class="col-lg-2">5</div>
	</div>

  效果:

技术分享

bootstrap-响应式图片、辅助类样式

标签:符号   关闭按钮   log   war   style   success   hid   img   pre   

原文地址:http://www.cnblogs.com/tenWood/p/6136076.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!