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

  为了给段落添加强调文本,则可以添加 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>

            

时间: 2024-10-05 22:14:52

2016年5月30日上午(传智Bootstrap笔记六(图片样式))的相关文章

2016年5月29日上午(菜鸟Bootstrap(less))

一.快速入门 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. Less 可以运行在 Node.浏览器和 Rhino 平台上.网上有很多第三方工具帮助你编译 Less 源码.

2017年3月30日上午学习日志

2017年3月30日上午复习了高等数学,学习高等数学教材书第二章第一节导数概念,并按照自己的思路记笔记,并背英语单词及其语法.

2016年3月30日作业

软考中高项学员:2016年3月30日作业 一.采购管理1.采购管理包括哪些过程?(记)答:1.编制采购计划.2.编制询价计划.3.询价.招投标.4.供方选择.5.合同管理.6.合同收尾.2.编制采购计划过程的成果是什么?答:1.采购管理计划.2.采购工作说明书.3.判断:每个采购工作说明书都来自于项目范围基准.答:对.4.结合P388页表14-1,工作说明书应该清楚地描述哪些内容?答:1.采购目标的详细描述.2.采购工作范围.3.工作地点.4.产品及服务的供货周期.5.适用标准.6.验收标准.7

Slimer软工课设日报-2016年6月30日

根据上期预告,今天的主要工作是增加了初始界面和设置界面 初始界面 点击start按钮,若在设置中已成功连接服务器,则会进入账号登录界面,否则弹窗报错 void start() { //开始游戏按钮 if (connected == 0) { MessageBox(NULL,"未连接到服务器,请在设置中输入IP","错误" , MB_OK); } else { form = 1; //账号登录页面 } } start按钮 代码中connected变量当设置页面中ip连

软考中高项学员:2016年3月30日作业

软考中高项学员:2016年3月30日作业 一.采购管理1.采购管理包括哪些过程?(记)2.编制采购计划过程的成果是什么?3.判断:每个采购工作说明书都来自于项目范围基准.4.结合P388页表14-1,工作说明书应该清楚地描述哪些内容?5.编制采购计划过程的技术.方法有哪些?6.工作说明书与范围说明书的区别?(记)7.常见的询价文件有哪些?8.询价的方法和技术有哪些?9.请描述我讲的招标文件.资格预审文件出售日期及常用的一些日期.(根据录屏总结)10.政府采购法规定了哪六种采购方式?每种的前提条件

8月30日28家中国域名商六类国际域名注册保有量统计

IDC评述网(idcps.com)09月06日报道:根据RegistrarStats公布的实时数据显示,截止至2015年8月30日,在国内域名注册市场上,阿里云(万网).新网.易名中国分别凭借3,466,602个.1,921,921个.886,182个域名注册量名列前三.其中,阿里云(万网)增势依然强劲,环比上期净增28,308个.而新网则持续下降,环比净减12,201个,降幅增大,与阿里云(万网)的差距进一步扩大.下面,请看IDC评述网对数据进行详尽分析. (图1)中国域名注册商(国际域名)保

2016年04月30日【EPM-易通元】最新价位公布

涨了.涨了.又涨了! 我们的「EPM易通元」天天见涨!太给力了!! 2016.04.30日今天早晨已涨0.01美金,目前已到0.37美金啦!如果你有1000个易通元,你今天就收益10美金 如果你有10000个易通元,今天就收益100美金 如果你有100000个易通元,你今天就收益1000美金 如果你有1000000个易通元,你今天就收益10000美金. 恭喜买到「EPM易通元」的朋友们,买到即是赚到! 买入210美金到3500美金 :1美金:6.3人民币兑换,举例买入3500美金(人民币2205

2016年5月29日上午(传智Bootstrap(笔记一))

一.Bootstrap简介 简单灵活可用于架构流行的用户界面和交互接口的html,css,javascript工具集. 基于html5.css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档,自定义JQuery插件,完整的类库,基于Less等. 要想使用Bootstrap,需要加载jquery.js 二.Bootstrap基本模板 HTML5文档类型定义.字符集设置.移动设备优先.引入css和js文件: (1)HTML5文档类型定义.

2016年5月31日上午(传智Bootstrap笔记(Bootstrap 布局组件输入框组))

一.Bootstrap 输入框组 本章将讲解 Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素.例如您可以添加美元符号,或者在Twitter用户名前添加@,或者应用程序接口所需要的其他公共的元素. 向.form-control添加前缀或后缀元素的步骤如下: 把前缀或后缀元素放在一个带有.input-group 的 <div>