Bootstrap学习笔记3--图片样式

最新推荐文章于 2021-06-27 18:56:34 发布

清风 python

最新推荐文章于 2021-06-27 18:56:34 发布

阅读量200

点赞数

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/SlaughterDevil/article/details/90735542

版权

Bootstrap 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

处女座的通病

作为十二星座中，一直被各种嘲讽的处女座，坦白说真的活得好累。
最近对Bootstrap框架比较着迷，之前写一些前台的页面，都是用Sublime Text3简单用用就好。这几天在看Bootstrap的相关视频，视频里面这个用Atom那个用WebStorm，更有甚者连Brackets和Hbuilder都上了。
看到他们一个个的编辑器用起来感觉好炫酷，心想一定要找个最最最适合自己的软件。抱着这种心态把所有编辑器轮流安装用了一圈。可安装完才想起来，公司最近查的紧，严禁使用未申报的软件，回过头来还是接着用Sublime Text3吧…

关于Sublime Text3

一直使用的Sublime Text3，没有安装什么插件（跟公司网络隔离有关…），完全是当做主题美化后的NotePad++在用。但写前台不像是java、python有固定的相关格式要求，它完全放飞自我…为了调整代码格式，累到吐血。没办法为了在公司也能用，只好找找可以离线安装的插件包吧…

HTMLPrettify

上GitHub下载了最新的HTMLPrettify插件包，然后去找了个汉化免安装的SublimeText.3.2.1.3207，丢进去没起作用…一查才知道HTMLPrettify基于Node，还得安装node.js…（顺带又装了个PrettyJson）就这样，美好的周末大半天过去了！
整理好的插件和免安装汉化的Sublime Text3放在百度云上，供大家下载吧，顺口说句最新的3207样式和主题美观上有了很大改变，当然也许是我好久没有更新版本了吧…
百度云分享地址：

链接：https://pan.baidu.com/s/1enhWBtdDKzuegbXlmgB51g 提取码：h7nx

插件效果：
插件效果.gif

Bootstrap 图片样式

Bootstrap的图片基础样式分为三类：

.img-rounded	border-radius:6px	图片圆角
.img-circle	border-radius:50%	圆形图片
.img-thumbnail	border: 1px solid #ddd ; padding:4px;	图片圆角+灰色边框
.img-responsive（响应式）	max-width: 100% ; height: auto;	根据浏览器的宽度，自适应图片大小

先看看看三种类型图片的样式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
    img {
        width: 200px;
        margin: 20px;
    }
    </style>
</head>
<body>
    <img src="Logo.jpg" class="img-rounded">
    <img src="Logo.jpg" class="img-circle">
    <img src="Logo.jpg" class="img-thumbnail">
</body>
</html>

img效果展示.png

再来看看图片添加响应式，后的变化：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <img src="Logo.jpg" class="img-rounded img-responsive">
</body>
</html>