前面提到了内容段落的响应式采用栅格系统进行不同设备的响应式,下面简单进行图片的样式和响应式介绍.
在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">