bootstrap 学习笔记(5)---- 图片和响应式工具

(一)响应式图片:

在 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  是两个响应式表格和响应式图片的类。

时间: 2024-10-02 20:36:13

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

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

Bootstrap辅组类和响应式工具 学习要点: 1.辅组类 2.响应式工具 本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具,辅助类提供了一组类来辅 组页面设计,而响应式工具则利用媒体查询显示或隐藏某些内容. 一.辅助类 Bootstrap 在布局方面提供了一些细小的辅组样式,用于文字颜色以及背景色的设置. 显示关闭图标等等. 1.情景文本颜色

第 6 章 辅组类和响应式工具

学习要点: 1.辅组类 2.响应式工具 主讲教师:李炎恢 本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具, 辅助类提供了一组类来辅组页面设计,而响应式工具则利用媒体查询显示或隐藏某些内容. 一.辅助类 Bootstrap 在布局方面提供了一些细小的辅组样式,用于文字颜色以及背景色的设置.显示关闭图标等等. 1.情景文本颜色 样式列表 样式名描述 text-muted 柔和灰 text-primary 主要蓝 text-success 成功绿 text-info 信息蓝 text

第6章 辅助类和响应式工具

本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具,辅助类提供了一组类来辅 组页面设计,而响应式工具则利用媒体查询显示或隐藏某些内容 . 一.辅助类 Bootstrap 在布局方面提供了一些细小的辅组样式,用于文字颜色以及背景色的设置. 显示关闭图标等等. 1.情景文本颜色 样式列表 样式名 描述 text-muted 柔和灰 text-primary 主要蓝 text-success 成功绿 text-info 信息蓝 text-warning 警告黄 text-danger 危

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"

Bootstrap学习笔记(二) 表单

在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名"form-control",将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果

BootStrap 学习笔记一

BootStrap学习笔记一: 学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists 1.HTML5文档类型 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 2.为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签. <meta name="viewport" cont

Bootstrap 学习笔记1

<img src="..." class="img-responsive" alt="响应式图像"> 通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好. 接下来让我们看下这个 class 包含了哪些 css 属性. 在下面的代码中,可以看到img-responsive class 为图像赋予了 max-width: 100%; 和 height: auto; 属性,可

bootstrap学习笔记一: bootstrap初认识,hello bootstrap(下)

这一篇主要是补上源码,开始之前请先回顾:bootstrap学习笔记一: bootstrap初认识,hello bootstrap(上) 首先,我们的页面要求, lang,charset等就不用说了,老html属性, viewport是h5的属性,目的是 width=device-width 铺满设备宽度, initial-scale=1正常比较 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

我的BootStrap学习笔记

1.全局样式里面: 1.container:版心 2.col-xx-xx:栅格布局 3.btn btn-default: 按钮,默认按钮样式 4..pull-left  pull-right  clearfix: 左浮动 右浮动 清除浮动 5.响应式工具:visiable-xx:  在xx下隐藏 6.text-center;text-left;text-right:居中/靠左/靠右 2.CSS组件里面: 1.Glyphicons 字体图标(自定义字体图标) 2.nav-tabs:导航 3.nav