{"id":5904,"date":"2018-03-28T11:31:20","date_gmt":"2018-03-28T11:31:20","guid":{"rendered":"https:\/\/www.templatemonster.com\/pl\/blog\/?p=5904"},"modified":"2021-08-25T15:18:25","modified_gmt":"2021-08-25T15:18:25","slug":"bootstrap-3","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/pl\/bootstrap-3\/","title":{"rendered":"Bootstrap 3: system siatki i zapytania medi\u00f3w"},"content":{"rendered":"<p>Wszyscy znamy o&nbsp;Bootstrap, poniewa\u017c jest to najpopularniejszy&nbsp;web framework o otwartym kodzie \u017ar\u00f3d\u0142owym. Mark Otto i Jacob Thorton stworzyli jeden z najpot\u0119\u017cniejszych framework\u00f3w CSS&nbsp;na \u015bwiecie.<\/p>\n<p>Po wydaniu Bootstrap w wersji 3, najciekawsz\u0105 zmian\u0105 by\u0142a r\u00f3\u017cnica w systemach siatki. Bootstrap 2 oferowa\u0142 dwa r\u00f3\u017cne rozmiary przegl\u0105darek (desktop\u00a0i mobile). A Bootstrap 3\u00a0jest zorientowany na urz\u0105dzenia mobilne i jego system grid pozwala tworzy\u0107 r\u00f3\u017cne siatki na podstawie rozmiaru przegl\u0105darki. Podobny trend obserwuje si\u0119 w najnowszej wersji frameworka - wydaniu alfa Bootstrap 4.<\/p>\n<style scoped=\"\">.box-722 .box-gray{background-color:#f8f8ff}<\/style>\n<\/p>\n<div class=\"cherry-box box-722\">\n<div class=\"box-gray inner\">\n<h4 style=\"text-align: center;\"><strong>Tworzenie responsywnych stron: jakie masz opcje? [Darmowa e-ksi\u0105\u017cka]<\/strong><\/h4>\n<p style=\"text-align: center;\"><input id=\"mce-EMAIL newsletter-form-email\" class=\"required email\" style=\"width: 380px; margin-right: 5px;\" name=\"EMAIL\" type=\"email\" value=\"\" placeholder=\"email address\"><\/p>\n<div id=\"mc_embed_signup_1\">\n<form id=\"mc-embedded-subscribe-form newsletter-form\" class=\"validate newsletter clearfix\" action=\"\/\/templatemonster.us7.list-manage.com\/subscribe\/post?u=3bc1e714b0df279c78546cb08&amp;id=007e27cd69\" method=\"post\" name=\"mc-embedded-subscribe-form\" novalidate=\"\">\n<div id=\"mc_embed_signup_scroll\">\n<div class=\"mc-field-group\">\n<p class=\"aligncenter\" style=\"text-align: center;\"><input id=\"mc-embedded-subscribe\" class=\"btn btn-primary btn-normal btn-inline\" name=\"subscribe\" type=\"submit\" value=\"Pobierz!\"><\/p>\n<\/div>\n<div id=\"mce-responses\" class=\"clear\"><\/div>\n<div style=\"position: absolute; left: -5000px;\"><input id=\"newsletter-form-email\" tabindex=\"-1\" name=\"b_3bc1e714b0df279c78546cb08_007e27cd69\" type=\"text\" value=\"\"><\/div>\n<\/div>\n<\/form>\n<\/div>\n<\/div>\n<\/div>\n<hr class=\"wp-block-separator\"\/>\n<figure class=\"wp-block-table\">\n<table>\n<tbody>\n<tr>\n<td>\n<h4>Bootstrap 2<\/h4>\n<\/td>\n<td>\n<h4>Bootstrap 3<\/h4>\n<\/td>\n<td>\n<h4>Bootstrap 4<\/h4>\n<\/td>\n<\/tr>\n<tr>\n<td>Utworzona siatka dzia\u0142a na pulpitach, a nast\u0119pnie uk\u0142ada si\u0119 jedna na drug\u0105, gdy rozmiar przegl\u0105darki wynosi mniej ni\u017c 767 pikseli. Taa metoda ogranicza prac\u0119, poniewa\u017c mo\u017cna zdefiniowa\u0107 tylko 1 siatk\u0119 w przegl\u0105darkach o rozmiarze pulpitu.<\/td>\n<td>Nowy system siatki Bootstrap jest zorientowany na urz\u0105dzenia mobilne. Okre\u015blasz rozmiar siatki, kt\u00f3ry jest siatk\u0105 <strong>dla tego i wi\u0119kszych rozmiar\u00f3w ekranu.<\/strong><\/td>\n<td>Najnowsza wersja Bootstrap oferuje ulepszony system sitaki z now\u0105 warstw\u0105. Dodatkowo, zosta\u0142y zaktualizowane&nbsp; <strong>wstawki semantyczne<\/strong>. Od teraz mo\u017cna uzyska\u0107 dost\u0119p do wszystkich niezb\u0119dnych wstawek.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n<hr class=\"wp-block-separator\"\/>\n<h4>Przyk\u0142ady kilku kilkukolumnowego uk\u0142adu w Bootstrap 3<\/h4>\n<p>Na pocz\u0105tku mo\u017ce to by\u0107 troch\u0119 trudne do zrozumienia, wi\u0119c oto przyk\u0142ad. Powiedzmy, \u017ce chcesz stron\u0119, kt\u00f3ra ma:<\/p>\n<ul>\n<li>1-kolumnowy uk\u0142ad na bardzo ma\u0142ych urz\u0105dzeniach<\/li>\n<li>2-kolumnowy uk\u0142ad na urz\u0105dzeniach o ma\u0142ym I \u015brednim rozmiarze<\/li>\n<li>4-kolumnowy uk\u0142ad na du\u017cych urz\u0105dzeniach<\/li>\n<\/ul>\n<p>Poniewa\u017c system siatki teraz kaskaduje si\u0119 z urz\u0105dze\u0144 mobilnych, kod b\u0119dzie wygl\u0105da\u0142 tak:<\/p>\n<figure class=\"wp-block-table\">\n<table>\n<tbody>\n<tr>\n<td>To cz\u0119\u015b\u0107 naszej siatki.<\/td>\n<td>To cz\u0119\u015b\u0107 naszej siatki.<\/td>\n<td>To cz\u0119\u015b\u0107 naszej siatki.<\/td>\n<\/tr>\n<tr>\n<td>To cz\u0119\u015b\u0107 naszej siatki.<\/td>\n<td>&nbsp;<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n<p>Nie musimy definiowa\u0107 niczego dla bardzo ma\u0142ych urz\u0105dze\u0144, poniewa\u017c domy\u015blnie dla nich jest ustawiony jedno kolumnowy uk\u0142ad. Musimy okre\u015bli\u0107 rozmiar siatki dla ma\u0142ych urz\u0105dze\u0144, a <strong>nie dla urz\u0105dze\u0144 \u015brednich<\/strong>. Je\u015bli wi\u0119c zdefiniujesz rozmiar w ma\u0142ych urz\u0105dze\u0144, to b\u0119dzie to rozmiar siatki dla <strong>ma\u0142ych<\/strong>, <strong>\u015brednich<\/strong> i <strong>du\u017cych<\/strong> urz\u0105dze\u0144.<\/p>\n<hr class=\"wp-block-separator\"\/>\n<h3 class=\"aligncenter\">Rozmiary siatek<\/h3>\n<p>To najlepsza cz\u0119\u015b\u0107 nowego systemu. Dost\u0119pne s\u0105 Msiatki dla 4 r\u00f3\u017cnych rozmiar\u00f3w ekranu. Poni\u017cej znajduje si\u0119 zestawienie r\u00f3\u017cnych rozmiar\u00f3w.<\/p>\n<pre class=\"wp-block-code\"><code>&lt;div class=\"wp_syntax\">\r\n&lt;table>\r\n&lt;tbody>\r\n&lt;tr>\r\n&lt;td class=\"code\">\r\n&lt;pre class=\"php\" style=\"font-family: monospace;\">&lt;span style=\"color: #339933;\">&lt;span class=\"sumo_twilighter_highlighted twilighter-299735e9\" style=\"background-color: rgba(17, 0, 0, 0.15); cursor: inherit;\">.&lt;\/span>&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-299735e9\" style=\"background-color: rgba(17, 0, 0, 0.15); cursor: inherit;\">col&lt;\/span>&lt;span style=\"color: #339933;\">&lt;span class=\"sumo_twilighter_highlighted twilighter-299735e9\" style=\"background-color: rgba(17, 0, 0, 0.15); cursor: inherit;\">-&lt;\/span>&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-299735e9\" style=\"background-color: rgba(17, 0, 0, 0.15); cursor: inherit;\">xs&lt;\/span>&lt;span style=\"color: #339933;\">&lt;span class=\"sumo_twilighter_highlighted twilighter-299735e9\" style=\"background-color: rgba(17, 0, 0, 0.15); cursor: inherit;\">-&lt;\/span>&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-299735e9\" style=\"background-color: rgba(17, 0, 0, 0.15); cursor: inherit;\">$\tBardzo ma\u0142e&amp;nbsp; &amp;nbsp;Telefony z ekranem mniej ni\u017c 768px&lt;span class=\"sumo_twilighter_shares\">1&lt;\/span>&lt;\/span>\r\n&lt;span style=\"color: #339933;\">&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"background-color: rgba(17, 0, 0, 0.15);\">.&lt;\/span>&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"background-color: rgba(17, 0, 0, 0.15);\">col&lt;\/span>&lt;span style=\"color: #339933;\">&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"background-color: rgba(17, 0, 0, 0.15);\">-&lt;\/span>&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"background-color: rgba(17, 0, 0, 0.15);\">sm&lt;\/span>&lt;span style=\"color: #339933;\">&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"background-color: rgba(17, 0, 0, 0.15);\">-&lt;\/span>&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"background-color: rgba(17, 0, 0, 0.15);\">$\tMa\u0142e urz\u0105dzenia&amp;nbsp; &amp;nbsp;Tablety z ekranem o 768px i wi\u0119cej\r\n&lt;\/span>&lt;span style=\"color: #339933;\">&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"background-color: rgba(17, 0, 0, 0.15);\">.&lt;\/span>&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"background-color: rgba(17, 0, 0, 0.15);\">col&lt;\/span>&lt;span style=\"color: #339933;\">&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"background-color: rgba(17, 0, 0, 0.15);\">-&lt;\/span>&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"background-color: rgba(17, 0, 0, 0.15);\">md&lt;\/span>&lt;span style=\"color: #339933;\">&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"background-color: rgba(17, 0, 0, 0.15);\">-&lt;\/span>&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"background-color: rgba(17, 0, 0, 0.15);\">$\t\u015arednie urz\u0105dzenia&amp;nbsp; &amp;nbsp;Komputery z ekranem o 992px i wi\u0119cej&lt;\/span>\r\n&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"background-color: rgba(17, 0, 0, 0.15);\">.&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"background-color: rgba(17, 0, 0, 0.15);\">col&lt;\/span>&lt;span style=\"color: #339933;\">&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"background-color: rgba(17, 0, 0, 0.15);\">-&lt;\/span>&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"background-color: rgba(17, 0, 0, 0.15);\">lg&lt;\/span>&lt;span style=\"color: #339933;\">&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"background-color: rgba(17, 0, 0, 0.15);\">-&lt;\/span>&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"background-color: rgba(17, 0, 0, 0.15);\">$&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;Du\u017ce urz\u0105dzenia&amp;nbsp; &amp;nbsp;Komputery z ekranem o 1200px i wi\u0119cej&lt;\/span>&lt;\/pre>\r\n&lt;\/td>\r\n&lt;\/tr>\r\n&lt;\/tbody>\r\n&lt;\/table>\r\n&lt;\/div><\/code><\/pre>\n<p><a href=\"https:\/\/getbootstrap.com\/docs\/3.3\/css\/\" target=\"_blank\" rel=\"nofollow\">Oficjalna dokumentacja Bootstrap<\/a>&nbsp;oferuje znacznie bardziej wszechstronne zrozumienie dzia\u0142ania siatki. Przyczytaj j\u0105, aby uzyska\u0107 bardziej szczeg\u00f3lowy przegl\u0105d rozmiar\u00f3w kolumn, maksymalnych rozmiar\u00f3w kolumn i maksymalnej szeroko\u015bci ca\u0142ej witryny na podstawie rozmiaru przegl\u0105darki.<\/p>\n<hr class=\"wp-block-separator\"\/>\n<h4 class=\"aligncenter\">Domy\u015blne rozmiary dla siatki Bootstrap<\/h4>\n<p>Czasami musisz u\u017cy\u0107 zapyta\u0144 medi\u00f3w, aby strona dzia\u0142a\u0142a tak, jak chcesz. Znajomo\u015b\u0107 domy\u015blnych rozmiar\u00f3w siatki jest niezb\u0119dna do rozszerzenia siatki Bootstrap. Napisali\u015bmy kr\u00f3tk\u0105 wskaz\u00f3wk\u0119, aby wy\u015bwietli\u0107 domy\u015blne rozmiary, wi\u0119c zobacz, czy potrzebujesz Bootstrap zapyta\u0144 medi\u00f3w i punkt\u00f3w przerwania.<\/p>\n<hr class=\"wp-block-separator\"\/>\n<h4 class=\"aligncenter\">Bootstrap 3 Punkty przerwania w zapytaniach medi\u00f3w<\/h4>\n<p>Bootstrap 3 to&nbsp;front-end framework zorientowany na urz\u0105dzenia mobilne. Poni\u017cej zamie\u015bci\u0142am prawid\u0142ow\u0105 kolejno\u015b\u0107 zapyta\u0144 medi\u00f3w, a na samym dole umie\u015bci\u0142am tak\u017ce nieprzywieraj\u0105ce pierwsze punkty przerw w przypadku, gdy niekt\u00f3rzy nie s\u0105 przyzwyczajeni do metodologii mobilnej, poniewa\u017c technicznie oba b\u0119d\u0105 dzia\u0142ali. <strong>Min-Width<\/strong>: odnosi si\u0119 do wszystkiego, co jest wi\u0119ksze lub r\u00f3wne podanej warto\u015bci. <strong>Max-Width<\/strong>: odnosi si\u0119 do wszystkiego mniej lub r\u00f3wne podanej warto\u015bci.<\/p>\n<div class=\"is-layout-flex wp-container-2 wp-block-columns\">\n<div class=\"is-layout-flow wp-block-column\" style=\"flex-basis:100%\">\n<pre class=\"wp-block-code\"><code>&lt;div class=\"wp_syntax\">\r\n&lt;table>\r\n&lt;tbody>\r\n&lt;tr>\r\n&lt;td class=\"code\">\r\n&lt;pre class=\"php\" style=\"font-family: monospace;\">&lt;span style=\"color: #666666; font-style: italic;\">\/*==================================================\r\n=            Bootstrap 3 Zapytania medi\u00f3w             =\r\n==================================================*\/&lt;\/span>\r\n&amp;nbsp;\r\n&amp;nbsp;\r\n&amp;nbsp;\r\n&amp;nbsp;\r\n\t&lt;span style=\"color: #666666; font-style: italic;\">\/*==========  Akcent na urz\u0105dzeniach mobilnych  ==========*\/&lt;\/span>\r\n&amp;nbsp;\r\n\t&lt;span style=\"color: #666666; font-style: italic;\">\/*Niestandardowe, iPhone Retina *\/&lt;\/span>\r\n\t&lt;span style=\"color: #339933;\">@&lt;\/span>media only screen and &lt;span style=\"color: #009900;\">(&lt;\/span>min&lt;span style=\"color: #339933;\">-&lt;\/span>width &lt;span style=\"color: #339933;\">:&lt;\/span> 320px&lt;span style=\"color: #009900;\">)&lt;\/span>&lt;span style=\"color: #009900;\">{&lt;\/span>\r\n&amp;nbsp;\r\n\t&lt;span style=\"color: #009900;\">}&lt;\/span>\r\n&amp;nbsp;\r\n\t&lt;span style=\"color: #666666; font-style: italic;\">\/* Bardzo ma\u0142e urz\u0105dzenia, telefony *\/&lt;\/span>\r\n\t&lt;span style=\"color: #339933;\">@&lt;\/span>media only screen and &lt;span style=\"color: #009900;\">(&lt;\/span>min&lt;span style=\"color: #339933;\">-&lt;\/span>width &lt;span style=\"color: #339933;\">:&lt;\/span> 480px&lt;span style=\"color: #009900;\">)&lt;\/span>&lt;span style=\"color: #009900;\">{&lt;\/span>\r\n&amp;nbsp;\r\n\t&lt;span style=\"color: #009900;\">}&lt;\/span>\r\n&amp;nbsp;\r\n\t&lt;span style=\"color: #666666; font-style: italic;\">\/* Ma\u0142e urz\u0105dzenia, tablety *\/&lt;\/span>\r\n\t&lt;span style=\"color: #339933;\">@&lt;\/span>media only screen and &lt;span style=\"color: #009900;\">(&lt;\/span>min&lt;span style=\"color: #339933;\">-&lt;\/span>width &lt;span style=\"color: #339933;\">:&lt;\/span> 768px&lt;span style=\"color: #009900;\">)&lt;\/span>&lt;span style=\"color: #009900;\">{&lt;\/span>\r\n&amp;nbsp;\r\n\t&lt;span style=\"color: #009900;\">}&lt;\/span>\r\n&amp;nbsp;\r\n\t&lt;span style=\"color: #666666; font-style: italic;\">\/* \u015arednie urz\u0105dzenia, komputery stacjonarne *\/&lt;\/span>\r\n\t&lt;span style=\"color: #339933;\">@&lt;\/span>media only screen and &lt;span style=\"color: #009900;\">(&lt;\/span>min&lt;span style=\"color: #339933;\">-&lt;\/span>width &lt;span style=\"color: #339933;\">:&lt;\/span> 992px&lt;span style=\"color: #009900;\">)&lt;\/span>&lt;span style=\"color: #009900;\">{&lt;\/span>\r\n&amp;nbsp;\r\n\t&lt;span style=\"color: #009900;\">}&lt;\/span>\r\n&amp;nbsp;\r\n\t&lt;span style=\"color: #666666; font-style: italic;\">\/* Du\u017ce urz\u0105dzenia, szerokie ekrany *\/&lt;\/span>\r\n\t&lt;span style=\"color: #339933;\">@&lt;\/span>media only screen and &lt;span style=\"color: #009900;\">(&lt;\/span>min&lt;span style=\"color: #339933;\">-&lt;\/span>width &lt;span style=\"color: #339933;\">:&lt;\/span> 1200px&lt;span style=\"color: #009900;\">)&lt;\/span>&lt;span style=\"color: #009900;\">{&lt;\/span>\r\n&amp;nbsp;\r\n\t&lt;span style=\"color: #009900;\">}&lt;\/span>\r\n&amp;nbsp;\r\n&amp;nbsp;\r\n&amp;nbsp;\r\n\t&lt;span style=\"color: #666666; font-style: italic;\">\/*==========  Metoda Non-Mobile  ==========*\/&lt;\/span>\r\n&amp;nbsp;\r\n\t&lt;span style=\"color: #666666; font-style: italic;\">\/* Du\u017ce urz\u0105dzenia, szerokie ekrany *\/&lt;\/span>\r\n\t&lt;span style=\"color: #339933;\">@&lt;\/span>media only screen and &lt;span style=\"color: #009900;\">(&lt;\/span>max&lt;span style=\"color: #339933;\">-&lt;\/span>width &lt;span style=\"color: #339933;\">:&lt;\/span> 1200px&lt;span style=\"color: #009900;\">)&lt;\/span>&lt;span style=\"color: #009900;\">{&lt;\/span>\r\n&amp;nbsp;\r\n\t&lt;span style=\"color: #009900;\">}&lt;\/span>\r\n&amp;nbsp;\r\n\t&lt;span style=\"color: #666666; font-style: italic;\">\/* \u015arednie urz\u0105dzenia, komputery stacjonarne*\/&lt;\/span>\r\n\t&lt;span style=\"color: #339933;\">@&lt;\/span>media only screen and &lt;span style=\"color: #009900;\">(&lt;\/span>max&lt;span style=\"color: #339933;\">-&lt;\/span>width &lt;span style=\"color: #339933;\">:&lt;\/span> 992px&lt;span style=\"color: #009900;\">)&lt;\/span>&lt;span style=\"color: #009900;\">{&lt;\/span>\r\n&amp;nbsp;\r\n\t&lt;span style=\"color: #009900;\">}&lt;\/span>\r\n&amp;nbsp;\r\n\t&lt;span style=\"color: #666666; font-style: italic;\">\/* Ma\u0142e urz\u0105dzenia, tablety *\/&lt;\/span>\r\n\t&lt;span style=\"color: #339933;\">@&lt;\/span>media only screen and &lt;span style=\"color: #009900;\">(&lt;\/span>max&lt;span style=\"color: #339933;\">-&lt;\/span>width &lt;span style=\"color: #339933;\">:&lt;\/span> 768px&lt;span style=\"color: #009900;\">)&lt;\/span>&lt;span style=\"color: #009900;\">{&lt;\/span>\r\n&amp;nbsp;\r\n\t&lt;span style=\"color: #009900;\">}&lt;\/span>\r\n&amp;nbsp;\r\n\t&lt;span style=\"color: #666666; font-style: italic;\">\/* Bardzo ma\u0142e urz\u0105dzenia, telefony *\/&lt;\/span>\r\n\t&lt;span style=\"color: #339933;\">@&lt;\/span>media only screen and &lt;span style=\"color: #009900;\">(&lt;\/span>max&lt;span style=\"color: #339933;\">-&lt;\/span>width &lt;span style=\"color: #339933;\">:&lt;\/span> 480px&lt;span style=\"color: #009900;\">)&lt;\/span>&lt;span style=\"color: #009900;\">{&lt;\/span>\r\n&amp;nbsp;\r\n\t&lt;span style=\"color: #009900;\">}&lt;\/span>\r\n&amp;nbsp;\r\n\t&lt;span style=\"color: #666666; font-style: italic;\">\/* Niestandardowe, iPhone Retina *\/&lt;\/span>\r\n\t&lt;span style=\"color: #339933;\">@&lt;\/span>media only screen and &lt;span style=\"color: #009900;\">(&lt;\/span>max&lt;span style=\"color: #339933;\">-&lt;\/span>width &lt;span style=\"color: #339933;\">:&lt;\/span> 320px&lt;span style=\"color: #009900;\">)&lt;\/span>&lt;span style=\"color: #009900;\">{&lt;\/span>\r\n&amp;nbsp;\r\n\t&lt;span style=\"color: #009900;\">}&lt;\/span>&lt;\/pre>\r\n&lt;\/td>\r\n&lt;\/tr>\r\n&lt;\/tbody>\r\n&lt;\/table>\r\n&lt;\/div><\/code><\/pre>\n<\/div>\n<\/div>\n<hr class=\"wp-block-separator\"\/>\n<h4 class=\"aligncenter\">Bootstrap 2.3.2 Punkty przerwania w zapytaniach&nbsp;medi\u00f3w<\/h4>\n<pre class=\"wp-block-code\"><code>&lt;div class=\"wp_syntax\">\r\n&lt;table>\r\n&lt;tbody>\r\n&lt;tr>\r\n&lt;td class=\"code\">\r\n&lt;pre class=\"php\" style=\"font-family: monospace;\">&lt;span style=\"color: #666666; font-style: italic;\">\/*=====================================================\r\n=            Bootstrap 2.3.2 Zapytania medi\u00f3w            =\r\n=====================================================*\/&lt;\/span>\r\n&lt;span style=\"color: #339933;\">@&lt;\/span>media only screen and &lt;span style=\"color: #009900;\">(&lt;\/span>max&lt;span style=\"color: #339933;\">-&lt;\/span>width &lt;span style=\"color: #339933;\">:&lt;\/span> 1200px&lt;span style=\"color: #009900;\">)&lt;\/span>&lt;span style=\"color: #009900;\">{&lt;\/span>\r\n&amp;nbsp;\r\n&lt;span style=\"color: #009900;\">}&lt;\/span>\r\n&amp;nbsp;\r\n&lt;span style=\"color: #339933;\">@&lt;\/span>media only screen and &lt;span style=\"color: #009900;\">(&lt;\/span>max&lt;span style=\"color: #339933;\">-&lt;\/span>width &lt;span style=\"color: #339933;\">:&lt;\/span> 979px&lt;span style=\"color: #009900;\">)&lt;\/span>&lt;span style=\"color: #009900;\">{&lt;\/span>\r\n&amp;nbsp;\r\n&lt;span style=\"color: #009900;\">}&lt;\/span>\r\n&amp;nbsp;\r\n&lt;span style=\"color: #339933;\">@&lt;\/span>media only screen and &lt;span style=\"color: #009900;\">(&lt;\/span>max&lt;span style=\"color: #339933;\">-&lt;\/span>width &lt;span style=\"color: #339933;\">:&lt;\/span> 767px&lt;span style=\"color: #009900;\">)&lt;\/span>&lt;span style=\"color: #009900;\">{&lt;\/span>\r\n&amp;nbsp;\r\n&lt;span style=\"color: #009900;\">}&lt;\/span>\r\n&amp;nbsp;\r\n&lt;span style=\"color: #339933;\">@&lt;\/span>media only screen and &lt;span style=\"color: #009900;\">(&lt;\/span>max&lt;span style=\"color: #339933;\">-&lt;\/span>width &lt;span style=\"color: #339933;\">:&lt;\/span> 480px&lt;span style=\"color: #009900;\">)&lt;\/span>&lt;span style=\"color: #009900;\">{&lt;\/span>\r\n&amp;nbsp;\r\n&lt;span style=\"color: #009900;\">}&lt;\/span>\r\n&amp;nbsp;\r\n&lt;span style=\"color: #339933;\">@&lt;\/span>media only screen and &lt;span style=\"color: #009900;\">(&lt;\/span>max&lt;span style=\"color: #339933;\">-&lt;\/span>width &lt;span style=\"color: #339933;\">:&lt;\/span> 320px&lt;span style=\"color: #009900;\">)&lt;\/span>&lt;span style=\"color: #009900;\">{&lt;\/span>\r\n&amp;nbsp;\r\n&lt;span style=\"color: #009900;\">}&lt;\/span>&lt;\/pre>\r\n&lt;\/td>\r\n&lt;\/tr>\r\n&lt;\/tbody>\r\n&lt;\/table>\r\n&lt;\/div><\/code><\/pre>\n<hr class=\"wp-block-separator\"\/>\n<h4 class=\"aligncenter\">Responsywne narz\u0119dzia<\/h4>\n<p>Podobnie jak Bootstrap 2, Bootstrap 3 udost\u0119pnia narz\u0119dzia do reagowania na ukrywanie i&nbsp;wy\u015bwietlanie element\u00f3w w oparciu o rozmiar przegl\u0105darki. Pomo\u017ce nam to r\u00f3wnie\u017c w zdefiniowaniu naszego systemu siatki.<\/p>\n<pre class=\"wp-block-code\"><code>&lt;div class=\"wp_syntax\">\r\n&lt;table>\r\n&lt;tbody>\r\n&lt;tr>\r\n&lt;td class=\"code\">\r\n&lt;pre class=\"php\" style=\"font-family: monospace;\">&lt;span style=\"color: #339933;\">.&lt;\/span>visible&lt;span style=\"color: #339933;\">-&lt;\/span>xs\r\n&lt;span style=\"color: #339933;\">.&lt;\/span>visible&lt;span style=\"color: #339933;\">-&lt;\/span>sm\r\n&lt;span style=\"color: #339933;\">.&lt;\/span>visible&lt;span style=\"color: #339933;\">-&lt;\/span>md\r\n&lt;span style=\"color: #339933;\">.&lt;\/span>visible&lt;span style=\"color: #339933;\">-&lt;\/span>lg\r\n&lt;span style=\"color: #339933;\">.&lt;\/span>hidden&lt;span style=\"color: #339933;\">-&lt;\/span>xs\r\n&lt;span style=\"color: #339933;\">.&lt;\/span>hidden&lt;span style=\"color: #339933;\">-&lt;\/span>sm\r\n&lt;span style=\"color: #339933;\">.&lt;\/span>hidden&lt;span style=\"color: #339933;\">-&lt;\/span>md\r\n&lt;span style=\"color: #339933;\">.&lt;\/span>hidden&lt;span style=\"color: #339933;\">-&lt;\/span>lg&lt;\/pre>\r\n&lt;\/td>\r\n&lt;\/tr>\r\n&lt;\/tbody>\r\n&lt;\/table>\r\n&lt;\/div><\/code><\/pre>\n<p>Pomaga to, poniewa\u017c mo\u017cemy pokaza\u0107 pewne elementy na podstawie rozmiaru. W naszych dzisiejszych przyk\u0142adach poka\u017cemy dodatkowy pasek boczny na du\u017cych ekranach.<\/p>\n<hr class=\"wp-block-separator\"\/>\n<h3 class=\"aligncenter\">Przyk\u0142ady<\/h3>\n<p>Oto kilka przyk\u0142ad\u00f3w siatek, kt\u00f3re mo\u017cesz stworzy\u0107. Przejrzymy kilka podstawowych stron, kt\u00f3re mog\u0105 zainteresowa\u0107 Ci\u0119 i poka\u017cemy, jak \u0142atwo mo\u017cna stworzy\u0107 t\u0119 witryn\u0119 za pomoc\u0105 siatki Bootstrap 3.<\/p>\n<hr class=\"wp-block-separator\"\/>\n<h4 class=\"aligncenter\">Proste: Du\u017cy&nbsp;ekran komputera&nbsp;a telefon kom\u00f3rkowy<\/h4>\n<p>Za\u0142\u00f3\u017cmy, \u017ce chcesz, aby witryna zawiera\u0142a <strong>1-kolumnowy<\/strong> uk\u0142ad&nbsp;na&nbsp;bardzo ma\u0142ych urz\u0105dzeniach (telefon) i ma\u0142ych (tablety), <strong>2-kolumnowy<\/strong> - na \u015brednich (\u015brednie ekrany komputer\u00f3w) i <strong>4-kolumnowy<\/strong> - na du\u017cych (komputery stacjonarne).<\/p>\n<figure class=\"wp-block-table\">\n<table>\n<tbody>\n<tr>\n<td>Du\u017ce urz\u0105dzenia<\/td>\n<td>Du\u017ce urz\u0105dzenia<\/td>\n<td>Du\u017ce urz\u0105dzenia<\/td>\n<td>Du\u017ce urz\u0105dzenia<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n<p>Tak b\u0119dzie wygl\u0105da\u0142 kod:<\/p>\n<pre class=\"wp-block-code\"><code>&lt;div class=\"row\">\n&lt;div class=\"col-md-6 col-lg-3\">\n&lt;div class=\"visible-lg text-success\">Du\u017ce urz\u0105dzenia!&lt;\/div>\n&lt;div class=\"visible-md text-warning\">\u015arednie urz\u0105dzenia!&lt;\/div>\n&lt;div class=\"visible-sm text-primary\">Male urz\u0105dzenia!&lt;\/div>\n&lt;div class=\"visible-xs visible-sm text-danger\">Bardzo male urz\u0105dzenia i male urz\u0105dzenia&lt;\/div>\n&lt;\/div>\n&lt;div class=\"col-md-6 col-lg-3\">\n&lt;div class=\"visible-lg text-success\">Du\u017ce urz\u0105dzenia!&lt;\/div>\n&lt;div class=\"visible-md text-warning\">\u015arednie urz\u0105dzenia!&lt;\/div>\n&lt;div class=\"visible-sm text-primary\">Male urz\u0105dzenia&lt;\/div>\n&lt;div class=\"visible-xs visible-sm text-danger\">Bardzo male urz\u0105dzenia i male urz\u0105dzenia&lt;\/div>\n&lt;\/div>\n&lt;div class=\"col-md-6 col-lg-3\">\n&lt;div class=\"visible-lg text-success\">Du\u017ce urz\u0105dzenia!&lt;\/div>\n&lt;div class=\"visible-md text-warning\">\u015arednie urz\u0105dzenia!&lt;\/div>\n&lt;div class=\"visible-sm text-primary\">Male urz\u0105dzenia&lt;\/div>\n&lt;div class=\"visible-xs visible-sm text-danger\">Bardzo male urz\u0105dzenia i male urz\u0105dzenia&lt;\/div>\n&lt;\/div>\n&lt;div class=\"col-md-6 col-lg-3\">\n&lt;div class=\"visible-lg text-success\">Du\u017ce urz\u0105dzenia!&lt;\/div>\n&lt;div class=\"visible-md text-warning\">\u015arednie urz\u0105dzenia!&lt;\/div>\n&lt;div class=\"visible-sm text-primary\">Male urz\u0105dzenia&lt;\/div>\n&lt;div class=\"visible-xs visible-sm text-danger\">Bardzo male urz\u0105dzenia i male urz\u0105dzenia&lt;\/div>\n&lt;\/div>\n&lt;\/div><\/code><\/pre>\n<hr class=\"wp-block-separator\"\/>\n<h4 class=\"aligncenter\">Intermediate:&nbsp;Wy\u015bwietlanie&nbsp; dodatkowej kolumny na du\u017cych komputerach<\/h4>\n<p>Jest to interesuj\u0105cy przyk\u0142ad, na kt\u00f3rym wida\u0107 zalety nowej wersji frameworka. Za\u0142\u00f3\u017cmy, \u017ce masz witryn\u0119 z bocznym paskiem i g\u0142\u00f3wn\u0105 sekcj\u0105 tre\u015bci.&nbsp;<strong>Dla bardzo ma\u0142ych urz\u0105dze\u0144<\/strong>&nbsp;chcia\u0142by\u015b ustaw\u0107 &nbsp;1-kolumnowy uk\u0142ad - g\u0142\u00f3wna zawarto\u015b\u0107 z u\u0142o\u017conym poni\u017cej paskiem bocznym.&nbsp;<strong>Dla ma\u0142ych i \u015brednich<\/strong> -&nbsp; aby pasek boczny i g\u0142\u00f3wne tre\u015bci by\u0142y ustawione obok siebie.&nbsp;<strong>Dla du\u017cych urz\u0105dze\u0144<\/strong>&nbsp;- chcia\u0142by\u015b wykorzysta\u0107 przestrze\u0144 na wi\u0119kszych urz\u0105dzeniach, oraz dodatkowy pasek boczny, by pokaza\u0107 wi\u0119cej tre\u015bci. Ustawiamy 6-kolumnowy uk\u0142ad dla g\u0142\u00f3wnej zawarto\u015bci na du\u017cych urz\u0105dzeniach, aby zrobi\u0107 miejsce na drugi pasek boczny. To \u015bwietny spos\u00f3b na wykorzystanie przestrzeni na wi\u0119kszych komputerach.<\/p>\n<figure class=\"wp-block-table\">\n<table>\n<tbody>\n<tr>\n<td>G\u0142\u00f3wna tre\u015b\u0107<\/td>\n<td>G\u0142\u00f3wny pasek boczny<\/td>\n<td>Dodatkowy pasek boczny,<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>&nbsp;<\/td>\n<td>&nbsp;kt\u00f3ry pojawia si\u0119 tylko na DU\u017bYCH urz\u0105dzeniach.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n<p>A oto kod dla tego przyk\u0142adu.<\/p>\n<pre class=\"wp-block-code\"><code>&lt;div class=\"row\">\r\n&lt;div class=\"col-sm-9 col-lg-6 text-danger\">\r\nG\u0142\u00f3wna tre\u015b\u0107.\r\n&lt;\/div>\r\n&lt;div class=\"col-sm-3 text-warning\">\r\nG\u0142\u00f3wny pasek boczny.\r\n&lt;\/div>\r\n&lt;div class=\"col-lg-3 visible-lg text-success\">\r\nDodatkowy pasek boczny kt\u00f3ry pojawia si\u0119 tylko na DU\u017bYCH urz\u0105dzeniach.\r\n&lt;\/div>\r\n&lt;\/div><\/code><\/pre>\n<hr class=\"wp-block-separator\"\/>\n<h4 class=\"aligncenter\">Zaawansowane: r\u00f3\u017cne siatki dla ka\u017cdego rozmiaru<\/h4>\n<p>To b\u0119dzie bardziej z\u0142o\u017cony przyk\u0142ad. Powiedzmy, \u017ce w \u017cadnym punkcie naszego systemu siatki nie chcemy, aby wszystkie nasze kolumny by\u0142y u\u0142o\u017cone w stos. Dla <strong>bardzo ma\u0142ych urz\u0105dze\u0144<\/strong> potrzebujemy 2-kolumnowego uk\u0142adu. Dla <strong>ma\u0142ych urz\u0105dze\u0144<\/strong> -&nbsp;3-kolumnowy. Dla <strong>\u015brednich urz\u0105dze\u0144<\/strong>&nbsp;- 4 kolumnowy. Aw przypadku <strong>du\u017cych urz\u0105dze\u0144<\/strong> potrzebujemy 6 kolumnowego uk\u0142adu (jednokolumnowy wy\u015bwietlany tylko na du\u017cych urz\u0105dzeniach).<\/p>\n<figure class=\"wp-block-table\">\n<table>\n<tbody>\n<tr>\n<td>Tre\u015b\u0107!<\/td>\n<td>Tre\u015b\u0107!<\/td>\n<td>Tre\u015b\u0107!<\/td>\n<td>Tre\u015b\u0107!<\/td>\n<td>Tre\u015b\u0107!<\/td>\n<td>Tre\u015b\u0107, widoczna tylko na du\u017cych urz\u0105dzeniach!<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n<p>Tak b\u0119dzie wygl\u0105da\u0142 kod:<\/p>\n<pre class=\"wp-block-code\"><code>&lt;div class=\"row\">\r\n&lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\">\r\nTre\u015b\u0107!\r\n&lt;\/div>\r\n&lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\">\r\nTre\u015b\u0107!\r\n&lt;\/div>\r\n&lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\">\r\nTre\u015b\u0107!\r\n&lt;\/div>\r\n&lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\">\r\nTre\u015b\u0107!\r\n&lt;\/div>\r\n&lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\">\r\nTre\u015b\u0107!\r\n&lt;\/div>\r\n&lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2 visible-lg\">\r\nTre\u015b\u0107, widoczna tylko na du\u017cych urz\u0105dzeniach!\r\n&lt;\/div>\r\n&lt;\/div><\/code><\/pre>\n<p>Jak wida\u0107, \u017ce wraz ze zmniejszaniem rozmiaru przegl\u0105darki zaczynaj\u0105 si\u0119 formowa\u0107 kolumny i zaczyna uk\u0142ada\u0107 si\u0119 zawart\u015b\u0107 w nich.<\/p>\n<hr class=\"wp-block-separator\"\/>\n<p><em>Ten artyku\u0142 zosta\u0142 przet\u0142umaczony z angielskiego. Orygina\u0142 mo\u017cna znale\u017a\u0107 tutaj:&nbsp;<\/em><em><a href=\"https:\/\/www.templatemonster.com\/blog\/bootstrap-3-grid-system-guide\/\" target=\"_blank\">Bootstrap 3: The Grid System and Media Queries<\/a>.&nbsp;<\/em><\/p>\n<hr class=\"wp-block-separator\"\/>\n<p class=\"has-text-align-center\">* * *<\/p>\n<p>Teraz widzisz jak \u0142atwo jest tworzy\u0107 z\u0142o\u017cone i dynamiczne witryny za pomoc\u0105 siatki Bootstrap 3. Z pomoc\u0105 tego systemu mo\u017cna bezproblemowo stworzy\u0107 serwisy dowolnego rodzaju: od witryn z 2-kolumnowym uk\u0142adem - do z\u0142o\u017conych stron, kt\u00f3re b\u0119d\u0142 idealnie wyg\u0142\u0105da\u0142y na ka\u017cdym ekranie. Mamy nadziej\u0119, \u017ce te przyk\u0142ady dadz\u0105 Ci poj\u0119cie o elastyczno\u015bci nowego systemu siatki i wszystkich wspania\u0142ych rzeczy, kt\u00f3re mo\u017cesz stworzy\u0107 z jego pomoc\u0105.<\/p>\n<p><strong>P.S.<\/strong>&nbsp;Je\u015bli masz ju\u017c stron\u0119 &nbsp;z panelem administracyjnym opart\u0105&nbsp;o HTML, mo\u017cesz zapozna\u0107 si\u0119 z naszymi <a href=\"https:\/\/www.templatemonster.com\/pl\/type\/szablony-panelu-administracyjnego\/\" target=\"_blank\">Bootstrap szablonami panelu admina<\/a>&nbsp;stworzonymi&nbsp;za pomoc\u0105&nbsp;technologii Bootstrap. Te&nbsp;<a href=\"https:\/\/www.templatemonster.com\/pl\/szablony-stron-www-z-bootstrap\/\" target=\"_blank\">szablony&nbsp;Bootstrap<\/a> poka\u017c\u0105 pe\u0142n\u0105 moc systemu Bootstrap 3!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wszyscy znamy o&nbsp;Bootstrap, poniewa\u017c jest to najpopularniejszy&nbsp;web framework o otwartym kodzie \u017ar\u00f3d\u0142owym. Mark Otto i Jacob Thorton stworzyli jeden z najpot\u0119\u017cniejszych framework\u00f3w CSS&nbsp;na \u015bwiecie. Po wydaniu Bootstrap w wersji 3, najciekawsz\u0105 zmian\u0105 by\u0142a r\u00f3\u017cnica w systemach siatki. Bootstrap 2 oferowa\u0142 dwa r\u00f3\u017cne rozmiary przegl\u0105darek (desktop\u00a0i mobile). A Bootstrap 3\u00a0jest zorientowany na urz\u0105dzenia mobilne i jego [&hellip;]<\/p>\n","protected":false},"author":2098093,"featured_media":5907,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[229,23,136],"tags":[66,11,183,75],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Bootstrap 3: system siatki i zapytania medi\u00f3w [Tutorial]<\/title>\n<meta name=\"description\" content=\"Z tego artyku\u0142u dowiesz si\u0119 jak mo\u017cna \u0142atwo tworzy\u0107 z\u0142o\u017cone i dynamiczne witryny za pomoc\u0105 siatki frameworka Bootstrap 3.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/pl\/bootstrap-3\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap 3: system siatki i zapytania medi\u00f3w [Tutorial]\" \/>\n<meta property=\"og:description\" content=\"Z tego artyku\u0142u dowiesz si\u0119 jak mo\u017cna \u0142atwo tworzy\u0107 z\u0142o\u017cone i dynamiczne witryny za pomoc\u0105 siatki frameworka Bootstrap 3.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/pl\/bootstrap-3\/\" \/>\n<meta property=\"og:site_name\" content=\"Polski Blog TemplateMonster\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TemplateMonster.Poland\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-28T11:31:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-25T15:18:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2018\/05\/bootstrap-3.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"538\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Katarzyna Paw\u0142owska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TM_Polska\" \/>\n<meta name=\"twitter:site\" content=\"@TM_Polska\" \/>\n<meta name=\"twitter:label1\" content=\"Napisane przez\" \/>\n\t<meta name=\"twitter:data1\" content=\"Katarzyna Paw\u0142owska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/pl\/bootstrap-3\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/bootstrap-3\/\"},\"author\":{\"name\":\"Katarzyna Paw\u0142owska\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/2999e876fc63abe75a8811b5d8e045d8\"},\"headline\":\"Bootstrap 3: system siatki i zapytania medi\u00f3w\",\"datePublished\":\"2018-03-28T11:31:20+00:00\",\"dateModified\":\"2021-08-25T15:18:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/bootstrap-3\/\"},\"wordCount\":1199,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/#organization\"},\"keywords\":[\"Dostosowywanie\",\"Responsywne\",\"Tutorial\",\"Tworzenie stron internetowych\"],\"articleSection\":[\"HTML i CSS\",\"Tutoriale\",\"Tworzenie stron internetowych\"],\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/pl\/bootstrap-3\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/pl\/bootstrap-3\/\",\"url\":\"https:\/\/monsterspost.com\/pl\/bootstrap-3\/\",\"name\":\"Bootstrap 3: system siatki i zapytania medi\u00f3w [Tutorial]\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/#website\"},\"datePublished\":\"2018-03-28T11:31:20+00:00\",\"dateModified\":\"2021-08-25T15:18:25+00:00\",\"description\":\"Z tego artyku\u0142u dowiesz si\u0119 jak mo\u017cna \u0142atwo tworzy\u0107 z\u0142o\u017cone i dynamiczne witryny za pomoc\u0105 siatki frameworka Bootstrap 3.\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/bootstrap-3\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/pl\/bootstrap-3\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/pl\/bootstrap-3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap 3: system siatki i zapytania medi\u00f3w\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#website\",\"url\":\"https:\/\/monsterspost.com\/pl\/\",\"name\":\"Polski Blog TemplateMonster\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/pl\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#organization\",\"name\":\"MonsterPost Polska\",\"url\":\"https:\/\/monsterspost.com\/pl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost Polska\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/templatemonster_pl\/\",\"https:\/\/www.pinterest.com\/TM_Polska\/\",\"https:\/\/www.youtube.com\/channel\/UCjXro5nNpRT0p0YY6MGl4sQ\",\"https:\/\/www.facebook.com\/TemplateMonster.Poland\/\",\"https:\/\/twitter.com\/TM_Polska\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/2999e876fc63abe75a8811b5d8e045d8\",\"name\":\"Katarzyna Paw\u0142owska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5711b6355781e59c81d4da82c476bd97?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5711b6355781e59c81d4da82c476bd97?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Katarzyna Paw\u0142owska\"},\"description\":\"W bran\u017cy IT od 8 lat. Fan nowych technologii webowych, web designu oraz rozwi\u0105za\u0144 u\u017cytecznych i funkcjonalnych. W praktyce: marketer, DJ, blogerka. W wolnym czasie wspiera inicjatywy propaguj\u0105ce wiedz\u0119 z dziedziny SMM i rozwija swoj\u0105 mi\u0142o\u015b\u0107 do crossfitu.\",\"url\":\"https:\/\/monsterspost.com\/pl\/author\/katrina\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap 3: system siatki i zapytania medi\u00f3w [Tutorial]","description":"Z tego artyku\u0142u dowiesz si\u0119 jak mo\u017cna \u0142atwo tworzy\u0107 z\u0142o\u017cone i dynamiczne witryny za pomoc\u0105 siatki frameworka Bootstrap 3.","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:\/\/monsterspost.com\/pl\/bootstrap-3\/","og_locale":"pl_PL","og_type":"article","og_title":"Bootstrap 3: system siatki i zapytania medi\u00f3w [Tutorial]","og_description":"Z tego artyku\u0142u dowiesz si\u0119 jak mo\u017cna \u0142atwo tworzy\u0107 z\u0142o\u017cone i dynamiczne witryny za pomoc\u0105 siatki frameworka Bootstrap 3.","og_url":"https:\/\/monsterspost.com\/pl\/bootstrap-3\/","og_site_name":"Polski Blog TemplateMonster","article_publisher":"https:\/\/www.facebook.com\/TemplateMonster.Poland\/","article_published_time":"2018-03-28T11:31:20+00:00","article_modified_time":"2021-08-25T15:18:25+00:00","og_image":[{"width":900,"height":538,"url":"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2018\/05\/bootstrap-3.jpg","type":"image\/jpeg"}],"author":"Katarzyna Paw\u0142owska","twitter_card":"summary_large_image","twitter_creator":"@TM_Polska","twitter_site":"@TM_Polska","twitter_misc":{"Napisane przez":"Katarzyna Paw\u0142owska","Szacowany czas czytania":"9 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/pl\/bootstrap-3\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/pl\/bootstrap-3\/"},"author":{"name":"Katarzyna Paw\u0142owska","@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/2999e876fc63abe75a8811b5d8e045d8"},"headline":"Bootstrap 3: system siatki i zapytania medi\u00f3w","datePublished":"2018-03-28T11:31:20+00:00","dateModified":"2021-08-25T15:18:25+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/pl\/bootstrap-3\/"},"wordCount":1199,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/pl\/#organization"},"keywords":["Dostosowywanie","Responsywne","Tutorial","Tworzenie stron internetowych"],"articleSection":["HTML i CSS","Tutoriale","Tworzenie stron internetowych"],"inLanguage":"pl-PL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/pl\/bootstrap-3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/pl\/bootstrap-3\/","url":"https:\/\/monsterspost.com\/pl\/bootstrap-3\/","name":"Bootstrap 3: system siatki i zapytania medi\u00f3w [Tutorial]","isPartOf":{"@id":"https:\/\/monsterspost.com\/pl\/#website"},"datePublished":"2018-03-28T11:31:20+00:00","dateModified":"2021-08-25T15:18:25+00:00","description":"Z tego artyku\u0142u dowiesz si\u0119 jak mo\u017cna \u0142atwo tworzy\u0107 z\u0142o\u017cone i dynamiczne witryny za pomoc\u0105 siatki frameworka Bootstrap 3.","breadcrumb":{"@id":"https:\/\/monsterspost.com\/pl\/bootstrap-3\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/pl\/bootstrap-3\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/pl\/bootstrap-3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/pl\/"},{"@type":"ListItem","position":2,"name":"Bootstrap 3: system siatki i zapytania medi\u00f3w"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/pl\/#website","url":"https:\/\/monsterspost.com\/pl\/","name":"Polski Blog TemplateMonster","description":"","publisher":{"@id":"https:\/\/monsterspost.com\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/pl\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/pl\/#organization","name":"MonsterPost Polska","url":"https:\/\/monsterspost.com\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost Polska"},"image":{"@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/templatemonster_pl\/","https:\/\/www.pinterest.com\/TM_Polska\/","https:\/\/www.youtube.com\/channel\/UCjXro5nNpRT0p0YY6MGl4sQ","https:\/\/www.facebook.com\/TemplateMonster.Poland\/","https:\/\/twitter.com\/TM_Polska"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/2999e876fc63abe75a8811b5d8e045d8","name":"Katarzyna Paw\u0142owska","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5711b6355781e59c81d4da82c476bd97?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5711b6355781e59c81d4da82c476bd97?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Katarzyna Paw\u0142owska"},"description":"W bran\u017cy IT od 8 lat. Fan nowych technologii webowych, web designu oraz rozwi\u0105za\u0144 u\u017cytecznych i funkcjonalnych. W praktyce: marketer, DJ, blogerka. W wolnym czasie wspiera inicjatywy propaguj\u0105ce wiedz\u0119 z dziedziny SMM i rozwija swoj\u0105 mi\u0142o\u015b\u0107 do crossfitu.","url":"https:\/\/monsterspost.com\/pl\/author\/katrina\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/posts\/5904"}],"collection":[{"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/users\/2098093"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/comments?post=5904"}],"version-history":[{"count":9,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/posts\/5904\/revisions"}],"predecessor-version":[{"id":14081,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/posts\/5904\/revisions\/14081"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/media\/5907"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/media?parent=5904"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/categories?post=5904"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/tags?post=5904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}