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

399

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?

jrochkind
źródło
6
Być może to jest lepszym przykładem stylu układu płynu?
Cody Gray

Odpowiedzi:

442

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:

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.

eterps
źródło
1
hmm, ok, wydawało mi się, że doktorzy sugerują, że możesz mieszać i dopasowywać płyn i naprawić, ale myślę, że to zaawansowane użycie, na które nie jestem gotowy. :) Nadal nie rozumiem, w jaki sposób responsivezmiany 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?
jrochkind
8
mylące jest dla mnie to, że przykład „właściwej stałej szerokości” zmienia rozmiary kolumn wraz ze zmianami okna przeglądarki (ponieważ jest responsywny?) Podobnie jak przykład właściwej szerokości płynu. Ale przypuszczam, że przykład szerokości płynu robi to w sposób ciągły, a przykład reagujący na stałą szerokość czy to w dyskretnych skokach, a także osiągając maksymalny rozmiar? Czy to to? Co powiesz na reagujący na płyn vs. nie reagujący?
jrochkind
16
Masz to. W układzie o stałej szerokości kolumny zmieniają się, gdy okno przeglądarki osiągnie szerokość określoną w zapytaniu o media. Kiedy więc okno ma szerokość większą niż 960 pikseli, pozostanie na maksymalnej szerokości. Następnie, gdy zmniejszysz przeglądarkę do 959px, zostanie ona przyciągnięta do nowego układu na podstawie zapytania o media o maksymalnej szerokości 768px. Ponieważ przeglądasz układ o stałej szerokości, kolumny nie zmienią się, gdy szerokość twojej przeglądarki będzie pomiędzy 768 a 960.
eterps
3
A gdy przeglądasz układ o płynnej szerokości, rozmiary kolumn zawsze będą się zmieniać w celu dopasowania do szerokości przeglądarki. Sam układ również zmieni się zgodnie z zapytaniami o media, podobnie jak w przypadku układu o stałej szerokości.
eterps
12
Najważniejszą rzeczą do zapamiętania jest to, że stała szerokość = piksele, a szerokość płynu = procent. Responsywność pochodzi ze wszystkich fantazyjnych reguł CSS zdefiniowanych w bootstrap-responsive.css, i te reguły dotyczą obu układów.
eterps
21

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 .

Lido
źródło
7

Ź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.
Thilanka De Silva
źródło
6

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;
}
Ying
źródło
2
Nie rozumiem, dlaczego ludzie powtarzają, że „pojemnik-płyn” nie jest obsługiwany w Bootstrap 3, podczas gdy tak jest. Właśnie dwukrotnie sprawdziłem i w Bootstrap 3.1.0 jest to wyraźnie zdefiniowane.
Bart
10
To dlatego, że został usunięty w 3 dodanych ponownie w 3.1 .
Steve Klösters
-2

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.

entuzjasta
źródło
1
Chociaż ten link może odpowiedzieć na pytanie, lepiej dołączyć tutaj istotne części odpowiedzi i podać link w celach informacyjnych. Odpowiedzi zawierające tylko łącze mogą stać się nieprawidłowe, jeśli połączona strona ulegnie zmianie. - Z recenzji
piet.t
Zgadzam się ... ale to nie jest odniesienie do odpowiedzi, to jest link do wtyczki, w której pliki można pobrać, chyba nie mogę tutaj dołączyć plików z odpowiedzią ...
entuzjasta