Markdown+Bootstrap圖片自適應(yīng)屬性詳解
Markdown 是一種輕量級(jí)的「標(biāo)記語(yǔ)言」,它的優(yōu)點(diǎn)很多,目前也被越來(lái)越多的寫(xiě)作愛(ài)好者,撰稿者廣泛使用??吹竭@里請(qǐng)不要被「標(biāo)記」、「語(yǔ)言」所迷惑,Markdown 的語(yǔ)法十分簡(jiǎn)單。常用的標(biāo)記符號(hào)也不超過(guò)十個(gè),這種相對(duì)于更為復(fù)雜的 HTML 標(biāo)記語(yǔ)言來(lái)說(shuō),Markdown 可謂是十分輕量的,學(xué)習(xí)成本也不需要太多,且一旦熟悉這種語(yǔ)法規(guī)則,會(huì)有一勞永逸的效果。
使用 Markdown 的優(yōu)點(diǎn)
1、專注你的文字內(nèi)容而不是排版樣式,安心寫(xiě)作。
2、輕松的導(dǎo)出 HTML、PDF 和本身的 .md 文件。
3、純文本內(nèi)容,兼容所有的文本編輯器與字處理軟件。
4、隨時(shí)修改你的文章版本,不必像字處理軟件生成若干文件版本導(dǎo)致混亂。
5、可讀、直觀、學(xué)習(xí)成本低。
使用 Markdown 的誤區(qū)
Markdown 旨在簡(jiǎn)潔、高效,也由于 Markdown 的易讀易寫(xiě),人們用不同的編程語(yǔ)言實(shí)現(xiàn)了多個(gè)版本的解析器和生成器,這就導(dǎo)致了目前不同的 Markdown 工具集成了不同的功能(基礎(chǔ)功能大致相同),例如流程圖與時(shí)序圖,復(fù)雜表格與復(fù)雜公式的呈現(xiàn),雖然功能的豐富并沒(méi)有什么本質(zhì)的缺點(diǎn),但終歸有些背離初衷,何況在編寫(xiě)的過(guò)程中很費(fèi)神,不如使用專業(yè)的工具撰寫(xiě)來(lái)的更有效率,所以如果你需實(shí)現(xiàn)復(fù)雜功能,專業(yè)的圖形界面工具會(huì)更加方便。
Markdown是一個(gè)很好的標(biāo)記語(yǔ)言,越來(lái)越流行作為編輯器的語(yǔ)法,Bootstrap是一個(gè)前端框架,那么問(wèn)題來(lái)了,Markdown的圖片標(biāo)記如:,在頁(yè)面上通常會(huì)轉(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ī)小屏幕上,圖片也能夠自動(dòng)縮放了,同時(shí)不影響B(tài)ootstrap的自適應(yīng)布局。.img-responsive屬性其實(shí)也就是給圖片加block,max-width:100%的屬性。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- BootStrap table表格插件自適應(yīng)固定表頭(超好用)
- Markdown與Bootstrap相結(jié)合實(shí)現(xiàn)圖片自適應(yīng)屬性
- 使用jQuery和Bootstrap實(shí)現(xiàn)多層、自適應(yīng)模態(tài)窗口
- Bootstrap頁(yè)面布局基礎(chǔ)知識(shí)全面解析
- bootstrap配合Masonry插件實(shí)現(xiàn)瀑布式布局
- BootStrap學(xué)習(xí)系列之布局組件(下拉,按鈕組[toolbar],上拉)
- BootStrap整體框架之基礎(chǔ)布局組件
- Bootstrap表單布局
- Bootstrap 布局組件(全)
- bootstrap實(shí)現(xiàn)的自適應(yīng)頁(yè)面簡(jiǎn)單應(yīng)用示例
相關(guān)文章
js學(xué)習(xí)總結(jié)之DOM2兼容處理重復(fù)問(wèn)題的解決方法
這篇文章主要為大家詳細(xì)介紹了js學(xué)習(xí)總結(jié)之DOM2兼容處理重復(fù)問(wèn)題的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07JavaScript+html實(shí)現(xiàn)前端頁(yè)面滑動(dòng)驗(yàn)證(2)
這篇文章主要為大家詳細(xì)介紹了JavaScript+html實(shí)現(xiàn)前端頁(yè)面滑動(dòng)驗(yàn)證的第二種方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06javascript實(shí)現(xiàn)圖片自動(dòng)和可控的輪播切換特效
這篇文章主要介紹了javascript實(shí)現(xiàn)圖片自動(dòng)和可控的輪播切換特效,效果非常的棒,推薦給大家,有需要的小伙伴可以參考下。2015-04-04layui select 禁止點(diǎn)擊的實(shí)現(xiàn)方法
今天小編就為大家分享一篇layui select 禁止點(diǎn)擊的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09JS將時(shí)間的標(biāo)準(zhǔn)格式和時(shí)間戳格式和2022-01-27?00:00:00(年月日時(shí)分秒)格式相互轉(zhuǎn)換(最新推薦)
這篇文章主要介紹了JS如何將時(shí)間的標(biāo)準(zhǔn)格式和時(shí)間戳格式和2022-01-27?00:00:00(年月日時(shí)分秒)格式相互轉(zhuǎn)換,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05JS解析json數(shù)據(jù)并將json字符串轉(zhuǎn)化為數(shù)組的實(shí)現(xiàn)方法
json數(shù)據(jù)在ajax實(shí)現(xiàn)異步交互時(shí)起到了很重要的作用,他可以返回請(qǐng)求的數(shù)據(jù),然后利用客戶端的js進(jìn)行解析,這一點(diǎn)體現(xiàn)出js的強(qiáng)大,本文介紹JS解析json數(shù)據(jù)并將json字符串轉(zhuǎn)化為數(shù)組的實(shí)現(xiàn)方法,需要了解的朋友可以參考下2012-12-12