Rumah > Artikel > hujung hadapan web > Menggabungkan Markdown dan Bootstrap untuk melaksanakan kemahiran atribut_javascript adaptif imej
Biar saya beritahu anda konsep asas dan kelebihan Markdown
Markdown ialah bahasa markup yang boleh ditulis menggunakan editor teks biasa Melalui sintaks markup yang mudah, ia boleh menjadikan kandungan teks biasa mempunyai format tertentu.
Markdown ialah bahasa markup ringan yang mempunyai banyak kelebihan dan kini digunakan secara meluas oleh semakin ramai peminat dan penulis penulisan. Sila jangan keliru dengan markup dan bahasa apabila anda melihat ini Sintaks Markdown adalah sangat mudah. Terdapat tidak lebih daripada sepuluh simbol penanda yang biasa digunakan Berbanding dengan bahasa penanda HTML yang lebih kompleks, Markdown sangat ringan dan tidak memerlukan kos pembelajaran yang tinggi Sebaik sahaja anda sudah biasa dengan peraturan tatabahasa ini, anda akan mendapat keputusan Sekali dan untuk semua.
Kelebihan menggunakan Markdown
Fokus pada kandungan teks anda dan bukannya gaya reka letak dan tulis dengan tenang.
Eksport HTML, PDF dan fail .md asli dengan mudah.
Kandungan teks tulen, serasi dengan semua editor teks dan perisian pemprosesan perkataan.
Ubah suai versi artikel anda pada bila-bila masa tanpa menyebabkan kekeliruan seperti perisian pemprosesan perkataan yang menjana berbilang versi fail.
Boleh dibaca, intuitif dan kos pembelajaran yang rendah.
Markdown ialah bahasa penanda yang baik dan semakin popular sebagai sintaks editor Bootstrap ialah rangka kerja bahagian hadapan , jadi inilah masalahnya teg imej Markdown adalah seperti: ![alt ]( url), yang biasanya ditukar kepada html pada halaman Pada masa ini, bagaimana untuk menambah atribut penyesuaian imej Bootstrap .img-responsive pada imej?
Contohnya:
<img alt=”武汉光谷” src=”http://cdn.tanteng.me/uploads/2016/05/guang-gu.jpg” class=”img-responsive”>
Hanya gunakan js:
<scripttype="text/javascript"> $(".content img").addClass('img-responsive'); </script>
Jangan lupa tambah:
dalam teg kepala html<metaname="viewport" content="width=device-width, initial-scale=1">
Dengan cara ini, imej boleh diskalakan secara automatik pada skrin kecil telefon bimbit tanpa menjejaskan reka letak penyesuaian Bootstrap. Atribut .img-responsive sebenarnya ialah atribut yang menambah blok dan lebar maksimum: 100% pada imej.
Di atas ialah pengetahuan berkaitan yang diperkenalkan oleh editor kepada anda dengan menggabungkan Markdown dan Bootstrap untuk mencapai sifat penyesuaian imej saya harap ia akan membantu anda!