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

处女座的通病

作为十二星座中,一直被各种嘲讽的处女座,坦白说真的活得好累。
最近对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-roundedborder-radius:6px图片圆角
.img-circleborder-radius:50%圆形图片
.img-thumbnailborder: 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 原创 如需转载请注明
欢迎大家关注我的公众号:
清风Python.jpg

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值