Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [Bootstrap] Dynamiczna liczba kolumn
markonix
post 29.09.2017, 23:47:10
Post #1





Grupa: Zarejestrowani
Postów: 2 681
Pomógł: 287
Dołączył: 16.12.2008
Skąd: Śląsk

Ostrzeżenie: (0%)
-----


Liczba kolumn w jednym wierszu będzie dynamiczna, może wynieść 2, a może 5.
Nie bardzo mi się chce zaprzęgać do tego PHP i wolałbym aby to było po stronie css.
Korzystam z Boostrap, czy tam da się w jednym .row dać dowolną liczbę kolumn tak aby było działało to jak mniej więcej col-md-X gdzie X jest właśnie niewiadomą?
https://www.bootply.com/RuRv7e70sD
Czyli jak będą 3 to będą 3, jak będzie 12 to będzie ich 12 odpowiednio mniejsze. Ciągle wszystko full width.
Gdy dam col-md-1 to nie będzie użyta pełna szerokość, jak dam znów coś większego to duża szansa że będzie za dużo i przeskoczy do nowej linii.

Ten post edytował markonix 30.09.2017, 11:53:14


--------------------
Go to the top of the page
+Quote Post
Neutral
post 30.09.2017, 00:48:51
Post #2





Grupa: Zarejestrowani
Postów: 210
Pomógł: 32
Dołączył: 10.01.2016

Ostrzeżenie: (0%)
-----


Nie wiem, czy się da w bootstrapie. W PHP to dałoby radę to napisać chyba dzięki pętli.

https://medium.com/@fionnachan/dynamic-numb...es-cb8e8381b6f2
https://stackoverflow.com/questions/2117320...-for-html-table
http://willschenk.com/bootstrap-advanced-grid-tricks/
https://stackoverflow.com/questions/2417599...-2-in-bootstrap
https://github.com/twbs/bootstrap/issues/9454
Go to the top of the page
+Quote Post
markonix
post 30.09.2017, 01:22:57
Post #3





Grupa: Zarejestrowani
Postów: 2 681
Pomógł: 287
Dołączył: 16.12.2008
Skąd: Śląsk

Ostrzeżenie: (0%)
-----


No ok, w Bootstrap może i nie będzie szło ale już w czystym CSS/HTML chyba by dało radę, przecież to nie brzmi jak jakiś mega wymyślny problem.
Tak, w PHP to bym ogarnął bo już tak raz zrobiłem:

  1. if ($count > 6) {
  2. $columnGrid = 1; // 7 ... n
  3. } elseif ($count > 4) {
  4. $columnGrid = 2; // 5 ... 6
  5. } elseif ($count > 3) {
  6. $columnGrid = 3; // 4
  7. } elseif ($count > 2) {
  8. $columnGrid = 4; // 3
  9. } else {
  10. $columnGrid = 6; // 2 or 1
  11. }

Ale szczerze? Słabe to no i przy niektórych opcjach np. 11 kolumnach zostanie odstęp, a ja bym chciał aby te 11 kolumn rozciągnęło się na pełną szerokość.

Ten post edytował markonix 30.09.2017, 11:53:21


--------------------
Go to the top of the page
+Quote Post
viking
post 30.09.2017, 04:24:06
Post #4





Grupa: Zarejestrowani
Postów: 5 228
Pomógł: 876
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


Bootstrap v4 jest oparty o flex.


--------------------
Go to the top of the page
+Quote Post
Pyton_000
post 30.09.2017, 06:20:28
Post #5





Grupa: Zarejestrowani
Postów: 7 788
Pomógł: 1371
Dołączył: 26.10.2005

Ostrzeżenie: (0%)
-----


Dopiero smile.gif Natywny Grid jest bardzo fajny.
A co do problemu to właśnie można utworzyć .row i nadać mu właściwości flex. https://stackoverflow.com/a/31935155/3732803
Go to the top of the page
+Quote Post
markonix
post 30.09.2017, 11:43:44
Post #6





Grupa: Zarejestrowani
Postów: 2 681
Pomógł: 287
Dołączył: 16.12.2008
Skąd: Śląsk

Ostrzeżenie: (0%)
-----


Mmm.. Aż się dziwie, że to taka nowość.. Trzeba się troszkę poduczyć na nowo bo nie wszystko działa tak jak byśmy się od razu spodziewali (np. z statyczną szerokością jednej z kolumn) ale generalnie miodzio, nawet nie pytam o kompatybilność smile.gif

Efekt, o który mi chodziło (nie znam z góry ilości kolumn w pliku):
http://prntscr.com/griigy

Kod ostateczny:

  1. .flex-row {
  2. display: flex;
  3. flex: auto;
  4. }
  5.  
  6. .flex-column {
  7. flex: 1;
  8. min-height: 1px;
  9. padding-left: 10px;
  10. padding-right: 10px;
  11. }


Statyczna szerokość kolumny:

  1. style="flex: 0 0 60px"


Ten post edytował markonix 30.09.2017, 11:45:52


--------------------
Go to the top of the page
+Quote Post
Pyton_000
post 30.09.2017, 12:11:50
Post #7





Grupa: Zarejestrowani
Postów: 7 788
Pomógł: 1371
Dołączył: 26.10.2005

Ostrzeżenie: (0%)
-----


Węszę importer z CSV smile.gif
Go to the top of the page
+Quote Post
markonix
post 30.09.2017, 12:24:24
Post #8





Grupa: Zarejestrowani
Postów: 2 681
Pomógł: 287
Dołączył: 16.12.2008
Skąd: Śląsk

Ostrzeżenie: (0%)
-----


http://prntscr.com/griu7q

Paniee wink.gif Laravel-Excel i xls czy ods niestraszny wink.gif

Ten post edytował markonix 30.09.2017, 12:25:28


--------------------
Go to the top of the page
+Quote Post
prowseed
post 30.09.2017, 13:16:07
Post #9





Grupa: Zarejestrowani
Postów: 433
Pomógł: 64
Dołączył: 29.01.2011
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


Ja polecam http://flexboxgrid.com/
Nazewnictwo zgodne mniej-więcej z bs3, więc łatwo się przesiąść smile.gif

Generalnie flexbox.


--------------------
Go to the top of the page
+Quote Post
Pyton_000
post 30.09.2017, 13:41:19
Post #10





Grupa: Zarejestrowani
Postów: 7 788
Pomógł: 1371
Dołączył: 26.10.2005

Ostrzeżenie: (0%)
-----


Generalnie to przyszłość jest w Grid wink.gif
Go to the top of the page
+Quote Post
viking
post 30.09.2017, 14:10:12
Post #11





Grupa: Zarejestrowani
Postów: 5 228
Pomógł: 876
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


W grid plus flex. Grid jest dobry ale do budowania layoutu ogólnego. Gorzej jak trzeba coś dokładniej ułożyć.


--------------------
Go to the top of the page
+Quote Post
markonix
post 30.09.2017, 17:58:14
Post #12





Grupa: Zarejestrowani
Postów: 2 681
Pomógł: 287
Dołączył: 16.12.2008
Skąd: Śląsk

Ostrzeżenie: (0%)
-----


W tym konkretnym projekcie jest już użyty premium template oparty o Bootstrap więc troszkę słabe aby zaprzęgać równolegle drugi framework, zwłaszcza, że póki co BS dobrze się sprawdza przy większości widoków no i ktoś tu wspomniał, że BS też idzie w stronę flex'a więc wystarczy poczekać.


--------------------
Go to the top of the page
+Quote Post
Pyton_000
post 30.09.2017, 19:02:27
Post #13





Grupa: Zarejestrowani
Postów: 7 788
Pomógł: 1371
Dołączył: 26.10.2005

Ostrzeżenie: (0%)
-----


@viking ja mówię o tym grid: https://css-tricks.com/snippets/css/complete-guide-grid/
Go to the top of the page
+Quote Post
Neutral
post 30.09.2017, 21:25:27
Post #14





Grupa: Zarejestrowani
Postów: 210
Pomógł: 32
Dołączył: 10.01.2016

Ostrzeżenie: (0%)
-----


  1. <?php
  2. $count =3;
  3.  
  4. for($u=7;$u>6;$u--){
  5. $arr4[]=$u;
  6. }
  7. for($u2=4;$u2>3;$u2--){
  8. $arr5[]=$u2;
  9. }
  10. for($j=5;$j>=4;$j--){
  11. $arr[] = $j;
  12. }
  13. for($i=3;$i>=2;$i--){
  14. $arr2[]=$i;
  15. }
  16. for($k=3;$k<=4;$k++){
  17. $arr3[]=$k;
  18. }
  19.  
  20. $arr5[1]=null;
  21. $arr4[1]=null;
  22.  
  23. for($r=0;$r<=1;$r++){
  24.  
  25. if($count>$arr2[$r] && $count<$arr[$r]){
  26. $grid = $arr3[$r];
  27. }else if($count > $arr5[$r] && $count < $arr4[$r]){
  28. $grid = 2;
  29. }else if($count > 6){
  30. $grid = 1;
  31. }else if($count < 3){
  32. $grid = 6;
  33. }
  34.  
  35. }
  36.  
  37. for($y=1;$y<=$grid;$y++){
  38. echo "<span style='color:red'>red</span>";
  39. }
  40.  
  41. ?>
Go to the top of the page
+Quote Post
Pyton_000
post 1.10.2017, 08:51:41
Post #15





Grupa: Zarejestrowani
Postów: 7 788
Pomógł: 1371
Dołączył: 26.10.2005

Ostrzeżenie: (0%)
-----


A to co biggrin.gif
Go to the top of the page
+Quote Post
Comandeer
post 2.10.2017, 11:38:11
Post #16





Grupa: Zarejestrowani
Postów: 1 265
Pomógł: 253
Dołączył: 11.06.2009
Skąd: Świętochłowice

Ostrzeżenie: (0%)
-----


Cytat
Generalnie to przyszłość jest w Grid

Już nie przeginajmy… Obecnie mamy modę na "flex all the things" i nawet jak ktoś chce zrobić opływanie obrazka, to mu się wciska flexboxa. Nie chcę, żeby za rok do opływania obrazka polecano mu grida.

CSS Grid jest dość skomplikowanym narzędziem i czasami jest armatą na muchę.


--------------------
Go to the top of the page
+Quote Post
Pyton_000
post 2.10.2017, 11:58:41
Post #17





Grupa: Zarejestrowani
Postów: 7 788
Pomógł: 1371
Dołączył: 26.10.2005

Ostrzeżenie: (0%)
-----


Ale Grid jako narzędzie do tworzenia template jest całkiem niezły. Owszem nie wszędzie i nie zawsze wszystko.

Wszystko z umiarem smile.gif
Go to the top of the page
+Quote Post
prowseed
post 4.10.2017, 15:49:09
Post #18





Grupa: Zarejestrowani
Postów: 433
Pomógł: 64
Dołączył: 29.01.2011
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


Cytat(Comandeer @ 2.10.2017, 12:38:11 ) *
Już nie przeginajmy… Obecnie mamy modę na "flex all the things" i nawet jak ktoś chce zrobić opływanie obrazka, to mu się wciska flexboxa. Nie chcę, żeby za rok do opływania obrazka polecano mu grida.

CSS Grid jest dość skomplikowanym narzędziem i czasami jest armatą na muchę.



Cytat(Pyton_000 @ 2.10.2017, 12:58:41 ) *
Ale Grid jako narzędzie do tworzenia template jest całkiem niezły. Owszem nie wszędzie i nie zawsze wszystko.

Wszystko z umiarem smile.gif


Dlatego tak jak napisał viking - flex + grid. Korzystam z grida na co dzień, bo jest ultrawygodny i ma pełne wsparcie, flex wniósł dużo świeżości do pozycjonowania el. na stronie.

Jak ktoś się słucha głupich rad i nie potrafi sam pomyśleć, to niestety, być może użyje flexa wtedy, kiedy nie powinien, natomiast flex+grid to w końcu krok w kierunku oderwania css od layout'owania w stylu "Word 97".


--------------------
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 27.06.2019 - 12:00