Markdown與Bootstrap相結(jié)合實(shí)現(xiàn)圖片自適應(yīng)屬性
先給大家說下Markdown的基本概念及優(yōu)點(diǎn)
Markdown是一種可以使用普通文本編輯器編寫的標(biāo)記語言，通過簡單的標(biāo)記語法，它可以使普通文本內(nèi)容具有一定的格式。
Markdown 是一種輕量級的標(biāo)記語言，它的優(yōu)點(diǎn)很多，目前也被越來越多的寫作愛好者，撰稿者廣泛使用?？吹竭@里請不要被標(biāo)記、語言所迷惑，Markdown 的語法十分簡單。常用的標(biāo)記符號也不超過十個(gè)，這種相對于更為復(fù)雜的 HTML 標(biāo)記語言來說，Markdown 可謂是十分輕量的，學(xué)習(xí)成本也不需要太多，且一旦熟悉這種語法規(guī)則，會有一勞永逸的效果。
使用 Markdown 的優(yōu)點(diǎn)
專注你的文字內(nèi)容而不是排版樣式，安心寫作。
輕松的導(dǎo)出 HTML、PDF 和本身的 .md 文件。
純文本內(nèi)容，兼容所有的文本編輯器與字處理軟件。
隨時(shí)修改你的文章版本，不必像字處理軟件生成若干文件版本導(dǎo)致混亂。
可讀、直觀、學(xué)習(xí)成本低。
Markdown是一個(gè)很好的標(biāo)記語言，越來越流行作為編輯器的語法，Bootstrap是一個(gè)前端框架，那么問題來了，Markdown的圖片標(biāo)記如：，在頁面上通常會轉(zhuǎn)換成html，這個(gè)時(shí)候如何給圖片加Bootstrap的圖片自適應(yīng)屬性.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標(biāo)簽內(nèi)加上：
<metaname="viewport" content="width=device-width, initial-scale=1">
這樣在手機(jī)小屏幕上，圖片也能夠自動縮放了，同時(shí)不影響B(tài)ootstrap的自適應(yīng)布局。.img-responsive屬性其實(shí)也就是給圖片加block，max-width:100%的屬性。
以上所述是小編給大家介紹的Markdown與Bootstrap相結(jié)合實(shí)現(xiàn)圖片自適應(yīng)屬性的相關(guān)知識，希望對大家有所幫助！
- BootStrap table表格插件自適應(yīng)固定表頭(超好用)
- Markdown+Bootstrap圖片自適應(yīng)屬性詳解
- 使用jQuery和Bootstrap實(shí)現(xiàn)多層、自適應(yīng)模態(tài)窗口
- Bootstrap頁面布局基礎(chǔ)知識全面解析
- bootstrap配合Masonry插件實(shí)現(xiàn)瀑布式布局
- BootStrap學(xué)習(xí)系列之布局組件(下拉,按鈕組[toolbar],上拉)
- BootStrap整體框架之基礎(chǔ)布局組件
- Bootstrap表單布局
- Bootstrap 布局組件（全）
- bootstrap實(shí)現(xiàn)的自適應(yīng)頁面簡單應(yīng)用示例
相關(guān)文章
javascript數(shù)組按屬性分組實(shí)現(xiàn)方法
在開發(fā)過程中,前端有時(shí)需要對后端返回的數(shù)據(jù)進(jìn)行一些處理,當(dāng)后端返回給我們json對象數(shù)組時(shí),我們可能會需要按照對象中的某一個(gè)屬性來進(jìn)行分組,下面這篇文章主要給大家介紹了關(guān)于javascript數(shù)組按屬性分組的實(shí)現(xiàn)方法,需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)表格循環(huán)滾動，每次滾動一行停頓，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
關(guān)于javascript解決閉包漏洞的一個(gè)問題詳解
閉包在JavaScript高級程序設(shè)計(jì)(第3版)中是這樣描述:閉包是指有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù),下面這篇文章主要給大家介紹了關(guān)于javascript解決閉包漏洞的一個(gè)問題的相關(guān)資料,需要的朋友可以參考下2022-11-11
下面小編就為大家?guī)硪黄仙Ｕ勗鶭S執(zhí)行環(huán)境與作用域。小編覺得挺不錯(cuò)的，希望對大家有所幫助。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-11-11
JavaScript中使用Spread運(yùn)算符的八種方法總結(jié)
這篇文章主要給大家介紹了JavaScript中使用Spread運(yùn)算符的八種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
JavaScript數(shù)據(jù)結(jié)構(gòu)之棧實(shí)例用法
在本篇文章里小編給大家分享了關(guān)于JavaScript數(shù)據(jù)結(jié)構(gòu)之棧實(shí)例用法內(nèi)容，有興趣的朋友們學(xué)習(xí)下。2019-01-01
使用JS前端加密庫sm-crypto實(shí)現(xiàn)國密sm2、sm3和sm4加密與解密
這篇文章主要介紹了使用JS前端加密庫sm-crypto實(shí)現(xiàn)國密sm2、sm3和sm4加密與解密,需要的朋友可以參考下2024-06-06
JavaScript中運(yùn)算符規(guī)則和隱式類型轉(zhuǎn)換示例詳解
JavaScript中運(yùn)算符規(guī)則的隱式類型轉(zhuǎn)換是什么? 這是每個(gè)學(xué)習(xí)Javascript的新手們都應(yīng)該知道的一個(gè)問題，下面這篇文章主要給大家介紹了關(guān)于JavaScript中運(yùn)算符規(guī)則和隱式類型轉(zhuǎn)換的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09
這篇文章主要為大家整理了關(guān)于Bootstrap排版的慕課筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
JavaScript數(shù)據(jù)類型的存儲方法詳解
JavaScript中基本數(shù)據(jù)類型和引用數(shù)據(jù)類型是如何存儲的呢？下面通過本文給大家分享js數(shù)據(jù)類型的存儲方法，需要的朋友參考下吧2017-08-08