Twitter Bootstrap tabanlı duyarlı tasarımlı akışkan veya sabit ızgara sistemi

Twitter bootstrap ızgarasındaki çeşitli seçenekler ve nasıl birlikte gittikleri konusunda kafam karışıyor .

Başlangıç ​​olarak, normal bir sabit containerveya a container-fluid.

Sonra ya sıradan rowya da sıvı bir sıra içerebilir row-fluid. Yani, sıvı sıralı sabit bir kabınız veya sabit sıralı bir konteyner sıvısı olabilir mi?

Daha sonra bunun üzerine, 'duyarlı' medya sorgularını dahil edebilir veya eklemeyebilirsiniz.

Bu şeylerin nasıl etkileştiği konusunda kafam karışıyor. Ancak açık bir örnekle başlayalım.

On örnekler sayfasında kendisi, bir ikisi bir örneği olarak sunulan ne var sabit ızgara ve akışkan ızgara

Ancak, tarayıcımda, bu örnek sayfada - her iki ızgara da aynı şekilde davranıyor. Belki de örnek sayfada isteğe bağlı duyarlı medya sorguları kullanıldığından? In hem ben yavaş yavaş benim tarayıcı penceresi daralma başladıysa ızgara örnekler, ızgara elemanları yok değil yavaş yavaş dar olsun - belli (duyarlı) sınır genişliği ulaşıldığında, bunlar daha ileri sınır genişlikleri tekrar daha küçük bir boyuta çekmeniz ve. Ama hem sıradan 'sabit' örnek hem de 'akışkan' örnek burada tam olarak aynı şekilde davranıyor - peki fark ne?

Sabit genişlik ve sıvı genişliği arasında karar verirken ENTIRE sayfanızda düşünmeniz gerekir. Genellikle birini seçmek istersiniz ama ikisini birden seçmezsiniz. Sorunuzda listelediğiniz örnekler aslında aynı sabit genişlikte sayfadadır. Başka bir deyişle, İskele sayfası sabit genişlikte bir düzen kullanıyor. Sabit ızgara ve akışkan ızgara İskele sayfa örnek olması amacıyla, değildir, daha çok, sabit ve akışkan uygulayarak mevcut genişlik düzenleri için belgeler.

Uygun sabit genişlik örneği burada . Uygun sıvı genişliği örneği burada .

Sabit genişlik örneğine bakarken, tarayıcınız 960 piksel genişlikten büyükse içerik değişen boyutları görmemelisiniz. Bu, sayfanın maksimum (sabit) genişliğidir. Sabit genişlikli tasarımdaki medya sorguları, belirli stiller için minimum genişlikleri belirler. Tarayıcı pencerenizi daralttığınızda ve mizanpajın farklı bir boyuta oturduğunu gördüğünüzde bunu göreceksiniz.

Tersine, akışkan genişliği düzeni, ne kadar geniş olursa olsun, tarayıcı pencerenize uyacak şekilde her zaman gerilir. Ortam sorguları stillerin ne zaman değiştiğini gösterir, ancak kapların genişliği her zaman tarayıcı pencerenizin yüzdesidir (sabit piksel sayısı yerine).

'Duyarlı' medya sorgularının tümü kullanıma hazırdır. Sayfanız için sabit genişlik mi yoksa akışkan genişliği düzeni mi kullanmak istediğinize karar vermeniz yeterlidir.

Daha önce, bootstrap 2'de, row-fluidsıvı bir kabın rowiçinde ve sabit bir kabın içinde kullanmak zorundaydınız . Bootstrap 3'ün tanıtımı ile row-fluidkaldırıldı, artık kullanmayın .

EDIT : yorumlarına göre, bazı jsFiddles için:

• akışkan tepki vermeyen düzen ,
• akışkan duyarlı düzen ,
• sabit tepki vermeyen düzen ,
• düzeltilmiş duyarlı düzen .

Bu kemanlar, Twitter Bootstrap kullanmadan benzer bir çözüm yapmak isteyen herkes için iyi bir başlangıç ​​noktası haline getiren saf CSS medya sorgularına dayanan tamamen Bootstrap içermez.

İlginç tartışma. Ben de kendime bu soruyu soruyordum. Sıvı ve sabit arasındaki temel fark, sabit yerleşimin web sitesinin tüm yerleşimi (görünüm alanı) açısından sabit bir genişliğe sahip olmasıdır. 960 piksel genişliğinde bir görüntü portunuz varsa, her sütun sabit bir genişliğe sahiptir ve bu değişmez.

Sıvı düzeni farklı davranır. Ana düzeninizin genişliğini% 100 genişliğe ayarladığınızı düşünün. Şimdi her sütun yalnızca göreceli boyutuna (yani% 25) ve tarayıcı yeniden boyutlandırılacağına göre hesaplanacaktır. Böylece düzen amacınıza bağlı olarak düzeninizin nasıl davranacağını seçebilirsiniz.

İşte sıvı ve esnek hakkında iyi bir makale .

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

Artıları

• Sabit genişlikli mizanpajların kullanımı çok daha kolaydır ve tasarım açısından özelleştirilmesi daha kolaydır.
• Genişlikler her tarayıcı için aynıdır, bu nedenle sabit genişlikteki görüntüler, formlar, video ve diğer içeriklerle daha az güçlük vardır.
• Zaten her tarayıcı tarafından desteklenmeyen minimum veya maksimum genişliğe gerek yoktur.
• Bir web sitesi en küçük ekran çözünürlüğü olan 800 × 600 ile uyumlu olacak şekilde tasarlanmış olsa bile, içerik daha kolay okunabilmesi için daha büyük bir çözünürlükte yeterince geniş olacaktır.

Eksileri

• Sabit genişlikli bir düzen, daha büyük ekran çözünürlüklerine sahip kullanıcılar için aşırı beyaz boşluk oluşturarak “ilahi oran” ı, “Üçler Kuralı”, genel denge ve diğer tasarım ilkelerini altüst edebilir.
• Daha küçük ekran çözünürlükleri, sabit mizanpajın genişliğine bağlı olarak yatay bir kaydırma çubuğu gerektirebilir.
• Daha büyük çözünürlüklere sahip olanlara uyum sağlamak için kesintisiz dokular, desenler ve görüntü devamı gereklidir.
• Sabit genişlikli düzenler, kullanılabilirlik açısından genel olarak daha düşük bir puana sahiptir.

Bootstrap 3'teki sıvı düzeni.

Boostrap 2'den farklı olarak, Bootstrap 3'te sıvı kabı yapmak için bir .container-akışkan karışımı yoktur. .Container sabit genişliğe duyarlı bir ızgara düzenidir. Büyük ekranda, kişinin Web sayfası içeriğinin her iki tarafında aşırı beyaz boşluklar vardır.

container-fluid Bootstrap 3.1'e eklendi

Sıvı ızgara düzeni tüm ekran genişliğini kullanır ve geniş ekranda daha iyi çalışır. Bootstrap 3 karışımlarını kullanarak sıvı ızgara düzeni oluşturmanın kolay olduğu ortaya çıkıyor. Aşağıdaki satır, akışkan duyarlı bir ızgara düzeni yapar:

.container sabit;

.Container-fixed mixin, içeriği ekranın merkezine ayarlar ve dolgular ekler. Sabit bir sayfa genişliği belirtmez.

Başka bir yaklaşım Eric Flowers'ın CSS stilini kullanmaktır

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

bunu kullanabilirsiniz - https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid. Bir bakın .. Bunu gerçekten çok kullanışlı buldum. İyi performans, çok hafif, tüm önemli tarayıcı dostu ve kendi içinde sıvı, bu yüzden ızgara için gerçekten bootstrap'a ihtiyacınız yok.