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 row
baris 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?
Jawaban:
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-fluid
di dalam wadah cairan danrow
di dalam wadah tetap. Dengan diperkenalkannya bootstrap 3,row-fluid
telah 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.
sumber
responsive
masing-masing perubahan tetap dan cair - Anda dapat menggunakan responsif (atau tidak) dengan tetap dan cairan, kan? Bisakah Anda menjelaskan bagaimana responsif mereka masing-masing?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
Sumber - http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-one-for-you/
Pro
Cons
sumber
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.1Tata 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
sumber
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.
sumber