Sistem fluida atau jaringan tetap, dalam desain responsif, berdasarkan Twitter Bootstrap


399

Saya semakin bingung tentang berbagai opsi di kisi bootstrap twitter , dan bagaimana keduanya berjalan bersama.

Untuk memulainya, Anda dapat memiliki perbaikan biasa container, atau a container-fluid.

Kemudian salah satu dapat menyertakan rowbaris biasa , atau cair row-fluid,. Artinya, Anda dapat memiliki wadah tetap dengan baris cairan, atau cairan-wadah ... dengan baris tetap?

Kemudian di atas itu, Anda dapat memasukkan kueri media 'responsif', atau tidak.

Saya menjadi bingung bagaimana hal-hal ini berinteraksi. Tapi mari kita mulai dengan satu contoh nyata.

Pada halaman contoh itu sendiri, ada apa yang disajikan sebagai contoh dari grid tetap dan jaringan fluida

Namun, di browser saya, pada halaman contoh itu sendiri - kedua grid berperilaku identik. Mungkin karena halaman contoh menggunakan kueri media responsif opsional? Dalam kedua contoh kisi, jika saya mulai secara bertahap mempersempit jendela browser saya, elemen kisi tidak berangsur-angsur menyempit - setelah lebar batas tertentu (responsif) tercapai, mereka memendek ke ukuran yang lebih kecil, dan sekali lagi pada lebar batas selanjutnya. Tapi kedua contoh 'tetap' biasa DAN contoh 'cair' berperilaku sama persis di sini - jadi apa bedanya?


6
Mungkin ini adalah contoh gaya tata letak yang lebih baik?
Cody Gray

Jawaban:


442

Ketika Anda memutuskan antara lebar tetap dan lebar cairan, Anda harus berpikir dalam hal halaman SELURUH Anda. Secara umum, Anda ingin memilih satu atau yang lain, tetapi tidak keduanya. Contoh-contoh yang Anda sebutkan dalam pertanyaan Anda, pada kenyataannya, di halaman dengan lebar tetap yang sama. Dengan kata lain, halaman Scaffolding menggunakan tata letak lebar tetap. Jaringan tetap dan jaringan fluida pada halaman Scaffolding tidak dimaksudkan sebagai contoh, melainkan dokumentasi untuk menerapkan tata letak lebar tetap dan cairan.

Contoh lebar tetap yang tepat ada di sini . Contoh lebar cairan yang tepat ada di sini .

Saat mengamati contoh lebar tetap, Anda seharusnya tidak melihat konten yang berubah ukuran ketika browser Anda lebih besar dari lebar 960px. Ini adalah lebar maksimum (tetap) halaman. Kueri media dalam desain lebar tetap akan menetapkan lebar minimum untuk gaya tertentu. Anda akan melihat ini dalam tindakan ketika Anda mengecilkan jendela browser Anda dan melihat tata letak snap ke ukuran yang berbeda.

Sebaliknya, tata letak lebar cairan akan selalu meregang agar sesuai dengan jendela peramban Anda, tidak peduli seberapa luasnya. Kueri media menunjukkan kapan gaya berubah, tetapi lebar kontainer selalu merupakan persentase dari jendela browser Anda (bukan jumlah piksel yang tetap).

Semua pertanyaan media 'responsif' siap untuk digunakan. Anda hanya perlu memutuskan apakah Anda ingin menggunakan tata letak lebar tetap atau lebar cairan untuk halaman Anda.

Sebelumnya, di bootstrap 2, Anda harus menggunakan row-fluiddi dalam wadah cairan dan rowdi dalam wadah tetap. Dengan diperkenalkannya bootstrap 3, row-fluidtelah dihapus, jangan gunakan lagi .

EDIT : Sesuai komentar, beberapa jsFiddles untuk:

Biola ini sepenuhnya bebas-Bootstrap, berdasarkan permintaan media CSS murni, yang menjadikannya titik awal yang baik, bagi siapa pun yang mau membuat solusi serupa tanpa menggunakan Twitter Bootstrap.


1
hmm, oke, menurut saya dokumen itu menyarankan Anda bisa mencampur dan mencocokkan cairan dan memperbaiki, tapi saya rasa itu adalah penggunaan tingkat lanjut yang belum saya siapkan. :) Saya masih tidak mengerti bagaimana responsivemasing-masing perubahan tetap dan cair - Anda dapat menggunakan responsif (atau tidak) dengan tetap dan cairan, kan? Bisakah Anda menjelaskan bagaimana responsif mereka masing-masing?
jrochkind

8
hal yang membingungkan bagi saya tetap bahwa contoh 'lebar tetap yang tepat' TIDAK mengubah ukuran kolom sebagai perubahan jendela browser (karena itu responsif?) Dan begitu juga contoh lebar cairan yang tepat. Tapi saya kira contoh lebar fluida melakukannya terus-menerus, dan contoh responsif lebar tetap apakah dalam lompatan diskrit, serta mencapai ukuran maksimum? Itu saja? Bagaimana dengan cairan responsif vs tidak responsif?
jrochkind

16
Anda sudah mendapatkannya. Dalam tata letak lebar tetap, kolom berubah ketika jendela browser mencapai lebar yang ditentukan dalam kueri media. Jadi ketika Anda memiliki jendela Anda lebih besar dari lebar 960px, itu akan tetap pada lebar maksimum itu. Kemudian ketika Anda mengecilkan browser Anda ke 959px, itu akan beralih ke tata letak baru berdasarkan permintaan media yang memiliki lebar maksimum 768px. Jadi karena Anda melihat tata letak lebar tetap, kolom tidak akan berubah ketika lebar browser Anda antara 768 dan 960.
eterps

3
Dan ketika Anda melihat tata letak lebar cairan, ukuran kolom akan selalu berubah agar sesuai dengan lebar browser Anda. Tata letak itu sendiri juga akan berubah sesuai dengan kueri media, seperti dengan tata letak lebar-tetap.
eterps

12
Yang paling penting untuk diingat adalah bahwa fixed width = pixel, dan fluid fluid = persen. Responsif berasal dari semua aturan CSS mewah yang didefinisikan dalam bootstrap-responsif.css, dan aturan itu berlaku untuk kedua tata letak.
eterps

21

Diskusi yang menarik. Saya juga bertanya pada diri sendiri pertanyaan ini. Perbedaan utama antara fluid dan fix adalah bahwa layout tetap memiliki lebar tetap dalam hal keseluruhan layout situs web (viewport). Jika Anda memiliki viewport lebar 960px, setiap kolom memiliki lebar tetap yang tidak akan pernah berubah.

Tata letak fluida berperilaku berbeda. Bayangkan Anda telah mengatur lebar tata letak utama Anda menjadi lebar 100%. Sekarang setiap kolom hanya akan dihitung dengan ukuran relatif itu (yaitu 25%) dan strech sebagai browser akan diubah ukurannya. Jadi berdasarkan tujuan tata letak Anda, Anda dapat memilih bagaimana tata letak berperilaku.

Berikut ini adalah artikel yang bagus tentang cairan vs fleksibel .


7

Sumber - http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-one-for-you/

Pro

  • Layout lebar tetap lebih mudah digunakan dan lebih mudah untuk disesuaikan dalam hal desain.
  • Lebar sama untuk setiap browser, jadi ada sedikit kerumitan dengan gambar, formulir, video, dan konten lainnya yang memiliki lebar tetap.
  • Tidak perlu untuk min-width atau max-width, yang tidak didukung oleh setiap browser.
  • Bahkan jika situs web dirancang agar kompatibel dengan resolusi layar terkecil, 800 × 600, konten akan tetap cukup lebar pada resolusi yang lebih besar sehingga mudah dibaca.

Cons

  • Tata letak lebar tetap dapat menciptakan ruang putih yang berlebihan bagi pengguna dengan resolusi layar yang lebih besar, sehingga “proporsi ilahi” yang mengecewakan, “Aturan Ketiga,” keseimbangan keseluruhan dan prinsip desain lainnya.
  • Resolusi layar yang lebih kecil mungkin memerlukan bilah gulir horizontal, tergantung lebar tata letak tetap.
  • Tekstur yang mulus, pola dan kelanjutan gambar diperlukan untuk mengakomodasi mereka yang memiliki resolusi lebih besar.
  • Layout lebar tetap umumnya memiliki skor keseluruhan yang lebih rendah dalam hal kegunaan.

6

Tata letak cairan di Bootstrap 3.

Tidak seperti Boostrap 2, Bootstrap 3 tidak memiliki .container-fluid mixin untuk membuat wadah cairan. .Container adalah tata letak grid responsif lebar tetap. Di layar besar, ada ruang putih berlebihan di kedua sisi konten halaman Web seseorang.

container-fluid ditambahkan kembali di Bootstrap 3.1

Tata letak kotak cairan menggunakan semua lebar layar dan berfungsi lebih baik di layar besar. Ternyata mudah untuk membuat tata letak kotak fluida menggunakan Bootstrap 3 mixins. Baris berikut membuat tata letak grid responsif cairan:

.container-fixed;

Mixin .container-fixed mengatur konten ke tengah layar dan menambahkan paddings. Itu tidak menentukan lebar halaman tetap.

Pendekatan lain adalah menggunakan gaya CSS Eric Flowers

.my-fluid-container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

2
Saya tidak mengerti mengapa orang terus mengatakan bahwa 'container-fluid' tidak didukung di Bootstrap 3, sementara itu. Saya baru saja memeriksa dua kali dan dalam Bootstrap 3.1.0 sudah jelas.
bart

10
Itu karena itu dihapus dalam 3 ditambahkan kembali pada 3.1 .
Steve Klösters

-2

Anda dapat menggunakan ini - https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid. lihat .. Saya menemukan ini benar-benar sangat berguna. Performa bagus, bobotnya sangat ringan, semuanya penting untuk peramban ramah dan lancar, sehingga Anda tidak benar-benar membutuhkan bootstrap untuk grid.


1
Meskipun tautan ini dapat menjawab pertanyaan, lebih baik untuk memasukkan bagian-bagian penting dari jawaban di sini dan memberikan tautan untuk referensi. Jawaban hanya tautan dapat menjadi tidak valid jika halaman tertaut berubah. - Dari Ulasan
piet.t

Saya setuju .. tetapi ini bukan referensi untuk jawabannya, ini adalah tautan ke plugin, di mana file dapat diunduh, saya kira saya tidak dapat melampirkan file dengan jawaban di sini ..
penggemar
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.