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. shell技巧之以逆序形式打印行

    测试文本内容如下: # cat textfile hadoop hdfs yarn spark zookeeper mapreduce hive hbase scala kafka CHAVIN my ...

  2. express链接mysql, 用数据库连接池管理链接

    1.在API的开发当中,数据库的处理显得尤为重要,express 工程 链接mysql数据库有很好的模板可以借鉴. 1.1 创建数据库链接 新建一个DB目录,在DB目录下新建文件 db.js 内容如下 ...

  3. centos7安装zabbix3.4

    一.系统环境 关闭防火墙及selinux systemctl stop firewalld.service systemctl disable firewalld.service sed -i 's/ ...

  4. 2015年蓝桥杯省赛A组c++第5题(回溯算法填空)

    /* 1,2,3…9 这九个数字组成一个分数,其值恰好为1/3,如何组法? 下面的程序实现了该功能,请填写划线部分缺失的代码. */ #include <stdio.h> void tes ...

  5. 通过pytty工具代理连接数据库mysql（绕开数据库白名单限制）

    1.下载putty在本机,不用安装. 2.数据库地址及端口,输入服务器账户.密码登录. 输入数据库地址.端口及本机映射端口 输入服务器账户.密码登录 然后本地新建数据库连接就可以了

  6. javascript高级技巧篇（作用域安全、防篡改、惰性载入、节流、自定义事件，拖放）

    安全的类型检测 在任何值上调用Object原生的toString()方法,都会返回一个[object NativeConstructorName]格式字符串.每个类在内部都有一个[[Class]]属性 ...

  7. 洛谷P4052 [JSOI2007]文本生成器 AC自动机+dp

    正解:AC自动机+dp 解题报告: 传送门! 感觉AC自动机套dp的题还挺套路的,,, 一般就先跑遍AC自动机,然后就用dp dp的状态一般都是f[i][j]:有i个字符,是ac自动机上的第j个节点, ...

  8. Redis分布式锁服务（转）

    原文:http://www.cnblogs.com/mushroom/p/4752499.html 概述 在多线程环境下,通常会使用锁来保证有且只有一个线程来操作共享资源.比如: object obj ...

  9. 谈谈javascript数组排序方法sort()的使用，重点介绍参数使用及内部机制？

    语法:arrayObject.sort(sortby) 参数sortby可选,规定排序顺序,必须是函数: 注:如果调用该方法时没有使用参数,将按字符编码的顺序进行排序,要实现这一点,首先应把数组的元素 ...

  10. es分布式文档系统_bulk api的奇特json格式与底层性能优化关系

    1.bulk api奇特的json格式{"action":{"meta"}}\n{"data"}\n{"action": ...