{"id":582,"date":"2019-02-09T17:00:13","date_gmt":"2019-02-09T14:00:13","guid":{"rendered":"http:\/\/www.aydiner.gen.tr\/?p=582"},"modified":"2022-01-30T22:22:42","modified_gmt":"2022-01-30T19:22:42","slug":"bootstrap-grid-kullanimi","status":"publish","type":"post","link":"https:\/\/www.aydiner.gen.tr\/index.php\/2019\/02\/09\/bootstrap-grid-kullanimi\/","title":{"rendered":"Bootstrap Grid Kullan\u0131m\u0131"},"content":{"rendered":"<p><a href=\"https:\/\/www.aydiner.gen.tr\/wp-content\/uploads\/2019\/02\/Grid.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-581\" src=\"https:\/\/www.aydiner.gen.tr\/wp-content\/uploads\/2019\/02\/Grid-300x163.jpg\" alt=\"\" width=\"300\" height=\"163\" data-id=\"581\" srcset=\"https:\/\/www.aydiner.gen.tr\/wp-content\/uploads\/2019\/02\/Grid-300x163.jpg 300w, https:\/\/www.aydiner.gen.tr\/wp-content\/uploads\/2019\/02\/Grid-600x327.jpg 600w, https:\/\/www.aydiner.gen.tr\/wp-content\/uploads\/2019\/02\/Grid-768x419.jpg 768w, https:\/\/www.aydiner.gen.tr\/wp-content\/uploads\/2019\/02\/Grid.jpg 1024w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Bootstrap grid kullan\u0131m\u0131 olduk\u00e7a basittir.<\/p>\n<p>Bootstrap Grid Kullan\u0131m\u0131 \u0130\u00e7in Bilinmesi Gerekenler<br \/>\nBootstrap grid s\u0131n\u0131flar\u0131:<\/p>\n<pre class=\"lang:default decode:true \">.col-xs-12\r\n.col-sm-12\r\n.col-md-12\r\n.col-lg-12<\/pre>\n<p><!--more-->Herhangi bir html nesnesine yukar\u0131daki s\u0131n\u0131flardan birini veya birden fazlas\u0131n\u0131 atar&nbsp;iseniz. \u00c7al\u0131\u015fma prensibi \u015f\u00f6yle olacakt\u0131r.<\/p>\n<ul>\n<li>\u201ccol\u201d de\u011feri nesnenin bir kolon (s\u00fctun) olarak tan\u0131mlar<\/li>\n<li>\u201cxs, sm, md, lg\u201d bu de\u011ferler hangi medya ekranlar\u0131n da g\u00f6rev yapacaklar\u0131n\u0131 belirler<\/li>\n<li>Say\u0131sal de\u011fer ise grid say\u0131s\u0131 \u00fczerinden ka\u00e7a b\u00f6l\u00fcnece\u011fini belirler<\/li>\n<\/ul>\n<p><strong>Bootstrap s\u0131n\u0131flar\u0131:<\/strong><\/p>\n<ul>\n<li>xs = Tabletten&nbsp;ve daha k\u00fc\u00e7\u00fck ekranlar (Telefonlar)<\/li>\n<li>sm = Tablet&nbsp;ve laptop&nbsp;aral\u0131\u011f\u0131<\/li>\n<li>md = Laptop&nbsp;ve Masa\u00fcst\u00fc&nbsp;aral\u0131\u011f\u0131<\/li>\n<li>lg = Masa\u00fcst\u00fc ve \u00fcst\u00fc cihazlar (Masa\u00fcst\u00fc PC, 2k ve 4k Tvler)<\/li>\n<\/ul>\n<h2>Bootstrap Grid Kullan\u0131m\u0131&nbsp;ve \u00d6rnekler<\/h2>\n<p>\u015eimdi \u00f6rnekler ile \u00e7al\u0131\u015fal\u0131m.<\/p>\n<pre class=\"lang:default decode:true\">&lt;div class=\"container\"&gt;\r\n  &lt;div class=\"row\"&gt;\r\n    &lt;div class=\"col-xs-3 col\"&gt;col-xs-3&lt;\/div&gt;\r\n    &lt;div class=\"col-xs-3 col\"&gt;col-xs-3&lt;\/div&gt;\r\n    &lt;div class=\"col-xs-3 col\"&gt;col-xs-3&lt;\/div&gt;\r\n    &lt;div class=\"col-xs-3 col\"&gt;col-xs-3&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n \r\n&lt;div class=\"container\"&gt;\r\n  &lt;div class=\"row\"&gt;\r\n    &lt;div class=\"col-md-3 col\"&gt;col-md-3&lt;\/div&gt;\r\n    &lt;div class=\"col-md-3 col\"&gt;col-md-3&lt;\/div&gt;\r\n    &lt;div class=\"col-md-3 col\"&gt;col-md-3&lt;\/div&gt;\r\n    &lt;div class=\"col-md-3 col\"&gt;col-md-3&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>Yukar\u0131daki \u00f6rnekte iki farkl\u0131 g\u00f6sterim mevcut ikisi de i\u00e7eri\u011fimizi 4\u2019e b\u00f6lecek (12\u2019li yap\u0131 kulland\u0131\u011f\u0131n\u0131z\u0131 varsay\u0131yorum.) fakat farkl\u0131 cihazlar da farkl\u0131 davran\u0131caklar \u201cxs\u201d s\u0131n\u0131f\u0131na sahip olan divler b\u00fct\u00fcn cihazlar da telefon dahil eri\u015fildi\u011finde ekran\u0131 4\u2019e b\u00f6lecek \u201cmd\u201d s\u0131n\u0131f\u0131na ait olan divler ise tablet laptop aral\u0131\u011f\u0131na kadar b\u00f6lme i\u015flemi yapacak telefon g\u00f6r\u00fcn\u00fcm\u00fcnde ise alt alta yer al\u0131cak. \u00d6rnek \u00fczerinde g\u00f6rmek i\u00e7in&nbsp;<a href=\"http:\/\/www.codeply.com\/view\/SjY9joeX56\" target=\"_blank\" rel=\"noopener\">t\u0131klay\u0131n<\/a>.<\/p>\n<p>\u015eimdi yukar\u0131daki \u00f6rne\u011fi bir ad\u0131m daha \u00f6teye g\u00f6t\u00fcr\u00fcp i\u00e7eri\u011fimizin her cihaz i\u00e7in farkl\u0131 g\u00f6z\u00fckmesini sa\u011flayal\u0131m.<\/p>\n<pre class=\"lang:default decode:true \">&lt;div class=\"container\"&gt;\r\n  &lt;div class=\"row\"&gt;\r\n    &lt;div class=\"col-xs-12 col-sm-6 col-md-4 col-lg-2 col\"&gt;col-xs-12 col-sm-6 col-md-4 col-lg-2&lt;\/div&gt;\r\n    &lt;div class=\"col-xs-12 col-sm-6 col-md-4 col-lg-2 col\"&gt;col-xs-12 col-sm-6 col-md-4 col-lg-2&lt;\/div&gt;\r\n    &lt;div class=\"col-xs-12 col-sm-6 col-md-4 col-lg-2 col\"&gt;col-xs-12 col-sm-6 col-md-4 col-lg-2&lt;\/div&gt;\r\n    &lt;div class=\"col-xs-12 col-sm-6 col-md-4 col-lg-2 col\"&gt;col-xs-12 col-sm-6 col-md-4 col-lg-2&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>Yukar\u0131daki \u00f6rne\u011fin \u00e7al\u0131\u015f\u0131r hali&nbsp;<a href=\"http:\/\/www.codeply.com\/view\/rB9SPZqFQp\" target=\"_blank\" rel=\"noopener\">burada<\/a><\/p>\n<p>\u00d6rnekte ekledi\u011fimiz her s\u0131n\u0131f\u0131n a\u00e7\u0131klamas\u0131<\/p>\n<ul>\n<li>col-xs-12 = xs s\u0131n\u0131f\u0131 tablet alt\u0131ndaki \u00f6l\u00e7\u00fclerde nas\u0131l davranaca\u011f\u0131n\u0131 s\u00f6yl\u00fcyor 12 ise&nbsp;i\u00e7erik \u00f6l\u00e7\u00fcs\u00fc. (K\u00fc\u00e7\u00fck bir not e\u011fer xs i\u00e7in bir tan\u0131m vermez iseniz otomatik olarak tek s\u00fctun gibi yani col-xs-12 olarak davran\u0131r)<\/li>\n<li>col-sm-6 = sm s\u0131n\u0131f\u0131 tablet laptop aral\u0131\u011f\u0131nda nas\u0131l g\u00f6z\u00fckece\u011fini belirliyor 6 ise i\u00e7eri\u011fi ikiye b\u00f6ler<\/li>\n<li>col-md-4 = md s\u0131n\u0131f\u0131 laptop masa\u00fcst\u00fc&nbsp;aral\u0131\u011f\u0131nda nas\u0131l g\u00f6z\u00fckece\u011fini belirliyor 4&nbsp;ise i\u00e7eri\u011fi \u00fc\u00e7e&nbsp;b\u00f6ler<\/li>\n<li>col-lg-2 =&nbsp;lg&nbsp;s\u0131n\u0131f\u0131 masa\u00fcst\u00fc ve \u00fcst\u00fc aral\u0131klarda nas\u0131l g\u00f6z\u00fckece\u011fini belirliyor 2&nbsp;ise i\u00e7eri\u011fi alt\u0131ya&nbsp;b\u00f6ler<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.aydiner.gen.tr\/wp-content\/uploads\/2019\/02\/grid_renk.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-large wp-image-589\" src=\"https:\/\/www.aydiner.gen.tr\/wp-content\/uploads\/2019\/02\/grid_renk-1024x120.png\" alt=\"\" width=\"1024\" height=\"120\" data-id=\"589\" srcset=\"https:\/\/www.aydiner.gen.tr\/wp-content\/uploads\/2019\/02\/grid_renk-1024x120.png 1024w, https:\/\/www.aydiner.gen.tr\/wp-content\/uploads\/2019\/02\/grid_renk-600x70.png 600w, https:\/\/www.aydiner.gen.tr\/wp-content\/uploads\/2019\/02\/grid_renk-300x35.png 300w, https:\/\/www.aydiner.gen.tr\/wp-content\/uploads\/2019\/02\/grid_renk-768x90.png 768w, https:\/\/www.aydiner.gen.tr\/wp-content\/uploads\/2019\/02\/grid_renk.png 1722w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<pre class=\"lang:default decode:true \"> &lt;div class=\"container b0\"&gt;\r\n\r\n\r\n            &lt;div class=\"row\"&gt;\r\n                &lt;div class=\"col-md-1\"&gt;.col-md-1&lt;\/div&gt;\r\n                &lt;div class=\"col-md-1\"&gt;.col-md-1&lt;\/div&gt;\r\n                &lt;div class=\"col-md-1\"&gt;.col-md-1&lt;\/div&gt;\r\n                &lt;div class=\"col-md-1\"&gt;.col-md-1&lt;\/div&gt;\r\n                &lt;div class=\"col-md-1\"&gt;.col-md-1&lt;\/div&gt;\r\n                &lt;div class=\"col-md-1\"&gt;.col-md-1&lt;\/div&gt;\r\n                &lt;div class=\"col-md-1\"&gt;.col-md-1&lt;\/div&gt;\r\n                &lt;div class=\"col-md-1\"&gt;.col-md-1&lt;\/div&gt;\r\n                &lt;div class=\"col-md-1\"&gt;.col-md-1&lt;\/div&gt;\r\n                &lt;div class=\"col-md-1\"&gt;.col-md-1&lt;\/div&gt;\r\n                &lt;div class=\"col-md-1\"&gt;.col-md-1&lt;\/div&gt;\r\n                &lt;div class=\"col-md-1\"&gt;.col-md-1&lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n\r\n            &lt;div class=\"row\"&gt;\r\n                &lt;div class=\"col-md-8 apg b0\"&gt;.col-md-8&lt;\/div&gt;\r\n                &lt;div class=\"col-md-4 apsari bo\"&gt;.col-md-4&lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n            &lt;div class=\"row\"&gt;\r\n                &lt;div class=\"col-md-4 apy b0\"&gt;.col-md-4&lt;\/div&gt;\r\n                &lt;div class=\"col-md-4 apm b0\"&gt;.col-md-4&lt;\/div&gt;\r\n                &lt;div class=\"col-md-4 aps b0\"&gt;.col-md-4&lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n            &lt;div class=\"row\"&gt;\r\n                &lt;div class=\"col-md-6 apm b0\"&gt;.col-md-6&lt;\/div&gt;\r\n                &lt;div class=\"col-md-6 apy b0\"&gt;.col-md-6&lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n\r\n\r\n        &lt;\/div&gt;<\/pre>\n<pre class=\"lang:default decode:true \">\/*css*\/\r\n.b0{\r\n    border:1px solid red;\r\n}\r\n.apm{\r\n    background-color:cornflowerblue;\r\n}\r\n.apsari{\r\n    background-color:gold;\r\n}\r\n.apy{\r\n    background-color:chartreuse;\r\n}\r\n.apg{\r\n    background-color:gray;\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/getbootstrap.com\/css\/#grid\" target=\"_blank\" rel=\"noopener\">http:\/\/getbootstrap.com\/css\/#grid<\/a><\/p>\n<p><a href=\"http:\/\/www.codeply.com\/\" target=\"_blank\" rel=\"noopener\">http:\/\/www.codeply.com\/<\/a><\/p>\n<p>\u00f6mer erkan<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bootstrap grid kullan\u0131m\u0131 olduk\u00e7a basittir. Bootstrap Grid Kullan\u0131m\u0131 \u0130\u00e7in Bilinmesi Gerekenler Bootstrap grid s\u0131n\u0131flar\u0131: .col-xs-12 .col-sm-12 .col-md-12 .col-lg-12<\/p>\n","protected":false},"author":1,"featured_media":849,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-582","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/www.aydiner.gen.tr\/index.php\/wp-json\/wp\/v2\/posts\/582","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.aydiner.gen.tr\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.aydiner.gen.tr\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.aydiner.gen.tr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.aydiner.gen.tr\/index.php\/wp-json\/wp\/v2\/comments?post=582"}],"version-history":[{"count":0,"href":"https:\/\/www.aydiner.gen.tr\/index.php\/wp-json\/wp\/v2\/posts\/582\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.aydiner.gen.tr\/index.php\/wp-json\/wp\/v2\/media\/849"}],"wp:attachment":[{"href":"https:\/\/www.aydiner.gen.tr\/index.php\/wp-json\/wp\/v2\/media?parent=582"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.aydiner.gen.tr\/index.php\/wp-json\/wp\/v2\/categories?post=582"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.aydiner.gen.tr\/index.php\/wp-json\/wp\/v2\/tags?post=582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}