Heim  >  Artikel  >  Web-Frontend  >  So legen Sie fest, dass das mobile Element im Bootstrap ausgeblendet wird

So legen Sie fest, dass das mobile Element im Bootstrap ausgeblendet wird

藏色散人
藏色散人Original
2020-11-25 10:40:014303Durchsuche

So verbergen Sie Elemente auf der mobilen Seite mit Bootstrap: Öffnen Sie zuerst die entsprechende Codedatei und verwenden Sie dann „visible-xs-block“, um die Anzeige festzulegen und auf ultrakleinen Geräten auszublenden.

So legen Sie fest, dass das mobile Element im Bootstrap ausgeblendet wird

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Bootstrap-Version 3. Diese Methode ist für alle Computermarken geeignet.

Empfohlen: „Bootstrap-Tutorial

BootstrapSteuern Sie das Ausblenden und Anzeigen von Elementen auf Mobil- und Webseiten

Sehen Sie sich zuerst den Effekt an

  • PC, zeigen Sie 3 Bilder an

So legen Sie fest, dass das mobile Element im Bootstrap ausgeblendet wird

  • Auf der mobilen Seite wird nur ein Bild angezeigt

So legen Sie fest, dass das mobile Element im Bootstrap ausgeblendet wird

Die Lösung besteht darin, das Rastersystem von Bootstrap zu verwenden.

  • visible-md-block bedeutet, dass es auf frühen und mittelgroßen Desktop-Computern (≥992 Pixel) angezeigt werden kann.

  • visible-lg-block bedeutet, dass es auf großen Desktop-Computern (≥ 1200px)

  • visible-xs -Block sagte, dass

Code:

 <p class="container">
    <p class="row">
        <p class="col-md-3 visible-md-block visible-lg-block">
            <a >
                <img  src="images/tm-sigma-00.jpg" class="img-responsive"   style="max-width:90%" alt="So legen Sie fest, dass das mobile Element im Bootstrap ausgeblendet wird" >    
            </a>
        </p>
        <p class="col-md-6 visible-xs-block visible-md-block visible-lg-block">
            <a >
                <img  src="images/tm-sigma-00.jpg" class="img-responsive" data-preview-src="" data-preview-group="1"   style="max-width:90%" alt="So legen Sie fest, dass das mobile Element im Bootstrap ausgeblendet wird" > 
            </a>
        </p>
        <p class="col-md-3 visible-md-block visible-lg-block">
            <a >
                <img  src="images/tm-sigma-00.jpg" class="img-responsive"   style="max-width:90%" alt="So legen Sie fest, dass das mobile Element im Bootstrap ausgeblendet wird" >    
            </a>
        </p>
    </p>
    </p>

🎜 Weitere Programmierkenntnisse können bitte auf dem superkleinen Mobiltelefon (& lt; 768px) angezeigt werden Besuchen Sie: 🎜 Programmieren Lernen 🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonSo legen Sie fest, dass das mobile Element im Bootstrap ausgeblendet wird. 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