首页 > 代码库 > bootstrap-响应式图片、辅助类样式
bootstrap-响应式图片、辅助类样式
响应式图片:
<div class="container"> <!-- img-responsive 响应式图片 --> <div class="row"> <div class="col-lg-2"> <img src="http://www.mamicode.com/user_photo.png" class="img-responsive"> </div> </div> <!-- 图片的形状 --> <div class="row" style="margin-top: 30px"> <div class="col-lg-2"> <img src="http://www.mamicode.com/user_photo.png" class="img-responsive img-rounded"> </div> <div class="col-lg-2"> <img src="http://www.mamicode.com/user_photo.png" class="img-responsive img-circle"> </div> <div class="col-lg-2"> <img src="http://www.mamicode.com/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-响应式图片、辅助类样式
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。