{"id":2866,"date":"2018-10-19T10:56:04","date_gmt":"2018-10-19T10:56:04","guid":{"rendered":"https:\/\/www.templatemonster.com\/hu\/blog\/?p=2866"},"modified":"2021-08-25T08:43:16","modified_gmt":"2021-08-25T08:43:16","slug":"bootstrap-3-a-racsrendszer-es-a-media-lekerdezesek","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/hu\/bootstrap-3-a-racsrendszer-es-a-media-lekerdezesek\/","title":{"rendered":"Bootstrap 3: A r\u00e1csrendszer \u00e9s a m\u00e9dia lek\u00e9rdez\u00e9sek"},"content":{"rendered":"<p>Mindannyian ismerj\u00fck a Bootstrap-ot, mivel ez a legn\u00e9pszer\u0171bb ny\u00edlt forr\u00e1sk\u00f3d\u00fa webes keretrendszer. Mark Ottonak \u00e9s Jacob Thortonnak siker\u00fclt l\u00e9trehoznia az egyik leger\u0151sebb CSS keretrendszert, amelyet valaha terveztek.<\/p>\n<p>Amikor a Bootstrap 3-t kiadt\u00e1k, a leg\u00e9rdekesebb v\u00e1ltoz\u00e1s a r\u00e1csrendszerek k\u00fcl\u00f6nbs\u00e9ge volt. A Bootstrap 2 k\u00e9t k\u00fcl\u00f6nb\u00f6z\u0151 m\u00e9ret\u0171 b\u00f6ng\u00e9sz\u0151t (asztali sz\u00e1m\u00edt\u00f3g\u00e9p, majd mobil) tartalmaz. A Bootstrap 3 r\u00e1csrendszer seg\u00edts\u00e9g\u00e9vel k\u00fcl\u00f6nb\u00f6z\u0151 r\u00e1csokat hozhatsz l\u00e9tre a b\u00f6ng\u00e9sz\u0151m\u00e9ret alapj\u00e1n. Hasonl\u00f3 tendencia figyelhet\u0151 meg a keret legfrissebb verzi\u00f3j\u00e1ban - az <a href=\"https:\/\/monsterspost.com\/alpha-release-bootstrap-4-latest-framework-version\/\">Alpha Release a Bootstrap 4 kiad\u00e1s\u00e1ban<\/a>.<\/p>\n<p>Ha a cikket ink\u00e1bb angol nyelven tekinten\u00e9d meg, csak kattints ide:&nbsp;<a href=\"https:\/\/monsterspost.com\/bootstrap-3-grid-system-guide\/\">Bootstrap 3: The Grid System and Media Queries<\/a><\/p>\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>A l\u00e9trehozott r\u00e1cs asztali g\u00e9peken m\u0171k\u00f6dik, majd egym\u00e1s f\u00f6l\u00e9 rak\u00f3dik, amikor a b\u00f6ng\u00e9sz\u0151 m\u00e9rete 767 px alatt van. Ez korl\u00e1tozott, mivel csak 1 r\u00e1csot hat\u00e1rozhat meg asztali m\u00e9ret\u0171 b\u00f6ng\u00e9sz\u0151k\u00f6n. A mobileszk\u00f6z\u00f6kre halmozott r\u00e1cs van.<\/td>\n<td>Az \u00faj Bootstrap grid rendszer els\u0151 sorban a mobilra vonatkozik.<\/td>\n<td>A leg\u00fajabb Bootstrap verzi\u00f3ja olyan \u00faj r\u00e9tegrendszerrel rendelkezik, amely lehet\u0151v\u00e9 teszi a mobilfelhaszn\u00e1l\u00f3k jobb megc\u00e9lz\u00e1s\u00e1t, mint valaha. Ezenk\u00edv\u00fcl a szemantikus mixinek is \u00e1testek egy nagy friss\u00edt\u00e9sen. Mostant\u00f3l minden sz\u00fcks\u00e9ges mixint b\u00e1rhonnan el\u00e9rhetsz.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n<h3>Bootstrap 3 oszlopok p\u00e9lda<\/h3>\n<p>Ezt egy kicsit neh\u00e9z lehet meg\u00e9rteni els\u0151re, ez\u00e9rt itt egy p\u00e9lda. Tegy\u00fck fel, olyan webhelyet szeretn\u00e9l, amely az al\u00e1bbiakkal rendelkezik:<\/p>\n<ul>\n<li>1 oszlop extra kis eszk\u00f6z\u00f6k\u00f6n<\/li>\n<li>2 oszlop kis \u00e9s k\u00f6zepes eszk\u00f6z\u00f6k\u00f6n<\/li>\n<li>4 oszlop nagy eszk\u00f6z\u00f6k\u00f6n<\/li>\n<\/ul>\n<p>Mivel a r\u00e1csrendszer most a mobileszk\u00f6z\u00f6kr\u0151l t\u0171nik fel, ez a k\u00f3d fog megjelenni.<\/p>\n<pre class=\"wp-block-code\"><code>&lt;div class=\"row\">\r\n    &lt;div class=\"col-sm-6 col-lg-3\">\r\n       Ez a r\u00e1csunk r\u00e9sze.\r\n    &lt;\/div>\r\n    &lt;div class=\"col-sm-6 col-lg-3\">\r\n        Ez a r\u00e1csunk r\u00e9sze.\r\n    &lt;\/div>\r\n    &lt;div class=\"col-sm-6 col-lg-3\">\r\n        Ez a r\u00e1csunk r\u00e9sze.\r\n    &lt;\/div>    \r\n    &lt;div class=\"col-sm-6 col-lg-3\">\r\n        Ez a r\u00e1csunk r\u00e9sze.\r\n    &lt;\/div>    \r\n&lt;\/div><\/code><\/pre>\n<p>Nem kell semmit defini\u00e1lni az extra kis eszk\u00f6z\u00f6kh\u00f6z, mivel az alap\u00e9rtelmezett egy oszlop.&nbsp;Meg kell hat\u00e1roznunk egy r\u00e1csm\u00e9retet a kis eszk\u00f6z\u00f6k sz\u00e1m\u00e1ra, de nem a k\u00f6zepes eszk\u00f6z\u00f6k eset\u00e9ben.&nbsp;Ez az\u00e9rt van, mert a r\u00e1cs kaszkad.&nbsp;Teh\u00e1t, ha meghat\u00e1rozod a m\u00e9retet sm-ben, akkor az lesz a sm, md \u00e9s lg r\u00e1csm\u00e9rete.&nbsp;Megmagyar\u00e1zzuk a k\u00fcl\u00f6nb\u00f6z\u0151 r\u00e1csm\u00e9reteket \u00e9s azok l\u00e9trehoz\u00e1s\u00e1nak m\u00f3dj\u00e1t, majd p\u00e9ld\u00e1kat mutatunk be.<\/p>\n<h3>R\u00e1csm\u00e9retek<\/h3>\n<p>Ez a legjobb r\u00e9sze az \u00faj r\u00e1csrendszernek. A webhelyen 4 k\u00fcl\u00f6nb\u00f6z\u0151 b\u00f6ng\u00e9sz\u0151 m\u00e9ret\u0171 r\u00e1cs jelenhet meg. Az al\u00e1bbiakban r\u00e9szletezz\u00fck a k\u00fcl\u00f6nb\u00f6z\u0151 m\u00e9reteket.<\/p>\n<pre class=\"wp-block-code\"><code>&lt;div class=\"spacer\">&lt;\/div>\n&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>&lt;span class=\"sumo_twilighter_highlighted twilighter-299735e9\">.&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-299735e9\">col&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-299735e9\">-&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-299735e9\">xs&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-299735e9\">-&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-299735e9\">$\tExtra Small\tPhones Less than 768px&lt;span class=\"sumo_twilighter_shares\">1&lt;\/span>&lt;\/span>\r\n&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\">.&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\">col&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\">-&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\">sm&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\">-&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\">$\tSmall Devices\tTablets 768px and Up\r\n&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\">.&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\">col&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\">-&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\">md&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\">-&lt;\/span>&lt;span class=\"sumo_twilighter_highlighted twilighter-218fab37\">$\tMedium Devices\tDesktops 992px and Up&lt;span class=\"sumo_twilighter_shares\">1&lt;\/span>&lt;\/span>\r\n.col-lg-$\tLarge Devices\tLarge Desktops 1200px and Up&lt;\/pre>\r\n&lt;\/td>\r\n&lt;\/tr>\r\n&lt;\/tbody>\r\n&lt;\/table>\r\n&lt;\/div>\n&lt;div class=\"spacer\">&lt;\/div><\/code><\/pre>\n<p>A <a href=\"https:\/\/getbootstrap.com\/docs\/3.3\/css\/\" target=\"_blank\" rel=\"nofollow\">hivatalos Bootstrap docs<\/a> sokkal \u00e1tfog\u00f3bb meg\u00e9rt\u00e9st ny\u00fajt a h\u00e1l\u00f3zat m\u0171k\u00f6d\u00e9s\u00e9r\u0151l. Vess egy pillant\u00e1st azokra, hogy pontosabb \u00e1ttekint\u00e9st kapj az oszlopm\u00e9retekr\u0151l, az elv\u00e1laszt\u00f3m\u00e9retekr\u0151l, a maxim\u00e1lis oszlopm\u00e9retekr\u0151l \u00e9s a teljes webhely sz\u00e9less\u00e9g\u00e9r\u0151l a b\u00f6ng\u00e9sz\u0151m\u00e9ret alapj\u00e1n.<\/p>\n<h3>A Bootstrap Grid alap\u00e9rtelmezett m\u00e9retei<\/h3>\n<p>N\u00e9ha m\u00e9dia lek\u00e9rdez\u00e9seket kell haszn\u00e1lni ahhoz, hogy a webhely \u00fagy m\u0171k\u00f6dj\u00f6n, ahogyan azt szeretn\u00e9nk. Az alap\u00e9rtelmezett r\u00e1csm\u00e9retek ismerete elengedhetetlen a Bootstrap r\u00e1cs b\u0151v\u00edt\u00e9s\u00e9hez. Gyors tippet \u00edrtunk az alap\u00e9rtelmezett m\u00e9retek megjelen\u00edt\u00e9s\u00e9hez, \u00edgy n\u00e9zz\u00fck meg, hogy sz\u00fcks\u00e9g van-e a Bootstrap m\u00e9dia lek\u00e9rdez\u00e9sekre \u00e9s t\u00f6r\u00e9spontokra.<\/p>\n<h3>Bootstrap 3 M\u00e9dia lek\u00e9rdez\u00e9s t\u00f6r\u00e9spontok<\/h3>\n<p>A Bootstrap 3 egy mobil-els\u0151 front-end keret. A m\u00e9dia lek\u00e9rdez\u00e9sek helyes sorrendj\u00e9t adtam meg, de az alj\u00e1n szerepeltettem a nem mobil els\u0151 t\u00f6r\u00e9spontokat is abban az esetben, ha valaki nem szereti a mobil-els\u0151 m\u00f3dszertant, mivel technikailag mindkett\u0151 m\u0171k\u00f6dni fog. Min-sz\u00e9less\u00e9g: Mindenre vonatkozik, ami nagyobb vagy egyenl\u0151 az adott \u00e9rt\u00e9kkel. Max-sz\u00e9less\u00e9g: Mindenre utal, ami kevesebb vagy egyenl\u0151 a megadott \u00e9rt\u00e9kkel.<\/p>\n<pre class=\"wp-block-code\"><code>\/*==================================================\r\n=            Bootstrap 3 Media Queries             =\r\n==================================================*\/\r\n\/*==========  Mobile First Method  ==========*\/\r\n\/* Custom, iPhone Retina *\/\r\n@media only screen and (min-width : 320px){\r\n}\r\n\/* Extra Small Devices, Phones *\/\r\n@media only screen and (min-width : 480px){\r\n}\r\n\/* Small Devices, Tablets *\/\r\n@media only screen and (min-width : 768px){\r\n}\r\n\/* Medium Devices, Desktops *\/\r\n@media only screen and (min-width : 992px){\r\n}\r\n\/* Large Devices, Wide Screens *\/\r\n@media only screen and (min-width : 1200px){\r\n}\r\n\/*==========  Non-Mobile First Method  ==========*\/\r\n\/* Large Devices, Wide Screens *\/\r\n@media only screen and (max-width : 1200px){\r\n}\r\n\/* Medium Devices, Desktops *\/\r\n@media only screen and (max-width : 992px){\r\n}\r\n\/* Small Devices, Tablets *\/\r\n@media only screen and (max-width : 768px){\r\n}\r\n\/* Extra Small Devices, Phones *\/\r\n@media only screen and (max-width : 480px){\r\n}\r\n\/* Custom, iPhone Retina *\/\r\n@media only screen and (max-width : 320px){\r\n}<\/code><\/pre>\n<h4 class=\"aligncenter\">Bootstrap 2.3.2 M\u00e9dia lek\u00e9rdez\u00e9s t\u00f6r\u00e9spontok<\/h4>\n<pre class=\"wp-block-code\"><code>\/*=====================================================\r\n=            Bootstrap 2.3.2 Media Queries            =\r\n=====================================================*\/\r\n@media only screen and (max-width : 1200px){\r\n}\r\n@media only screen and (max-width : 979px){\r\n}\r\n@media only screen and (max-width : 767px){\r\n}\r\n@media only screen and (max-width : 480px){\r\n}\r\n@media only screen and (max-width : 320px){\r\n}<\/code><\/pre>\n<hr class=\"wp-block-separator\"\/>\n<h4 class=\"aligncenter\">Reszponz\u00edv seg\u00e9dprogramok<\/h4>\n<p>Ugyan\u00fagy, mint a Bootstrap 2, a Bootstrap 3 reszponz\u00edv seg\u00e9dprogramokat ny\u00fajt a b\u00f6ng\u00e9sz\u0151 m\u00e9ret\u00e9nek alapj\u00e1n t\u00f6rt\u00e9n\u0151 elrejt\u00e9s\u00e9re \u00e9s megjelen\u00edt\u00e9s\u00e9re. Ez is seg\u00edt nek\u00fcnk a r\u00e1csrendszer\u00fcnk meghat\u00e1roz\u00e1s\u00e1ban.<\/p>\n<pre class=\"wp-block-code\"><code>.visible-xs\r\n.visible-sm\r\n.visible-md\r\n.visible-lg\r\n.hidden-xs\r\n.hidden-sm\r\n.hidden-md\r\n.hidden-lg<\/code><\/pre>\n<p>Ez seg\u00edt, mert k\u00e9pesek vagyunk megjelen\u00edteni bizonyos elemeket a m\u00e9ret alapj\u00e1n. P\u00e9ld\u00e1inkban egy extra oldals\u00e1v jelenik meg a nagy asztali g\u00e9peken.<\/p>\n<h3>P\u00e9ld\u00e1k<\/h3>\n<p>\u00cdme n\u00e9h\u00e1ny p\u00e9lda azokra a r\u00e1csokra, amelyeket l\u00e9trehozhatsz. V\u00e9gigmegy\u00fcnk n\u00e9h\u00e1ny olyan alapvet\u0151 webhelyen, amelyeket egyesek szeretn\u00e9nek, \u00e9s megmutatjuk, milyen k\u00f6nny\u0171 az oldal fel\u00e9p\u00edt\u00e9se a Bootstrap 3 h\u00e1l\u00f3zattal.<\/p>\n<h3>Egyszer\u0171: Nagym\u00e9ret\u0171 asztali sz\u00e1m\u00edt\u00f3g\u00e9pek kontra mobiltelefonok<\/h3>\n<p>Tegy\u00fck fel, hogy a webhelynek 1 oszlopra van sz\u00fcks\u00e9ge extra kicsi (telefonos) \u00e9s kicsi (t\u00e1blag\u00e9pes) eszk\u00f6z\u00f6k\u00f6n, 2 oszlop k\u00f6zepes (k\u00f6zepes m\u00e9ret\u0171) eszk\u00f6z\u00f6k\u00f6n \u00e9s 4 oszlop nagy (asztali) eszk\u00f6z\u00f6k\u00f6n.<\/p>\n<p>Itt van a p\u00e9lda k\u00f3dja:<\/p>\n<pre class=\"wp-block-code\"><code>&lt;div class=\"row\">\r\n&lt;div class=\"col-md-6 col-lg-3\">\r\n&lt;div class=\"visible-lg text-success\">Large Devices!&lt;\/div>\r\n&lt;div class=\"visible-md text-warning\">Medium Devices!&lt;\/div>\r\n&lt;div class=\"visible-sm text-primary\">Small Devices!&lt;\/div>\r\n&lt;div class=\"visible-xs visible-sm text-danger\">Extra Small and Small Devices&lt;\/div>\r\n&lt;\/div>\r\n&lt;div class=\"col-md-6 col-lg-3\">\r\n&lt;div class=\"visible-lg text-success\">Large Devices!&lt;\/div>\r\n&lt;div class=\"visible-md text-warning\">Medium Devices!&lt;\/div>\r\n&lt;div class=\"visible-sm text-primary\">Small Devices!&lt;\/div>\r\n&lt;div class=\"visible-xs visible-sm text-danger\">Extra Small and Small Devices&lt;\/div>\r\n&lt;\/div>\r\n&lt;div class=\"col-md-6 col-lg-3\">\r\n&lt;div class=\"visible-lg text-success\">Large Devices!&lt;\/div>\r\n&lt;div class=\"visible-md text-warning\">Medium Devices!&lt;\/div>\r\n&lt;div class=\"visible-sm text-primary\">Small Devices!&lt;\/div>\r\n&lt;div class=\"visible-xs visible-sm text-danger\">Extra Small and Small Devices&lt;\/div>\r\n&lt;\/div>\r\n&lt;div class=\"col-md-6 col-lg-3\">\r\n&lt;div class=\"visible-lg text-success\">Large Devices!&lt;\/div>\r\n&lt;div class=\"visible-md text-warning\">Medium Devices!&lt;\/div>\r\n&lt;div class=\"visible-sm text-primary\">Small Devices!&lt;\/div>\r\n&lt;div class=\"visible-xs visible-sm text-danger\">Extra Small and Small Devices&lt;\/div>\r\n&lt;\/div>\r\n&lt;\/div><\/code><\/pre>\n<h3>K\u00f6z\u00e9pfok\u00fa: Extra oszlop megjelen\u00edt\u00e9se a nagy asztali g\u00e9peken<\/h3>\n<p>Ez egy \u00e9rdekes p\u00e9lda, amellyel az \u00faj r\u00e1cs kit\u0171nik. Tegy\u00fck fel, hogy van olyan webhelyed, amelynek van egy oldals\u00e1vja \u00e9s egy f\u0151 tartalma. \u00c9s az extra kis eszk\u00f6z\u00f6kh\u00f6z szeretn\u00e9l egy oszlopot, \u00e9s f\u0151 tartalmat, alatta felt\u00f6lt\u00f6tt oldals\u00e1vval.<\/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\">I am the main content.&lt;\/div>\r\n&lt;div class=\"col-sm-3 text-warning\">I am the main sidebar.&lt;\/div>\r\n&lt;div class=\"col-lg-3 visible-lg text-success\">I am the secondary sidebar that only shows up on LARGE devices.&lt;\/div>\r\n&lt;\/div><\/code><\/pre>\n<h3>Halad\u00f3: K\u00fcl\u00f6nb\u00f6z\u0151 r\u00e1cs minden m\u00e9retben<\/h3>\n<p>Ez egy bonyolultabb p\u00e9lda. Extra kis eszk\u00f6z\u00f6k eset\u00e9n 2 oszlopot akarunk. Kisebb eszk\u00f6z\u00f6k eset\u00e9n 3 oszlopot akarunk. K\u00f6zepes eszk\u00f6z\u00f6k eset\u00e9n 4 oszlopot akarunk. Nagym\u00e9ret\u0171 eszk\u00f6z\u00f6k eset\u00e9n 6 oszlopot ( csak nagy eszk\u00f6z\u00f6k\u00f6n jelenik meg).<\/p>\n<pre class=\"wp-block-code\"><code>&lt;div class=\"row\">&lt;\/div>\n&lt;div class=\"row\">\r\n&lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\">I'm content!&lt;\/div>\r\n&lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\">I'm content!&lt;\/div>\r\n&lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\">I'm content!&lt;\/div>\r\n&lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\">I'm content!&lt;\/div>\r\n&lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\">I'm content!&lt;\/div>\r\n&lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2 visible-lg\">I'm content only visible on large devices!&lt;\/div>\r\n&lt;\/div>\n&lt;div class=\"spacer\">&lt;\/div><\/code><\/pre>\n<hr class=\"wp-block-separator\"\/>\n<p>L\u00e1thatod, hogy amint a b\u00f6ng\u00e9sz\u0151 m\u00e9rete kisebb lesz, az oszlopok elkezdenek form\u00e1t \u00f6lteni.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/www.templatemonster.com\/hu\/wordpress-sablonok\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" loading=\"lazy\" width=\"970\" height=\"250\" src=\"https:\/\/monsterspost.com\/hu\/wp-content\/uploads\/2018\/10\/wp_en_970x250-1.jpg\" alt=\"\" class=\"wp-image-3000\" srcset=\"https:\/\/monsterspost.com\/hu\/wp-content\/uploads\/sites\/13\/2018\/10\/wp_en_970x250-1.jpg 970w, https:\/\/monsterspost.com\/hu\/wp-content\/uploads\/sites\/13\/2018\/10\/wp_en_970x250-1-300x77.jpg 300w, https:\/\/monsterspost.com\/hu\/wp-content\/uploads\/sites\/13\/2018\/10\/wp_en_970x250-1-768x198.jpg 768w\" sizes=\"(max-width: 970px) 100vw, 970px\" \/><\/a><\/figure>\n<\/div>\n<h2>Ez r\u00e1csosztikus!<\/h2>\n<p>L\u00e1thatod, mennyire egyszer\u0171en \u00e9p\u00fclnek fel a komplex \u00e9s dinamikus webhelyek a Bootstrap 3 r\u00e1cs seg\u00edts\u00e9g\u00e9vel. A mobil 2 oszlopos webhelyekt\u0151l az elemek komplex elrejt\u00e9s\u00e9ig \u00e9s megjelen\u00edt\u00e9s\u00e9ig a nagy asztali sz\u00e1m\u00edt\u00f3g\u00e9pekig, b\u00e1rmilyen t\u00edpus\u00fa webhelyet fel\u00e9p\u00edthetsz. Rem\u00e9lhet\u0151leg ezek a p\u00e9ld\u00e1k \u00f6tletet adnak neked az \u00faj r\u00e1csrendszer rugalmass\u00e1g\u00e1r\u00f3l \u00e9s az \u00f6sszes nagyszer\u0171 dologr\u00f3l, amit l\u00e9trehozhatsz.<\/p>\n<p>Ha m\u00e1r van egy HTML-alap\u00fa webhelyed megl\u00e9v\u0151 admin panellel,&nbsp;\u00e9rdemes \u00e1ttekintened <a href=\"https:\/\/www.templatemonster.com\/hu\/admin-sablonok\/\" target=\"_blank\">Bootstrap Admin t\u00e9m\u00e1inkat<\/a>.&nbsp;Ezek a <a href=\"https:\/\/www.templatemonster.com\/hu\/bootstrap-website-templates\/\" target=\"_blank\">bootstrap t\u00e9m\u00e1k<\/a> bemutatj\u00e1k a Bootstrap 3 teljes erej\u00e9t!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mindannyian ismerj\u00fck a Bootstrap-ot, mivel ez a legn\u00e9pszer\u0171bb ny\u00edlt forr\u00e1sk\u00f3d\u00fa webes keretrendszer. Mark Ottonak \u00e9s Jacob Thortonnak siker\u00fclt l\u00e9trehoznia az egyik leger\u0151sebb CSS keretrendszert, amelyet valaha terveztek. Amikor a Bootstrap 3-t kiadt\u00e1k, a leg\u00e9rdekesebb v\u00e1ltoz\u00e1s a r\u00e1csrendszerek k\u00fcl\u00f6nbs\u00e9ge volt. A Bootstrap 2 k\u00e9t k\u00fcl\u00f6nb\u00f6z\u0151 m\u00e9ret\u0171 b\u00f6ng\u00e9sz\u0151t (asztali sz\u00e1m\u00edt\u00f3g\u00e9p, majd mobil) tartalmaz. A Bootstrap 3 r\u00e1csrendszer [&hellip;]<\/p>\n","protected":false},"author":2098140,"featured_media":2864,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2,1,7,22],"tags":[98,30,23],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Bootstrap 3: A r\u00e1csrendszer \u00e9s a m\u00e9dia lek\u00e9rdez\u00e9sek<\/title>\n<meta name=\"description\" content=\"Mindannyian ismerj\u00fck a Bootstrap-ot, mivel ez a legn\u00e9pszer\u0171bb ny\u00edlt forr\u00e1sk\u00f3d\u00fa webes keretrendszer. Mark Ottonak \u00e9s Jacob Thortonnak siker\u00fclt l\u00e9trehoznia\" \/>\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\/hu\/bootstrap-3-a-racsrendszer-es-a-media-lekerdezesek\/\" \/>\n<meta property=\"og:locale\" content=\"hu_HU\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap 3: A r\u00e1csrendszer \u00e9s a m\u00e9dia lek\u00e9rdez\u00e9sek\" \/>\n<meta property=\"og:description\" content=\"Mindannyian ismerj\u00fck a Bootstrap-ot, mivel ez a legn\u00e9pszer\u0171bb ny\u00edlt forr\u00e1sk\u00f3d\u00fa webes keretrendszer. Mark Ottonak \u00e9s Jacob Thortonnak siker\u00fclt l\u00e9trehoznia\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/hu\/bootstrap-3-a-racsrendszer-es-a-media-lekerdezesek\/\" \/>\n<meta property=\"og:site_name\" content=\"TemplateMonster Blog Hungary\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TemplateMonster\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-19T10:56:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-25T08:43:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/hu\/wp-content\/uploads\/sites\/13\/2018\/10\/featured_image14.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=\"Ingrid Alm\u00e1si\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@templatemonster\" \/>\n<meta name=\"twitter:site\" content=\"@templatemonster\" \/>\n<meta name=\"twitter:label1\" content=\"Szerz\u0151:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ingrid Alm\u00e1si\" \/>\n\t<meta name=\"twitter:label2\" content=\"Becs\u00fclt olvas\u00e1si id\u0151\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 perc\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/hu\/bootstrap-3-a-racsrendszer-es-a-media-lekerdezesek\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/hu\/bootstrap-3-a-racsrendszer-es-a-media-lekerdezesek\/\"},\"author\":{\"name\":\"Ingrid Alm\u00e1si\",\"@id\":\"https:\/\/monsterspost.com\/hu\/#\/schema\/person\/4a5195fab2570a3bfbab891dd43e7b1d\"},\"headline\":\"Bootstrap 3: A r\u00e1csrendszer \u00e9s a m\u00e9dia lek\u00e9rdez\u00e9sek\",\"datePublished\":\"2018-10-19T10:56:04+00:00\",\"dateModified\":\"2021-08-25T08:43:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/hu\/bootstrap-3-a-racsrendszer-es-a-media-lekerdezesek\/\"},\"wordCount\":1164,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/hu\/#organization\"},\"keywords\":[\"B\u00f6ng\u00e9sz\u0151k\",\"Bootstrap\",\"K\u00f3dol\u00e1s\"],\"articleSection\":[\"Cikkek\",\"Egy\u00e9b\",\"Oktat\u00f3anyagok\",\"Webfejleszt\u00e9s\"],\"inLanguage\":\"hu\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/hu\/bootstrap-3-a-racsrendszer-es-a-media-lekerdezesek\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/hu\/bootstrap-3-a-racsrendszer-es-a-media-lekerdezesek\/\",\"url\":\"https:\/\/monsterspost.com\/hu\/bootstrap-3-a-racsrendszer-es-a-media-lekerdezesek\/\",\"name\":\"Bootstrap 3: A r\u00e1csrendszer \u00e9s a m\u00e9dia lek\u00e9rdez\u00e9sek\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/hu\/#website\"},\"datePublished\":\"2018-10-19T10:56:04+00:00\",\"dateModified\":\"2021-08-25T08:43:16+00:00\",\"description\":\"Mindannyian ismerj\u00fck a Bootstrap-ot, mivel ez a legn\u00e9pszer\u0171bb ny\u00edlt forr\u00e1sk\u00f3d\u00fa webes keretrendszer. Mark Ottonak \u00e9s Jacob Thortonnak siker\u00fclt l\u00e9trehoznia\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/hu\/bootstrap-3-a-racsrendszer-es-a-media-lekerdezesek\/#breadcrumb\"},\"inLanguage\":\"hu\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/hu\/bootstrap-3-a-racsrendszer-es-a-media-lekerdezesek\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/hu\/bootstrap-3-a-racsrendszer-es-a-media-lekerdezesek\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/hu\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap 3: A r\u00e1csrendszer \u00e9s a m\u00e9dia lek\u00e9rdez\u00e9sek\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/hu\/#website\",\"url\":\"https:\/\/monsterspost.com\/hu\/\",\"name\":\"TemplateMonster Blog Hungary\",\"description\":\"Just another MonsterPost Sites site\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/hu\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/hu\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"hu\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/hu\/#organization\",\"name\":\"MonsterPost Magyarorsz\u00e1g\",\"url\":\"https:\/\/monsterspost.com\/hu\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"hu\",\"@id\":\"https:\/\/monsterspost.com\/hu\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/hu\/wp-content\/uploads\/sites\/13\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/hu\/wp-content\/uploads\/sites\/13\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost Magyarorsz\u00e1g\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/hu\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/template_monster\/\",\"https:\/\/www.pinterest.com\/templatemonster\/\",\"https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/\",\"https:\/\/www.facebook.com\/TemplateMonster\/\",\"https:\/\/twitter.com\/templatemonster\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/hu\/#\/schema\/person\/4a5195fab2570a3bfbab891dd43e7b1d\",\"name\":\"Ingrid Alm\u00e1si\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"hu\",\"@id\":\"https:\/\/monsterspost.com\/hu\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b612b53a5e53c42dc5a5442f92d734a9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b612b53a5e53c42dc5a5442f92d734a9?s=96&d=mm&r=g\",\"caption\":\"Ingrid Alm\u00e1si\"},\"description\":\"Csod\u00e1latos dolognak tartom az \u00edr\u00e1st, mellyel \u00faj vil\u00e1gokat, k\u00fcl\u00f6nleges embereket teremthet\u00fcnk. Akik\u00e9rt az olvas\u00f3 izgulhat, szeretheti vagy gy\u0171l\u00f6lheti \u0151ket. Vagyis annak a fant\u00e1zi\u00e1j\u00e1t szereti, aki megalkotta a m\u0171vet. Ha csak egy \u00edr\u00e1som elgondolkodtat, elszomor\u00edt vagy megnevettet valakit, m\u00e1r meg\u00e9rte tollat ragadnom.\",\"url\":\"https:\/\/monsterspost.com\/hu\/author\/ingrid\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap 3: A r\u00e1csrendszer \u00e9s a m\u00e9dia lek\u00e9rdez\u00e9sek","description":"Mindannyian ismerj\u00fck a Bootstrap-ot, mivel ez a legn\u00e9pszer\u0171bb ny\u00edlt forr\u00e1sk\u00f3d\u00fa webes keretrendszer. Mark Ottonak \u00e9s Jacob Thortonnak siker\u00fclt l\u00e9trehoznia","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\/hu\/bootstrap-3-a-racsrendszer-es-a-media-lekerdezesek\/","og_locale":"hu_HU","og_type":"article","og_title":"Bootstrap 3: A r\u00e1csrendszer \u00e9s a m\u00e9dia lek\u00e9rdez\u00e9sek","og_description":"Mindannyian ismerj\u00fck a Bootstrap-ot, mivel ez a legn\u00e9pszer\u0171bb ny\u00edlt forr\u00e1sk\u00f3d\u00fa webes keretrendszer. Mark Ottonak \u00e9s Jacob Thortonnak siker\u00fclt l\u00e9trehoznia","og_url":"https:\/\/monsterspost.com\/hu\/bootstrap-3-a-racsrendszer-es-a-media-lekerdezesek\/","og_site_name":"TemplateMonster Blog Hungary","article_publisher":"https:\/\/www.facebook.com\/TemplateMonster\/","article_published_time":"2018-10-19T10:56:04+00:00","article_modified_time":"2021-08-25T08:43:16+00:00","og_image":[{"width":900,"height":538,"url":"https:\/\/monsterspost.com\/hu\/wp-content\/uploads\/sites\/13\/2018\/10\/featured_image14.jpg","type":"image\/jpeg"}],"author":"Ingrid Alm\u00e1si","twitter_card":"summary_large_image","twitter_creator":"@templatemonster","twitter_site":"@templatemonster","twitter_misc":{"Szerz\u0151:":"Ingrid Alm\u00e1si","Becs\u00fclt olvas\u00e1si id\u0151":"6 perc"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/hu\/bootstrap-3-a-racsrendszer-es-a-media-lekerdezesek\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/hu\/bootstrap-3-a-racsrendszer-es-a-media-lekerdezesek\/"},"author":{"name":"Ingrid Alm\u00e1si","@id":"https:\/\/monsterspost.com\/hu\/#\/schema\/person\/4a5195fab2570a3bfbab891dd43e7b1d"},"headline":"Bootstrap 3: A r\u00e1csrendszer \u00e9s a m\u00e9dia lek\u00e9rdez\u00e9sek","datePublished":"2018-10-19T10:56:04+00:00","dateModified":"2021-08-25T08:43:16+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/hu\/bootstrap-3-a-racsrendszer-es-a-media-lekerdezesek\/"},"wordCount":1164,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/hu\/#organization"},"keywords":["B\u00f6ng\u00e9sz\u0151k","Bootstrap","K\u00f3dol\u00e1s"],"articleSection":["Cikkek","Egy\u00e9b","Oktat\u00f3anyagok","Webfejleszt\u00e9s"],"inLanguage":"hu","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/hu\/bootstrap-3-a-racsrendszer-es-a-media-lekerdezesek\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/hu\/bootstrap-3-a-racsrendszer-es-a-media-lekerdezesek\/","url":"https:\/\/monsterspost.com\/hu\/bootstrap-3-a-racsrendszer-es-a-media-lekerdezesek\/","name":"Bootstrap 3: A r\u00e1csrendszer \u00e9s a m\u00e9dia lek\u00e9rdez\u00e9sek","isPartOf":{"@id":"https:\/\/monsterspost.com\/hu\/#website"},"datePublished":"2018-10-19T10:56:04+00:00","dateModified":"2021-08-25T08:43:16+00:00","description":"Mindannyian ismerj\u00fck a Bootstrap-ot, mivel ez a legn\u00e9pszer\u0171bb ny\u00edlt forr\u00e1sk\u00f3d\u00fa webes keretrendszer. Mark Ottonak \u00e9s Jacob Thortonnak siker\u00fclt l\u00e9trehoznia","breadcrumb":{"@id":"https:\/\/monsterspost.com\/hu\/bootstrap-3-a-racsrendszer-es-a-media-lekerdezesek\/#breadcrumb"},"inLanguage":"hu","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/hu\/bootstrap-3-a-racsrendszer-es-a-media-lekerdezesek\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/hu\/bootstrap-3-a-racsrendszer-es-a-media-lekerdezesek\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/hu\/"},{"@type":"ListItem","position":2,"name":"Bootstrap 3: A r\u00e1csrendszer \u00e9s a m\u00e9dia lek\u00e9rdez\u00e9sek"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/hu\/#website","url":"https:\/\/monsterspost.com\/hu\/","name":"TemplateMonster Blog Hungary","description":"Just another MonsterPost Sites site","publisher":{"@id":"https:\/\/monsterspost.com\/hu\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/hu\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"hu"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/hu\/#organization","name":"MonsterPost Magyarorsz\u00e1g","url":"https:\/\/monsterspost.com\/hu\/","logo":{"@type":"ImageObject","inLanguage":"hu","@id":"https:\/\/monsterspost.com\/hu\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/hu\/wp-content\/uploads\/sites\/13\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/hu\/wp-content\/uploads\/sites\/13\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost Magyarorsz\u00e1g"},"image":{"@id":"https:\/\/monsterspost.com\/hu\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/template_monster\/","https:\/\/www.pinterest.com\/templatemonster\/","https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/","https:\/\/www.facebook.com\/TemplateMonster\/","https:\/\/twitter.com\/templatemonster"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/hu\/#\/schema\/person\/4a5195fab2570a3bfbab891dd43e7b1d","name":"Ingrid Alm\u00e1si","image":{"@type":"ImageObject","inLanguage":"hu","@id":"https:\/\/monsterspost.com\/hu\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b612b53a5e53c42dc5a5442f92d734a9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b612b53a5e53c42dc5a5442f92d734a9?s=96&d=mm&r=g","caption":"Ingrid Alm\u00e1si"},"description":"Csod\u00e1latos dolognak tartom az \u00edr\u00e1st, mellyel \u00faj vil\u00e1gokat, k\u00fcl\u00f6nleges embereket teremthet\u00fcnk. Akik\u00e9rt az olvas\u00f3 izgulhat, szeretheti vagy gy\u0171l\u00f6lheti \u0151ket. Vagyis annak a fant\u00e1zi\u00e1j\u00e1t szereti, aki megalkotta a m\u0171vet. Ha csak egy \u00edr\u00e1som elgondolkodtat, elszomor\u00edt vagy megnevettet valakit, m\u00e1r meg\u00e9rte tollat ragadnom.","url":"https:\/\/monsterspost.com\/hu\/author\/ingrid\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/hu\/wp-json\/wp\/v2\/posts\/2866"}],"collection":[{"href":"https:\/\/monsterspost.com\/hu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/hu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/hu\/wp-json\/wp\/v2\/users\/2098140"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/hu\/wp-json\/wp\/v2\/comments?post=2866"}],"version-history":[{"count":13,"href":"https:\/\/monsterspost.com\/hu\/wp-json\/wp\/v2\/posts\/2866\/revisions"}],"predecessor-version":[{"id":7174,"href":"https:\/\/monsterspost.com\/hu\/wp-json\/wp\/v2\/posts\/2866\/revisions\/7174"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/hu\/wp-json\/wp\/v2\/media\/2864"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/hu\/wp-json\/wp\/v2\/media?parent=2866"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/hu\/wp-json\/wp\/v2\/categories?post=2866"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/hu\/wp-json\/wp\/v2\/tags?post=2866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}