bootstrap之图片的响应式

前面提到了内容段落的响应式采用栅格系统进行不同设备的响应式,下面简单进行图片的样式和响应式介绍.

在bootstrap中重新定义了图片的三种常用样式(css)

img-rounded实现图片边框的圆角,原理在选择器重写了表框圆角属性,是边框圆角(border-radius:6px)

<!-- img-rounded图片圆角 -->
	<img src="pic1.jpg" class="img-rounded">

img-circle实现图片边框的椭圆,原理在选择器重写了表框圆角属性和img-rounded属性一样,修改值不一样.

<!-- img-cricle边框椭圆 -->
	<img class="img-circle" src="pic1.jpg">

img-thumbnail实现了缩略图样式图片添加一些样式边框

<!-- 缩略图形式 -->
	<img class="thumbnail" src="pic1.jpg">

除了上述的正常图片三大样式,bootstrap还提供了图片的响应式,只需在图片的class使用img-responsive实现图片的响应式.

<!-- 图片响应式 -->
	<img class="img-responsive" src="pic1.jpg">