Bootstrap第二部分：全局CSS样式-图片样式
.img-rounded   圆角图片
.img-circle    圆形图片
.img-thumbnail 缩略图片
.img-responsive响应式图片

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <title>Bootstrap 101 Template</title>

     <!-- Bootstrap -->

     <link href="css/bootstrap.css" rel="stylesheet">

     <!--[if lt IE 9]>

     <script src="js/html5shiv.min.js"></script>

     <script src="js/respond.min.js"></script>

     <![endif]-->

 </head>

 <body>

 <h3>圆角图片</h3><!--这个效果是在IE8以下是实现不出来的-->

 <img src="img/1.jpg" class="img-rounded">

 <img src="img/2.jpg" class="img-rounded">

 <img src="img/3.jpg" class="img-rounded">

 <img src="img/4.jpg" class="img-rounded">

 <h3>圆形图片</h3>

 <img src="img/1.jpg" class="img-circle">

 <img src="img/2.jpg" class="img-circle">

 <img src="img/3.jpg" class="img-circle">

 <img src="img/4.jpg" class="img-circle">

 <h3>以下是缩略图</h3>

 <img src="img/1.jpg" class="img-thumbnail">

 <img src="img/2.jpg" class="img-thumbnail">

 <img src="img/3.jpg" class="img-thumbnail">

 <img src="img/4.jpg" class="img-thumbnail">

 <h3>响应式图片</h3>

 <img src="img/1.jpg" class="img-responsive">

 <img src="img/2.jpg" class="img-responsive">

 <img src="img/3.jpg" class="img-responsive">

 <img src="img/4.jpg" class="img-responsive">

Bootstrap-全局CSS样式-图片样式的更多相关文章

  1. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

  2. Bootstrap全局CSS样式之button和图片

    .btn-default--button的默认样式. .btn-primary--button的首选样式: .btn-success--button的成功样式: .btn-info--button的一 ...

  3. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

  4. Bootstrap全局CSS样式之排版

    Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. ...

  5. 响应式布局和BootStrap 全局CSS样式

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  6. Bootstrap全局CSS样式之表格

    .table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...

  7. 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  8. Bootstrap全局CSS样式之表单

    .form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%. .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联 ...

  9. bootstrap全局css样式

    以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ ...

随机推荐

  1. php之运算符

    运算符优先级相同,运算符的结合方向决定了该如何运算, 一.运算符优先级 组合方向 运算符 附加信息 无 clone new clone和new 左 [ array 右 ** 算术运算符 右 ++ -- ...

  2. Window ferformance toolkit 学习

    1.环境配置 2.内存泄露 a. 编写自己的wprp文件: http://msdn.microsoft.com/en-us/library/hh448223.aspx b.启动 @echo off s ...

  3. dp进阶——饥饿的奶牛

    饥饿的奶牛oj上n只有1000,过于水,O(n^2)的算法很容易水过,洛谷上这是一道提高加的题,很难啊,所以要好好拿来练习今天写博客再次复习一下,oi最怕遗忘了. 这道题呢实质是一个区间覆盖的dp,首 ...

  4. zookeeper 杂记

    Zookeeper为了保证高吞吐和低延迟,在内存中维护了这个树状的目录结构,这种特性使得Zookeeper不能用于存放大量的数据,每个节点的存放数据上限为1M.

  5. iptables及其在路由器上的应用 (待完善)

    1. iptables基本定义 Table (表名) Explanation (注释) nat nat表的主要用处是网络地址转换,即Network Address Translation,缩写为NAT ...

  6. 内部排序->选择排序->简单选择排序

    文字描述 简单排序的基本思想是:每一趟在n-i+1(i=1,2,…,n)个记录中选取关键字最小的记录作为有序列表中的第i个记录. 示意图 略 算法分析 简单排序算法中,所需进行记录移动的操作次数较少, ...

  7. 【PyQt5-Qt Designer】pyqtSignal()-高级自定义信号与槽

    PyQt 5信号与槽的几种高级玩法 参考:http://www.broadview.com.cn/article/824 from PyQt5.QtCore import QObject , pyqt ...

  8. session操作类

    using System;using System.Web; /// <summary> ///session操作类 /// </summary> public class a ...

  9. es6学习一 promise上

    简单来说promise在异步操作上提供可读性.(原来es5的异步操作可读性实在太糟糕了,如下图) 瞬间眼前百万只奔腾的马,只不过这种马有个别名,羊驼. 一.创建形式 1. 使用的基本形式: let p ...

  10. Innodb buffer 相关参数

    buffer相关参数: show GLOBAL VARIABLES LIKE 'innodb_buffer_pool_instances'; show GLOBAL VARIABLES LIKE 'i ...