Ascunderea elementelor în layout-ul responsive? (Programare, Html, Css, Twitter Bootstrap, Responsive Design)

Kaitlyn2004 a intrebat.

Privind prin bootstrap se pare că acceptă colapsarea elementelor menubar pentru ecrane mai mici. Există ceva similar pentru alte elemente de pe pagină?

De exemplu, am un de-a lungul cu nav-pill-uri plutit la dreapta. Pe un ecran mic acest lucru cauzează probleme. Mi-ar plăcea ca măcar să o pun într-un dropdown similar click-to-show-more.

Este posibil acest lucru în cadrul Bootstrap existent?

9 răspunsuri
Marc Uberstein

Noi clase vizibile adăugate la Bootstrap

Dispozitive foarte miciTelefoane (<768px) (Class names : .visible-xs-block, hidden-xs)

Dispozitive miciTablete (≥768px) (Class names : .visible-sm-block, hidden-sm)

Dispozitive mediiCalculatoare de birou (≥992px) (Class names : .visible-md-block, hidden-md)

Dispozitive mariCalculatoare de birou (≥1200px) (Class names : .visible-lg-block, hidden-lg)

Pentru mai multe informații : http://getbootstrap.com/css/#responsive-utilities


Mai jos este depreciat începând cu v3.2.0


Dispozitive foarte miciFones (<768px) (Class names : .visible-xs, hidden-xs)

Dispozitive miciTablete (≥768px) (Class names : .visible-sm, hidden-sm)

Dispozitive mediiDesktop-uri (≥992px) (Class names : .visible-md, hidden-md)

Dispozitive mariDesktops (≥1200px) (Class names : .visible-lg, hidden-lg)


Bootstrap mult mai vechi


.hidden-phone, .hidden-tablet etc. nu sunt acceptate/nu sunt depășite.

UPDATE:

În Bootstrap 4 există 2 tipuri de clase:

  • The hidden-*-up care ascund elementul atunci când viewportul se află la punctul de întrerupere dat sau mai larg.
  • hidden-*-down care ascund elementul atunci când viewportul se află la punctul de întrerupere dat sau mai mic.

De asemenea, noua clasă xl viewport este adăugat pentru dispozitivele care au o lățime mai mare de 1200px. Pentru mai multe informații, faceți clic aici.

Comentarii

  • Nu cred că .hidden-phone și .hidden-tablet sunt depreciate**- ele sunt **neacceptate. Deprecated tinde să însemne „a fost înlocuită de alte abordări, deși este încă susținută, se intenționează să fie eliminată în curând”. Acesta pare a fi cazul cu Bootstrap 3.2.0- .visible-xs și altele similare încă funcționează deocamdată, în timp ce .hidden-phone și prietenii sunt complet absenți din funcționalitatea Bootstrap. –  > Por Slipp D. Thompson.
  • Mulțumesc – am actualizat răspunsul la formularea corectă. Ar trebui să fie un pic mai clar pentru alți utilizatori acum. –  > Por Marc Uberstein.
  • FYI Am făcut mai multe cercetări – se pare că „învechit” este utilizat în mod obișnuit în contexte formale ca stare de lipsă de suport după depreciere. Cred că „nesuportat” funcționează la fel de bine, dar nu contează. Mulțumesc că ați luat în considerare sugestia mea anterioară. –  > Por Slipp D. Thompson.
  • 🙂 Le-am adăugat pe amândouă … de dragul termenilor de profanare. Mulțumesc pentru că ați făcut mai multe cercetări cu privire la formularea corectă, cu siguranță voi ține cont de ea pentru postările viitoare. sănătate – –  > Por Marc Uberstein.
  • Rețineți că actualizarea Bootstrap 4 este pentru Bootstrap 4 alpha. În versiunea de lansare ar trebui să folosiți .d--none și d--block. getbootstrap.com/docs/4.0/migration/#responsive-utilities –  > Por Pieter De Bie.
Julien

Bootstrap 4 Beta Răspuns:

d-block d-md-none la ascundeți pe medium, large și extra large dispozitive.

d-none d-md-block la ascunde pe dispozitive mici și foarte mici dispozitive.

Rețineți că puteți, de asemenea, să faceți inline înlocuind d-*-block cu d-*-inline-block


Vechiul răspuns: Bootstrap 4 Alpha

  • Puteți utiliza clasele .hidden-*-up pentru a ascunde pe o anumită dimensiune și dispozitive mai mari

    .hidden-md-upascundeți pe medii, mari și foarte mari dispozitive.

  • Același lucru este valabil și pentru .hidden-*-down pentru a se ascunde pe o anumită dimensiune și pe dispozitive mai mici

    .hidden-md-down la ascunde pe dispozitive medii, mici și foarte mici dispozitive

  • visible-* nu mai este o opțiune cu bootstrap 4

  • Pentru a afișa numai pe dispozitivele medii, le puteți combina pe cele două:

    hidden-sm-down și hidden-xl-up

Dimensiunile valabile sunt:

  • xs pentru telefoane în modul portret (<34em)
  • sm pentru telefoane în modul peisaj (≥34em)
  • md pentru tablete (≥48em)
  • lg pentru desktop-uri (≥62em)
  • xl pentru desktop-uri (≥75em)

Acest lucru a fost valabil începând cu Bootstrap 4, alpha 5 (ianuarie 2017).Mai multe detalii aici: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

Pe Bootstrap 4.3.x: https://getbootstrap.com/docs/4.3/utilities/display/

Comentarii

  • Acestea au fost eliminate din v4 beta. În prezent, utilizați acum .d- clasele pentru a ascunde sau afișa la diferite dimensiuni. getbootstrap.com/docs/4.0/utilities/display –  > Por DriverDan.
  • Am văzut, dar încă încerc să rezolv acest lucru…. Cum pot ascunde ceva pe un ecran mic doar acum? Am nevoie de opusul lui d-md-none, din moment ce trec la div-uri în funcție de ecranul mare vs mic. –  > Por Leo Muller.
  • @LeoMuller Dacă doriți ca un element să se ascundă pe dimensiunea sm și mai jos, dar să fie vizibil pe md, lg și xl, utilizați d-none d-md-block. code.luasoftware.com/tutorials/bootstrap/… –  > Por Desmond Lua.
  • @DesmondLua Cred la fel ca LeoMuller… în BS4 unele elemente se comportă ca blocuri și altele ca flex… ¿de ce trebuie să știu în prealabil despre natura BS4 a unui element doar dacă vreau să-l ascund în telefoane, dar vreau să-l afișez ca standard BS4 în tablete și laptopuri? Este contrar modului în care gândiți în mod normal… Sper ca echipa BS4 să rezolve această problemă înainte de lansarea finală –  > Por JavierFuentes.
  • Nu găsesc documentația despre d-block pe documentația actuală a Bootstrap 4, au eliminat acest lucru? –  > Por Mojimi.
kiranvj

Răspuns la Bootstrap 4.x

hidden-* clasele sunt eliminate de la Bootstrap 4 beta încoace.

Dacă doriți să afișați pe mediu și mai sus folosiți clasa d-* clase, de ex:

<div class="d-none d-md-block">This will show in medium and up</div>

Dacă doriți să afișați doar în format mic și mai jos, utilizați acest lucru:

<div class="d-block d-md-none"> This will show only in below medium form factors</div>

Tabel de mărime și clasă a ecranului

| 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            |

În loc să utilizați explicit .visible-* explicite, puteți face un element vizibil prin simplul fapt că nu îl ascundeți la dimensiunea respectivă a ecranului. Puteți combina un .d-*-none clasă cu o clasă .d-*-block clasă pentru a afișa un element doar pe un anumit interval de dimensiuni ale ecranului (de ex. .d-none.d-md-block.d-xl-none afișează elementul numai pe dispozitive de dimensiuni medii și mari).

Documentație

john taylor

Puteți introduce aceste sufixe de clasă de modul pentru orice modul pentru a controla mai bine unde va fi afișat sau ascuns.

.visible-phone  
.visible-tablet     
.visible-desktop    
.hidden-phone   
.hidden-tablet  
.hidden-desktop 

http://twitter.github.com/bootstrap/scaffolding.html defilați până jos

Comentarii

  • Mulțumesc – de fapt, chiar vreau ca ele să fie vizibile… doar că într-o formă condensată/colapsată, precum navbar-collapse, care este exclusiv pentru navbar și nu văd niciun alt suport pentru alte elemente… –  > Por Kaitlyn2004.
  • Ele sunt pliabile pe baza numelor de clasă și/sau a id-ului lor. Dacă localizați CSS/JS, atunci ați putea adăuga clase/id-uri suplimentare care să facă același lucru. –  > Por justinavery.
  • Ai vreo șansă să poți oferi un exemplu? Văd pluginul de colapsare, dar nu sunt sigur de implementare. cel puțin în cadrul barei de navigare pare să fie gestionat foarte automat – sau cel puțin încorporat în nucleul de bootstrap –  > Por Kaitlyn2004.
  • Depreciat de la Bootstrap 3. –  > Por Gereltod.
  • Vă rugăm să informați că este doar pentru #Bootstrap 2 –  > Por Lucas Bustamante.
Jazimov

Am câteva clarificări de adăugat aici:

1) Lista afișată (visible-phone, visible-tablet, etc.) este depreciată în Bootstrap 3. Noile valori sunt:

  • visible-xs-*
  • visible-sm-*
  • visible-md-*
  • visible-lg-*
  • hidden-xs-*
  • hidden-sm-*
  • hidden-md-*
  • hidden-lg-*

Asteriscul se traduce în următoarele pentru fiecare dintre ele (mai jos arăt doar visible-xs-*):

  • visible-xs-block
  • visible-xs-inline
  • visible-xs-inline-block

2) Atunci când folosiți aceste clase, nu adăugați un punct în față (așa cum se arată în mod confuz în o parte a răspunsului de mai sus).

De exemplu:

<div class="visible-md-block col-md-6 text-right text-muted">
   <h5>Copyright &copy; 2014 Jazimov</h5>
</div>

3) Puteți utiliza visible-* și hidden-* (de exemplu, visible-xs și hidden-xs), dar acestea au fost depreciate în Bootstrap 3.2.0.

Pentru mai multe detalii și cele mai recente specificații, accesați aici și căutați „visible”:http://getbootstrap.com/css/

Comentarii

  • Incorect hidden-xs-block nu este valabilă, dar visible-xs-block este –  > Por Hammad Khan.
  • @hmd: Poți furniza o sursă/citare pentru comentariul tău, pe care nici măcar nu-l înțeleg pe deplin pentru că nu este nici măcar o propoziție completă. Ce anume încercați să împărtășiți? Spuneți că doar hidden-xs-block nu este valabil sau spuneți că hidden-xs-* nu este valabil? Vrei să spui că hidden-md-block este valabil în timp ce hidden-xs-block nu este? Vă rog să detaliați, mai ales pentru că se pare că mi-ați votat comentariul când, de fapt, am copiat verbul direct din documentația online a bootstrap. La ce versiune de bootstrap vă referiți în comentariul dumneavoastră? –  > Por Jazimov.
  • ok, s-ar putea să existe unele modificări în bootstrap. Uită-te doar la răspunsul votat în top care oferă soluția corectă. Cu elementul ascuns, NU poți folosi block, inline și inline block. Cu vizibil, TREBUIE să le folosești. Cred că folosesc bootstrap 3.x. Încercați soluția dvs. pentru un element care se ascunde pe telefon 🙂 –  > Por Hammad Khan.
Przemek Nowak

Pentru Bootstrap 4.0 beta (și presupun că acest lucru va rămâne pentru versiunea finală) există o schimbare – fiți conștienți de faptul că clasele ascunse au fost eliminate.

Consultați documentele: https://getbootstrap.com/docs/4.0/utilities/display/

Pentru a ascunde conținutul pe mobil și a-l afișa pe dispozitivele mai mari, trebuie să folosiți următoarele clase:

d-none d-sm-block

Prima clasă setează afișarea none pe toate dispozitivele, iar cea de-a doua afișarea pentru dispozitivele de la „sm” în sus (ați putea folosi md, lg, etc. în loc de sm dacă doriți să afișați pe dispozitive diferite.

Vă sugerez să citiți despre asta înainte de migrare:

https://getbootstrap.com/docs/4.0/migration/#responsive-utilities

Comentarii

  • este trist, deși nu funcționează în mod normal cu togglerul de prăbușire –  > Por David Constantine.
Gediminas

Toate hidden-*-up, hidden-* clasele nu funcționează pentru mine, așa că am adăugat auto-făcută hidden clasă înainte de visible-*(care funcționează pentru versiunea curentă de bootstrap). Este foarte util dacă aveți nevoie să arătați div doar pentru un singur ecran și să ascundeți pentru toate celelalte.

CSS:

.hidden {display:none;}

HTML:

<div class="col-xs-12 hidden visible-xs visible-sm">
   <img src="photo.png" style="width:100%">
</div>

Comentarii

  • clasele hidden-* au fost abandonate în bootstrap 4 beta, acum se utilizează d-{sm,md,lg,xl}-none –  > Por Chris M.
  • mulțumesc! Pentru orice eventualitate, răspunsul meu este încă valabil pentru non-betas –  > Por Gediminas.
Tai Ly

În boostrap 4.1 (executați un fragment deoarece am copiat întregul cod de tabel din documentația Bootstrap):

https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements

Swallow Sang

Additional CSSRemove Sidebar din toate paginile în vizualizarea mobilă:

@media only screen and (max-width:767px)
{
#secondary {
display: none;
}
}

Comentarii

  • trebuie să fiți adăugați unele funcționalități JS pentru a afișa elemente atunci când se face clic –  > Por lgabster.