Botstrap-Jak zrobic rząd składający się z 20 małych, połączonych fotek.

Question

Chodzi mi o stronę z samymi małymi połączonymi, bez marginesów fotkami.

Powiedzmy taka galeria miniaturek w szerokości 20 fotek i w pionie niech bedzie też 20.

Wszystkie fotki połączone krawędziami, bez zadnych marginesow w poziomie i w pionie.

Wszystko oczywiście na bazie Botstrapa aby bylo responsywne.

Poprosze o jakies wskazowki, podpowiedzi.

Dzięki

Comments

A po co do tego bootstrap? Z tego co piszesz to wystarczy troche media query i flex albo cssgrid.

---

Advanced Cross-Browser Flexbox
flex css row trick  

---

@Tomek Sochacki,
 Dzieki i przyznam, ze jestem amatorem. Moze swoja stronke pokaze: https://757.ovh/

z ktorej tak do konca nie jestem zadowolony i chce cos zmienic. Wzialem przyklad z kursu z You Tube o Botsrapie. Poprosze o pare wskazowek, ktore pomoga mi w dalszej pracy zanim sie zabiore. Kazda uwaga bedzie dla mnie cenna. Dzieki

---

To samo info do kolegi. Poprosze o pare zdan naprowadzajacych zanim cos zaczne poprawiac i cos dzialac. Moja stronka taka przykladowa: https://757.ovh/

Bede wdzieczny. Przegladam wlasnie materialy dostaczone, poczekam na pare rad i bede cos tworzyl. Pozwole sie podzielic na biezaco i w razie czego zapytam sie jeszcze o cos.

Dzieki

---

z tego co piszesz wynika, że naukę webmasterki zaczynasz od razu od bilbiotek, frameworków itp. To wielki błąd - najpierw trzeba poznać solidnie podstawy html,css,js a dopiero potem sięgać po takie narzędzia.

Proponujuę Ci abyś po prostu spróbował sobie zakodować jakąś stronkę bazując na dowolnej innej samodzielnie robiąc html i css, bez żadnych frameworków. Następnie polecam poćwiczyć podstawy JS, jak lubisz książki pisane to mogę Ci polecić swoje pozycje na helionie, a jak wolisz kursy online to polecam kursjs.pl, nie jestem autorem tego ale wg mnie jest o bardzo dobry i ciekawie przygotowany kurs z fajnymi przykładami.

---

Dzięki. To taka moja pasja dodatkowa. Zrobiłem parę stronek, ale opartych na Joomli, a tam nietrudno zmienic jakich margines czy inne rzeczy nawet prostym narzędziem w przeglądarce "zbadaj element".  Troche już mam rozeznania. Uwazam, że jest tyle gotowych kodów i przykładów, że można wklejać i dowoli eksperymentować. Podobnie zrobiłem z kursem Botstraopa. Nie uważam, że jest jakiś trudny. Brakuje mi może trochę cierpliwości. Dzięki oczywiście za wszystkie rady. Jeżeli ktoś może jeszcze podpowiedzieć na temat " jak zrobić minigalerię fotek połączonych bez marginesów, responsywnie oczywiście, ilosc fotek 20 w poziomie i 20 w pionie" to bardzo proszę. Może jakieś linki do podobnych stron. Dzięki z góry za wszystkie rady i wskazówki

Answer 1

Użyłbym Grid'a w Tym wypadku .

https://css-tricks.com/a-grid-of-logos-in-squares/

Jeśli chcesz je mieć połączone krawędziami sugeruję zrezygnować z właściwości gap ;

https://developer.mozilla.org/en-US/docs/Web/CSS/gap

Powodzenia i Pozdrawiam Serdecznie

Comments

Grid bedzie responsywny? Już teraz chyba nie ma innych układów? Z tym, że chciałbym aby tych fotek na stronie docelowo było ok 300-500 i aby po zmniejszeniui się do wersji mobilnej nie byly duzych rozmiarów, aby wlasnie wygladaly mniej wiecej na tym przykladzie, co zrobilem: https://757.ovh/

Po zmniejszeniu sie do wersji na telefon w rzedzie pozostaje 10 fotek, ktore mozna bez problemu powiekszyc. Z tym najwiecej mialem problemów.

---

Cos sobie przypominam, ze tym Gridem sie bawilem wczesniej i wcale nie byl wlasnie responsywny. W kazdym razie nie wychodzily na tel fotki w rzedzie po 10 szt a taki rezultat bym chcial osiagnac.

---

https://css-tricks.com/seamless-responsive-photo-grid/

https://travishorn.com/responsive-grid-in-2-minutes-with-css-grid-layout-4842a41420fe

READ!

Przy okazji Będzie dużo zdjęć to weź się też za optymalizację i wydajność stronki!

https://kinsta.com/blog/optimize-images-for-web/

Answer 2

Wszystko jest tutaj: https://getbootstrap.com/docs/5.0/layout/grid/

Comments

Tak, dzieki, ale tu tylko mozna wstawic 12 kolumn, a ja chciałem docelowo przynajmniej 20. Na takiej podobnej zasadzie zudowalem swoja stronke, ale cos to za wolno chodzi i ma bledy. Nawet przy powiekszaniu fotek, to wszystko nie chodzi jak powinno.

Jak mozna to powiekszanie fotek przy przytrzymaniu myszka wylaczyc na telefonie?