System płynny lub stały, w responsywnym projekcie, oparty na Bootstrap na Twitterze

Mylę się co do różnych opcji w siatce ładującej Twittera i ich wzajemnego połączenia.

Na początek możesz mieć zwykłą stałą containerlub container-fluid.

Wtedy każdy może obejmować zwykły rowlub płynny rząd row-fluid. Oznacza to, że możesz mieć stały pojemnik z rzędem płynów lub pojemnik-płyn ... ze stałym rzędem?

Ponadto możesz dołączyć „responsywne” zapytania multimedialne, czy nie.

Mylę się co do tego, jak te rzeczy wchodzą w interakcje. Ale zacznijmy od jednego oczywistego przykładu.

Na samej stronie przykładów znajduje się to, co przedstawiono jako przykład zarówno stałej siatki, jak i płynnej siatki

Jednak w mojej przeglądarce na samej tej przykładowej stronie - obie siatki zachowują się identycznie. Być może dlatego, że strona przykładowa korzysta z opcjonalnych responsywnych zapytań o media? W obu przykładach siatki, jeśli zacznę stopniowo zwężać okno przeglądarki, elementy siatki nie zwężają się stopniowo - po osiągnięciu pewnej (responsywnej) szerokości granicy są przyciągane do mniejszego rozmiaru i ponownie przy dalszych szerokościach granic. Ale zarówno zwykły przykład „ustalony” ORAZ przykład „płynny” zachowują się tutaj dokładnie tak samo - więc czym do cholery jest różnica?

Kiedy decydujesz między stałą szerokością a szerokością płynu, musisz pomyśleć o swojej CAŁEJ stronie. Ogólnie rzecz biorąc, chcesz wybrać jedno lub drugie, ale nie jedno i drugie. Przykłady wymienione w pytaniu są w rzeczywistości na tej samej stronie o stałej szerokości. Innymi słowy, strona Rusztowania używa układu o stałej szerokości. Stałej siatki i siatki płyn na stronie rusztowania nie mają być przykłady, lecz dokumentacja za realizację stałych i płynnych szerokość układów.

Prawidłowy przykład stałej szerokości znajduje się tutaj . Przykład właściwej szerokości płynu znajduje się tutaj .

Obserwując przykład stałej szerokości, nie powinieneś widzieć zmieniającej się zawartości, gdy Twoja przeglądarka ma szerokość większą niż 960 pikseli. Jest to maksymalna (stała) szerokość strony. Zapytania o media w projekcie o stałej szerokości wyznaczą minimalne szerokości dla poszczególnych stylów. Zobaczysz to w akcji, gdy zmniejszysz okno przeglądarki i zobaczysz przyciąganie układu do innego rozmiaru.

I odwrotnie, układ szerokości płynu zawsze będzie rozciągał się, aby pasował do okna przeglądarki, bez względu na to, jak szeroki będzie. Zapytania o media wskazują, kiedy style się zmieniają, ale szerokość kontenerów zawsze stanowi procent okna przeglądarki (zamiast ustalonej liczby pikseli).

„Responsywne” zapytania o media są już gotowe. Musisz tylko zdecydować, czy chcesz zastosować układ strony o stałej szerokości czy szerokości płynu.

Wcześniej w bootstrap 2 trzeba było używać row-fluidwewnątrz pojemnika z płynem i rowwewnątrz stałego pojemnika. Wraz z wprowadzeniem bootstrap 3 row-fluidzostał usunięty, nie używaj go już .

EDYCJA : Zgodnie z komentarzami, niektóre jsFiddles dla:

• płynny układ nieodpowiadający ,
• układ reagujący na płyn ,
• naprawiony niereagujący układ ,
• naprawiono responsywny układ .

Te skrzypce są całkowicie wolne od Bootstrap, oparte na czystych zapytaniach o media CSS, co czyni je dobrym punktem wyjścia dla każdego, kto chce stworzyć podobne rozwiązanie bez korzystania z Bootstrap na Twitterze.

Interesująca dyskusja. Ja też zadawałem sobie to pytanie. Główną różnicą między płynem a stałym jest po prostu to, że stały układ ma stałą szerokość pod względem całego układu strony internetowej (rzutnia). Jeśli masz rzutnię o szerokości 960 pikseli, każda kolumna ma stałą szerokość, która nigdy się nie zmieni.

Układ płynu zachowuje się inaczej. Wyobraź sobie, że ustawiłeś szerokość głównego układu na 100%. Teraz każda kolumna będzie obliczana tylko na podstawie jej względnego rozmiaru (tj. 25%) i rozszerzeń w miarę zmiany rozmiaru przeglądarki. Zatem w zależności od celu układu możesz wybrać sposób jego zachowania.

Oto dobry artykuł na temat płynu vs. flex .

Źródło - http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

Plusy

• Układy o stałej szerokości są znacznie łatwiejsze w użyciu i łatwiejsze do dostosowania pod względem projektu.
• Szerokości są takie same dla każdej przeglądarki, więc mniej kłopotów z obrazami, formularzami, wideo i innymi treściami o stałej szerokości.
• Nie ma potrzeby stosowania minimalnej lub maksymalnej szerokości, która i tak nie jest obsługiwana przez każdą przeglądarkę.
• Nawet jeśli witryna jest zaprojektowana tak, aby była kompatybilna z najmniejszą rozdzielczością ekranu 800 × 600, treść będzie nadal wystarczająco szeroka przy większej rozdzielczości, aby była łatwo czytelna.

Cons

• Układ o stałej szerokości może tworzyć nadmierną białą przestrzeń dla użytkowników o większych rozdzielczościach ekranu, zaburzając w ten sposób „boską proporcję”, „Regułę trzeciej”, ogólną równowagę i inne zasady projektowania.
• Mniejsze rozdzielczości ekranu mogą wymagać poziomego paska przewijania, w zależności od stałej szerokości układu.
• Potrzebne są jednolite tekstury, wzory i kontynuacja obrazu, aby uwzględnić te o większych rozdzielczościach.
• Układy o stałej szerokości mają ogólnie niższy ogólny wynik pod względem użyteczności.

Płynny układ w Bootstrap 3.

W przeciwieństwie do Boostrap 2, Bootstrap 3 nie ma mieszanki .container-fluid, która tworzy pojemnik na płyn. .Container to responsywny układ siatki o stałej szerokości. Na dużym ekranie po obu stronach zawartości strony internetowej są nadmierne białe spacje.

container-fluid został dodany z powrotem w Bootstrap 3.1

Płynny układ siatki wykorzystuje całą szerokość ekranu i działa lepiej na dużym ekranie. Okazuje się, że łatwo jest stworzyć płynny układ siatki za pomocą mixin Bootstrap 3. Poniższy wiersz tworzy płynny układ siatki:

. naprawione w kontenerze;

Mixin naprawiony przez .container ustawia zawartość na środku ekranu i dodaje wypełnienia. Nie określa stałej szerokości strony.

Innym podejściem jest użycie stylu CSS Erica Flowersa

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

możesz z tego skorzystać - https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid. spójrz .. Uważam, że to bardzo przydatne. Dobra wydajność, bardzo lekka, wszystkie ważne przyjazne dla przeglądarki i płynne, więc tak naprawdę nie potrzebujesz bootstrapu do siatki.