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

2019-06-02 本文已影响17人清风Python

处女座的通病

作为十二星座中，一直被各种嘲讽的处女座，坦白说真的活得好累。
最近对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>

响应式图片.gif

To Be Continue ...

历史文章：

Bootstrap学习笔记2--响应式布局与栅格样式
 Bootstrap学习笔记1--表单样式