　　为了给段落添加强调文本，则可以添加 class="lead"，这将得到更大更粗、行高更高的文本，如下面实例所示：

 <body style="padding:50px;background-color:#ccc;"><hr><h2>引导主体副本</h2><p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。</p></body>

　　1、Bootstrap 图片

　　通过在 <img> 标签添加 .img-responsive 类来让图片支持响应式设计。图片将很好地扩展到父元素。

　　.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上：

<body style="padding:50px;background-color:#ccc;"><h2 class="page-header">图片样式应用</h2><div><img class="img-responsive" width="400px" src="1.jpg"><p>在本章中，我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class：.img-rounded：添加 border-radius:6px 来获得图片圆角。.img-circle：添加 border-radius:50% 来让整个图片变成圆形。.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。</p></div></body>

　　在本章中，我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class：

　　.img-rounded：添加 border-radius:6px 来获得图片圆角。（圆角图片）
　　.img-circle：添加 border-radius:50% 来让整个图片变成圆形。（圆形图片）

<body style="padding:50px;background-color:#ccc;"><h2 class="page-header">图片样式应用</h2><div><img class="img-responsive img-circle" width="400px" src="1.jpg"><p>在本章中，我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class：.img-rounded：添加 border-radius:6px 来获得图片圆角。.img-circle：添加 border-radius:50% 来让整个图片变成圆形。.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。</p></div></body>

　　.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。（边框圆角）

<body style="padding:50px;background-color:#ccc;"><h2 class="page-header">图片样式应用</h2><div><img class="img-responsive img-thumbnail" width="400px" src="1.jpg"><p>在本章中，我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class：.img-rounded：添加 border-radius:6px 来获得图片圆角。.img-circle：添加 border-radius:50% 来让整个图片变成圆形。.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。</p></div></body>

　　　　center-block；图片居中

<body style="padding:50px;background-color:#ccc;"><h2 class="page-header">图片样式应用</h2><div><img class="img-responsive img-circle center-block" width="400px" src="1.jpg"><p>在本章中，我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class：.img-rounded：添加 border-radius:6px 来获得图片圆角。.img-circle：添加 border-radius:50% 来让整个图片变成圆形。.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。</p></div></body>

转载于:https://www.cnblogs.com/zzjeny/p/5542093.html

2016年5月30日上午（传智Bootstrap笔记六（图片样式））相关推荐

面试经历---Samp；G（2016年02月27日上午面试）
S&G是一家外企,在广州琶州那边,下面附上这家企业的笔试题. 2016年2月27日上午笔试题一． JAVA基础题 1. 什么是接口? 接口就是一些方法特征的集合,是对对象的抽象 ...
计算机病毒解析与防范结束语,2016年04月30日计算机病毒解析与防范题纲_向必青.doc...
2016年04月30日计算机病毒解析与防范题纲_向必青计算机病毒解析与防范向必青摘要:计算机病毒被喻为21世纪计算机犯罪的五大手段之一,并排序为第二.计算机病毒的攻击性,在于它能够破坏各种程序并 ...
面试经历---广东耶萨智能科技股份有限公司（2016年01月11日上午面试）
广东耶萨智能科技股份有限公司是一家做跨境玩具贸易的公司,约我2016年1月11日上午过去面试. 一.笔试题 1. 写出下述语句的结果 Int a=1,b=0; System.out.printl ...
2016年8月30日星期二 --出埃及记 Exodus 16:31
2016年8月30日星期二 --出埃及记 Exodus 16:31 The people of Israel called the bread manna. It was white like co ...
关于2022年7月30日上午PMI认证考试的报名通知
尊敬的各位考生: 经PMI和中国国际人才交流基金会研究决定,中国大陆地区2022年第一期PMI认证考试将在满足疫情防控和考试组织条件的基础上,于7月30日上午举办. 本次考试相关事项通知如下: 一.时 ...
我的Python成长之路---第五天---Python基础（17）---2016年1月30日（晴）
常用模块 1.模块介绍模块,用一砣代码实现了某个功能的代码集合. 模块分为三种自定义模块内置标准模块(又称标准库) 开源模块 2.常用模块 time模块 time.time() import t ...
【蓝桥杯Java_C组·从零开始卷】第二节、ifswitch(超级详细，适合入门强化学习，理论与实战双保险（2021年12月30日上午9点直播·视频发布B站）
目录 if语句的三种格式单分支简写语法可能出现的异常双分支 else if 是多分支件判断·与纯if两者区别案例一.判断一个正整数的奇偶性案例二.考试奖励 switch语句三种用法 swi ...
2016年10月30日表单标签与样式表分类和选择器
今天上午讲的表单标签 <form name="表单"method="get" action="Untitled-2.html"> ...
2016年11月30日 angularJS input=file 绑定change事件
angularJS 之前都没有听说过,刚进公司第一天领导让我自己在网上学习第二天开始帮忙做一点东西,遇到了第一个问题:angularJS 如何绑定file表单的change 上传图片,我不会用ang ...

2016年5月30日上午（传智Bootstrap笔记六（图片样式））

1、Bootstrap 图片

2016年5月30日上午（传智Bootstrap笔记六（图片样式））相关推荐

最新文章

热门文章