{"id":801,"date":"2020-03-09T13:12:24","date_gmt":"2020-03-09T13:12:24","guid":{"rendered":"https:\/\/devolajf.pl\/?p=801"},"modified":"2020-03-09T13:15:32","modified_gmt":"2020-03-09T13:15:32","slug":"frameworki-css-bootstrap","status":"publish","type":"post","link":"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/","title":{"rendered":"O frameworkach CSS na przyk\u0142adzie Bootstrapa"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"640\" height=\"453\" src=\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/white-board-on-beige-surface-1089842.jpg\" alt=\"\" class=\"wp-image-824\" srcset=\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/white-board-on-beige-surface-1089842.jpg 640w, https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/white-board-on-beige-surface-1089842-300x212.jpg 300w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p><strong>Korzystanie z framework\u00f3w CSS jest codzienno\u015bci\u0105 w bardzo wielu projektach komercyjnych. W mojej opinii nie ma w tym nic z\u0142ego, szczeg\u00f3lnie je\u017celi pracujemy nad rozbudowan\u0105 biznesowo aplikacj\u0105, kt\u00f3ra s\u0142u\u017cy np. do zarz\u0105dzania danymi. Kiedy priorytetem zamawiaj\u0105cego jest przejrzysto\u015b\u0107 i funkcjonalno\u015b\u0107, a oryginalno\u015b\u0107 i wyj\u0105tkowy design nie s\u0105 szczeg\u00f3lnie warto\u015bciowe, u\u017cycie frameworka mo\u017ce znacz\u0105co skr\u00f3ci\u0107 czas wytwarzania oprogramowania.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Spis tre\u015bci<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#framework\">Co to jest framework?<\/a><\/li><li><a href=\"#fwcss\">Frameworki CSS<\/a><\/li><li><a href=\"#bootstrap\">Bootstrap<\/a><\/li><li><a style=\"margin-left: 20px;\" href=\"#adding\">Dodawanie Bootstrapa do projektu<\/a><\/li><li><a style=\"margin-left: 20px;\" href=\"#support\">Wsparcie przegl\u0105darek<\/a><\/li><li><a style=\"margin-left: 20px;\" href=\"#breakpoints\">Breakpointy i responsywno\u015b\u0107<\/a><\/li><li><a style=\"margin-left: 20px;\" href=\"#using\">Korzystanie z Bootstrapa<\/a><\/li><li><a style=\"margin-left: 20px;\" href=\"#containers\">Kontenery<\/a><\/li><li><a style=\"margin-left: 20px;\" href=\"#grid\">Grid<\/a><\/li><li><a style=\"margin-left: 20px;\" href=\"#colors\">Kolory<\/a><\/li><li><a style=\"margin-left: 20px;\" href=\"#headers\">Nag\u0142\u00f3wki<\/a><\/li><li><a style=\"margin-left: 20px;\" href=\"#alerts\">Alerty<\/a><\/li><li><a style=\"margin-left: 20px;\" href=\"#buttons\">Przyciski<\/a><\/li><li><a style=\"margin-left: 20px;\" href=\"#forms\">Proste formularze<\/a><\/li><li><a href=\"#summary\">Podsumowanie<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"framework\">Co to jest framework?<\/h2>\n\n\n\n<p>Framework to zestaw narz\u0119dzi i regu\u0142, kt\u00f3ry z definicji ma wspiera\u0107 efektywno\u015b\u0107 i wydajno\u015b\u0107 pracy swoich u\u017cytkownik\u00f3w. Frameworkiem jest np. Scrum, czyli jedna z metodologii zwinnego wytwarzania oprogramowania. Oferuje u\u017cytkownikom pewne ramy (wytyczne, role, spotkania), kt\u00f3re maj\u0105 prowadzi\u0107 do usprawnienia pracy zespo\u0142u. W praktyce efekt poszczeg\u00f3lnego zespo\u0142u zale\u017cy zawsze od czynnika ludzkiego: interpretacji i adaptacji zasad oraz odpowiedniego wykorzystania narz\u0119dzi.<\/p>\n\n\n\n<p>Nie inaczej sprawa wygl\u0105da z frameworkami wykorzystywanymi przy pisaniu kodu. Tutaj r\u00f3wnie\u017c stopie\u0144 powodzenia zale\u017cy od znajomo\u015bci narz\u0119dzia, prawid\u0142owego wykorzystania oraz umiej\u0119tno\u015bci sprawnego adaptowania pewnych element\u00f3w do w\u0142asnych potrzeb.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"fwcss\">Frameworki CSS<\/h2>\n\n\n\n<p>W \u015bwiecie front-endu frameworki pojawiaj\u0105 si\u0119 i znikaj\u0105 z pr\u0119dko\u015bci\u0105 \u015bwiat\u0142a. S\u0105 jednak taki, kt\u00f3re funkcjonuj\u0105 ju\u017c d\u0142u\u017cszy czas i maj\u0105 si\u0119 dobrze. Przyk\u0142adem tego ostatniego jest w\u0142a\u015bnie Bootstrap. Zadebiutowa\u0142 w sierpniu 2011 roku, obecnie stabiln\u0105 wersj\u0105 jest  4.4.1, a pierwsza beta Bootstrapa 4 ujrza\u0142a \u015bwiat\u0142o dzienne w 2017 roku. W przysz\u0142o\u015bci ma pojawi\u0107 si\u0119 wersja 5, kt\u00f3ra nie b\u0119dzie ju\u017c wspiera\u0142a przegl\u0105darki Internet Explorer 10 oraz nie b\u0119dzie oparta o bibliotek\u0119 JavaScript jQuery <a rel=\"noreferrer noopener\" aria-label=\"1 (otwiera si\u0119 na nowej zak\u0142adce)\" href=\"https:\/\/en.wikipedia.org\/wiki\/Bootstrap_(front-end_framework)\" target=\"_blank\">1<\/a>. Inne popularne frameworki to m. in. <a href=\"https:\/\/get.foundation\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Foundation (otwiera si\u0119 na nowej zak\u0142adce)\">Foundation<\/a>, <a href=\"https:\/\/materializecss.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Materialize  (otwiera si\u0119 na nowej zak\u0142adce)\">Materialize <\/a>czy <a href=\"https:\/\/bulma.io\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Bulma (otwiera si\u0119 na nowej zak\u0142adce)\">Bulma<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bootstrap\">Bootstrap<\/h2>\n\n\n\n<p> W swojej dotychczasowej karierze korzysta\u0142am z Materialize i Bootstrapa, ale to z tym drugim frameworkiem mam o wiele wi\u0119ksze do\u015bwiadczenie. Obecnie wykorzystuj\u0119 jego warianty w aplikacjach pisanych we frameworkach JS Angular i React, czli ng-bootstrap i react-bootstrap. W codziennej pracy Bootstrap jest dla mnie nieoceniony: pisanie r\u0119cznie wszystkich rozwi\u0105za\u0144 by\u0142oby k\u0142opotliwe.<\/p>\n\n\n\n<p><strong>W tym wpisie prezentuj\u0119 wybrane mo\u017cliwo\u015bci tego frameworka i to wy\u0142\u0105cznie te, kt\u00f3re nie wymagaj\u0105 pisania kodu JavaScript<\/strong>. Om\u00f3wione przeze mnie elementy s\u0105 jedynie drobnym wst\u0119pem, poniewa\u017c mo\u017cliwo\u015bci wykorzystania dobrodziejstw tego narz\u0119dzia s\u0105 ogromne. Zainteresowanych odsy\u0142am do bardzo dobrej <a rel=\"noreferrer noopener\" aria-label=\"dokumentacji (otwiera si\u0119 na nowej zak\u0142adce)\" href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\">dokumentacji<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"adding\">Dodawanie Bootstrapa do projektu<\/h3>\n\n\n\n<p>\u017beby skorzysta\u0107 z Bootstrapa w projekcie, nale\u017cy go najpierw do niego do\u0142\u0105czy\u0107. W tym wpisie zupe\u0142nie pomijam rozwa\u017cania dotycz\u0105ce JavaScript czy projekt\u00f3w z Webpackiem, wi\u0119c nie b\u0119d\u0119 rozwija\u0107 tematu instalowania zale\u017cno\u015bci przez managery paczek.<\/p>\n\n\n\n<p>Najprostszym sposobem dodania zasob\u00f3w Bootstrapa do projektu jest <strong>do\u0142\u0105czenie linka do arkusza w sekcji <code>&lt;head><\/code> pliku index.html<\/strong>: (rekomendacja ze strony Bootstrap, wersja na dzie\u0144 9 lutego 2020)<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&lt;link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css\" integrity=\"sha384-ggOyR0iXCbMQv3Xipma34MD+dH\/1fQ784\/j6cY\/iJTQUOhcWr7x9JvoRxT2MZw1T\" crossorigin=\"anonymous\"&gt;<\/code><\/pre>\n\n\n\n<p>Nale\u017cy pami\u0119ta\u0107, aby ten wpis znalaz\u0142 si\u0119 <strong>nad<\/strong> wszystkimi pozosta\u0142ymi stylami. Aktualne linki do CDN mo\u017cna znale\u017a\u0107 <a href=\"https:\/\/www.bootstrapcdn.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"tutaj (otwiera si\u0119 na nowej zak\u0142adce)\">tutaj<\/a>.<\/p>\n\n\n\n<p>Oczywi\u015bcie w tym wypadku pojawienie si\u0119 styl\u00f3w na stronie internetowej uzale\u017cnione jest m. in. od tego czy u\u017cytkownik ma po\u0142\u0105czenie z internetem, jednak z regu\u0142y korzystanie ze stron www wymaga takiego po\u0142\u0105czenia \ud83d\ude09 Zdarza si\u0119 jednak, \u017ce chcemy stron\u0119 testowa\u0107 lokalnie i je\u017celi przypadkowo b\u0119dziemy offline, to style si\u0119 nie za\u0142aduj\u0105.<\/p>\n\n\n\n<p>Istnieje r\u00f3wnie\u017c mo\u017cliwo\u015b\u0107 <strong>pobrania paczki z plikami Bootstrapowymi i do\u0142\u0105czenie ich do swojego projektu<\/strong>. Aktualne pliki mo\u017cna pobra\u0107 <a href=\"https:\/\/getbootstrap.com\/docs\/4.4\/getting-started\/download\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"st\u0105d (otwiera si\u0119 na nowej zak\u0142adce)\">st\u0105d<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"support\">Wsparcie przegl\u0105darek<\/h3>\n\n\n\n<p>Bootstrap ca\u0142kiem dobrze wspiera wy\u015bwietlanie na r\u00f3\u017cnych sprz\u0119tach i przegl\u0105darkach. Wystarczy spojrze\u0107 na deklarowane wsparcie:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"627\" src=\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-4-1024x627.jpg\" alt=\"\" class=\"wp-image-804\" srcset=\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-4-1024x627.jpg 1024w, https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-4-300x184.jpg 300w, https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-4-768x470.jpg 768w, https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-4.jpg 1223w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Oczywi\u015bcie jak zwykle mog\u0105 zdarzy\u0107 si\u0119 problemy, szczeg\u00f3lnie ze wsparciem starszych wersji Internet Exporer, na szcz\u0119\u015bcie jej u\u017cywanie przesta\u0142o by\u0107 standardem. Podobnie jest z mniej popularnymi przegl\u0105darkami. Informacje o najcz\u0119stszych problemach s\u0105 dost\u0119pne w dokumentacji frameworka: <a rel=\"noreferrer noopener\" aria-label=\"link (otwiera si\u0119 na nowej zak\u0142adce)\" href=\"https:\/\/getbootstrap.com\/docs\/4.0\/getting-started\/browsers-devices\/#supported-browsers\" target=\"_blank\">link<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"breakpoints\">Breakpointy i responsywno\u015b\u0107<\/h3>\n\n\n\n<p>Bootstrap umo\u017cliwia dostosowanie layoutu do wielu urz\u0105dze\u0144. W tym celu oferuje tzw. breakpointy, czyli przedzia\u0142y szeroko\u015bci wy\u015bwietlaczy, dla kt\u00f3rych mo\u017cemy dostosowywa\u0107 layout. Z uwagi na to, \u017ce Bootstrap zosta\u0142 opracowany zgodnie z podej\u015bciem <em>mobile first<\/em> (projektowanie, kt\u00f3re za punkt wyj\u015bcia stawia urz\u0105dzenia mobilne, co powinno przek\u0142ada\u0107 si\u0119 na prze\u0142o\u017cenie \u015brodka ci\u0119\u017cko\u015bci na tre\u015b\u0107), domy\u015ble warto\u015bci s\u0105 r\u00f3wnowa\u017cne z najmniejszym breakpointem na skali: XS.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>XS (extra small)  &lt; 576px<\/li><li>S (small)  \u2265 576px<\/li><li>MD (medium)  \u2265 768px<\/li><li>L (large)  \u2265 992px<\/li><li>XL (extra large)  \u2265 1200px<\/li><\/ul>\n\n\n\n<p>Breakpointy dzia\u0142aj\u0105 zatem w taki spos\u00f3b, \u017ce chc\u0105c np. zadeklarowa\u0107 warto\u015b\u0107 wybranej w\u0142a\u015bciwo\u015bci na 1 dla XS i S, a dla M, L i XL ustawi\u0107 warto\u015b\u0107 2, nale\u017cy jedynie zadeklarowa\u0107 w\u0142a\u015bciwo\u015b\u0107 dla XS oraz nadpisa\u0107 dla M. Pozosta\u0142e brekpointy &#8222;odziedzicz\u0105&#8221; warto\u015bci po tych &#8222;z do\u0142u&#8221;.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"using\">Korzystanie z Bootstrapa<\/h3>\n\n\n\n<p>Jak wykorzysta\u0107 Bootstrapa w praktyce? W oryginalnym wydaniu operuje on na klasach css (inaczej jest np. w react-bootstrap) oraz na selektorach element\u00f3w. Oznacza to, \u017ce je\u017celi chc\u0119 u\u017cy\u0107 jakiego\u015b ustawienia dla mojego elementu, to najcz\u0119\u015bciej <strong>w jego atrybucie <code>[class]<\/code> dopisuj\u0119 klas\u0119, kt\u00f3r\u0105 do\u0142\u0105czy\u0142am do projektu w arkuszu styl\u00f3w w moim index.html<\/strong>.<\/p>\n\n\n\n<p>Sk\u0105d wzi\u0105\u0107 te klasy? Zosta\u0142y opisane w <a rel=\"noreferrer noopener\" aria-label=\"dokumentacji (otwiera si\u0119 na nowej zak\u0142adce)\" href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\">dokumentacji<\/a>, r\u00f3wnie\u017c w tym artykule podam gar\u015b\u0107 przyk\u0142ad\u00f3w.<\/p>\n\n\n\n<p>Dobrym sposobem sprawdzenia co tak naprawd\u0119 kryje si\u0119 za dan\u0105 klas\u0105, jest zerkni\u0119cie w arkusz styl\u00f3w. Ten zaimportowany z CDN jest zminifikowany (ma usuni\u0119te wszystkie spacje, entery, wci\u0119cia: nie da si\u0119 go czyta\u0107), ale z adresu mo\u017cna usun\u0105\u0107 fragment .min i uzyska\u0107 adres do wersji bez minifikacji:<\/p>\n\n\n\n<p><a href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.css\">https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.css<\/a><\/p>\n\n\n\n<p>Jest o tyle przydatne, \u017ce czasem chcemy nadpisa\u0107 jedn\u0105 lub dwie deklaracje i dobrze wiedzie\u0107 w kt\u00f3rej klasie si\u0119 znajduj\u0105.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"containers\">Kontenery<\/h3>\n\n\n\n<p>Kontenery to najbardziej podstawowe elementy layoutu Bootstrapa. Ich u\u017cycie jest konieczne do poprawnego korzystania z grida (nast\u0119pny akapit). Bootstrap oferuje trzy rodzaje kontener\u00f3w:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>.container<\/code> &#8211; klasa, kt\u00f3ra ustawia warto\u015b\u0107 w\u0142a\u015bciwo\u015bci max-width dla ka\u017cdego z breakpoint\u00f3w<\/li><li><code>.container-fluid<\/code> &#8211; klasa, kt\u00f3rej szeroko\u015b\u0107 to zawsze 100% szeroko\u015bci dla ka\u017cdego z breakpoint\u00f3w<\/li><li><code>.container-{breakpoint}<\/code> &#8211; klasa, kt\u00f3ra nadaje szeroko\u015b\u0107 100% dla wybranego breakpointu (w miejsce {breakpoint} nale\u017cy wstawi\u0107 skr\u00f3t nazwy breakpointu, czyli np. .container-md)<\/li><\/ul>\n\n\n\n<p>W praktyce r\u00f3\u017cnice s\u0105 nast\u0119puj\u0105ce:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&lt;div class=\"container\"&gt;<br>  &lt;p&gt;Lorem ipsum...&lt;\/p&gt;<br>&lt;\/div&gt;<br>&lt;div class=\"container-fluid\"&gt;<br>  &lt;p&gt;Lorem ipsum...&lt;\/p&gt;<br>&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"980\" height=\"842\" src=\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-5.jpg\" alt=\"\" class=\"wp-image-807\" srcset=\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-5.jpg 980w, https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-5-300x258.jpg 300w, https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-5-768x660.jpg 768w\" sizes=\"(max-width: 980px) 100vw, 980px\" \/><\/figure>\n\n\n\n<p>Pierwszy element z klas\u0105 container nie zajmuje ca\u0142ej szeroko\u015bci rodzica. Je\u017celi prze\u015bledzimy style Bootstrapa to zauwa\u017cymy, \u017ce do styl\u00f3w<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>.container {\n  width: 100%;\n  padding-right: 15px;\n  padding-left: 15px;\n  margin-right: auto;\n  margin-left: auto;\n}<\/code><\/pre>\n\n\n\n<p>&#8222;gratisem&#8221; otrzymali\u015bmy jeszcze<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>@media (min-width: 768px) {\n  .container {\n    max-width: 720px;\n  }\n}<\/code><\/pre>\n\n\n\n<p>Niech Was nie przera\u017ca zapis <code>@media<\/code>: oznacza on, \u017ce poni\u017cszy kod stosuje si\u0119 do element\u00f3w o klasie <code>.container<\/code> dla urz\u0105dze\u0144 o minimalnej szeroko\u015bci 768 pikseli (wi\u0119cej napisz\u0119 o tym we wpisie o responsywno\u015bci).<\/p>\n\n\n\n<p>Oczywi\u015bcie tekst z drugiego akapitu r\u00f3wnie\u017c nie jest idealnie &#8222;przyklejony&#8221; do bok\u00f3w, poniewa\u017c klasa <code>.container-fluid<\/code> zapewnia 15px paddingu (marginesu wewn\u0119trznego) z lewej i prawej strony kontenera.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"grid\">Grid<\/h3>\n\n\n\n<p>Grid to nic innego jak siatka z\u0142o\u017cona z rz\u0119d\u00f3w i kolumn. Za pomoc\u0105 siatki mo\u017cemy zaplanowa\u0107 uk\u0142ad element\u00f3w na stronie oraz wyr\u00f3wnywa\u0107 je wzgl\u0119dem siebie.<\/p>\n\n\n\n<p>Grid w Bootsrapie oferuje mo\u017cliwo\u015b\u0107 podzielenia strony na maksymalnie 12 kolumn. Nie oznacza to, \u017ce wszystkie 12 trzeba wykorzysta\u0107: mo\u017cna np. podzieli\u0107 stron\u0119 na 3 sekcje-kolumny, z kt\u00f3rych ka\u017cda b\u0119dzie mia\u0142a szeroko\u015b\u0107 4, poniewa\u017c 3 x 4 = 12. Przyk\u0142ady:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&lt;div class=\"container\"&gt;<br>  &lt;div class=\"row\"&gt;<br>    &lt;div class=\"col-12\"&gt;col-12&lt;\/div&gt;<br>  &lt;\/div&gt;<br>  &lt;div class=\"row\"&gt;<br>    &lt;div class=\"col-4\"&gt;col-4&lt;\/div&gt;<br>    &lt;div class=\"col-4\"&gt;col-4&lt;\/div&gt;<br>    &lt;div class=\"col-4\"&gt;col-4&lt;\/div&gt;<br>  &lt;\/div&gt;<br>  &lt;div class=\"row\"&gt;<br>    &lt;div class=\"col-3\"&gt;col-3&lt;\/div&gt;<br>    &lt;div class=\"col-3\"&gt;col-3&lt;\/div&gt;<br>    &lt;div class=\"col-3\"&gt;col-3&lt;\/div&gt;<br>    &lt;div class=\"col-3\"&gt;col-3&lt;\/div&gt;<br>  &lt;\/div&gt;<br>&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"332\" src=\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-6-1024x332.jpg\" alt=\"\" class=\"wp-image-812\" srcset=\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-6-1024x332.jpg 1024w, https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-6-300x97.jpg 300w, https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-6-768x249.jpg 768w, https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-6.jpg 1381w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>W przypadku kiedy w ka\u017cdym z layout\u00f3w (wersji mobilnej, desktopowej itd). chcemy uzyska\u0107 ten sam r\u00f3wny efekt, wystarczy w klasie ka\u017cdego elementu <code>&lt;div&gt;<\/code> wstawi\u0107 klas\u0119 <code>.col<\/code> bez dodatkowego oznaczenia liczby kolumn &#8211; Bootstrap automatyczne podzieli szeroko\u015b\u0107 na r\u00f3wne cz\u0119\u015bci.<\/p>\n\n\n\n<p>Je\u017celi jednak w layouty maj\u0105 si\u0119 r\u00f3\u017cni\u0107 nale\u017cy nadpisa\u0107 klasy mobilne klasami dla desktopu itd.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&lt;div class=\"container\"&gt;\n  &lt;div class=\"row\"&gt;\n    &lt;div class=\"col-12\"&gt;col-12&lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;div class=\"row\"&gt;\n    &lt;div class=\"col-12&nbsp;col-md-4\"&gt;.col-12&nbsp;.col-md-4&lt;\/div&gt;\n    &lt;div class=\"col-12&nbsp;col-md-4\"&gt;.col-12&nbsp;.col-md-4&lt;\/div&gt;\n    &lt;div class=\"col-12&nbsp;col-md-4 &gt;.col-12&nbsp;.col-md-4&lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;div class=\"row\"&gt;\n    &lt;div class=\"col-3\"&gt;col-3&lt;\/div&gt;\n    &lt;div class=\"col-3\"&gt;col-3&lt;\/div&gt;\n    &lt;div class=\"col-3\"&gt;col-3&lt;\/div&gt;\n    &lt;div class=\"col-3\"&gt;col-3&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"415\" height=\"695\" src=\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-7.jpg\" alt=\"\" class=\"wp-image-813\" srcset=\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-7.jpg 415w, https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-7-179x300.jpg 179w\" sizes=\"(max-width: 415px) 100vw, 415px\" \/><\/figure><\/div>\n\n\n\n<p>W gridzie mo\u017cemy wykorzysta\u0107 tzw. <strong>offeset<\/strong>, czyli przerw\u0119 o szeroko\u015bci wybranej liczby kolumn. Offset stosuje si\u0119 w elemencie, <strong>przed kt\u00f3rym<\/strong> ma si\u0119 znale\u017a\u0107 odst\u0119p:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&lt;div class=\"container\"&gt;\n  &lt;div class=\"row\"&gt;\n    &lt;div class=\"col-1\"&gt;.col-1&lt;\/div&gt;\n    &lt;div class=\"col-10 offset-1\"&gt;.col-10&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"833\" height=\"140\" src=\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-8.jpg\" alt=\"\" class=\"wp-image-815\" srcset=\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-8.jpg 833w, https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-8-300x50.jpg 300w, https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-8-768x129.jpg 768w\" sizes=\"(max-width: 833px) 100vw, 833px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"colors\">Kolory<\/h3>\n\n\n\n<p>Bootstrap oferuje swoj\u0105 domy\u015bl\u0105 palet\u0119 kolorystyczn\u0105. Ka\u017cdy z kolor\u00f3w ma swoj\u0105 nazw\u0119, kolejno: primary, secondary, success, danger, warning, info, etc. Domy\u015bln\u0105 kolorystyk\u0119 dobrze ilustruje poni\u017cszy przyk\u0142ad:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-10-1024x640.jpg\" alt=\"\" class=\"wp-image-818\" srcset=\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-10-1024x640.jpg 1024w, https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-10-300x188.jpg 300w, https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-10-768x480.jpg 768w, https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-10.jpg 1156w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Podobnie kolor tekstu lub link\u00f3w z oznaczeniem primary, secondary, etc b\u0119dzie kolorystycznie taki sam jak na powy\u017cszym przyk\u0142adzie. Dla przyk\u0142adu, kod:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&lt;p&nbsp;class=\"text-danger&nbsp;bg-info\"&gt;.text-danger&nbsp;.bg-info&lt;\/p&gt;<br>&lt;a&nbsp;href=\"#\"&nbsp;class=\"bg-success&nbsp;text-light\"&gt;.bg-success&nbsp;.text-light&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>da efekt w postaci:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"314\" height=\"131\" src=\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-11.jpg\" alt=\"\" class=\"wp-image-819\" srcset=\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-11.jpg 314w, https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-11-300x125.jpg 300w\" sizes=\"(max-width: 314px) 100vw, 314px\" \/><\/figure><\/div>\n\n\n\n<p>Dlaczego drugi element ma t\u0142o wy\u0142\u0105cznie pod tekstem, a nie tak jak element pierwszy na ca\u0142ej szeroko\u015bci? Poniewa\u017c element <code>&lt;p&gt;<\/code> jest elementem blokowym (<code>display: block;<\/code>) i domy\u015blnie jego szeroko\u015b\u0107 to 100%, a element <code>&lt;a&gt;<\/code> to element liniowy (<code>display: inline;<\/code>) i jego szeroko\u015b\u0107 r\u00f3wna jest szeroko\u015bci jego zawarto\u015bci.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"headers\">Nag\u0142\u00f3wki<\/h3>\n\n\n\n<p>Aby uzyska\u0107 stylowanie nag\u0142\u00f3wk\u00f3w wystarczy u\u017cy\u0107 odpowiedniego znacznika, np. <code>&lt;h2&gt;<\/code> lub u\u017cy\u0107 odpowiedniej klasy, w tym przypadku <code>.h2<\/code>. To dlatego, \u017ce w arkuszu styl\u00f3w Boostrapa znajdziemy zapis:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>h2, .h2 {\n  font-size: 2rem;\n}<\/code><\/pre>\n\n\n\n<p>Zatem dla kodu<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&lt;h2&gt;Nag\u0142\u00f3wek&lt;\/h2&gt;<br>&lt;p class=\"h2\"&gt;Nag\u0142\u00f3wek - akapit&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>efekt b\u0119dzie nast\u0119puj\u0105cy:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"378\" height=\"145\" src=\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-9.jpg\" alt=\"\" class=\"wp-image-816\" srcset=\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-9.jpg 378w, https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-9-300x115.jpg 300w\" sizes=\"(max-width: 378px) 100vw, 378px\" \/><\/figure><\/div>\n\n\n\n<p>Czy zatem oba zapisy s\u0105 r\u00f3wnowa\u017cne? <strong>Absolutnie nie!<\/strong> Jak pisa\u0142am w tek\u015bcie na temat <a rel=\"noreferrer noopener\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\" href=\"https:\/\/devolajf.pl\/html-css\/jak-uzywac-html-semantycznie\/#headers\" target=\"_blank\">semantycznego kodu HTML<\/a> nag\u0142\u00f3wki (w postaci element\u00f3w, tj. <code>&lt;h1&gt;<\/code>, <code>&lt;h2&gt;<\/code>, etc.) powinny stanowi\u0107 logiczn\u0105 struktur\u0119 odzwierciedlaj\u0105c\u0105 hierarchi\u0119 tre\u015bci na stronie, a nag\u0142\u00f3wek <code>&lt;h1&gt;<\/code> mo\u017ce wyst\u0105pi\u0107 tylko jeden raz.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"alerts\">Alerty<\/h3>\n\n\n\n<p>Alerty to zdefiniowany z Bootstrapie spos\u00f3b komunikowania u\u017cytkownikowi pewnych istotnych tre\u015bci w postaci tekstu w kolorowych ramkach. Na przyk\u0142ad:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&lt;div&nbsp;class=\"alert&nbsp;alert-primary\"&nbsp;role=\"alert\"&gt;<\/code>\n<code>  .alert&nbsp;.alert-primary<\/code>\n<code>&lt;\/div&gt;\n&lt;div class=\"alert alert-danger\" role=\"alert\"&gt;<\/code>\n<code>  .alert .alert-danger<\/code>\n<code>&lt;\/div&gt;\n&lt;div class=\"alert alert-success\" role=\"alert\"&gt;<\/code>\n<code>  .alert .alert-success<\/code>\n<code>&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>wy\u015bwietli si\u0119 w przegl\u0105darce Chrome nast\u0119puj\u0105co:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"379\" height=\"265\" src=\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-12.jpg\" alt=\"\" class=\"wp-image-820\" srcset=\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-12.jpg 379w, https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-12-300x210.jpg 300w\" sizes=\"(max-width: 379px) 100vw, 379px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"buttons\">Przyciski<\/h3>\n\n\n\n<p>Buttony s\u0105 elementem prawie ka\u017cdej strony czy aplikacji internetowej, kt\u00f3ra umo\u017cliwia interakcje z u\u017cytkownikiem. Bootstrap umo\u017cliwia nadawanie im uniwersalnych styl\u00f3w, nie tylko kolorystycznych.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&lt;button type=\"button\" class=\"btn btn-info\"&gt;\n  .btn .btn-info\n&lt;\/button&gt;\n&lt;button&nbsp;type=\"button\"&nbsp;class=\"btn&nbsp;btn-link\"&gt;\n  .btn&nbsp;.btn-link\n&lt;\/button&gt;\n&lt;button&nbsp;type=\"button\"&nbsp;class=\"btn&nbsp;btn-success&nbsp;btn-lg\"&gt;\n  .btn&nbsp;.btn-success&nbsp;.btn-lg\n&lt;\/button&gt;\n&lt;button type=\"button\" class=\"btn btn-secondary btn-sm\"&gt;\n  .btn .btn-secondary .btn-sm\n&lt;\/button&gt;\n&lt;button type=\"button\" class=\"btn btn-danger btn-lg btn-block\"&gt;\n  .btn .btn-danger .btn-lg .btn-block\n&lt;\/button&gt;<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"417\" height=\"347\" src=\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-13.jpg\" alt=\"\" class=\"wp-image-821\" srcset=\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-13.jpg 417w, https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture-13-300x250.jpg 300w\" sizes=\"(max-width: 417px) 100vw, 417px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"forms\">Proste formularze<\/h3>\n\n\n\n<p>Boostrap oferuje gotowe przyk\u0142ady u\u017cycia dla wi\u0119kszych partii kodu, ni\u017c tylko pojedyncze elementy, jak np. paski nawigacji czy rozwijane menu. Cz\u0119\u015b\u0107 z nich wymaga dodania kodu JavaScript, jednak sam wygl\u0105d p\u00f3l jest sterowany wy\u0142\u0105cznie za pomoc\u0105 kodu HTML i klas CSS.<\/p>\n\n\n\n<p>Jednym z przyk\u0142ad\u00f3w mo\u017cliwych do zastosowania grup element\u00f3w s\u0105 formularze. Poni\u017cej prezentuj\u0119 kod oraz widok prostego formularza, kt\u00f3ry mo\u017ce s\u0142u\u017cy\u0107 do rejestracji. Sk\u0142ada si\u0119 z pola email, has\u0142a, powt\u00f3rnego has\u0142a oraz checkboxa do potwierdzania zaznajomienia si\u0119 z regulaminem, do kt\u00f3rego prowadzi \u0142\u0105cze.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&lt;form&gt;\n  &lt;div&nbsp;class=\"form-group\"&gt;\n    &lt;label&nbsp;for=\"emailInput\"&gt;Adres&nbsp;email&lt;\/label&gt;\n    &lt;input&nbsp;type=\"email\"&nbsp;class=\"form-control\"&nbsp;id=\"emailInput\"&gt;\n  &lt;\/div&gt;\n  &lt;div&nbsp;class=\"form-group\"&gt;\n    &lt;label&nbsp;for=\"passwordInput\"&gt;Has\u0142o&lt;\/label&gt;\n    &lt;input&nbsp;type=\"password\"&nbsp;class=\"form-control\"&nbsp;id=\"passwordInput\"<\/code>\n<code>    aria-describedby=\"passwordHelp\"&gt;\n    &lt;small&nbsp;id=\"passwordHelp\"&nbsp;class=\"form-text&nbsp;text-muted\"&gt;\n      Has\u0142o&nbsp;musi&nbsp;zawiera\u0107&nbsp;cyfry,&nbsp;litery&nbsp;i&nbsp;znaki&nbsp;specjalne\n    &lt;\/small&gt;\n  &lt;\/div&gt;\n  &lt;div&nbsp;class=\"form-group\"&gt;\n    &lt;label&nbsp;for=\"passwordInputRepeat\"&gt;\n      Powt\u00f3rz&nbsp;has\u0142o\n    &lt;\/label&gt;\n    &lt;input&nbsp;type=\"password\"&nbsp;class=\"form-control\"<\/code>\n<code>    id=\"passwordInputRepeat\"&gt;\n  &lt;\/div&gt;\n  &lt;div&nbsp;class=\"form-group&nbsp;form-check\"&gt;\n    &lt;input&nbsp;type=\"checkbox\"&nbsp;class=\"form-check-input\" id=\"rulesCheck\"&gt;\n    &lt;label&nbsp;class=\"form-check-label\"&nbsp;for=\"rulesCheck\"&gt;\n      Akceptuj\u0119&nbsp;a&nbsp;href=\"#\"&gt;regulamin\/a&gt;\n    &lt;\/label&gt;\n  &lt;\/div&gt;\n  &lt;button&nbsp;type=\"submit\"&nbsp;class=\"btn&nbsp;btn-primary\"&gt;Zapisz\/button&gt;\n&lt;\/form&gt; <\/code><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"446\" height=\"489\" src=\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture2.jpg\" alt=\"\" class=\"wp-image-823\" srcset=\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture2.jpg 446w, https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/Capture2-274x300.jpg 274w\" sizes=\"(max-width: 446px) 100vw, 446px\" \/><\/figure><\/div>\n\n\n\n<p>Ten rozbudowany przyk\u0142ad zawiera kilka interesuj\u0105cych klas. Np <code>.form-control<\/code> to:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>.form-control {\n  display: block;\n  width: 100%;\n  height: calc(1.5em + 0.75rem + 2px);\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  color: #495057;\n  background-color: #fff;\n  background-clip: padding-box;\n  border: 1px solid #ced4da;\n  border-radius: 0.25rem;\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}<\/code><\/pre>\n\n\n\n<p>Klasa zawiera do\u015b\u0107 sporo dyrektyw i szczeg\u00f3\u0142owo doprecyzowuje wygl\u0105d elementu i jego lement\u00f3w-potomnych. To jednak nie wszystko: klasa <code>.form-control<\/code> w akruszu styl\u00f3w Bootstrapa wyst\u0119puje 73 razy i pozosta\u0142e u\u017cycia definiuj\u0105 stany formularza np. w r\u00f3\u017cnych rozdzielczo\u015bciach oraz czy przy u\u017cyciu r\u00f3\u017cnych pseudo-klas, np. <code>:focus<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"summary\">Podsumowanie<\/h2>\n\n\n\n<p>Podkre\u015blam raz jeszcze: Bootstrap to pot\u0119\u017cne narz\u0119dzie z wieloma mo\u017cliwo\u015bciami, kt\u00f3rych jedynie skromny wierzcho\u0142ek zaprezentowa\u0142am w tek\u015bcie powy\u017cej. Mam nadziej\u0119, \u017ce tym samym zach\u0119ci\u0142am do w\u0142asnego eksplorowania tego frameworka \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Korzystanie z framework\u00f3w CSS jest codzienno\u015bci\u0105 w bardzo wielu projektach komercyjnych. W mojej opinii nie ma w tym nic z\u0142ego, szczeg\u00f3lnie je\u017celi pracujemy nad rozbudowan\u0105 biznesowo aplikacj\u0105, kt\u00f3ra s\u0142u\u017cy np. do zarz\u0105dzania danymi. Kiedy priorytetem zamawiaj\u0105cego jest przejrzysto\u015b\u0107 i funkcjonalno\u015b\u0107, a oryginalno\u015b\u0107 i wyj\u0105tkowy design nie s\u0105 szczeg\u00f3lnie warto\u015bciowe, u\u017cycie frameworka mo\u017ce znacz\u0105co skr\u00f3ci\u0107 czas&hellip; <br \/> <a class=\"read-more\" href=\"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/\">Dowiedz si\u0119 wi\u0119cej<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-801","post","type-post","status-publish","format-standard","hentry","category-html-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>O frameworkach CSS na przyk\u0142adzie Bootstrapa - devolajf.pl<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"O frameworkach CSS na przyk\u0142adzie Bootstrapa - devolajf.pl\" \/>\n<meta property=\"og:description\" content=\"Korzystanie z framework\u00f3w CSS jest codzienno\u015bci\u0105 w bardzo wielu projektach komercyjnych. W mojej opinii nie ma w tym nic z\u0142ego, szczeg\u00f3lnie je\u017celi pracujemy nad rozbudowan\u0105 biznesowo aplikacj\u0105, kt\u00f3ra s\u0142u\u017cy np. do zarz\u0105dzania danymi. Kiedy priorytetem zamawiaj\u0105cego jest przejrzysto\u015b\u0107 i funkcjonalno\u015b\u0107, a oryginalno\u015b\u0107 i wyj\u0105tkowy design nie s\u0105 szczeg\u00f3lnie warto\u015bciowe, u\u017cycie frameworka mo\u017ce znacz\u0105co skr\u00f3ci\u0107 czas&hellip; Dowiedz si\u0119 wi\u0119cej\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"devolajf.pl\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/devolajf\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/devolajf\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-09T13:12:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-03-09T13:15:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/white-board-on-beige-surface-1089842.jpg\" \/>\n<meta name=\"author\" content=\"Arleta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Napisane przez\" \/>\n\t<meta name=\"twitter:data1\" content=\"Arleta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/\"},\"author\":{\"name\":\"Arleta\",\"@id\":\"https:\/\/devolajf.pl\/#\/schema\/person\/1c79b6d35197441e328180fb66e66106\"},\"headline\":\"O frameworkach CSS na przyk\u0142adzie Bootstrapa\",\"datePublished\":\"2020-03-09T13:12:24+00:00\",\"dateModified\":\"2020-03-09T13:15:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/\"},\"wordCount\":1831,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/devolajf.pl\/#\/schema\/person\/1c79b6d35197441e328180fb66e66106\"},\"image\":{\"@id\":\"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/white-board-on-beige-surface-1089842.jpg\",\"articleSection\":[\"HTML i CSS od postaw\"],\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/\",\"url\":\"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/\",\"name\":\"O frameworkach CSS na przyk\u0142adzie Bootstrapa - devolajf.pl\",\"isPartOf\":{\"@id\":\"https:\/\/devolajf.pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/white-board-on-beige-surface-1089842.jpg\",\"datePublished\":\"2020-03-09T13:12:24+00:00\",\"dateModified\":\"2020-03-09T13:15:32+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/#primaryimage\",\"url\":\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/white-board-on-beige-surface-1089842.jpg\",\"contentUrl\":\"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/white-board-on-beige-surface-1089842.jpg\",\"width\":640,\"height\":453},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/devolajf.pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"O frameworkach CSS na przyk\u0142adzie Bootstrapa\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/devolajf.pl\/#website\",\"url\":\"https:\/\/devolajf.pl\/\",\"name\":\"devolajf.pl\",\"description\":\"\u015bcie\u017cka pocz\u0105tkuj\u0105cego programisty\",\"publisher\":{\"@id\":\"https:\/\/devolajf.pl\/#\/schema\/person\/1c79b6d35197441e328180fb66e66106\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/devolajf.pl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/devolajf.pl\/#\/schema\/person\/1c79b6d35197441e328180fb66e66106\",\"name\":\"Arleta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/devolajf.pl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/devolajf.pl\/wp-content\/uploads\/2023\/09\/cropped-devolajf-white.png\",\"contentUrl\":\"https:\/\/devolajf.pl\/wp-content\/uploads\/2023\/09\/cropped-devolajf-white.png\",\"width\":803,\"height\":194,\"caption\":\"Arleta\"},\"logo\":{\"@id\":\"https:\/\/devolajf.pl\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/devolajf\"],\"url\":\"https:\/\/devolajf.pl\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"O frameworkach CSS na przyk\u0142adzie Bootstrapa - devolajf.pl","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/","og_locale":"pl_PL","og_type":"article","og_title":"O frameworkach CSS na przyk\u0142adzie Bootstrapa - devolajf.pl","og_description":"Korzystanie z framework\u00f3w CSS jest codzienno\u015bci\u0105 w bardzo wielu projektach komercyjnych. W mojej opinii nie ma w tym nic z\u0142ego, szczeg\u00f3lnie je\u017celi pracujemy nad rozbudowan\u0105 biznesowo aplikacj\u0105, kt\u00f3ra s\u0142u\u017cy np. do zarz\u0105dzania danymi. Kiedy priorytetem zamawiaj\u0105cego jest przejrzysto\u015b\u0107 i funkcjonalno\u015b\u0107, a oryginalno\u015b\u0107 i wyj\u0105tkowy design nie s\u0105 szczeg\u00f3lnie warto\u015bciowe, u\u017cycie frameworka mo\u017ce znacz\u0105co skr\u00f3ci\u0107 czas&hellip; Dowiedz si\u0119 wi\u0119cej","og_url":"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/","og_site_name":"devolajf.pl","article_publisher":"https:\/\/www.facebook.com\/devolajf","article_author":"https:\/\/www.facebook.com\/devolajf","article_published_time":"2020-03-09T13:12:24+00:00","article_modified_time":"2020-03-09T13:15:32+00:00","og_image":[{"url":"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/white-board-on-beige-surface-1089842.jpg","type":"","width":"","height":""}],"author":"Arleta","twitter_card":"summary_large_image","twitter_misc":{"Napisane przez":"Arleta","Szacowany czas czytania":"13 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/#article","isPartOf":{"@id":"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/"},"author":{"name":"Arleta","@id":"https:\/\/devolajf.pl\/#\/schema\/person\/1c79b6d35197441e328180fb66e66106"},"headline":"O frameworkach CSS na przyk\u0142adzie Bootstrapa","datePublished":"2020-03-09T13:12:24+00:00","dateModified":"2020-03-09T13:15:32+00:00","mainEntityOfPage":{"@id":"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/"},"wordCount":1831,"commentCount":1,"publisher":{"@id":"https:\/\/devolajf.pl\/#\/schema\/person\/1c79b6d35197441e328180fb66e66106"},"image":{"@id":"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/white-board-on-beige-surface-1089842.jpg","articleSection":["HTML i CSS od postaw"],"inLanguage":"pl-PL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/","url":"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/","name":"O frameworkach CSS na przyk\u0142adzie Bootstrapa - devolajf.pl","isPartOf":{"@id":"https:\/\/devolajf.pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/#primaryimage"},"image":{"@id":"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/white-board-on-beige-surface-1089842.jpg","datePublished":"2020-03-09T13:12:24+00:00","dateModified":"2020-03-09T13:15:32+00:00","breadcrumb":{"@id":"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/#primaryimage","url":"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/white-board-on-beige-surface-1089842.jpg","contentUrl":"https:\/\/devolajf.pl\/wp-content\/uploads\/2020\/03\/white-board-on-beige-surface-1089842.jpg","width":640,"height":453},{"@type":"BreadcrumbList","@id":"https:\/\/devolajf.pl\/html-css\/frameworki-css-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/devolajf.pl\/"},{"@type":"ListItem","position":2,"name":"O frameworkach CSS na przyk\u0142adzie Bootstrapa"}]},{"@type":"WebSite","@id":"https:\/\/devolajf.pl\/#website","url":"https:\/\/devolajf.pl\/","name":"devolajf.pl","description":"\u015bcie\u017cka pocz\u0105tkuj\u0105cego programisty","publisher":{"@id":"https:\/\/devolajf.pl\/#\/schema\/person\/1c79b6d35197441e328180fb66e66106"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/devolajf.pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":["Person","Organization"],"@id":"https:\/\/devolajf.pl\/#\/schema\/person\/1c79b6d35197441e328180fb66e66106","name":"Arleta","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/devolajf.pl\/#\/schema\/person\/image\/","url":"https:\/\/devolajf.pl\/wp-content\/uploads\/2023\/09\/cropped-devolajf-white.png","contentUrl":"https:\/\/devolajf.pl\/wp-content\/uploads\/2023\/09\/cropped-devolajf-white.png","width":803,"height":194,"caption":"Arleta"},"logo":{"@id":"https:\/\/devolajf.pl\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/www.facebook.com\/devolajf"],"url":"https:\/\/devolajf.pl\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/devolajf.pl\/wp-json\/wp\/v2\/posts\/801","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devolajf.pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devolajf.pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devolajf.pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devolajf.pl\/wp-json\/wp\/v2\/comments?post=801"}],"version-history":[{"count":15,"href":"https:\/\/devolajf.pl\/wp-json\/wp\/v2\/posts\/801\/revisions"}],"predecessor-version":[{"id":1055,"href":"https:\/\/devolajf.pl\/wp-json\/wp\/v2\/posts\/801\/revisions\/1055"}],"wp:attachment":[{"href":"https:\/\/devolajf.pl\/wp-json\/wp\/v2\/media?parent=801"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devolajf.pl\/wp-json\/wp\/v2\/categories?post=801"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devolajf.pl\/wp-json\/wp\/v2\/tags?post=801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}