Bootstrap(七):CSS--图片
1.基本样式
主要四个样式类:
设置布局 .img-responsive : 可以让图片支持响应式布局,从而让图片在其父元素中更好的缩放;
设置形状 .img-rounded : 设置图片为圆角;
设置形状 .img-circle : 设置图片为圆形(照片若是长方形,则是椭圆形,照片若是正方形这是圆形);
设置形状 .img-thumbnail :设置图片为带边框(白色);
<form class="form-horizontal"> <div class="form-group"> <div class="col-sm-10 col-xs-3"> <img alt="" src="TEST.JPG" class="img-responsive"> </div> </div> <div class="form-group"> <div class="col-sm-4 col-xs-4"> <img alt="" src="TEST.JPG" class="img-responsive img-rounded"> </div> <div class="col-sm-4 col-xs-4"> <img alt="" src="TEST.JPG" class="img-responsive img-circle"> </div> <div class="col-sm-4 col-xs-4"> <img alt="" src="TEST.JPG" class="img-responsive img-thumbnail"> </div> </div> </form>