Melihat melalui bootstrap sepertinya mereka mendukung runtuh menubar item untuk layar yang lebih kecil. Apakah ada sesuatu yang mirip untuk barang-barang lainnya pada halaman?
Sebagai contoh, saya memiliki sebuah
Ini mungkin yang ada dalam kerangka Bootstrap?
Tambahan kecil perangkat
Ponsel (<768px) (nama Kelas : .terlihat-xs-blok, tersembunyi-xs)
Perangkat kecil
Tablet (≥768px) (nama Kelas : .terlihat-sm-blok, tersembunyi-sm)
Media perangkat Desktop (≥992px) `(nama Kelas : .terlihat-md-blok, tersembunyi-md)
Besar perangkat
Desktop (≥1200px) (nama Kelas : .terlihat-lg-blok, tersembunyi-lg)
Di bawah ini adalah usang pada v3.2.0
Tambahan perangkat kecil
Ponsel (<768px) (nama Kelas : .terlihat-xs, tersembunyi-xs)
Perangkat kecil
Tablet (≥768px) (nama Kelas : .terlihat-sm, tersembunyi-sm)
Media perangkat Desktop (≥992px) `(nama Kelas : .terlihat-md, tersembunyi-md)
Besar perangkat
Desktop (≥1200px) (nama Kelas : .terlihat-lg, tersembunyi-lg)
Jauh lebih tua Bootstrap
.tersembunyi-telepon, .tersembunyi-tablet
dll. tidak didukung/usang.
UPDATE:
Di Bootstrap 4 ada 2 jenis kelas:
tersembunyi-*-up
yang menyembunyikan elemen saat viewport yang diberi breakpoint atau yang lebih luas.tersembunyi-*-down
yang menyembunyikan elemen saat viewport yang diberi breakpoint atau lebih kecil.Juga, baru xl
viewport ditambahkan untuk perangkat yang lebih 1200px lebar. Untuk informasi lebih lanjut klik di sini.
d-block d-md-none
untuk menyembunyikan menengah, besar dan ekstra besar perangkat.
Catatan bahwa anda juga dapat inline dengan mengganti d-*-blok
dengan d-*-inline-block
Tua menjawab: Bootstrap 4 Alpha
Anda dapat menggunakan kelas-kelas .tersembunyi-*-up
untuk menyembunyikan pada ukuran tertentu dan perangkat yang lebih besar
.tersembunyi-md-up
untuk menyembunyikan menengah, besar dan ekstra besar perangkat.
Hal yang sama berlaku dengan .tersembunyi-*-down
untuk menyembunyikan pada ukuran tertentu dan perangkat yang lebih kecil
.tersembunyi-md-down
untuk sembunyikan di, kecil, dan menengah ekstra-kecil perangkat
terlihat-* tidak lagi menjadi pilihan dengan bootstrap 4
Untuk menampilkan hanya pada media perangkat, anda dapat menggabungkan dua:
tersembunyi-sm-down
dantersembunyi-xl-up
Valid ukuran adalah:
sm
untuk ponsel dalam modus lansekap (≥34em)md
untuk tablet (≥48em)lg
untuk desktop (≥62em)xl
untuk desktop (≥75em)Ini adalah sebagai Bootstrap 4, alpha 5 (januari 2017). Rincian lebih lanjut di sini: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/
Pada Bootstrap 4.3.x: https://getbootstrap.com/docs/4.3/utilities/display/
Bootstrap 4.x menjawab
tersembunyi-*
kelas dihapus dari Bootstrap 4 beta dan seterusnya.
Jika anda ingin menunjukkan pada menengah dan atas menggunakan d-*
kelas, misalnya:
<div class="d-none d-md-block">This will show in medium and up</div>
Jika anda ingin menampilkan hanya kecil-kecil dan di bawah gunakan ini:
<div class="d-block d-md-none"> This will show only in below medium form factors</div>
Ukuran layar dan kelas grafik
| 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 |
daripada menggunakan eksplisit
.terlihat-*
kelas, anda membuat sebuah elemen terlihat dengan tidak bersembunyi di bahwa ukuran layar. Anda dapat menggabungkan satu.d-*-tidak ada
kelas satu.d-*-blok
kelas untuk menunjukkan suatu elemen pada interval tertentu dari ukuran layar (misalnya.d-tidak ada.d-md-blok.d-xl-tidak ada
menunjukkan elemen hanya pada medium dan besar perangkat).
Anda dapat memasukkan modul ini akhiran kelas untuk setiap modul untuk kontrol yang lebih baik di mana ia akan ditampilkan atau disembunyikan.
.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop
http://twitter.github.com/bootstrap/scaffolding.html gulir ke bawah
Saya memiliki beberapa klarifikasi untuk menambahkan di sini:
Tanda bintang diterjemahkan sebagai berikut untuk masing-masing (saya tampilkan hanya terlihat-xs-* di bawah ini):
Misalnya:
<div class="visible-md-block col-md-6 text-right text-muted">
<h5>Copyright © 2014 Jazimov</h5>
</div>
Untuk rincian lebih lanjut dan spesifikasi terbaru, pergi di sini dan mencari "terlihat": http://getbootstrap.com/css/
Semua tersembunyi-*-up
, tersembunyi-*
kelas doesn't bekerja untuk saya, jadi saya'm menambahkan self-made tersembunyi
kelas sebelum terlihat-*
(yang bekerja untuk saat ini versi bootstrap). Hal ini sangat berguna jika anda perlu untuk menunjukkan div hanya untuk satu layar, dan bersembunyi untuk semua orang lain.
CSS:
.hidden {display:none;}
HTML:
<div class="col-xs-12 hidden visible-xs visible-sm">
<img src="photo.png" style="width:100%">
</div>
Untuk Bootstrap 4.0 beta (dan saya asumsikan ini akan tinggal selama akhir) ada perubahan - diketahui bahwa tersembunyi kelas yang dihapus.
Lihat docs: https://getbootstrap.com/docs/4.0/utilities/display/
Dalam rangka untuk menyembunyikan konten pada perangkat mobile dan ditampilkan pada perangkat yang lebih besar anda harus menggunakan kelas-kelas berikut:
d-none d-sm-block
Kelas pertama mengatur tampilan yang ada di seluruh perangkat dan yang kedua tampilan ini untuk perangkat "sm" sampai (anda bisa menggunakan md, lg, dll. bukan sm jika anda ingin menunjukkan pada perangkat yang berbeda.
Saya sarankan untuk membaca tentang hal itu sebelum migrasi:
https://getbootstrap.com/docs/4.0/migration/#responsive-utilities
Dalam metode bootrap 4.1 (run cuplikan karena aku disalin seluruh tabel kode dari Bootstrap, dokumentasi):
.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