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. 传统DNS的问题与HTTPDNS

    本篇学习笔记要掌握两个要点: 传统的 DNS 有很多问题,例如解析慢.更新不及时.因为缓存.转发.NAT 问题导致客户端误会自己所在的位置和运营商,从而影响流量的调度. HTTPDNS 通过客户端 S ...

  2. C# Winform同一子窗体只允许打开一次

    在winform中一个窗口可以一直打开,是不合理的,解决方法: http://blog.csdn.net/kangkang621/article/details/49664295

  3. ubuntu物理机上搭建Kubernetes集群 -- master 配置

    1. 将  kube-apiserver, kube-controller-manager, kube-scheduler,kubectl 拷贝到/usr/bin目录下 2. 安装etcd sudo ...

  4. 解决双系统(Window10+Ubuntu16.10)下ubuntu安装git时提示软件包git没有可安装候选问题

    选择升级系统: sudo apt-get update 升级之后再输入: sudo apt-get install git 可成功安装.

  5. Aop的基本介绍

    基本概念 通知  就是你想要的功能,也就是我们常说的安全.事物.日志等.先定义好这些,然后再想用的地方用一下.包含Aspect的一段处理代码 注意:其实这些功能(通知)并不是我们业务逻辑所必须的,只是 ...

  6. GIt如何进行代码管理

    一:Git账号设置(仅第一次需设置): 1.首先打开GIt  Bash  界面

  7. javascript判断两个对象属性以及值是否相等

    objIsEqual(obj1,obj2){//比较两个对象键值对是否相等 var o1 = obj1 instanceof Object; var o2 = obj2 instanceof Obje ...

  8. Dubbo服务化框架使用整理

    一.垂直应用架构拆分 在应用架构的演进过程中,垂直应用架构因为开发便捷,学习成本低,对于实现业务功能的增删改查提供了高效的开发支持,有利于前期业务高速发展的的快速实现.但是随着系统业务功能的不断扩展和 ...

  9. PostgreSQL 自动输入密码

    在 Shell 命令行中,使用 postgresql-client 连接 PostgreSQL 数据库时,每次都要输入密码.如果要写 Shell Script,做一些类似于备份的自动化管理工作,每次都 ...

  10. Spring Security 4.2.3 Filters 解析

    一. 熟悉一个模块的最快方法 1. 配置logback文件,打印相应的debug信息 2. 根据相应的信息,打断点查看执行结果 二.spring 使用 DelegatingFilterProxy 管理 ...