這篇文章主要為大家詳細介紹了Markdown+Bootstrap圖片自適應屬性，感興趣的朋友可以參考一下

Markdown 是一種輕量級的「標記語言」，它的優(yōu)點很多，目前也被越來越多的寫作愛好者，撰稿者廣泛使用?？吹竭@里請不要被「標記」、「語言」所迷惑，Markdown 的語法十分簡單。常用的標記符號也不超過十個，這種相對于更為復雜的 HTML 標記語言來說，Markdown 可謂是十分輕量的，學習成本也不需要太多，且一旦熟悉這種語法規(guī)則，會有一勞永逸的效果。

使用 Markdown 的優(yōu)點

1、專注你的文字內(nèi)容而不是排版樣式，安心寫作。

2、輕松的導出 HTML、PDF 和本身的 .md 文件。

3、純文本內(nèi)容，兼容所有的文本編輯器與字處理軟件。

4、隨時修改你的文章版本，不必像字處理軟件生成若干文件版本導致混亂。

5、可讀、直觀、學習成本低。

使用 Markdown 的誤區(qū)

Markdown 旨在簡潔、高效，也由于 Markdown 的易讀易寫，人們用不同的編程語言實現(xiàn)了多個版本的解析器和生成器，這就導致了目前不同的 Markdown 工具集成了不同的功能（基礎功能大致相同），例如流程圖與時序圖，復雜表格與復雜公式的呈現(xiàn)，雖然功能的豐富并沒有什么本質(zhì)的缺點，但終歸有些背離初衷，何況在編寫的過程中很費神，不如使用專業(yè)的工具撰寫來的更有效率，所以如果你需實現(xiàn)復雜功能，專業(yè)的圖形界面工具會更加方便。

Markdown是一個很好的標記語言，越來越流行作為編輯器的語法，Bootstrap是一個前端框架，那么問題來了，Markdown的圖片標記如：，在頁面上通常會轉(zhuǎn)換成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標簽內(nèi)加上：

<metaname="viewport" content="width=device-width, initial-scale=1">

這樣在手機小屏幕上，圖片也能夠自動縮放了，同時不影響B(tài)ootstrap的自適應布局。.img-responsive屬性其實也就是給圖片加block，max-width:100%的屬性。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。