Boostrap 中的 图片与图标

一. 图片

在Bootstrap框架中对于图像的样式风格提供以下几种风格:

  • .img-responsive:响应式图片,主要针对于响应式设计
  • .img-rounded:圆角图片
  • .img-circle:圆形图片
  • .img-thumbnail:缩略图片,相框效果

直接把类名添加到img标签上就行了!

注意: 设置图片大小时,由于样式没有对图片做大小上的样式限制,所以在实际使用的时候,需要通过其他的方式来处理图片大小。比如说控制图片容器大小。(注意不可以通过css样式直接修改img图片的大小,这样操作就不响应了)

二. 图标

这里说的图标就是Web制作中常看到的小icon图标,包括250多个来自 Glyphicon Halflings 的字体图标,Bootstrap框架中图标都是glyphicons.com这个商业网站提供的,并且免费授权给Bootstrap框架使用。
不过,大家普遍更愿意使用Font Awesome,使用方法非常简单:

  • 在页面顶部添加 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

  • 添加 .fa .icon_name<i> 标签。 这里的 icon_name 到 Font Awesome网站 查询

  • 更多详细参见 我的 FontAwesome 学习随笔

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 13,744评论 3 184
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,660评论 4 61
  • 今天是我生命当中独一无二的仅有的一天,如果一切如我所愿,在未来我将还有21892天。在一去不返的今天,…… 陪儿子...
    成长无极限阅读 1,855评论 0 0
  • 20171105 1311 BJ.CN zcl 今天新知: OpenFaaS, FaaS, serverle...
    taoza阅读 2,507评论 0 2
  • 朋友: 好久不见,分外想念。 见字如面,请恕我直言: 我想揍你已经很久别想走! 有话去对医...
    笔墨不太冷阅读 2,490评论 0 1

友情链接更多精彩内容