Markdown と Bootstrap を組み合わせて画像適応属性を実装する_JavaScript スキル

まず、Markdown の基本概念と利点について説明します

Markdown は、通常のテキスト エディターを使用して作成できるマークアップ言語で、単純なマークアップ構文を使用して、通常のテキスト コンテンツを特定の形式にすることができます。

Markdown は軽量のマークアップ言語であり、多くの利点があり、現在、ますます多くの執筆愛好家やライターによって広く使用されています。これを見たときにマークアップと言語を混同しないでください。Markdown の構文は非常に単純です。一般的に使用されるマークアップ記号は 10 個以下です。より複雑な HTML マークアップ言語と比較して、Markdown は非常に軽量であり、この文法規則に慣れてしまえば、すぐに結果が得られます。

Markdown を使用する利点

レイアウト スタイルではなくテキストの内容に集中して、安心して書いてください。

HTML、PDF、ネイティブ .md ファイルを簡単にエクスポートします。

すべてのテキスト エディターおよびワードプロセッサ ソフトウェアと互換性のある純粋なテキスト コンテンツ。

ワープロ ソフトウェアが複数のファイル バージョンを生成するような混乱を引き起こすことなく、いつでも記事のバージョンを変更できます。

読みやすく直感的で、学習コストが低い。

Markdown は優れたマークアップ言語であり、エディタ構文としてますます人気が高まっています。Bootstrap はフロントエンド フレームワーク であるため、Markdown のイメージ タグは次のようなものになります。 ]( url) ですが、通常はページ上で html に変換されますが、このとき、Bootstrap の画像アダプティブ属性 .img-sensitive を画像に追加するにはどうすればよいですか?

例:

<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-sensitive 属性は、実際には画像にブロックと max-width:100% を追加する属性です。

上記は、Markdown と Bootstrap を組み合わせて画像の適応属性を実現するためにエディターが紹介する関連知識です。お役に立てば幸いです。