美文网首页我爱编程
Bootstrap全局样式 - 图片

Bootstrap全局样式 - 图片

作者: 蝴蝶结199007 | 来源:发表于2017-06-12 16:45 被阅读12次

知识点

类 | 描述

  • | :-: | -:
    .img-responsive | max-width: 100%; height: auto; 和 display: block;图片响应式
    .center-block | 图片水平居中
    .img-rounded | 为图片添加圆角 (IE8 不支持)，border-radius:6px
    .img-circle | 添加 border-radius:500px 来让整个图片变成圆形
    .img-thumbnail | 添加内边距（padding）和一个灰色的边框。

在 Internet Explorer 8-10 中，设置为 .img-responsive 的 SVG 图像显示出的尺寸不匀称。为了解决这个问题，在出问题的地方添加 width: 100% \9; 即可。Bootstrap 并没有自动为所有图像元素设置这一属性，因为这会导致其他图像格式出现错乱。

实践

    ![](images/img1.jpg)
    ![](images/img1.jpg)
    ![](images/img1.jpg)
    ![](images/img1.jpg)
    ![](images/img1.jpg)

相关文章

  • Bootstrap全局样式 - 图片

    知识点 类 | 描述 | :-: | -:.img-responsive | max-width: 100%; h...

  • bootstrap-栅格布局系统-表单-组件

    一. bootstrap-全局css样式-栅格布局系统-重点难点 二. bootstrap-全局css样式-表单-...

  • Bootstrap

    Bootstrap 目录 - bootstrap 全局样式用法 - viewport的意义 - 栅格化布局用法 -...

  • Bootstrap - 全局样式

    学习Bootstrap之前，传统前端开发过程中的问题： Bootstrap作为一套完善的前端样式框架：为我们提供了...

  • bootstrap(一)

    GitHub上这样介绍 bootstrap：## 基本的HTML模板## 全局样式## Bootstrap框架的核...

  • bootstrap按钮

    bootstrap按钮： bootstrap中文网址：http://www.bootcss.com/--2全局样式...

  • Bootstrap 响应式网页

    什么是响应式网页 如何编写响应式网页 Bootstrap 起步 全局CSS样式 组件 bootstrap插件函数，...

  • Bootstrap全局样式 - 按钮

    知识点 任何带有 .btn 的元素都会继承圆角灰色按钮的默认外观； 、 或 可以使用Bootstrap提供的按...

  • Bootstrap全局样式 - 表单

    知识点 基本表单 、 、 设置.form-control类，这些元素将会被设置为 width:100%;heigh...

  • Bootstrap全局样式 - 表格

    知识点 表格样式.table -----> 赋予基本的样式，少量的内补（padding）和水平方向的分隔线；.ta...

网友评论

    本文标题：Bootstrap全局样式 - 图片

    本文链接：https://www.haomeiwen.com/subject/kbtlqxtx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    我爱编程

    关于我们|服务条款|联系我们|Bootstrap全局样式 - 图片|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！