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

简介: 看到他们一个个的编辑器用起来感觉好炫酷,心想一定要找个最最最适合自己的软件。抱着这种心态把所有编辑器轮流安装用了一圈。可安装完才想起来,公司最近查的紧,严禁使用未申报的软件,回过头来还是接着用Sublime Text3吧...

前言


最近对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 ...




相关文章
|
7月前
|
前端开发
【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
【1月更文挑战第17天】【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
|
前端开发 程序员 Android开发
Bootstrap+jQuery实现卡片标签样式的分页
Bootstrap+jQuery实现卡片标签样式的分页
67 0
|
7月前
|
前端开发
BootStrap 5 保姆级教程(三):表格 & 图片
BootStrap 5 保姆级教程(三):表格 & 图片
|
7月前
|
前端开发
bootstrap样式代码案例
bootstrap样式代码案例
|
7月前
|
前端开发 JavaScript 容器
bootstrap样式
bootstrap样式
|
7月前
|
前端开发
uni-app中基于bootstrap的css样式
uni-app中基于bootstrap的css样式
120 0
|
7月前
|
前端开发 JavaScript 容器
BootStrap 组件和样式
BootStrap 组件和样式
67 0
|
前端开发
如何去掉bootstrap table中表格样式中横线竖线
如何去掉bootstrap table中表格样式中横线竖线
114 0
N..
|
7月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
68 0
|
前端开发 容器