<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap图片</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<h2>图片</h2>

<p> .img-responsive类让图片支持响应式，将很好地扩展到父元素 (通过改变窗口大小查看效果):</p>
<img src="Images/HTML5LOGO.jpg" class="img-responsive" />

</div>

<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap图片支持响应式的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 图片：响应式图片

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. bootstrap 学习笔记（5）---- 图片和响应式工具

    (一)响应式图片: 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局.其实质是为图片设置了 max-width: 100%;. heig ...

  3. Bootstrap 实战之响应式个人博客 （一）

    一.示例 1.主页 2.博客详情页 3.在线地址 在线地址:入口 Addition:这里使用github-page将自己的静态项目免费部署到线上. 如果你只是做一些简单的静态项目做展示,付出这么大的时 ...

  4. Bootstrap<基础十> 响应式实用工具

    Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发.这些可以通过媒体查询结合大型.小型和中型设备,实现内容对设备的显示和隐藏. 需要谨慎使用这些工具,避免在同一个站点创建完全不同 ...

  5. IE浏览器支持响应式网站设计

    目前响应式网站设计比较流行, 下面是摘自百度百科有关响应式设计的定义. 响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的 ...

  6. Bootstrap 实战之响应式个人博客 （二）

    阅读本博文前请参考:Bootstrap 实战之响应式个人博客 (一) 一.博客 1.结构 整体博客详情页的结构共包括四部分: 导航栏 博客主体内容 右侧栏:全局搜索框,广告位,推荐阅读 页尾 其中导航 ...

  7. bootstrap 自适应和响应式布局的区别

    自适应:  不管屏幕多大,都尽量不换行,而只是横向缩放. 响应式: 屏幕变小了之后,属于同一行的元素受到挤压后,行的右边元素自动换行显式: 屏幕大了后,本属于同一行的元素尽可能的排在同一行内: boo ...

  8. 使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容

    □ ListGroup展示内容 当希望把同类型的内容以列表.区块展示的时候,ListGroup是不错的选择. <div class="col-sm-6"> <h3 ...

  9. 使用Bootstrap 3开发响应式网站实践04,使用Panels展示内容

    在Bootstrap页面中,通常用Panels来展示主要功能的内容.该部分Html为: <div class="row" id="featureHeading&qu ...

随机推荐

  1. pycharm中模块matplolib生成图表出现中文乱码解决方法

    在python文件中加入如下两行 import matplotlib.pyplot as plt plt.rcParams['font.sans-serif']=['SimHei'] #用来正常显示中 ...

  2. JIRA中的标记语言的语法参考

    前言 看到网上有的文章说JIRA是使用Textile这门标记语言,有些语法和Wikitext和Markdown相像.JIRA在2017年进行了一次大更新,某些语法可能和以前不大一样,这里纪录一下常用的 ...

  3. WKWebView简单使用

    #import <WebKit/WebKit.h> @interface SchoolOverviewsViewController ()<WKUIDelegate,WKNaviga ...

  4. python 基础(十二) 图片简单处理

    pillow 图片处理模块 安装 pip install pillow  pip是安装第三方模块的工具 缩放图片实例 from PIL import Image path = r'C:\Users\x ...

  5. Hungary Algorithm国外板子

    Codeforces 1107一题除了dp做法还有二分带权匹配O(n^3)做法,国外网友的板子时间非常优秀,但矩阵设定的事情并不是很懂-- //Codeforces 1107F const int m ...

  6. vue项目打包后文本溢出代码消失问题

    补充 https://www.cnblogs.com/richard1015/p/8526988.html vue webpack 打包编译-webkit-box-orient: vertical 后 ...

  7. 牛客网Java刷题知识点之什么是cookie、什么是session、cookie和session有什么区别

    不多说,直接上干货! https://www.nowcoder.com/ta/review-java/review?tpId=31&tqId=21170&query=&asc= ...

  8. linux学习-Linux系统启动过程

    linux系统启动过程 Linux系统的启动过程并不是大家想象中的那么复杂,其过程可以分为5个阶段: 内核的引导. 运行init. 系统初始化. 建立终端 . 用户登录系统. 内核引导 电源开机后,首 ...

  9. 如何写一个跨浏览器的事件处理程序 js

    如何 写一个合格的事件处理程序,看如下代码: EventUtil可以直接拿去用 不谢 <!DOCTYPE html> <html> <head> <title ...

  10. 一些JS基本小内容

    获取select选中内容: 1.获取select表单内容 <select id="sel"> <option value="v1">1& ...