{"id":1117,"date":"2020-03-18T23:51:57","date_gmt":"2020-03-18T20:51:57","guid":{"rendered":"https:\/\/blog.hostixo.com\/?p=1117"},"modified":"2020-03-18T23:51:57","modified_gmt":"2020-03-18T20:51:57","slug":"bootstrap-nedir-nasil-kullanilir","status":"publish","type":"post","link":"https:\/\/www.hostixo.com\/blog\/bootstrap-nedir-nasil-kullanilir\/","title":{"rendered":"Bootstrap Nedir? Nas\u0131l Kullan\u0131l\u0131r?"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0130\u00e7indekiler \u2714<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u0130\u00e7indekiler Tablosunu A\u00e7\/Kapat\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.hostixo.com\/blog\/bootstrap-nedir-nasil-kullanilir\/#Bootstrap_Nedir\" >Bootstrap Nedir?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.hostixo.com\/blog\/bootstrap-nedir-nasil-kullanilir\/#Tasarim_Isini_Kolaylastiran_Bir_Kutuphane\" >Tasar\u0131m \u0130\u015fini Kolayla\u015ft\u0131ran Bir K\u00fct\u00fcphane<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.hostixo.com\/blog\/bootstrap-nedir-nasil-kullanilir\/#Mobil_Siteler_Icin_En_Iyi_Cozum\" >Mobil Siteler \u0130\u00e7in En \u0130yi \u00c7\u00f6z\u00fcm<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.hostixo.com\/blog\/bootstrap-nedir-nasil-kullanilir\/#Neden_Tum_Bootstrap_Siteler_Birbirine_Benziyor\" >Neden T\u00fcm Bootstrap Siteler Birbirine Benziyor?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.hostixo.com\/blog\/bootstrap-nedir-nasil-kullanilir\/#Bootstrap_Kullanmanin_Avantajlari\" >Bootstrap Kullanman\u0131n Avantajlar\u0131<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.hostixo.com\/blog\/bootstrap-nedir-nasil-kullanilir\/#Bootstrapi_Nasil_Kullanabilirim\" >Bootstrap&#8217;\u0131 Nas\u0131l Kullanabilirim?<\/a><\/li><\/ul><\/nav><\/div>\n<p>G\u00fcn\u00fcm\u00fcz teknolojisine ayak uydurmak isteyen t\u00fcm web <a href=\"https:\/\/www.hostixo.com\/hosting\/hazir-site\/\" data-internallinksmanager029f6b8e52c=\"11\" title=\"haz\u0131r site\">site<\/a>lerinin bilmesi gereken konu, <strong>bootstrap nedir<\/strong> konusudur. \u00d6zellikle cep telefonlar\u0131n\u0131n hepimizin hayat\u0131na girmesi ile g\u00fcnl\u00fck internet kullan\u0131m\u0131 ile alakal\u0131 i\u015flerimizi bu cihazlar \u00fczerinden yapar olduk. Haliyle mobil uyumlu web sitesi konusu da g\u00fcndem olmu\u015f durumda.<\/p>\n<p>\u00c7o\u011fu web sitesi hali haz\u0131rdaki tasar\u0131mlar\u0131n\u0131 bu konuya \u00f6zen g\u00f6stererek kullan\u0131c\u0131lar\u0131n\u0131n sitelerini daha rahat gezebilmesi ad\u0131na ekrana duyarl\u0131 tasar\u0131ma d\u00f6n\u00fc\u015ft\u00fcrmeye ya da tamamen kulland\u0131klar\u0131 tasar\u0131m\u0131 de\u011fi\u015ftirmeye ba\u015flad\u0131lar. Bu konuda en yayg\u0131n kullan\u0131lan framework nedir dedi\u011fimizde asl\u0131nda <strong>Bootstrap nedir<\/strong> diye sormam\u0131z gerekiyor.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Bootstrap_Nedir\"><\/span>Bootstrap Nedir?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bootstrap a\u00e7\u0131k kaynak kodu, yani \u00fccretsiz bir CSS k\u00fct\u00fcphanesidir. Yani CSS kodlar\u0131n\u0131n derlenerek kullan\u0131c\u0131lar\u0131n rahatca kullanabilece\u011fi \u015fekilde haz\u0131r olarak gelir. Yani kal\u0131plar\u0131 \u00f6\u011frenmeniz bu k\u00fct\u00fcphaneyi rahatca kullanman\u0131z i\u00e7in yeterli olacakt\u0131r. Asl\u0131nda Bootstrap css kodlar\u0131 yard\u0131m\u0131 ile web sitenizin t\u00fcm ekranlarda ayn\u0131 bi\u00e7imde g\u00f6r\u00fcnt\u00fclenmesini sa\u011flayan, bir k\u00fct\u00fcphanedir. Bu kod kal\u0131plar\u0131n\u0131 kolayca kullanarak ve bootstrap&#8217;\u0131n kendi sitesi \u00fczerindek yard\u0131m alarak ekrana duyarl\u0131 web sitesi tasar\u0131m\u0131n\u0131 herkes yapabilir.<\/p>\n<p>Tabiki <strong>Bootstrap nedir<\/strong> dedi\u011finiz anda CSS bilginizin oldu\u011funu da hesaba katman\u0131z gerekiyor. Yoksa \u00f6nce CSS e\u011fitim setlerini temin ederek yada Youtube \u00fczerindeki e\u011fitimlerden faydalanarak CSS mant\u0131\u011f\u0131n\u0131 \u00f6\u011frenmeniz gerekiyor.<\/p>\n<p>Dilerseniz haz\u0131r olarak sunulmu\u015f Bootstrap temalar\u0131 \u00fczerinde de\u011fi\u015fiklik yapabilir ya da kendi tasar\u0131m\u0131n\u0131z\u0131 ba\u015ftan olu\u015fturabilirsiniz.<\/p>\n<p>S\u00fcrekli g\u00fcncellenen bootstrap, bir \u00f6nceki s\u00fcr\u00fcm\u00fcnde bulunan eksik ve hatalar\u0131 kapat\u0131yor ve kendini s\u00fcrekli olarak g\u00fcncel tutuyor. Bug\u00fcn itibari ile 4.4 s\u00fcr\u00fcm\u00fc bulunan k\u00fct\u00fcphanesi kendi sitesinden kontrol edebilirsiniz.<\/p>\n<p>Pek \u00e7ok haz\u0131r \u015fablonu b\u00fcnyesinden bar\u0131nd\u0131ran Bootstrap, asl\u0131nda sadece sizin ekrana duyarl\u0131 web sitesi haz\u0131rlaman\u0131za yard\u0131m etmiyor. Ayn\u0131 zamanda da g\u00f6rsel a\u00e7\u0131dan doygun siteler ile kullan\u0131c\u0131lar\u0131n\u0131z\u0131n g\u00f6z zevkini de hitap etmenize yard\u0131m ediyor. B\u00f6ylece her ziyaret\u00e7inize mutlaka geri d\u00f6nece\u011fi bir ortam sunmu\u015f oluyorsunuz.<\/p>\n<p>Haz\u0131r butonlar, ge\u00e7i\u015fler, resimler i\u00e7in \u00f6zel efektler, uyar\u0131 balonlar\u0131, metin kutular\u0131 gibi \u00e7o\u011fu HTML elementi i\u00e7in haz\u0131rlanm\u0131\u015f kodlar sayesinde profesyonelce haz\u0131rlanm\u0131\u015f web siteleri olu\u015fturmak m\u00fcmk\u00fcn.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tasarim_Isini_Kolaylastiran_Bir_Kutuphane\"><\/span>Tasar\u0131m \u0130\u015fini Kolayla\u015ft\u0131ran Bir K\u00fct\u00fcphane<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bootstrap bir web sitesinin olu\u015fturulmas\u0131 i\u00e7in gerekli olan t\u00fcm arg\u00fcmanlara sahip bir sistemdir. Bu y\u00fczden diledi\u011finiz, zevkinize uygun her t\u00fcrl\u00fc <a href=\"https:\/\/www.hostixo.com\/blog\/\">web sitesi<\/a>ni tasarlamak m\u00fcmk\u00fcn. Tasar\u0131m konusunda i\u015finizi kolayla\u015ft\u0131ran k\u00fct\u00fcphane sayesinde deneyiminiz olmasa bile konuda sizi\u00a0 \u00f6ne ge\u00e7iriyo ve elinizi rahatlat\u0131yor.<\/p>\n<p>Mant\u0131k olarak her web sitesini 12 e\u015fit s\u00fctuna ay\u0131ran Bootstrap sayesinde bu s\u00fctunlar\u0131n t\u00fcm ekran geni\u015fliklerine g\u00f6re esnekle\u015ftirmenize imkan sa\u011fl\u0131yor. B\u00f6ylece ister mobil cihazlarda ister masa\u00fcst\u00fc bilgisayarlarda web siteleriniz birebir ayn\u0131 g\u00f6r\u00fcn\u00fcm\u00fc kullan\u0131c\u0131lar\u0131na sunuyor.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Mobil_Siteler_Icin_En_Iyi_Cozum\"><\/span>Mobil Siteler \u0130\u00e7in En \u0130yi \u00c7\u00f6z\u00fcm<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Eskiden t\u00fcm web siteleri masa\u00fcst\u00fc ve laptop cihazlar \u00f6ncelik al\u0131narak haz\u0131rlan\u0131yordu. G\u00fcn\u00fcm\u00fczde ise bu durum art\u0131k trafi\u011fin y\u00fczde 70&#8217;ini sa\u011flayan mobil platformlara ta\u015f\u0131nd\u0131. Yani art\u0131k ba\u015fta firmalar olmak \u00fczere herkes, kullan\u0131c\u0131s\u0131n\u0131n mobil platformda web sitesini d\u00fczg\u00fcn g\u00f6r\u00fcnt\u00fclemesi \u00fczerine odaklan\u0131yor. Bu durumda bize \u00e7\u00f6z\u00fcm olarak Bootstrap sistemini getiriyor. Ekrana duyarl\u0131 bir \u015fekilde web sitelerini haz\u0131rlamak i\u00e7in olu\u015fturulan k\u00fct\u00fcphane ile t\u00fcm vihaz ve platforma uygun ve her platformda ayn\u0131 g\u00f6r\u00fcnen web sitelerini tasarlamak m\u00fcmk\u00fcn oluyor.<\/p>\n<p>Yani siz masa\u00fcst\u00fcnde sitenize bakarken ne g\u00f6r\u00fcyorsan\u0131z, mobil kullan\u0131c\u0131 da ayn\u0131 \u015fekilde sitenizi ziyaret edebiliyor. Font yada g\u00f6rseller \u00fczerinde bir de\u011fi\u015fme meydana gelmiyor.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Neden_Tum_Bootstrap_Siteler_Birbirine_Benziyor\"><\/span>Neden T\u00fcm Bootstrap Siteler Birbirine Benziyor?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bootstrap sistemi Twitter&#8217;\u0131n geli\u015fiminde olduk\u00e7a etkilidir. As\u0131l olu\u015fturulma amac\u0131 t\u00fcm ekranlara duyarl\u0131 siteleri tasarlamakt\u0131. Bootstrap k\u00fct\u00fcphanesi yap\u0131sal a\u00e7\u0131dan ayn\u0131 elementleri ve ayn\u0131 12 s\u00fctunlu \u0131zgara sistemini kulland\u0131\u011f\u0131 i\u00e7in ve baz al\u0131nan platform mobil platformlar oldu\u011fu i\u00e7in web siteleri baz\u0131 noktalarda birbirlerine benzerlikler g\u00f6sterebiliyor.<\/p>\n<p>Ancak Bootstrap a\u00e7\u0131k kaynak kodlu yani geli\u015fitirilmeye a\u00e7\u0131k bir yap\u0131 oldu\u011fu i\u00e7in kod bilginize ba\u011fl\u0131 olarak \u00f6zg\u00fcnle\u015ftirmek ve geli\u015ftirmek sizlerin elinde.<\/p>\n<p>Bootstrap sadece platformda de\u011fil piyasa \u00fczerindeki t\u00fcm taray\u0131c\u0131larda da olumlu ve ayn\u0131 sonu\u00e7lar\u0131 veren siteler elde etmenize yard\u0131mc\u0131 oluyor.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Bootstrap_Kullanmanin_Avantajlari\"><\/span>Bootstrap Kullanman\u0131n Avantajlar\u0131<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li>Web sitelerinizi olu\u015fturman\u0131z konusunda kolayl\u0131k sa\u011flar<\/li>\n<li>Izgara yap\u0131s\u0131 ile yerle\u015fimi kolayca olu\u015fturabilirsiniz<\/li>\n<li>HTML vs CSS bilmeniz yeterlidir<\/li>\n<li>Kendi web sitesi \u00fczerinden t\u00fcm bile\u015fenleri edinebilir ve kullanabilirsiniz<\/li>\n<li>Javascript elementleri ile beraber gelir<\/li>\n<li>A\u00e7\u0131k kaynak kodlu bu sistemi geli\u015ftirmekte \u00f6zg\u00fcrs\u00fcn\u00fcz ve s\u0131n\u0131rlar\u0131n\u0131z\u0131 a\u015fabilirsiniz<\/li>\n<li>T\u00fcm platformlarda ayn\u0131 sonucu veren web siteleri elde edebilirsiniz<\/li>\n<li>T\u00fcm taray\u0131c\u0131larda ayn\u0131 sonucu veren ve g\u00f6rsel olarak sorunsuz web siteleri olu\u015fturabilirsiniz<\/li>\n<li>Rakibi olan pek \u00e7ok sistemden daha iyi ve stabil \u00e7al\u0131\u015fmas\u0131yla her zaman piyasada en g\u00fc\u00e7l\u00fc k\u00fct\u00fcphane olarak yerini koruyacakt\u0131r.<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Bootstrapi_Nasil_Kullanabilirim\"><\/span>Bootstrap&#8217;\u0131 Nas\u0131l Kullanabilirim?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bootstrap kullanmak asl\u0131nda olduk\u00e7a basit. Resmi sitesinde sizlerin hemen kullanmaya ba\u015flamas\u0131 i\u00e7in gerekli olan dosyalar\u0131 bile haz\u0131r halde vermi\u015fler. Sizin yapman\u0131z gereken <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">buradan Bootstrap resmi sitesine<\/a> girmek ve \u00fcst b\u00f6l\u00fcmde yer alan download butonuna t\u0131klamak.<\/p>\n<p>Kar\u015f\u0131n\u0131za \u00e7\u0131kan ekranda a\u015fa\u011f\u0131daki resimde g\u00f6rd\u00fcn\u00fcz butona basarak gerekli dosyalar\u0131 indirebilir ve tasar\u0131m\u0131n\u0131za ba\u015flayabilirsiniz.<\/p>\n<figure id=\"attachment_1119\" aria-describedby=\"caption-attachment-1119\" style=\"width: 998px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"wp-image-1119 size-full lazyload\" data-src=\"https:\/\/www.hostixo.com\/blog\/wp-content\/uploads\/2020\/03\/110.jpg\" alt=\"Bootstrap Nedir 1\" width=\"998\" height=\"610\" title=\"\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 998px; --smush-placeholder-aspect-ratio: 998\/610;\"><noscript><img decoding=\"async\" class=\"wp-image-1119 size-full\" src=\"https:\/\/www.hostixo.com\/blog\/wp-content\/uploads\/2020\/03\/110.jpg\" alt=\"Bootstrap Nedir 1\" width=\"998\" height=\"610\" title=\"\"><\/noscript><figcaption id=\"caption-attachment-1119\" class=\"wp-caption-text\">Bootstrap Nedir 1<\/figcaption><\/figure>\n<p>Mobil uyumlu web sitelerinizi haz\u0131rlama konusunda en b\u00fcy\u00fck yard\u0131mc\u0131n\u0131z her daim Bootstrap olacakt\u0131r.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>G\u00fcn\u00fcm\u00fcz teknolojisine ayak uydurmak isteyen t\u00fcm web sitelerinin bilmesi gereken konu, bootstrap nedir konusudur. \u00d6zellikle cep telefonlar\u0131n\u0131n hepimizin hayat\u0131na girmesi ile g\u00fcnl\u00fck internet kullan\u0131m\u0131 ile alakal\u0131 i\u015flerimizi bu cihazlar \u00fczerinden yapar olduk. Haliyle mobil uyumlu web sitesi konusu da g\u00fcndem olmu\u015f durumda. \u00c7o\u011fu web sitesi hali haz\u0131rdaki tasar\u0131mlar\u0131n\u0131 bu konuya \u00f6zen g\u00f6stererek kullan\u0131c\u0131lar\u0131n\u0131n sitelerini daha &hellip;<\/p>\n","protected":false},"author":1,"featured_media":1120,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_mbp_gutenberg_autopost":false,"footnotes":""},"categories":[31],"tags":[198],"class_list":["post-1117","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-yazilim","tag-bootstrap-nedir"],"_links":{"self":[{"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/posts\/1117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/comments?post=1117"}],"version-history":[{"count":0,"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/posts\/1117\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/media\/1120"}],"wp:attachment":[{"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/media?parent=1117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/categories?post=1117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/tags?post=1117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}