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. c# 字符串转为数字

    C#判断输入是否数字 /// <summary> /// 判断输入是否数字 /// </summary> /// <param name="num"& ...

  2. YII2 BUG记录

    YII2 的ar类在插入数据的时候,如果类的成员属性有和字段相同的,则该字段插入不成功 示例: CONSTROLLER 层 $banner->type = '4'; //////type在mod ...

  3. 新的ipad,用xcode编译报错 dyld_shared_cache_extract_dylibs

    删掉  ~/Library/Developer/Xcode/iOS DeviceSupport/ 这个目录下的特定文件夹就行啦. 其实是因为  device is busy  生成文件夹过程中拔掉了设 ...

  4. 《HTTP - https》

    一:HTTP 缺点? - 明文通讯(也是最受诟病的一个缺点) - 不验证对方的身份(你说你是你?你怎么证明你是你呢?) - 无法验证报文的完整性,可能已经被篡改(在挨打的边缘,来回试探) 二:HTTP ...

  5. es基本查询相关的

    一.获取索引的mapping GET linewell_assets_mgt_es/lw_devices/_mapping

  6. Pytorch安装教程

    一.准备 Window10系统+Ubuntu16.10系统.Anaconda3.5(python3.6) 二.流程 (1)由于墙的问题,用conda安装Pytorch过程中会连接失败,这是因为Anac ...

  7. sdram 裸机程序

    硬件平台 :JZ2440 实现功能:将led闪烁代码从2440的2k sram中拷贝到sdram start.s      -->   上电初始化,拷贝代码 sdram.c   -->  ...

  8. asp.net开发中的问题总结

    1.错误摘要 HTTP 错误 404.3 - Not Found 由于扩展配置问题而无法提供您请求的页面 原因:由于刚安装的iis没有注册对应版本的.net导致错误,在vs提供的命令行中输入aspne ...

  9. g++编译多个文件

    注意:头文件不用去指定,其是由#include命令进行管理的,只需要编译cpp文件就可以了: 举例: 有以下三个文件: a.h a.cpp main.cpp 那么编译可以有以下两种方式: 1.分开编译 ...

  10. svn介绍

    什么是SVN(Subversion) Svn(subversion)是近年来崛起非常优秀的版本管理工具,与CVS管理工具一样,SVN是一个跨平台的开源的版本控制系统.Svn版本管理工具随着时间改变的各 ...