响应式图片:

<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-响应式图片、辅助类样式的更多相关文章

  1. bootstrap-内联表单 水平(横向)表单 响应式图片 辅助类 [转]

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. bootstrap 响应式图片自适应图片大小

    <img src="..." class="img-responsive center-block" > 或者 $(window).load(fun ...

  3. 【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势

    A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...

  4. 【Bootstrap】3.优化站点资源、完成响应式图片、让传送带支持手势

    A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...

  5. bootstrap快速入门笔记(八)-按钮,响应式图片

    一,默认样式:.btn-default , .btn-primary , .btn-success  ,.btn-info, btn-warning ,btn-link 二,尺寸:.btn-lg, . ...

  6. bootstrap中如何让响应式图片(img-responsive)水平居中

    我们在用bootstrap排版内容的时候,有的时候在内容中需要图片水平居中对齐. 一般情况下,我们的图片都使用了 .img-responsive 类来实现响应式图片.如果需要实现响应式图片水平居中,那 ...

  7. 【Bootstrap】如何让响应式图片(img-responsive)水平居中

    我们在用bootstrap排版内容的时候,有的时候在内容中需要图片水平居中对齐. 一般情况下,我们的图片都使用了 .img-responsive 类来实现响应式图片.如果需要实现响应式图片水平居中,那 ...

  8. Bootstrap响应式布局介绍

    一.响应式布局 1.什么是响应式网页 2.响应式网页必须做到的几件事 1.布局,使用流式布局(默认文档流+浮动)+弹性布局+栅格布局 2.文字和图片大小随着容器大小改变 3.媒体查询技术(css3) ...

  9. Bootstrap 响应式设计

    本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...

  10. 响应式图片菜单式轮播,兼容手机,平板,PC

    昨天在给自己用bootstrap写一个响应式主业模版时想用一个图片轮播js,看到了bootstrap里面的unslider.js,只有1.7k,很小,很兴奋,但使用到最后发现不兼容手机,当分辨率变化的 ...

随机推荐

  1. JSBinding+SharpKit / MonoBehaviour替换成JSComponent原理

    Unity 是基于组件式的开发,gameObject 身上可以绑定任意个脚本.每个脚本组成 gameObject 的一个部分. 脚本里通过添加预定义好的函数来执行自己的任务.比如Awake,用于初始化 ...

  2. 【C++11】30分钟了解C++11新特性

    作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 什么是C++11 C++11是曾经被叫做C+ ...

  3. linq 和 , 并 , 差 ,交

        假如: A = [--.], B = [-.] A 并 B = 全部     linq : a.union(b)   A 交 B = 中间那块    linq: a.Intersect(b) ...

  4. docker 数据共享,数据复制

    docker 提供的数据共享的方式有 docker   run  -it  -v:/dataname  image 数据复制使用 docker  cp  containerid:/dataname   ...

  5. 搭建EF6.0+MVC4搭建框架——之路由配置

    为了适应项目需求,需要将前后台的控制器和视图等文件分开,便于修改和维护: 方案一:在原有的Controller下新增Admins文件夹用于放置后台控制器文件: 控制器文件目录如下图: 视图文件目录:

  6. 解决Android AVD的方向键DPAD不能用的问题

    Android AVD在生成出来一个新的模拟器之后默认都是不能够使用DPAD的.原因是它禁用了. 解决方式如下 : 找到C:\Documents and Settings\Administrator\ ...

  7. ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室 实战系列。开源啦!!!

    自此系列博客开写以来,好多同学关心开源问题,之前由于网络问题,发布到Github上老是失败,今天终于在精简了好多无用的文件之后发布上去了. 注意:layim源代码并不开源,由于版权问题,请大家去官网了 ...

  8. Java模板引擎 HTTL

    新一代java模板引擎典范 Beetl http://www.oschina.net/p/httl HTTL(Hyper-Text Template Language)是一个高性能的开源JAVA模板引 ...

  9. SQL集合运算参考及案例(一):列值分组累计求和

    概述 目前企业应用系统使用的大多数据库都是关系型数据库,关系数据库依赖的理论就是针对集合运算的关系代数.关系代数是一种抽象的查询语言,是关系数据操纵语言的一种传统表达方式.不过我们在工作中发现,很多人 ...

  10. ubuntu设置环境变量

    sudo gedit /etc/environment path结尾处追加 路径,如::/opt/EmbedSky/4.3.3/bin source /etc/environment,或者重启电脑?? ...