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. maven工程之pom模板（hadoop、hive、hbase）

    以下配置文件涵盖了hadoop.hive.hbase开发支持库的配置. 仅需针对maven工程pom.xml文件做相应更改就可以自动生成hadoop开发支持库. <properties>  ...

  2. shell脚本之xargs使用的一些案例

    首先看一下文本信息: # cat text1.txt 1 2 3 4 5 使用xargs格式化一下: # cat text1.txt  | xargs 1 2 3 4 5 使用xargs格式化,每两个 ...

  3. python数据结构之图论

    本篇学习笔记内容为图的各项性质.图的表示方法.图ADT的python实现 图(Graph) 是数据结构和算法学中最强大的框架之一(或许没有之一).图几乎可以用来表现所有类型的结构或系统,从交通网络到通 ...

  4. Java如何循环数组并使用Split

    场景: 当写方法时遇到1个参数有3个值, 该参数类型为数组.    例如:  aaa|bbb|ccc  .  而且需要循环打印,这个时候我们就需要用数组循环输出的方法. 一:feature 示例 Wh ...

  5. 那些年读过的书《Java并发编程实战》和《Java并发编程的艺术》三、任务执行框架—Executor框架小结

    <Java并发编程实战>和<Java并发编程的艺术>           Executor框架小结 1.在线程中如何执行任务 (1)任务执行目标: 在正常负载情况下,服务器应用 ...

  6. Mybatis批量insert 返回主键值和foreach标签详解

    Mybatis批量insert 返回主键 Mybatis从3.3.1版本开始,支持批量插入后返回主键ID.首先对于支持自增主键的数据库使用useGenerateKeys和keyProperty,对于不 ...

  7. eslint 代码检测工具

    jshint 检测工具不够灵活下,道格拉斯(何许人也?json创造者,javascript重要任务,犀牛那本书就是他写的). 文档地址: 中文地址 English 安装 利用npm全局安装eslint ...

  8. ls 命令查看文件时候，按修改时间倒序或升序排列

    1,按照时间升序 命令:ls -lrt 详细解释: -l use a long listing format 以长列表方式显示(详细信息方式) -t sort by modification time ...

  9. freespace_evidence

    根据视点计算点云的freespace_evidence 参考资料: Bresenham's line algorithm:https://en.wikipedia.org/wiki/Bresenham ...

  10. python的_thread模块来实现多线程(<python核心编程例子>)

    python中_thread模块是一个低级别的多线程模块,它的问题在于主线程运行完毕后,会立马把子线程给结束掉,不加处理地使用_thread模块是不合适的.这里把书中讲述的有关_thread使用的例子 ...