Heim > Artikel > Web-Frontend > So implementieren Sie das Anzeigen und Ausblenden im Bootstrap
So implementieren Sie das Anzeigen und Ausblenden im Bootstrap
- 藏色散人Original
- 2020-11-09 10:52:054808Durchsuche
So implementiert Bootstrap das Anzeigen und Ausblenden: Erstellen Sie zunächst eine HTML-Beispieldatei und zeigen Sie sie dann über „6c7919b34a8ee505d01b1d266d93eb9fshow94b3e26ee717c64999d7867364b1b4a3“ an. Mit >hide94b3e26ee717c64999d7867364b1b4a3" kann es ausgeblendet werden.
Empfohlen: „Bootstrap-Tutorial“
Bootstrap zeigt versteckten spezifischen Code:
<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>
xs-Bereich:
Außerhalb des xs-Bereichs:
Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Anzeigen und Ausblenden im Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So lösen Sie das verstümmelte Problem der Bootstrap-TabelleNächster Artikel：So lösen Sie das verstümmelte Problem der Bootstrap-Tabelle