Markdown與Bootstrap相結合實現(xiàn)圖片自適應屬性
先給大家說下Markdown的基本概念及優(yōu)點
Markdown是一種可以使用普通文本編輯器編寫的標記語言,通過簡單的標記語法,它可以使普通文本內(nèi)容具有一定的格式。
Markdown 是一種輕量級的標記語言,它的優(yōu)點很多,目前也被越來越多的寫作愛好者,撰稿者廣泛使用??吹竭@里請不要被標記、語言所迷惑,Markdown 的語法十分簡單。常用的標記符號也不超過十個,這種相對于更為復雜的 HTML 標記語言來說,Markdown 可謂是十分輕量的,學習成本也不需要太多,且一旦熟悉這種語法規(guī)則,會有一勞永逸的效果。
使用 Markdown 的優(yōu)點
專注你的文字內(nèi)容而不是排版樣式,安心寫作。
輕松的導出 HTML、PDF 和本身的 .md 文件。
純文本內(nèi)容,兼容所有的文本編輯器與字處理軟件。
隨時修改你的文章版本,不必像字處理軟件生成若干文件版本導致混亂。
可讀、直觀、學習成本低。
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%的屬性。
以上所述是小編給大家介紹的Markdown與Bootstrap相結合實現(xiàn)圖片自適應屬性的相關知識,希望對大家有所幫助!
相關文章
javascript數(shù)組按屬性分組實現(xiàn)方法
在開發(fā)過程中,前端有時需要對后端返回的數(shù)據(jù)進行一些處理,當后端返回給我們json對象數(shù)組時,我們可能會需要按照對象中的某一個屬性來進行分組,下面這篇文章主要給大家介紹了關于javascript數(shù)組按屬性分組的實現(xiàn)方法,需要的朋友可以參考下2023-05-05
使用JS前端加密庫sm-crypto實現(xiàn)國密sm2、sm3和sm4加密與解密
這篇文章主要介紹了使用JS前端加密庫sm-crypto實現(xiàn)國密sm2、sm3和sm4加密與解密,需要的朋友可以參考下2024-06-06
JavaScript中運算符規(guī)則和隱式類型轉(zhuǎn)換示例詳解
JavaScript中運算符規(guī)則的隱式類型轉(zhuǎn)換是什么? 這是每個學習Javascript的新手們都應該知道的一個問題,下面這篇文章主要給大家介紹了關于JavaScript中運算符規(guī)則和隱式類型轉(zhuǎn)換的相關資料,需要的朋友可以參考借鑒,下面來一起看看吧。2017-09-09
JavaScript數(shù)據(jù)類型的存儲方法詳解
JavaScript中基本數(shù)據(jù)類型和引用數(shù)據(jù)類型是如何存儲的呢?下面通過本文給大家分享js數(shù)據(jù)類型的存儲方法,需要的朋友參考下吧2017-08-08

