Bootstrap v4'te eksik - ** ve gizli - ** eksik

Bootstrap v3'te, farklı ekran genişliklerinde birden çok sütun düzenini kontrol etmek için genellikle clearfix ile birleştirilmiş hidden - ** sınıflarını kullanırım. Örneğin,

Çoklu sütunlarımın farklı ekran genişliklerinde doğru görünmesini sağlamak için birden fazla gizli - ** bir DIV'de birleştirebilirim.

Örnek olarak, ürün fotoğrafı satırlarını görüntülemek istersem, daha büyük ekran boyutlarında satır başına 4, daha küçük ekranlarda 3, daha sonra çok küçük ekranlarda 2. Ürün fotoğrafları farklı yüksekliklerde olabilir, bu nedenle satırın düzgün bir şekilde kesildiğinden emin olmak için düzeltmeye ihtiyacım var.

İşte v3'te bir örnek ...

http://jsbin.com/tosebayode/edit?html,css,output

Şimdi v4 bu sınıfları ortadan kaldırdı ve onları görünür / gizli - ** - yukarı / aşağı sınıflarıyla değiştirdi.

İşte v4'teki benzer bir örnek ...

http://jsbin.com/sagowihowa/edit?html,css,output

Bu yüzden tek DIV'lerden aynı şeyi elde etmek için birçok yukarı / aşağı sınıf içeren birden fazla DIV eklemeye gitmiştim.

Gönderen ...

<div class="clearfix visible-xs-block visible-sm-block"></div>

için ...

<div class="clearfix hidden-sm-up"></div>
<div class="clearfix hidden-md-up hidden-xs-down"></div>
<div class="clearfix hidden-md-down"></div>

Bunu göz ardı ettiğim v4'te yapmanın daha iyi bir yolu var mı?

Bootstrap 4 Güncellemesi (2018)

hidden-*Ve visible-*sınıflar artık var sen Bootstrap 4'te belirli katmanda veya kesme noktaları üzerinde bir öğe gizlemek kullanmak istiyorsanız Bootstrap 4'te d-* görüntüleme sınıfları buna göre.

Unutmayın bu ekstra-küçük (eski / mobil xs) bir tarafından geçersiz sürece, varsayılan (zımni) kesme noktası olan büyük kırılma noktasında. Bu nedenle, infix artık Bootstrap 4 bulunmaktadır .-xs

Kesme noktası ve aşağı için göster / gizle :

• hidden-xs-down (hidden-xs) = d-none d-sm-block
• hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block
• hidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-block
• hidden-lg-down = d-none d-xl-block
• hidden-xl-down(yok 3.x) = d-none(ile aynı hidden)

Kesme noktası ve üstü için göster / gizle :

• hidden-xs-up= d-none(ile aynı hidden)
• hidden-sm-up = d-sm-none
• hidden-md-up = d-md-none
• hidden-lg-up = d-lg-none
• hidden-xl-up (yok 3.x) = d-xl-none

Yalnızca tek bir kesme noktası için göster / gizle :

• hidden-xs(yalnızca) = d-none d-sm-block(ile aynı hidden-xs-down)
• hidden-sm (sadece) = d-block d-sm-none d-md-block
• hidden-md (sadece) = d-block d-md-none d-lg-block
• hidden-lg (sadece) = d-block d-lg-none d-xl-block
• hidden-xl (yok 3.x) = d-block d-xl-none
• visible-xs (sadece) = d-block d-sm-none
• visible-sm (sadece) = d-none d-sm-block d-md-none
• visible-md (sadece) = d-none d-md-block d-lg-none
• visible-lg (sadece) = d-none d-lg-block d-xl-none
• visible-xl (yok 3.x) = d-none d-xl-block

Bootstrap 4'teki duyarlı ekran sınıflarının demosu

Ayrıca not d-*-blockile değiştirilebilir d-*-inline, d-*-flex, d-*-table-cell, d-*-tableelemanın ekran tipine bağlı vb ... Görüntüleme sınıflarıyla ilgili daha fazla bilgi edinin

Ne yazık ki tüm sınıflar hidden-*-upve hidden-*-downBootstrap'tan kaldırılmıştır (Bootstrap Sürüm 4 Beta sürümünden itibaren , Sürüm 4 Alpha ve Sürüm 3'te bu sınıflar hala mevcuttu).

Bunun yerine, d-*burada belirtildiği gibi yeni sınıflar kullanılmalıdır: https://getbootstrap.com/docs/4.0/migration/#utilities

Bazı durumlarda yeni yaklaşımın daha az kullanışlı olduğunu öğrendim. Eski yaklaşım oldu GİZLE yeni bir yaklaşım için ise elementlerin GÖSTER elemanları. Öğelerin blok, satır içi, satır içi blok, tablo vb. Olarak görüntülenip görüntülenmediğini bilmeniz gerektiğinden, öğeleri göstermek CSS ile o kadar kolay değildir.

Bootstrap 3'ten bilinen eski "hidden- *" stillerini bu CSS ile geri yüklemek isteyebilirsiniz:

/*\
 * Restore Bootstrap 3 "hidden" utility classes.
\*/

/* Breakpoint XS */
@media (max-width: 575px)
{
    .hidden-xs-down, .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, 
    .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    }

}

/* Breakpoint SM */
@media (min-width: 576px) and (max-width: 767px)
{
    .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, 
    .hidden-unless-xs, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint MD */
@media (min-width: 768px) and (max-width: 991px)
{
    .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint LG */
@media (min-width: 992px) and (max-width: 1199px)
{
    .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint XL */
@media (min-width: 1200px)
{
    .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, .hidden-xl-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg
    {
        display: none !important;
    } 
}

Sınıflar hidden-unless-*Bootstrap 3'e dahil edilmemiştir, ancak bunlar da faydalıdır ve açıklayıcı olmalıdır.

Bootstrap v4.1, ızgara sistemlerindeki sütunları gizlemek için yeni sınıf adları kullanır.

Ekran genişliğine bağlı olarak sütunları gizlemek için d-nonesınıfı veya d-{sm,md,lg,xl}-nonesınıflardan herhangi birini kullanın . Belirli ekran boyutlarında sütunları göstermek için, yukarıda belirtilen sınıfları d-blockveya d-{sm,md,lg,xl}-blocksınıflarıyla birleştirin.

Örnekler:

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Bunlardan daha fazlası burada .

Birden fazla div'ın iyi bir çözüm olmasını beklemiyorum.

Ben de yerini alabilir mi .visible-sm-blocksahip .hidden-xs-downve .hidden-md-up(veya .hidden-sm-downve .hidden-lg-upaynı ortam sorguları hareket etme).

hidden-sm-up içine derler:

.visible-sm-block {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}

.hidden-sm-downve .hidden-lg-upderler:

@media (max-width: 768px) {
  .hidden-xs-down {
    display: none !important;
  }
}
@media (min-width: 991px) {
  .hidden-lg-up {
    display: none !important;
  }
}

Her iki durum da aynı şekilde hareket etmelidir.

Değiştirmeye çalıştığınızda durum farklılaşır .visible-sm-blockve .visible-lg-block. Bootstrap v4 belgeleri size şunları söyler:

Bu sınıflar, bir öğenin görünürlüğünün tek bir bitişik görünüm alanı kesme noktası boyutu olarak ifade edilemediği daha az yaygın durumları barındırmaya çalışmaz; bunun yerine bu gibi durumlarda özel CSS kullanmanız gerekir.

.visible-sm-and-lg {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-and-lg {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .visible-sm-and-lg {
    display: block !important;
  }
}

Klaro kullanıcısı eski görünürlük sınıflarını geri yüklemeyi önerdi, bu iyi bir fikir. Maalesef, çözümleri projemde işe yaramadı.

Kullanıcı tarafından bireysel olarak tanımlanabilen tüm kesme noktalarını kapsayan, çünkü bootstrap'in eski karışımını geri yüklemenin daha iyi bir fikir olduğunu düşünüyorum.

İşte kod:

// Restore Bootstrap 3 "hidden" utility classes.
@each $bp in map-keys($grid-breakpoints) {
  .hidden-#{$bp}-up {
    @include media-breakpoint-up($bp) {
      display: none !important;
    }
  }
  .hidden-#{$bp}-down {
    @include media-breakpoint-down($bp) {
      display: none !important;
    }
  }
  .hidden-#{$bp}-only{
    @include media-breakpoint-only($bp){
      display:none !important;
    }
  }
}

Benim durumumda, bu kısmı _custom.scssşu noktada bulunan bir dosyaya ekledim bootstrap.scss:

/*!
 * Bootstrap v4.0.0-beta (https://getbootstrap.com)
 * Copyright 2011-2017 The Bootstrap Authors
 * Copyright 2011-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@import "functions";
@import "variables";
@import "mixins";
@import "custom"; // <-- my custom file for overwriting default vars and adding the snippet from above
@import "print";
@import "reboot";
[..]

http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

Şimdi gizli olan şeyin boyutunu tanımlamanız gerekiyor

.hidden-xs-down

Xs ve daha küçük şeyleri gizler, sadece xs

.hidden-xs-up

Her şeyi gizleyecek

Bootstrap 4 için, öğeleri göstermek / gizlemek için kullanılan sınıfları açıklayan bir matris görüntüsü ekran boyutuna bağlıdır:

Kaynak: Meduim: Bootstrap 4 Gizli ve Görünür

Tüm içeriği gizlemek için Bootstrap 4 bu sınıfı kullanır. '.D-none' önceki bootstrap sürüm sınıfı '.hidden' ile aynı kesme noktalarına bakılmaksızın her şeyi gizler

Ne yazık ki bu yeni bootstrap 4 sınıfları , gizli olmaktan ziyade görünür olan başlangıç collapsediv'ı ayarladıkları blockve collapseişlevsellik etrafına fazladan bir div eklediğinizde artık çalışmadığı için div kullanan eskileri gibi çalışmıyor.

i like the bootstrap3 style as the device width of bootstrap4
so i modify the css as below
<pre>
.visible-xs, .visible-sm, .visible-md, .visible-lg { display:none !important; }
.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block,
.visible-sm-block, .visible-sm-inline, .visible-sm-inline-block,
.visible-md-block, .visible-md-inline, .visible-md-inline-block,
.visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display:none !important; }
@media (max-width:575px) {
table.visible-xs                { display:table !important; }
tr.visible-xs                   { display:table-row !important; }
th.visible-xs, td.visible-xs    { display:table-cell !important; }

.visible-xs                 { display:block !important; }
.visible-xs-block { display:block !important; }
.visible-xs-inline { display:inline !important; }
.visible-xs-inline-block { display:inline-block !important; }
}

@media (min-width:576px) and (max-width:767px) {
table.visible-sm { display:table !important; }
tr.visible-sm { display:table-row !important; }
th.visible-sm,
td.visible-sm { display:table-cell !important; }

.visible-sm { display:block !important; }
.visible-sm-block { display:block !important; }
.visible-sm-inline { display:inline !important; }
.visible-sm-inline-block { display:inline-block !important; }
}

@media (min-width:768px) and (max-width:991px) {
table.visible-md { display:table !important; }
tr.visible-md { display:table-row !important; }
th.visible-md,
td.visible-md { display:table-cell !important; }

.visible-md { display:block !important; }
.visible-md-block { display:block !important; }
.visible-md-inline { display:inline !important; }
.visible-md-inline-block { display:inline-block !important; }
}

@media (min-width:992px) and (max-width:1199px) {
table.visible-lg { display:table !important; }
tr.visible-lg { display:table-row !important; }
th.visible-lg,
td.visible-lg { display:table-cell !important; }

.visible-lg { display:block !important; }
.visible-lg-block { display:block !important; }
.visible-lg-inline { display:inline !important; }
.visible-lg-inline-block { display:inline-block !important; }
}

@media (min-width:1200px) {
table.visible-xl { display:table !important; }
tr.visible-xl { display:table-row !important; }
th.visible-xl,
td.visible-xl { display:table-cell !important; }

.visible-xl { display:block !important; }
.visible-xl-block { display:block !important; }
.visible-xl-inline { display:inline !important; }
.visible-xl-inline-block { display:inline-block !important; }
}

@media (max-width:575px)                        { .hidden-xs{display:none !important;} }
@media (min-width:576px) and (max-width:767px)  { .hidden-sm{display:none !important;} }
@media (min-width:768px) and (max-width:991px)  { .hidden-md{display:none !important;} }
@media (min-width:992px) and (max-width:1199px) { .hidden-lg{display:none !important;} }
@media (min-width:1200px)                       { .hidden-xl{display:none !important;} }
</pre>