Combiner Markdown et Bootstrap pour implémenter des compétences d'attributs_javascript adaptatives d'image

Laissez-moi d'abord vous expliquer les concepts de base et les avantages de Markdown

Markdown est un langage de balisage qui peut être écrit à l'aide d'un éditeur de texte ordinaire. Grâce à une syntaxe de balisage simple, il peut donner au contenu texte ordinaire un certain format.

Markdown est un langage de balisage léger qui présente de nombreux avantages et est désormais largement utilisé par de plus en plus de passionnés d'écriture et d'écrivains. Ne soyez pas dérouté par le balisage et le langage lorsque vous voyez cela. La syntaxe de Markdown est très simple. Il n'y a pas plus de dix symboles de balisage couramment utilisés. Comparé au langage de balisage HTML plus complexe, Markdown est très léger et ne nécessite pas beaucoup de frais d'apprentissage. Une fois que vous serez familiarisé avec cette règle grammaticale, vous obtiendrez des résultats une fois pour toutes.

Avantages de l'utilisation de Markdown

Concentrez-vous sur le contenu de votre texte plutôt que sur le style de mise en page et écrivez en toute sérénité.

Exportez facilement des fichiers HTML, PDF et .md natifs.

Contenu textuel pur, compatible avec tous les éditeurs de texte et logiciels de traitement de texte.

Modifiez la version de votre article à tout moment sans créer de confusion comme un logiciel de traitement de texte générant plusieurs versions de fichiers.

Lisible, intuitif et faible coût d'apprentissage.

Markdown est un bon langage de balisage et devient de plus en plus populaire en tant que syntaxe d'éditeur. Bootstrap est un framework front-end , voici donc le problème des balises d'image de Markdown : , qui est généralement converti en HTML sur la page. À ce stade, comment ajouter l'attribut adaptatif d'image de Bootstrap .img-responsive à l'image ?

Par exemple :

<img alt=”武汉光谷” src=”http://cdn.tanteng.me/uploads/2016/05/guang-gu.jpg” class=”img-responsive”>

Utilisez simplement js :

<scripttype="text/javascript">
$(".content img").addClass('img-responsive');
</script>

N'oubliez pas d'ajouter :

dans la balise head du html

<metaname="viewport" content="width=device-width, initial-scale=1">

De cette façon, l'image peut être automatiquement mise à l'échelle sur le petit écran du téléphone mobile sans affecter la disposition adaptative de Bootstrap. L'attribut .img-responsive est en fait un attribut qui ajoute un bloc et une largeur maximale : 100 % à l'image.

Ce qui précède est les connaissances pertinentes que l'éditeur vous présente en combinant Markdown et Bootstrap pour obtenir des attributs adaptatifs des images. J'espère que cela vous sera utile !