{"id":848,"date":"2019-11-25T17:01:57","date_gmt":"2019-11-25T14:01:57","guid":{"rendered":"http:\/\/www.aydiner.gen.tr\/?p=848"},"modified":"2022-01-30T22:12:11","modified_gmt":"2022-01-30T19:12:11","slug":"bootstrap-nedir-nasil-kullanilir","status":"publish","type":"post","link":"https:\/\/www.aydiner.gen.tr\/index.php\/2019\/11\/25\/bootstrap-nedir-nasil-kullanilir\/","title":{"rendered":"Bootstrap nedir ? Nas\u0131l Kullan\u0131l\u0131r ?"},"content":{"rendered":"

\"\"<\/a>Bootstrap Nedir?<\/strong><\/p>\n

Bootstrap Front-End Developerlar i\u00e7in geli\u015ftirilmi\u015f a\u00e7\u0131k kaynak kodlu ve \u00fccretsiz bir CSS framework’t\u00fcr. Bootstrap sayesinde masa\u00fcst\u00fc, tablet, mobil cihaz ve t\u00fcm taray\u0131c\u0131lara uyumlu web siteleri geli\u015ftirebiliriz. Bunun yan\u0131nda bir web sitesi i\u00e7in gerekli olan t\u00fcm bile\u015fenleri yap\u0131s\u0131nda bar\u0131nd\u0131r\u0131r. (Form \u00f6\u011feleri, tablolar, butonlar, uyar\u0131lar, navigasyon bar, sayfaland\u0131rma, etiketler, a\u00e7\u0131lan men\u00fcler vb. tasar\u0131m \u00f6\u011feleri.) Bu haz\u0131r bile\u015fenleri kullanarak hem geli\u015fmi\u015f bir g\u00f6r\u00fcn\u00fcm hem de her cihaza uygun bir tasar\u0131m ger\u00e7ekle\u015ftirmi\u015f oluruz.<\/p>\n

<\/p>\n

Bootstrap Nas\u0131l Kullan\u0131l\u0131r?<\/p>\n

\u00d6ncelikle sayfam\u0131z Html5 olmal\u0131 ve Bootstrap’\u0131 kullanabilmemiz i\u00e7in bootstrap css dosyas\u0131n\u0131 sayfam\u0131za dahil etmemiz gerekiyor. E\u011fer javascript gerektiren durumlar olursa bootstrap javascript’ini ve jquery script’ini sayfam\u0131za dahil etmemiz gerekiyor. (\u00d6rn: A\u00e7\u0131l\u0131r men\u00fc yap\u0131m\u0131nda sadece bootstrap css dosyas\u0131n\u0131 dahil edersek a\u00e7\u0131l\u0131r men\u00fc tasar\u0131msal olarak olu\u015fturulur. Fakat i\u015flevini yerine getiremez. A\u00e7\u0131l\u0131r men\u00fcye t\u0131klad\u0131\u011f\u0131m\u0131zda a\u00e7\u0131lmas\u0131n\u0131 istiyorsak bootstrap javascript’i ve jquery script’ini dahil etmemiz gerekir.<\/p>\n

Taray\u0131c\u0131lar\u0131n sayfam\u0131z\u0131n Html5 olarak alg\u0131lamas\u0131n\u0131 sa\u011flamak i\u00e7in DOCTYPE kullan\u0131l\u0131r. Html5 olarak tan\u0131m\u0131 a\u015fa\u011f\u0131daki gibidir :<\/p>\n

<!DOCTYPE html><\/pre>\n
Burada dikkat edece\u011fimiz k\u0131s\u0131m\u00a0<!DOCTYPE html><\/strong>\u00a0kulland\u0131ktan sonra\u00a0<html>\u00a0<\/strong>etiketini tekrar a\u00e7mam\u0131z gerekiyor. \u00c7\u00fcnk\u00fc\u00a0<!DOCTYPE html><\/strong>\u00a0etiket kendi ba\u015f\u0131na sadece Html5 oldu\u011funu belirtir. ard\u0131ndan\u00a0<html><\/strong>\u00a0etiketini a\u00e7mazsak hata olur.<\/p>\n
En sonda \u00f6rnek bir sayfan\u0131n kodlar\u0131n\u0131 payla\u015faca\u011f\u0131m.<\/strong><\/p>\n
 <\/p>\n
Bootstrap Css’ini online olarak dahil etmek istiyorsak :<\/strong><\/p>\n
<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.1\/css\/bootstrap.min.css\"><\/pre>\n
Bootstrap Css’ini sayfan\u0131n bulundu\u011fu klas\u00f6re indirip dahil etmek istiyorsak :<\/strong><\/p>\n
<link rel=\"stylesheet\" href=\"\/bootstrap.min.css\"><\/pre>\n
Burada\u00a0bootstrap.min.css<\/strong>‘i kulland\u0131k. Buradaki min ifadesi css dosyas\u0131ndaki gereksiz t\u00fcm bo\u015fluklar\u0131n silindi\u011fi anlam\u0131ndad\u0131r. Yani daha az yer kaplar. Bu da sayfan\u0131n daha h\u0131zl\u0131 y\u00fcklenmesi demektir.\u00a0bootstrap.min.css<\/strong>\u00a0olan\u0131n\u0131 kullanman\u0131z\u0131 \u00f6neririm.<\/p>\n
 <\/p>\n
Jquery Script ve Bootstrap Javascript’lerin sayfaya dahil edilmesi :<\/strong><\/p>\n
<script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.1\/jquery.min.js\"><\/script>\r\n\r\n<script src=\"http:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.2.0\/js\/bootstrap.min.js\"><\/script><\/pre>\n
\u00d6ncelikle burada belirtmek istedi\u011fim \u00f6nemli bir \u015fey var. Bootstrap’\u0131n tasar\u0131mc\u0131lar\u0131n\u0131n da \u00f6nerdi\u011fi gibi script dosyalar\u0131n\u0131n sayfan\u0131n en sonuna yani\u00a0<\/body><\/strong>\u00a0etiketinden hemen \u00f6nce kullanarak sayfan\u0131n daha h\u0131zl\u0131 \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayabilirsiniz.<\/p>\n
Ayr\u0131ca\u00a0jquery script<\/strong>‘ini eklemeden\u00a0bootstrap.min.js<\/strong>\u00a0‘i eklerseniz hata ile kar\u015f\u0131la\u015f\u0131rs\u0131n\u0131z. \u00c7\u00fcnk\u00fc taray\u0131c\u0131 yukar\u0131dan a\u015fa\u011f\u0131ya do\u011fru okur.\u00a0\u00a0bootstrap.min.js<\/strong>\u00a0i\u00e7erisinde\u00a0jquery\u00a0<\/strong>kulland\u0131\u011f\u0131 i\u00e7in jquery daha eklenmeden kullanmaya \u00e7al\u0131\u015f\u0131r ve hata olu\u015fur. Bu y\u00fczden yukar\u0131daki \u00f6rnekte oldu\u011fu gibi \u00f6nce jquery script’ini daha sonra bootstap javascript’ini sayfam\u0131za dahil etmemiz gerekir.<\/p>\n
 <\/p>\n
Sayfam\u0131z\u0131n mobil cihazlar ve tabletler i\u00e7in uyumlu olmas\u0131 ve \u00f6l\u00e7eklendirilmesi i\u00e7in :\u00a0<\/strong><\/p>\n
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><\/pre>\n
Bu kod sayesinde cihaz\u0131n \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fc alg\u0131lan\u0131p o cihaza g\u00f6re boyutland\u0131rma yap\u0131lacakt\u0131r. (<head>…<\/head><\/strong>\u00a0etiketleri aras\u0131na eklenir.)<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"tr-TR\">\r\n<head>\r\n\t<meta charset=\"UTF-8\">\r\n\t<title>Bootstrap Sample<\/title>\r\n    \r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n\r\n\t<!-- Bootstrap Css begin -->\r\n\t<link rel=\"stylesheet\" href=\"\/bootstrap.min.css\">\r\n\t<!-- Bootstrap Css end -->\r\n<\/head>\r\n<body>\r\n\t<!-- JavaScript Files begin -->\r\n\t<script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.1\/jquery.min.js\"><\/script>\r\n\t<script src=\"http:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.2.0\/js\/bootstrap.min.js\"><\/script>\r\n\t<!-- JavaScript Files end -->\r\n<\/body>\t\r\n<\/html><\/pre>\n
kodyazan<\/p>\n","protected":false},"excerpt":{"rendered":"
Bootstrap Nedir? Bootstrap Front-End Developerlar i\u00e7in geli\u015ftirilmi\u015f a\u00e7\u0131k kaynak kodlu ve \u00fccretsiz bir CSS framework’t\u00fcr. Bootstrap sayesinde masa\u00fcst\u00fc, tablet, mobil […]<\/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":[14],"class_list":["post-848","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web","tag-bootstrap"],"_links":{"self":[{"href":"https:\/\/www.aydiner.gen.tr\/index.php\/wp-json\/wp\/v2\/posts\/848","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=848"}],"version-history":[{"count":0,"href":"https:\/\/www.aydiner.gen.tr\/index.php\/wp-json\/wp\/v2\/posts\/848\/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=848"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.aydiner.gen.tr\/index.php\/wp-json\/wp\/v2\/categories?post=848"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.aydiner.gen.tr\/index.php\/wp-json\/wp\/v2\/tags?post=848"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}