处女座的通病
作为十二星座中，一直被各种嘲讽的处女座，坦白说真的活得好累。
最近对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--表单样式
©本文由简书作者：清风Python 原创 如需转载请注明
网友评论