Markdown與Bootstrap結合實作圖片自適應屬性_javascript技巧

先跟大家說下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結合實現圖片自適應屬性的相關知識，希望對大家有幫助！