bootstrap-响应式图片、辅助类样式
响应式图片:
<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-响应式图片、辅助类样式的更多相关文章
- bootstrap-内联表单 水平(横向)表单 响应式图片 辅助类 [转]
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- bootstrap 响应式图片自适应图片大小
<img src="..." class="img-responsive center-block" > 或者 $(window).load(fun ...
- 【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势
A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...
- 【Bootstrap】3.优化站点资源、完成响应式图片、让传送带支持手势
A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...
- bootstrap快速入门笔记(八)-按钮,响应式图片
一,默认样式:.btn-default , .btn-primary , .btn-success ,.btn-info, btn-warning ,btn-link 二,尺寸:.btn-lg, . ...
- bootstrap中如何让响应式图片(img-responsive)水平居中
我们在用bootstrap排版内容的时候,有的时候在内容中需要图片水平居中对齐. 一般情况下,我们的图片都使用了 .img-responsive 类来实现响应式图片.如果需要实现响应式图片水平居中,那 ...
- 【Bootstrap】如何让响应式图片(img-responsive)水平居中
我们在用bootstrap排版内容的时候,有的时候在内容中需要图片水平居中对齐. 一般情况下,我们的图片都使用了 .img-responsive 类来实现响应式图片.如果需要实现响应式图片水平居中,那 ...
- Bootstrap响应式布局介绍
一.响应式布局 1.什么是响应式网页 2.响应式网页必须做到的几件事 1.布局,使用流式布局(默认文档流+浮动)+弹性布局+栅格布局 2.文字和图片大小随着容器大小改变 3.媒体查询技术(css3) ...
- Bootstrap 响应式设计
本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...
- 响应式图片菜单式轮播,兼容手机,平板,PC
昨天在给自己用bootstrap写一个响应式主业模版时想用一个图片轮播js,看到了bootstrap里面的unslider.js,只有1.7k,很小,很兴奋,但使用到最后发现不兼容手机,当分辨率变化的 ...
随机推荐
- LNMP-查看安装编译时参数
查看mysql编译参数: cat /usr/local/mysql/bin/mysqlbug | grep CONFIGURE_LINE 查看apache编译参数: cat $apachehome$/ ...
- Hadoop 安装记录
第一步:打开/etc 下面的 profile文件,在其中加入环境变量设置的代码 done JAVA_HOME=/home/hadoop/installer/jdk7u65 PATH=$JAVA_HOM ...
- asp.net如何确定是哪些控件验证失败
Page.Validate("FeedBack"); if (!Page.IsValid) { foreach (IValidator validator in Validator ...
- 使用PHP+ajax打造聊天室应用
方法1. comet http://www.xiumu.org/technology/the-php-notes-comet-long-connection-instance.shtml 这篇文章 ...
- PHP使用session_set_save_handler陷阱
陷阱如下 当脚本使用了session_set_save_handler 来重定向 session后,使用session_destroy后再使用session_start()重新开启session会报错 ...
- python中保留两位小数
今天写程序的时候碰到了一个问题关于如何控制浮点数只显示小数点后两位,正常的想法是用round函数,例如 round(a, 2),但是在面对下面的问题时候round就不太好用了 >>> ...
- 《中日韩联合开发 - Asianux Server 3》(Asianux Server 3.0)[ISO]
中文名: 中日韩联合开发 - Asianux Server 3英文名: Asianux Server 3.0资源格式: 光盘镜像发行时间: 2007年制作发行: 红旗软件(中国)MiracleLinu ...
- jQuery 追加元素的方法如append、prepend、before
1.jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容. 实例 复制代码代码如下: $("p").append("Some ...
- servlet & filter & listener & interceptor
web.xml 的加载顺序是:context- param -> listener -> filter -> servlet * Servlet 对URL生效,用户处理用户的URL请 ...
- [linux] linux下编译安装zlib
zlib官方网站:http://www.zlib.net上下载源码来安装zlib软件包. 目前最新版本zlib是zlib1.2.8,安装开始:$wget http://www.zlib.net/zli ...