Bootstrap 全局CSS样式:图片类的使用

简介: Bootstrap 框架

作者:WangMin
格言:努力做好自己喜欢的每一件事

banner.png

响应式图片

通过为图片添加.img-responsive类可以让图片支持响应式布局,也就是给图片设置max-width: 100%;height: auto;display: block;属性,从而让图片在其父元素中更好的收缩。另外,如果需要让使用了.img-responsive类的图片水平居中,请使用.center-block类,不要用.text-center

<img src="..." class="img-responsive" alt="响应式图片"/>

图片形状

通过为<img>元素添加以下相应的类,可以让图片呈现不同的形状。

<img src="../img/timg.jpg" class="img-rounded" width="200px"/>
<img src="../img/timg.jpg" class="img-thumbnail" width="200px"/>
<img src="../img/timg.jpg" class="img-circle" width="200px"/>

1.png

img-rounded 通过 border-radius : 6px 来获得图片圆角

img-circle 通过 border-radius : 50% 来让整个图片变成圆形

img-thumbnail 添加一些内边距(padding)和一个灰色的边框


就先分享到这里!! :smile: 后续继续更新!!

目录
相关文章
N..
|
18天前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
11 0
|
1月前
|
前端开发 计算机视觉 开发者
利用CSS改变图片颜色的100种方法!
利用CSS改变图片颜色的100种方法!
32 1
|
1月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
29 0
|
1月前
|
前端开发 JavaScript
css之伪类hover改变自身、子元素、其他元素的样式
css之伪类hover改变自身、子元素、其他元素的样式
21 0
|
1月前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
41 0
|
1天前
|
前端开发
|
4天前
|
移动开发 前端开发
【通用CSS模板】移动端H5页面统一样式.css
【通用CSS模板】移动端H5页面统一样式.css
|
22天前
css3鼠标悬停图片特效源码
css3鼠标悬停图片特效,图片悬停效果源码,可以在网页上面作为自己的动态加载名片,放到侧边栏或者网站合适的位置即可
13 0
css3鼠标悬停图片特效源码
|
22天前
|
前端开发
bootstrap样式代码案例
bootstrap样式代码案例
10 0
|
22天前
|
前端开发 JavaScript 容器
bootstrap样式
bootstrap样式
9 0