Duyarlı düzende öğeler gizleniyor mu?

Bootstrap'e bakıldığında, daha küçük ekranlar için menü çubuğu öğelerinin daraltılmasını destekledikleri anlaşılıyor. Sayfadaki diğer öğeler için benzer bir şey var mı?

Örneğin, nav-hapları ile birlikte doğru yüzen bir var. Küçük bir ekranda bu sorunlara neden olur. En azından benzer bir show-show-more-show açılır menüsüne koymak isterim.

Bu mevcut Bootstrap çerçevesinde mümkün müdür?

Bootstrap'e yeni görünür sınıflar eklendi

Ekstra küçük cihazlar Telefonlar (<768 piksel)(Class names : .visible-xs-block, hidden-xs)

Küçük Cihazlar Tabletler (68768px)(Class names : .visible-sm-block, hidden-sm)

Orta boy cihazlar Masaüstü bilgisayarlar (≥992px)(Class names : .visible-md-block, hidden-md)

Büyük cihazlar Masaüstü bilgisayarlar (≥1200px)(Class names : .visible-lg-block, hidden-lg)

Daha fazla bilgi için: http://getbootstrap.com/css/#responsive-utilities

Aşağıda v3.2.0 itibariyle kullanımdan kaldırılmıştır

Ekstra küçük cihazlar Telefonlar (<768 piksel) (Class names : .visible-xs, hidden-xs)

Küçük Cihazlar Tabletler (68768px) (Class names : .visible-sm, hidden-sm)

Orta boy cihazlar Masaüstü bilgisayarlar (≥992px) (Class names : .visible-md, hidden-md)

Büyük cihazlar Masaüstü bilgisayarlar (≥1200px) (Class names : .visible-lg, hidden-lg)

Çok daha eski Bootstrap

.hidden-phone, .hidden-tablet vb. desteklenmez / kullanılmaz.

GÜNCELLEME:

Bootstrap 4'te 2 tür sınıf vardır:

• hidden-*-upGörünüm verilen kesme veya daha geniş olduğunda elemanı gizlemek.
• hidden-*-down bu, görünüm verilen kesme noktasında veya daha küçük olduğunda öğeyi gizler.

Ayrıca, xl1200 piksel genişlikten daha büyük cihazlar için yeni görünüm alanı eklenir. Daha fazla bilgi için buraya tıklayın .

Bootstrap 4 Beta Yanıtı:

d-block d-md-noneiçin orta, büyük ve ekstra büyük üzerine derisi cihazlar.

d-none d-md-blockiçin küçük ve ekstra küçük üzerine derisi cihazlar.

Ayrıca değiştirerek satır içi anlamına Not d-*-blockiled-*-inline-block

Eski cevap: Bootstrap 4 Alpha

• .hidden-*-upBelirli bir boyutta ve daha büyük cihazlarda gizlemek için sınıfları kullanabilirsiniz

  .hidden-md-upiçin orta, büyük ve ekstra büyük üzerine derisi cihazlar.

• Aynı şey, .hidden-*-downbelirli bir boyutta ve daha küçük cihazlarda gizlemek için de geçerlidir.

  .hidden-md-downiçin orta, küçük ve ekstra küçük üzerine derisi cihazlar

• visible- * artık bootstrap 4 ile bir seçenek değil

• Yalnızca orta düzey cihazlarda görüntülemek için bu ikisini birleştirebilirsiniz:

  hidden-sm-down ve hidden-xl-up

Geçerli boyutlar:

• xs portre modundaki telefonlar için (<34em)
• sm yatay moddaki telefonlar için (≥34em)
• md tabletler için (≥48em)
• lg masaüstü bilgisayarlar için (≥62em)
• xl masaüstü bilgisayarlar için (≥75em)

Bu Bootstrap 4, alfa 5'ten (Ocak 2017) oldu. Daha fazla ayrıntı burada: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

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

Bootstrap 4.x yanıtı

hidden-* sınıflar Bootstrap 4 beta'dan itibaren kaldırılır.

Orta ve yukarı seviyelerde göstermek istiyorsanız d-*sınıfları kullanın , örneğin:

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

Yalnızca küçük ve aşağıda göstermek istiyorsanız bunu kullanın:

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

Ekran boyutu ve sınıf şeması

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

Açık .visible-*sınıflar kullanmak yerine , bir öğeyi yalnızca bu ekran boyutunda gizlemeyerek görünür hale getirirsiniz. Bir öğeyi yalnızca belirli bir ekran boyutu aralığında göstermek için .d-*-nonebir .d-*-blocksınıfı bir sınıfla birleştirebilirsiniz (örneğin .d-none.d-md-block.d-xl-none , öğeyi yalnızca orta ve büyük cihazlarda gösterir).

belgeleme

Herhangi bir modülün nerede gösterileceğini veya gizleneceğini daha iyi kontrol etmesi için bu modül sınıfı soneklerini girebilirsiniz.

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

http://twitter.github.com/bootstrap/scaffolding.html aşağı kaydırın

Buraya eklemek için birkaç açıklamam var:

1) Gösterilen liste (görünür telefon, görünür tablet vb.) Bootstrap 3'te kullanımdan kaldırılmıştır. Yeni değerler şunlardır:

• Görünür-xs- *
• Görünür-SM- *
• Görünür-md- *
• Görünür-LG-*
• gizli-xs- *
• gizli-SM- *
• gizli-md- *
• gizli-LG-*

Yıldız işareti, her biri için aşağıdakine çevirir (Yalnızca aşağıdaki görünür xs- * 'yi gösteririm):

• Görünür-XS-blok
• Görünür-XS-içi
• Görünür-XS-sıralı blok

2) Bu sınıfları kullandığınızda, önüne bir nokta eklemezsiniz (yukarıdaki cevabın bir bölümünde kafa karıştırıcı bir şekilde gösterildiği gibi).

Örneğin:

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

3) visible- * ve hidden- * (örneğin, visible-xs ve hidden-xs) kullanabilirsiniz, ancak bunlar Bootstrap 3.2.0'da kullanımdan kaldırılmıştır.

Daha fazla ayrıntı ve en yeni özellikler için buraya gidin ve "görünür" ifadesini arayın: http://getbootstrap.com/css/

Hepsi hidden-*-up, hidden-*sınıflar benim için çalışmıyor, bu yüzden daha hiddenönce kendi yaptığım sınıfı ekliyorum visible-*(mevcut bootstrap sürümü için çalışıyor). Div'ı bir ekran için göstermeniz ve diğer tüm ekranlar için gizlemeniz gerekiyorsa çok kullanışlıdır.

CSS:

.hidden {display:none;}

HTML:

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

Bootstrap 4.0 beta için (ve bunun finalde kalacağını varsayalım) bir değişiklik var - gizli sınıfların kaldırıldığını unutmayın.

Dokümanlara bakın: https://getbootstrap.com/docs/4.0/utilities/display/

Mobil cihazlarda içeriği gizlemek ve daha büyük cihazlarda görüntülemek için aşağıdaki sınıfları kullanmanız gerekir:

d-none d-sm-block

Birinci sınıf set tüm cihazlarda hiçbirini göstermez ve ikincisi farklı cihazlarda göstermek istiyorsanız sm yerine md, lg vb. Kullanabilirsiniz.

Göç etmeden önce bunu okumanızı öneririm:

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

Boostrap 4.1 (Bootstrap belgelerinden tüm tablo kodunu kopyaladığım için snippet'i çalıştırın):

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

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