{"id":685,"date":"2016-12-15T08:26:07","date_gmt":"2016-12-15T08:26:07","guid":{"rendered":"http:\/\/dijitalturk.com\/veysel\/?p=685"},"modified":"2016-12-15T08:26:45","modified_gmt":"2016-12-15T08:26:45","slug":"bootstrap-frameworku-nasil-kullanilir","status":"publish","type":"post","link":"https:\/\/dijitalturk.com\/veysel\/bootstrap-frameworku-nasil-kullanilir\/","title":{"rendered":"Bootstrap Framework’\u00fc nas\u0131l kullan\u0131l\u0131r ?"},"content":{"rendered":"

Merhaba,<\/p>\n

Bu yaz\u0131mda basit\u00e7e boostrap framework\u00a0<\/strong>‘\u00fcn\u00fc nas\u0131l sitemize entegre edece\u011fimizi anlatmaya \u00e7al\u0131\u015faca\u011f\u0131m.<\/p>\n

Olduk\u00e7a kolay olan bu yap\u0131 sayesinde mobil uyumlu ve h\u0131zl\u0131 web sayfalar\u0131 olu\u015fturabilirsiniz.<\/p>\n

<\/p>\n

\u00a01.\u0130lk A\u015fama (html sayfam\u0131z\u0131 olu\u015ftural\u0131m)<\/span><\/h2>\n

\u0130lk olarak standart .html sayfam\u0131z\u0131 olu\u015ftural\u0131m.<\/p>\n

<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\">\r\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\r\n<head>\r\n\r\n<meta charset=\"UTF-8\">\r\n<title>bootstrap Entegrasyonu<\/title>\r\n\r\n\r\n<\/head>\r\n<body>\r\n\r\n<div>bootstrap Entegrasyonu<\/div>\r\n<input type=\"text\" id=\"t1\">\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/a><\/p>\n
 <\/p>\n
2.<\/span> \u0130kinci a\u015fama, gerekli dosyalar\u0131 indirip sitemizin oldu\u011fu dizine kopyalayal\u0131m.<\/span><\/h2>\n
Art\u0131k elimizde mobil uyumlu olmayan bir sitemiz var \u015fimdi bu sayfam\u0131za Bootstrap Framework’\u00fcn\u00fc entegre edelim.<\/p>\n
\"\"<\/a><\/p>\n
 <\/p>\n
\u00d6ncelikle<\/p>\n
http:\/\/getbootstrap.com\/<\/p>\n
adresinden gerekli dosyalar\u0131 indirmemiz gerekiyor.<\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
<\/a><\/p>\n
S\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015f olarak dosyalar\u0131 indirdikten sonra ana klas\u00f6r\u00fcn i\u00e7inde bulunan 3 klas\u00f6r\u00fc web sayfam\u0131z\u0131n oldu\u011fu dizine kopyal\u0131yoruz.<\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
3.A\u015fama sayfam\u0131za\u00a0bootstrap ‘\u0131 entegre edelim.<\/span><\/h2>\n
Ve son olarak\u00a0\u00a0<head><\/head> ve <body> <\/body><\/code>\u00a0 etiketleri aras\u0131na a\u015fa\u011f\u0131daki kodlar\u0131 yerle\u015ftiriyoruz.<\/p>\n
<\/a><\/p>\n
<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\">\r\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\r\n<head>\r\n\r\n<meta charset=\"UTF-8\">\r\n<title>bootstrap Entegrasyonu<\/title>\r\n<link href=\"css\/bootstrap.min.css\" rel=\"stylesheet\" type=\"text\/css\"\/>\r\n\r\n<\/head>\r\n<body>\r\n\r\n<div>bootstrap Entegrasyonu<\/div>\r\n<input type=\"text\" id=\"t1\">\r\n\r\n<script type=\"text\/javascript\" src=\"js\/bootstrap.min.js\"><\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
\u015eu a\u015famadan sonra art\u0131k sayfam\u0131za Bootstrap entegre edilmi\u015f oldu.<\/p>\n
4.A\u015fama nesneleri kullanarak test edelim.<\/span><\/h2>\n
\u00dcst k\u0131s\u0131ma bir “well” alan\u0131 ekleyip alert nesnesi olu\u015fturup inputbox’a da g\u00fczel bir g\u00f6r\u00fcn\u00fcm kazand\u0131rarak test edelim.<\/p>\n
<\/a><\/p>\n
<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\">\r\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\r\n<head>\r\n\r\n<meta charset=\"UTF-8\">\r\n<title>bootstrap Entegrasyonu<\/title>\r\n<link href=\"css\/bootstrap.min.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\r\n\r\n<\/head>\r\n<body>\r\n\r\n  <div class=\"well\">\r\n  DENEME\r\n  <\/div>\r\n  \r\n  <div class=\"alert alert-success\" role=\"alert\">bootstrap Entegrasyonu<\/div>\r\n\r\n  <input type=\"text\" id=\"t1\" class=\"form-control\">\r\n  \r\n<script type=\"text\/javascript\" src=\"js\/bootstrap.min.js\"><\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
\u00c7\u0131kt\u0131s\u0131:<\/p>\n
<\/a>
mobil uyumlu \u00f6rnek \u00e7\u0131kt\u0131<\/figcaption><\/figure>\n
Kar\u015f\u0131la\u015ft\u0131rma<\/strong><\/span><\/h2>\n\n\n\n
\u00d6ncesi<\/p>\n
<\/a>
html \u00e7\u0131kt\u0131s\u0131<\/figcaption><\/figure><\/td>\n
Sonras\u0131<\/p>\n
<\/a>
boostrap \u00f6rne\u011fi<\/figcaption><\/figure><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\u0130lerleyen g\u00fcnlerde nesnelerin \u00f6zellikleri ve \u0131zgara yap\u0131s\u0131 konular\u0131n\u0131 da anlatmaya \u00e7al\u0131\u015faca\u011f\u0131m.<\/p>\n
Yorum ve kaynak g\u00f6stererek yapt\u0131\u011f\u0131n\u0131z Payla\u015f\u0131mlar\u0131n\u0131z i\u00e7in \u015fimdiden te\u015fekk\u00fcr ederim.<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bu yaz\u0131mda basit\u00e7e boostrap framework\u00a0‘\u00fcn\u00fc nas\u0131l sitemize entegre edece\u011fimizi anlatmaya \u00e7al\u0131\u015faca\u011f\u0131m. Olduk\u00e7a kolay olan bu yap\u0131 sayesinde mobil uyumlu […]<\/p>\n","protected":false},"author":1,"featured_media":743,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[2,1],"tags":[211,212,213],"class_list":["post-685","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-yazilim","category-teknolojik","tag-boostrap","tag-mobil-tasarim","tag-responsive"],"uagb_featured_image_src":{"full":["https:\/\/dijitalturk.com\/veysel\/wp-content\/uploads\/2016\/12\/Bootstrap.png",512,512,false],"thumbnail":["https:\/\/dijitalturk.com\/veysel\/wp-content\/uploads\/2016\/12\/Bootstrap-150x150.png",150,150,true],"medium":["https:\/\/dijitalturk.com\/veysel\/wp-content\/uploads\/2016\/12\/Bootstrap-190x190.png",190,190,true],"medium_large":["https:\/\/dijitalturk.com\/veysel\/wp-content\/uploads\/2016\/12\/Bootstrap.png",512,512,false],"large":["https:\/\/dijitalturk.com\/veysel\/wp-content\/uploads\/2016\/12\/Bootstrap-380x380.png",380,380,true],"1536x1536":["https:\/\/dijitalturk.com\/veysel\/wp-content\/uploads\/2016\/12\/Bootstrap.png",512,512,false],"2048x2048":["https:\/\/dijitalturk.com\/veysel\/wp-content\/uploads\/2016\/12\/Bootstrap.png",512,512,false]},"uagb_author_info":{"display_name":"VeYSeL","author_link":"https:\/\/dijitalturk.com\/veysel\/author\/veysel\/"},"uagb_comment_info":0,"uagb_excerpt":"Merhaba, Bu yaz\u0131mda basit\u00e7e boostrap framework\u00a0‘\u00fcn\u00fc nas\u0131l sitemize entegre edece\u011fimizi anlatmaya \u00e7al\u0131\u015faca\u011f\u0131m. Olduk\u00e7a kolay olan bu yap\u0131 sayesinde mobil uyumlu […]","_links":{"self":[{"href":"https:\/\/dijitalturk.com\/veysel\/wp-json\/wp\/v2\/posts\/685","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dijitalturk.com\/veysel\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dijitalturk.com\/veysel\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dijitalturk.com\/veysel\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dijitalturk.com\/veysel\/wp-json\/wp\/v2\/comments?post=685"}],"version-history":[{"count":0,"href":"https:\/\/dijitalturk.com\/veysel\/wp-json\/wp\/v2\/posts\/685\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dijitalturk.com\/veysel\/wp-json\/wp\/v2\/media\/743"}],"wp:attachment":[{"href":"https:\/\/dijitalturk.com\/veysel\/wp-json\/wp\/v2\/media?parent=685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dijitalturk.com\/veysel\/wp-json\/wp\/v2\/categories?post=685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dijitalturk.com\/veysel\/wp-json\/wp\/v2\/tags?post=685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}