(一)响应式图片:

在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放。

注意:如果需要让使用了 .img-responsive 类的图片水平居中,请使用 .center-block 类,不要用 .text-center

代码:<img src="..." class="img-responsive" alt="Responsive image">

2、图片形状:通过为 <img> 元素添加以下相应的类,可以让图片呈现不同的形状。

跨浏览器兼容性  请时刻牢记:Internet Explorer 8 不支持 CSS3 中的圆角属性。

代码:<img src="..." alt="..." class="img-rounded">( 带弧度的正方形)

  <img src="..." alt="..." class="img-circle">(圆形)

  <img src="..." alt="..." class="img-thumbnail">(有边框的圆形,这个图片要生效必须设置图片有颜色,才能显示出来)

3、辅助类

a 情景文本颜色:通过颜色来展示意图,bootstrap提供了一组工具类。这个类可以应用于链接,并且在鼠标经过时颜色还可以加深,就像默认的链接一样。

代码:<p class="text-muted">...</p>

类名有:.text-muted   .text-primary  .text-success  .text-info  .text-warning  .text-danger

b 背景颜色:和情境文本颜色类一样,使用任意背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深,就像上面所讲的文本颜色类一样。

类名有:.bg-primary  .bg-success  .bg-info  .bg-warning  .bg-danger

c 关闭按钮:通过使用一个象征关闭的图标,可以让模态框和警告框消失。

代码:<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

d 三角符号 : 通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意,向上弹出式菜单中的三角符号是反方向的。

代码:<span class="caret"></span>

e 清除浮动  通过为父元素添加 .clearfix 类可以很容易地清除浮动(float)。这里所使用的是 Nicolas Gallagher 创造的 micro clearfix 方式。此类还可以作为 mixin 使用。

代码:<div class="clearfix">...</div>

f 隐藏和显示 .show .hidden

(二)响应式工具

.img-responsive   .table-responsive  是两个响应式表格和响应式图片的类。

bootstrap 学习笔记(5)---- 图片和响应式工具的更多相关文章

  1. Bootstrap学习笔记(8)--响应式导航栏

    说明: 1. 响应式导航栏,就是右上角的三道杠,点一下下方出现隐藏的导航栏.如果屏幕够大就显示所有的导航选项,如果屏幕小比如手机,就显示部分,剩下的放到三道杠里隐藏. 2. 外面套一个大的div,其实 ...

  2. Bootstrap(6)辅组类和响应式工具

    一.辅助类 Bootstrap 在布局方面提供了一些细小的辅组样式,用于文字颜色以及背景色的设置.显示关闭图标等等. 1.情景文本颜色 各种色调的字体 <p class="text-m ...

  3. 学习笔记1--响应式网页+Bootstrap起步+全局CSS样式

    一.学习之前要了解一些背景知识: 在2g时代,3g时代,4g时代,早期的网页浏览设备,功能机,智能机.(本人最喜欢的透明肌,和古典黑莓机) 1.什么是响应式网页? Responsive Web Pag ...

  4. bootstrap快速入门笔记(九)-响应式工具

    一,可用的类   超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面 (≥992px) 大屏幕桌面 (≥1200px) .visible-xs-* 可见 隐藏 隐藏 隐藏 ...

  5. Bootstrap学习笔记1

    Bootstrap在线手册 http://v3.bootcss.com,这里有详细的说明.参考.示例. Bootstrap为许多前端常用的功能都做了封装.预定义,可以直接使用. Bootstrap支持 ...

  6. 第二百三十六节,Bootstrap辅组类和响应式工具

    Bootstrap辅组类和响应式工具 学习要点: 1.辅组类 2.响应式工具 本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具,辅助类提供了一组类来辅 组页面设计,而响应式工具则利用媒 ...

  7. Bootstrap学习笔记系列5------Bootstrap图片显示

    通过添加一下的class来实现bootstrap对图片的支持 img-round 通过border-radius:6px 来获得图片圆角 img-circle 通过border-radius:50%来 ...

  8. Bootstrap图片支持响应式

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 图片:响应式图片

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. fast-cgi & php-fpm 等的理解

    原文地址:https://segmentfault.com/q/1010000000256516 网上有的说,fastcgi是一个协议,php-fpm实现了这个协议: 有的说,php-fpm是fast ...

  2. 关于SharePoint 讨论板的一些知识

    关于SharePoint 讨论板的一些知识         近期公司项目可能要用到讨论板.需求是这种:         怎样在回复中仅仅让查看登陆者和讨论主题公布者的信息.         比方我公布 ...

  3. Solidworks输出Autocad的DWG格式乱码怎么办

    Solidworks输出DWG会有很多问题,如果没必要就别这么做,比如你只是想要打印图纸,Solidworks也可以直接打印,而且很方便,不需要转成DWG再打印,如果对方确实需要DWG格式的图纸,你只 ...

  4. 判断用户Input输入的事件来进行登陆

    我们是通过键盘按的object.keyCode获取的 Html <input onkeydown="keydownMsg(event)" type="text&qu ...

  5. 微信小程序日期定位弹出框遮挡问题

    只需要用bindtap绑定一个点击后的操作(隐藏键盘): wx.hideKeyboard()

  6. Push flow

    自动移库规则push flow可以用来规划物流 比如产品A如果进入到picking区,按照仓储的规则,系统可以自动生产调拨单,将产品A 从picking区调拨到保存的库位货架A1E1     设置步骤 ...

  7. PS 魔法棒

    魔术棒工具是通过选取图像中颜色相近或大面积单色区域的像素来制作选区,魔术棒用于纯色背景中较多. 容差数值越大,选择出的选区就越大,容差越小,对颜色差别的要求也就越严格,选择出的选区也就越小 按住shi ...

  8. A20 烧录和启动 log

    用 LiveSuit 烧写了一个 lubuntu 的映像文件到板子上, 同时接了串口观察烧录过程的串口打印信息, 如下 ES: FES:Fes Ver: 098 FES:=============== ...

  9. PythonCookBook笔记——字符串和文本

    字符串和文本 使用多个分隔符分割字串 使用正则re.split()方法. >>> line = 'asdf fjdk; afed, fjek,asdf, foo' >>& ...

  10. new和delete的基本用法

    前言 new和delete是C++中用来动态管理内存分配的运算符,其用法较为灵活.如果你对它们的几种不同用法感到困惑,混淆,那么接着看下去吧. 功能一:动态管理单变量/对象空间 下面例子使用new为单 ...