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łą container
lub container-fluid
.
Wtedy każdy może obejmować zwykły row
lub 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?
Odpowiedzi:
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-fluid
wewnątrz pojemnika z płynem irow
wewnątrz stałego pojemnika. Wraz z wprowadzeniem bootstrap 3row-fluid
został usunięty, nie używaj go już .EDYCJA : Zgodnie z komentarzami, niektóre jsFiddles dla:
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.
źródło
responsive
zmiany są zarówno stałe, jak i płynne - możesz używać responsywnego (lub nie) zarówno ze stałym, jak i płynnym, prawda? Czy możesz wyjaśnić, jak reaguje na nie każdy z nich?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
Źródło - http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
Plusy
Cons
źródło
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.1Pł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
źródło
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.
źródło