Maison > Article > interface Web > Comment implémenter l'affichage et le masquage dans bootstrap

Comment implémenter l'affichage et le masquage dans bootstrap

藏色散人original: 2020-11-09 10:52:054807parcourir

Comment bootstrap implémente l'affichage et le masquage : créez d'abord un exemple de fichier HTML, puis affichez-le via "6c7919b34a8ee505d01b1d266d93eb9fshow94b3e26ee717c64999d7867364b1b4a3" ; "hidden">hide94b3e26ee717c64999d7867364b1b4a3" peut être utilisé pour le masquer.

Recommandé : "tutoriel bootstrap"

bootstrap affiche le code spécifique caché :

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="external nofollow" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
<!-- 显示 -->
<p class="show bg-warning">show</p>
<!-- 隐藏 -->
<p class="hidden">hide</p>
<!-- 隐藏文字 -->
<p class="text-hide bg-warning">hide</p>
<!-- xs范围内显示 -->
<p class="visible-xs-block">visible</p>
<!-- xs范围外显示 -->
<p class="hidden-xs">hide</p>
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/npm.js"></script>
</body>
</html>

plage xs :

Hors gamme xs :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment résoudre le problème tronqué de la table bootstrapArticle suivant：Comment résoudre le problème tronqué de la table bootstrap

Articles Liés

Voir plus