Markdown与Bootstrap相结合实现图片自适应属性
更新时间：2016年05月04日 09:26:24 投稿：mrr
Markdown 是一种轻量级的标记语言，它的优点很多，目前也被越来越多的写作爱好者，撰稿者广泛使用。接下来通过本文给大家介绍Markdown与Bootstrap相结合实现图片自适应属性，感兴趣的朋友一起学习吧
先给大家说下Markdown的基本概念及优点
Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。
Markdown 是一种轻量级的标记语言，它的优点很多，目前也被越来越多的写作爱好者，撰稿者广泛使用。看到这里请不要被标记、语言所迷惑，Markdown 的语法十分简单。常用的标记符号也不超过十个，这种相对于更为复杂的 HTML 标记语言来说，Markdown 可谓是十分轻量的，学习成本也不需要太多，且一旦熟悉这种语法规则，会有一劳永逸的效果。
使用 Markdown 的优点
专注你的文字内容而不是排版样式，安心写作。
轻松的导出 HTML、PDF 和本身的 .md 文件。
纯文本内容，兼容所有的文本编辑器与字处理软件。
随时修改你的文章版本，不必像字处理软件生成若干文件版本导致混乱。
可读、直观、学习成本低。
Markdown是一个很好的标记语言，越来越流行作为编辑器的语法，Bootstrap是一个前端框架，那么问题来了，Markdown的图片标记如：，在页面上通常会转换成html，这个时候如何给图片加Bootstrap的图片自适应属性.img-responsive?
如：
<img alt=”武汉光谷” src=”http://cdn.tanteng.me/uploads/2016/05/guang-gu.jpg” class=”img-responsive”>
用js就好了：
<scripttype="text/javascript">
$(".content img").addClass('img-responsive');
</script>
别忘了在html的head标签内加上：
<metaname="viewport" content="width=device-width, initial-scale=1">
这样在手机小屏幕上，图片也能够自动缩放了，同时不影响Bootstrap的自适应布局。.img-responsive属性其实也就是给图片加block，max-width:100%的属性。
以上所述是小编给大家介绍的Markdown与Bootstrap相结合实现图片自适应属性的相关知识，希望对大家有所帮助！
相关文章
这篇文章主要为大家详细介绍了微信小程序实现滚动Tab选项卡，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要给大家介绍了关于鸿蒙Js实战之计算器功能开发的相关资料,计算器是我们生活中经常使用的应用,此项目是基于Harmony实现的简易计算器,需要的朋友可以参考下2024-02-02
这篇文章主要为大家详细介绍了原生js实现瀑布流布局的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
本篇文章给大家介绍js模块规范之AMD规范和CMD规范，模块化是一种处理复杂系统分解为代码结构更合理，可维护性更高的可管理的模块的方式，对js amd cmd规范感兴趣的童鞋可以来本文学习2015-10-10
这篇文章主要介绍了js 数组当前行添加数据方法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了javascript原型链学习记录之继承实现方式,结合实例形式分析了javascript使用原型链实现继承的相关操作技巧与注意事项,需要的朋友可以参考下2019-05-05
大家好，本篇文章分享的是四种好玩的黑客背景效果JS代码，感兴趣的同学赶紧来试试吧，觉得还不错的话记得收藏一下哦，方便下次浏览2021-11-11
这篇文章主要介绍了纯js实现放大缩小拖拽功能，文中给大家提到了在开发过程中遇到的一些问题及解决方法,需要的朋友可以参考下2019-11-11
这篇文章主要介绍了javascript数据结构之串的概念与用法,简单讲述了串的概念、功能并结合实例形式分析了基于javascript实现串的遍历、比较、查找等相关操作技巧,需要的朋友可以参考下2017-04-04
JS循环语句也叫迭代语句,是一种特殊的语句,主要用于需要多次执行的代码块,下面这篇文章主要给大家介绍了关于JavaScript中循环之间的差异的相关资料,需要的朋友可以参考下2021-08-08
最新评论