Als je door bootstrap kijkt, lijkt het alsof ze het samenvouwen van de menubalkitems voor kleinere schermen ondersteunen. Is er iets soortgelijks voor andere items op de pagina?
Ik heb bijvoorbeeld een samen met nav-pillen naar rechts gestuurd. Op een klein scherm geeft dit problemen. Ik zou het op zijn minst in een vergelijkbare vervolgkeuzelijst click-to-show-more willen plaatsen.
Is dit mogelijk binnen het bestaande Bootstrap-framework?
Antwoord 1, autoriteit 100%
Nieuwe zichtbare klassen toegevoegd aan Bootstrap
Extra kleine apparaten
Telefoons (<768px) (Class names : .visible-xs-block, hidden-xs)
Kleine apparaten
Tablets (≥768px) (Class names : .visible-sm-block, hidden-sm)
Medium apparaten
Desktops (≥992px) (Class names : .visible-md-block, hidden-md)
Grote apparaten
Desktops (≥1200px) (Class names : .visible-lg-block, hidden-lg)
Voor meer informatie: http://getbootstrap.com/css/#responsive-utilities
Hieronder is verouderd vanaf v3.2.0
Extra kleine apparaten
Telefoons (<768px) (Class names : .visible-xs, hidden-xs)
Kleine apparaten
Tablets (≥768px) (Class names : .visible-sm, hidden-sm)
Middelgrote apparaten
Desktops (≥992px) (Class names : .visible-md, hidden-md)
Grote apparaten
Desktops (≥1200px) (Class names : .visible-lg, hidden-lg)
Veel oudere Bootstrap
.hidden-phone, .hidden-tablet
enz. worden niet ondersteund/verouderd.
UPDATE:
In Bootstrap 4 zijn er 2 soorten klassen:
- De
hidden-*-up
die het element verbergen wanneer de viewport zich op het opgegeven breekpunt of breder bevindt. hidden-*-down
die het element verbergen wanneer de viewport zich op het opgegeven breekpunt of kleiner bevindt.
Ook is de nieuwe xl
viewport toegevoegd voor apparaten die meer dan 1200px breed zijn. Klik hier voor meer informatie.
Antwoord 2, autoriteit 25%
Bootstrap 4 Beta Antwoord:
d-block d-md-none
om te verbergen op middelgrote, grote en extra groteapparaten.
d-none d-md-block
om te verbergen op kleine en extra kleineapparaten.
Houd er rekening mee dat u ook inline kunt door d-*-block
te vervangen door d-*-inline-block
Oud antwoord: Bootstrap 4 Alpha
-
Je kunt de klassen
.hidden-*-up
gebruiken om je te verbergen op een bepaald formaat en grotere apparaten.hidden-md-up
om te verbergen op middelgrote, grote en extra groteapparaten. -
Hetzelfde geldt voor
.hidden-*-down
om te verbergen op een bepaald formaat en kleinere apparaten.hidden-md-down
om te verbergen op middelgrote, kleine en extra kleineapparaten -
zichtbaar-* is niet langer een optie met bootstrap 4
-
Als u alleen op middelgrote apparatenwilt weergeven, kunt u de twee combineren:
hidden-sm-down
enhidden-xl-up
De geldige maten zijn:
xs
voor telefoons in staande modus (<34em)sm
voor telefoons in liggende modus (≥34em)md
voor tablets (≥48em)lg
voor desktops (≥62em)xl
voor desktops (≥75em)
Dit was vanaf Bootstrap 4, alpha 5 (januari 2017).
Meer details hier: http://v4-alpha.getbootstrap.com/layout/responsive- hulpprogramma’s/
Op Bootstrap 4.3.x: https://getbootstrap.com/docs/4.3/utilities /display/
Antwoord 3, autoriteit 7%
Bootstrap 4.x antwoord
hidden-*
klassen worden verwijderd vanaf Bootstrap 4 bèta en later.
Als je wilt laten zien op medium en hoger, gebruik dan de d-*
klassen, bijvoorbeeld:
<div class="d-none d-md-block">This will show in medium and up</div>
Als je alleen in het klein en hieronder wilt laten zien, gebruik dan dit:
<div class="d-block d-md-none"> This will show only in below medium form factors</div>
Schermgrootte en klassentabel
| Screen Size | Class |
|-------------------- | --------------------------------|
| Hidden on all | .d-none |
| Hidden only on xs | .d-none .d-sm-block |
| Hidden only on sm | .d-sm-none .d-md-block |
| Hidden only on md | .d-md-none .d-lg-block |
| Hidden only on lg | .d-lg-none .d-xl-block |
| Hidden only on xl | .d-xl-none |
| Visible on all | .d-block |
| Visible only on xs | .d-block .d-sm-none |
| Visible only on sm | .d-none .d-sm-block .d-md-none |
| Visible only on md | .d-none .d-md-block .d-lg-none |
| Visible only on lg | .d-none .d-lg-block .d-xl-none |
| Visible only on xl | .d-none .d-xl-block |
In plaats van expliciete
.visible-*
klassen te gebruiken, maak je een element
zichtbaar door het simpelweg niet te verbergen op die schermgrootte. Je kunt combineren
één klasse.d-*-none
met één klasse.d-*-block
om alleen een element te tonen
op een bepaald interval van schermformaten (bijv..d-none.d-md-block.d-xl-none
toont het element alleen op middelgrote en grote apparaten).
Antwoord 4, autoriteit 4%
Je kunt deze moduleklasse-achtervoegsels voor elke module invoeren om beter te bepalen waar deze wordt weergegeven of verborgen.
.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop
http://twitter.github.com/bootstrap/scaffolding.htmlscrollen naar beneden
Antwoord 5, autoriteit 3%
Ik heb een paar verduidelijkingen om hier toe te voegen:
1) De getoonde lijst (visible-phone, visible-tablet, etc.) is verouderd in Bootstrap 3. De nieuwe waarden zijn:
- zichtbaar-xs-*
- zichtbare-sm-*
- visible-md-*
- visible-lg-*
- hidden-xs-*
- hidden-sm-*
- hidden-md-*
- hidden-lg-*
Het sterretje vertaalt zich naar het volgende voor elk (ik toon hieronder alleen zichtbaar-xs-*):
- visible-xs-block
- visible-xs-inline
- visible-xs-inline-block
2) Als je deze klassen gebruikt, voeg je geen punt ervoor toe (zoals verwarrend wordt weergegeven in een deel van het antwoord hierboven).
Bijvoorbeeld:
<div class="visible-md-block col-md-6 text-right text-muted">
<h5>Copyright © 2014 Jazimov</h5>
</div>
3) U kunt zichtbaar-* en verborgen-* gebruiken (bijvoorbeeld zichtbaar-xs en verborgen-xs), maar deze zijn verouderd in Bootstrap 3.2.0.
Voor meer details en de nieuwste specificaties, ga hier en zoek naar “zichtbaar”:
http://getbootstrap.com/css/
Antwoord 6
Voor de bètaversie van Bootstrap 4.0 (en ik neem aan dat dit voor de laatste keer zal blijven) is er een wijziging – houd er rekening mee dat de verborgen klassen zijn verwijderd.
Bekijk de documenten: https://getbootstrap.com/docs/4.0/utilities/ weergeven/
Om de inhoud op mobiele apparaten te verbergen en op grotere apparaten weer te geven, moet u de volgende klassen gebruiken:
d-none d-sm-block
De eerste klasse-set geeft geen weer op alle apparaten en de tweede geeft het weer voor apparaten “sm” up (u zou md, lg, enz. kunnen gebruiken in plaats van sm als u op verschillende apparaten wilt weergeven.
Ik raad aan hierover te lezen vóór de migratie:
https://getbootstrap.com/docs/4.0/migratie/#Responsief -utilities
Antwoord 7
Alle hidden-*-up
, hidden-*
KLASSEN WERKT NIET VOOR MIJ, dus ik voeg zelf gemaakte hidden
Klasse vóór visible-*
(die werkt voor de huidige bootstrap-versie). Het is erg handig als u DAND alleen voor één scherm moet tonen en verbergen voor alle anderen.
CSS:
.hidden {display:none;}
HTML:
<div class="col-xs-12 hidden visible-xs visible-sm">
<img src="photo.png" style="width:100%">
</div>
Antwoord 8
In BoosTRAP 4.1 (run fragment omdat ik de hele tabelcode van bootstrap-documentatie heeft gekopieerd):
.fixed_headers {
width: 750px;
table-layout: fixed;
border-collapse: collapse;
}
.fixed_headers th {
text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
padding: 5px;
text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
width: 350px;
}
.fixed_headers thead {
background-color: #333;
color: #FDFDFD;
}
.fixed_headers thead tr {
display: block;
position: relative;
}
.fixed_headers tbody {
display: block;
overflow: auto;
width: 100%;
height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
background-color: #DDD;
}
.old_ie_wrapper {
height: 300px;
width: 750px;
overflow-x: hidden;
overflow-y: auto;
}
.old_ie_wrapper tbody {
height: auto;
}
<table class="fixed_headers">
<thead>
<tr>
<th>Screen Size</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hidden on all</td>
<td><code class="highlighter-rouge">.d-none</code></td>
</tr>
<tr>
<td>Hidden only on xs</td>
<td><code class="highlighter-rouge">.d-none .d-sm-block</code></td>
</tr>
<tr>
<td>Hidden only on sm</td>
<td><code class="highlighter-rouge">.d-sm-none .d-md-block</code></td>
</tr>
<tr>
<td>Hidden only on md</td>
<td><code class="highlighter-rouge">.d-md-none .d-lg-block</code></td>
</tr>
<tr>
<td>Hidden only on lg</td>
<td><code class="highlighter-rouge">.d-lg-none .d-xl-block</code></td>
</tr>
<tr>
<td>Hidden only on xl</td>
<td><code class="highlighter-rouge">.d-xl-none</code></td>
</tr>
<tr>
<td>Visible on all</td>
<td><code class="highlighter-rouge">.d-block</code></td>
</tr>
<tr>
<td>Visible only on xs</td>
<td><code class="highlighter-rouge">.d-block .d-sm-none</code></td>
</tr>
<tr>
<td>Visible only on sm</td>
<td><code class="highlighter-rouge">.d-none .d-sm-block .d-md-none</code></td>
</tr>
<tr>
<td>Visible only on md</td>
<td><code class="highlighter-rouge">.d-none .d-md-block .d-lg-none</code></td>
</tr>
<tr>
<td>Visible only on lg</td>
<td><code class="highlighter-rouge">.d-none .d-lg-block .d-xl-none</code></td>
</tr>
<tr>
<td>Visible only on xl</td>
<td><code class="highlighter-rouge">.d-none .d-xl-block</code></td>
</tr>
</tbody>
</table>
Antwoord 9
Aanvullende CSS
Zijbalk verwijderen van alle pagina’s in mobiele weergave:
@media only screen and (max-width:767px)
{
#secondary {
display: none;
}
}