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. python3写入csv文件时中文为乱码

    今天修改李万的爬虫时把页面上的中文写入csv文件时,中文总是乱码.通过上网搜索得到解决.解决的办法是打开文件是需加参数 encoding='utf-8-sig' .感谢博客园的菜鸟Alex.他相关博客 ...

  2. The General Query Log Binary Log

    https://dev.mysql.com/doc/refman/8.0/en/binary-log.html https://dev.mysql.com/doc/refman/8.0/en/quer ...

  3. [knowledge][linux][sysfs] sysfs文件系统

    https://en.wikipedia.org/wiki/Sysfs http://man7.org/linux/man-pages/man5/sysfs.5.html https://www.ke ...

  4. [development][dpdk][hugepage] 为不同的结点分配不同大小的大页内存

    这个事来自dpdk, 所以, 先参考. http://dpdk.org/doc/guides/linux_gsg/sys_reqs.html 当前, 假设你已经读过上边内容, 知道大页内存时候, dp ...

  5. hdfs mapreduce hbase

    参考资料:http://www.cnblogs.com/sharpxiajun/p/5585613.html 大数据时代的数据量是超大规模的,传统的关系数据库已经很难存储和管理这些数据了,为了存储海量 ...

  6. 在dbgrideh中允许选择多行，如何知道哪些行被选中

    是个BOOKMARK类型的属性. SelectedRows: TBookmarkList procedure TForm1.Button1Click(Sender: TObject); var i, ...

  7. P3292 [SCOI2016]幸运数字 线性基

    正解:线性基+倍增 解题报告: 先放下传送门QAQ 然后这题,其实没什么太大的技术含量,,,?就几个知识点套在一起,除了代码长以外没任何意义,主要因为想复习下线性基的题目所以还是写下,,, 随便写下思 ...

  8. servlet中生成验证码

    在servlet中生成验证码 package login; import java.awt.Color; import java.awt.Graphics; import java.awt.image ...

  9. what's the 二叉树

    what's the 树 在了解二叉树之前,首先我们得有树的概念. 树是一种数据结构又可称为树状图,如文档的目录.HTML的文档树都是树结构,它是由n(n>=1)个有限节点组成一个具有层次关系的 ...

  10. 这套方法论，彻底终结MySQL同步延迟问题

    作者介绍 张秀云,网名飞鸿无痕,现任职于腾讯,负责腾讯金融数据库的运维和优化工作.2007年开始从事运维方面的工作,经历过网络管理员.Linux运维工程师.DBA.分布式存储运维等多个IT职位.对Li ...