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

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?

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:

• tata letak yang tidak responsif ,
• tata letak cairan responsif ,
• memperbaiki tata letak non-responsif ,
• memperbaiki tata letak responsif .

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.

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 .

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.

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

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.