Markdown+Bootstrap图片自适应属性详解

Markdown 是一种轻量级的「标记语言」，它的优点很多，目前也被越来越多的写作爱好者，撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷惑，Markdown 的语法十分简单。常用的标记符号也不超过十个，这种相对于更为复杂的 HTML 标记语言来说，Markdown 可谓是十分轻量的，学习成本也不需要太多，且一旦熟悉这种语法规则，会有一劳永逸的效果。

使用 Markdown 的优点
1、专注你的文字内容而不是排版样式，安心写作。
2、轻松的导出 HTML、PDF 和本身的 .md 文件。
3、纯文本内容，兼容所有的文本编辑器与字处理软件。
4、随时修改你的文章版本，不必像字处理软件生成若干文件版本导致混乱。
5、可读、直观、学习成本低。

使用 Markdown 的误区
Markdown 旨在简洁、高效，也由于 Markdown 的易读易写，人们用不同的编程语言实现了多个版本的解析器和生成器，这就导致了目前不同的 Markdown 工具集成了不同的功能（基础功能大致相同），例如流程图与时序图，复杂表格与复杂公式的呈现，虽然功能的丰富并没有什么本质的缺点，但终归有些背离初衷，何况在编写的过程中很费神，不如使用专业的工具撰写来的更有效率，所以如果你需实现复杂功能，专业的图形界面工具会更加方便。

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%的属性。

以上就是本文的全部内容，希望对大家的学习有所帮助。