Bootstrap Nedir? Kullan─▒m Rehberi

KuLvar

Y├Ânetici
Administrator
Kat─▒l─▒m
23 Nisan 2020
Mesajlar
103
Puan─▒
13
Ya┼č
47
Web
www.kulvar.net
E─čitim
Lise
─░lgi Alan─▒
Java
Cinsiyet
Erkek
Tak─▒m
lIr3ry
Medeni
Evli
S├╝rekli CSS yazmaktan b─▒km─▒┼č bir front end geli┼čtiricisi misiniz? Belki de Bootstrap kullanma vaktiniz gelmi┼čtir! Bu rehberimizde bu web frameworkÔÇÖ├╝ kullanman─▒n faydalar─▒n─▒ ve projenizde do─čru ┼čekilde kullanman─▒n yolunu g├Âsterece─čiz.
1615753989403.png
B├╝y├╝k ihtimalle frameworkÔÇÖlerin fonksiyonelliklerine a┼činas─▒n─▒zd─▒r. ─░┼čleme ├Âzel s├Âz dizimleri geli┼čtiricilerin basit komutlar ve fonksiyonlar hakk─▒nda d├╝┼č├╝nmeleri gerekmedi─činden dolay─▒ web siteleri ├žok daha h─▒zl─▒ bir ┼čekilde kurmalar─▒na izin verir.

Yine de k├╝t├╝phanelerin yayg─▒n kullan─▒m─▒ndan dolay─▒ olu┼čan tutars─▒zl─▒k de─či┼čikli─če yol a├žt─▒ ve i┼čte tam olarak burada Bootstrap sahneyi ald─▒.

Bu a├ž─▒k kaynakl─▒ front end framework, ilk olarak daha h─▒zl─▒ ve kolay front end web sitesi geli┼čtirme i├žin Mark Otto ve Jacon Thornton taraf─▒ndan geli┼čtirildi.

├çe┼čitli fonksiyonlar ve navigasyon, ├Ârt├╝ sistemi, g├Ârsel karuselleri ve butonlar gibi bile┼čenler i├žin her t├╝rden HTML ve CSS bazl─▒ tasar─▒m ┼čablonlar─▒n─▒ i├žerir.

Bootstrap, her ne kadar geli┼čtiricilerinin tekrar tekrar ┼čablonlar─▒ y├Ânetmelerinde zaman tasarrufu yapmalar─▒n─▒ sa─člasa da ana hedefi mobil dostu siteler olu┼čturmakt─▒r. Web sitesinin kullan─▒c─▒ aray├╝z├╝n├╝n ister k├╝├ž├╝k ekranl─▒ telefonlar, ister b├╝y├╝k ekranl─▒ masa├╝st├╝ bilgisayarlar olsun b├╝t├╝n ekran boyutlar─▒nda en ideal olarak ├žal─▒┼čmas─▒na izin verir.

B├Âylelikle geli┼čtiricilerin cihazlara ├Âzel siteler yapmas─▒na ve kitlelerini s─▒n─▒rlamas─▒na gerek kalmaz.

Pop├╝lerli─činden ├Ât├╝r├╝ Bootstrap topluluklar─▒n─▒n say─▒s─▒ artmaktad─▒r. Bu topluluklar, geli┼čtiricilerle tasar─▒mc─▒lar─▒n bilgi payla┼č─▒m─▒nda bulunmas─▒ ve en g├╝ncel framework yamalar─▒ hakk─▒nda tart─▒┼čmalar─▒ i├žin harika yerlerdir.

BootsrapÔÇÖin ├ť├ž Ana Dosyas─▒​


Bootstrap ├že┼čitli fonksiyonlar ger├žekle┼čtiren s├Âz dizimi koleksiyonlar─▒ndan olu┼čsa da ├╝├ž farkl─▒ dosyaya sahip olmas─▒ olduk├ža mant─▒kl─▒d─▒r. ─░┼čte bir web sitesinin aray├╝z├╝n├╝ ve fonksiyonelli─čini y├Âneten ├╝├ž ana dosya.

Bootstrap.css​


Bootstrap.css bir web sitesinin d├╝zenini yoluna koyan ve y├Âneten bir CSS frameworkÔÇÖ├╝d├╝r. HTML bir web sayfas─▒n─▒n i├žeri─čini ve yap─▒s─▒n─▒ y├Ânetirken CSS ise sitenin d├╝zeni ile ilgilenir. Bu nedenden dolay─▒ bu iki yap─▒n─▒n belirli bir eylemin ger├žekle┼čtirilmesi i├žin bir arada olmalar─▒ gerekir.

Fonksiyonlar─▒ndan ├Ât├╝r├╝ CSS istedi─činiz kadar web sayfas─▒nda ayn─▒ g├Âr├╝n├╝┼č├╝ olu┼čturman─▒z─▒ sa─člar. Bir kenar─▒n geni┼čli─čini de─či┼čtirmek i├žin saatlerce d├╝zenleme yapmaya elveda deyin.

CSS ile tek yapman─▒z gereken CSS dosyalar─▒n─▒ web sayfalar─▒na ili┼čkilendirmektir. Gerekli b├╝t├╝n de─či┼čiklikler sadece CSS dosyas─▒nda yap─▒labilmektedir.

CSSÔÇÖin fonksiyonlar─▒ sadece metin stilleriyle s─▒n─▒rl─▒ de─čildir. Web sayfas─▒n─▒n tablolar─▒ ve g├Ârsel d├╝zenleri gibi di─čer a├ž─▒lar─▒n─▒ da bi├žimlendirebilirsiniz.

CSSÔÇÖin bir├žok bildiri ve se├žicileri bulundu─ču i├žin hepsini ezberlemek uzun s├╝rebilir. Bir an ├Ânce i┼če ba┼člamak istedi─činizi g├Ârebiliyoruz. ─░┼čte ├Â─črenme s├╝recinizi k─▒saltabilecek bir kopya ka─č─▒d─▒ (─░ng.).

Bootstrap.js​


Bu dosya BootstrapÔÇÖin ├žekirdek dosyas─▒d─▒r. Web sitesinin interaktifli─činden sorumlu olan JavaScript dosyalar─▒n─▒ i├žerir.

Tekrar tekrar JavaScript s├Âzdizimi yazmaktan zaman tasarrufu yapmak i├žin geli┼čtiriciler jQuery kullan─▒r. jQuery a├ž─▒k kaynakl─▒ ve ├žok platformlu pop├╝ler bir JavaScript k├╝t├╝phanesidir. Web sitenize ├že┼čitli fonksiyonellikler eklemenize izin verir.

─░┼čte jQueryÔÇÖnin yapabileceklerinden birka├ž ├Ârnek:
  • Ba┼čka bir konumdan dinamik olarak veri ├ž─▒karmak gibi Ajax isteklerini yerine getirme
  • Bir JavaScript eklenti koleksiyonu kullanarak bile┼čen olu┼čturma
  • CSS ├Âzelliklerini kullanarak ├Âzel animasyonlar olu┼čturma
  • Web sitesinin i├žeri─čine dinamizm ekleme
Her ne kadar Bootstrap CSS ├Âzellikleri ve HTML elementleri ile normal bir ┼čekilde ├žal─▒┼čabilse de mobil duyarl─▒ bir tasar─▒m olu┼čturmak i├žin jQueryÔÇÖe ihtiya├ž duyar. Aksi takdirde CSSÔÇÖin sadece basit ve statik k─▒s─▒mlar─▒n─▒ kullanabilirsiniz.

Daha fazla bilgiye ihtiyac─▒n─▒z m─▒ var? jQuery hakk─▒nda daha fazla bilgi almak i├žin bu rehbere g├Âz atabilirsiniz.

Glyphicons​


─░konlar bir web sitesinin ayr─▒lmaz bir par├žas─▒d─▒r. S─▒kl─▒kla kullan─▒c─▒ aray├╝z├╝nden belirli eylemler ve verilerle ili┼čkilendirilmektedirler. Bootstrap bu ihtiyac─▒ kar┼č─▒lamak i├žin GlyphiconÔÇÖlar─▒ kullan─▒r.

Bootstrap ├╝cretsiz kullan─▒ma a├ž─▒lm─▒┼č bir Glyphicon Halfling seti i├žerir. ├ťcretsiz versiyonu standart bir g├Âr├╝n├╝┼če sahiptir ancak temel fonksiyonlar i├žin yeterlidir.

E─čer daha ┼č─▒k ikonlar bulmak isterseniz Glyphicons ├Âzel konulara yo─čunla┼čan web sitelerde hi├ž ┼č├╝phesiz daha iyi g├Âr├╝necek ├že┼čitli premium setler satmaktad─▒r.

Ayr─▒ca bireysel ve temalara ├Âzel ikonlar─▒ Flaticon, GlyphSearch, ve Icons8 gibi web sitelerinden indirebilirsiniz.

Baz─▒ ikonlarda CSS ile de─či┼čiklik yap─▒labilirken baz─▒lar─▒ysa varsay─▒lan g├Âr├╝n├╝┼če sahiptir. Sitenizin ihtiyac─▒na en ├žok uyan ikonlar─▒ kullan─▒n.

Bootstrap Kullan─▒m─▒​


Bootstrap nedir ├Â─črendi─činize g├Âre s─▒ra Bootstrap kullan─▒m─▒ nas─▒l olur onu ├Â─črenmekte. A┼ča─č─▒daki ├Ârne─čimize bir g├Âz at─▒n.
Kod:
<html lang="tr">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap 101 ┼×ablonu</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
<h1>Merhaba, d├╝nya!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>

</html>
HTML dosyas─▒ i├žin karakter kodlamas─▒d─▒r. Bu ├Ârnekte ise UTF-8, UnicodeÔÇÖa atfeder
HTML:
meta charset="utf-8"
Web sitesini yazmak i├žin kullan─▒lan karakter setini belirtir.
HTML:
meta http-equiv="X-UA-Compatible"
Sayfay─▒ i┼čleyecek Internet Explorer s├╝r├╝m├╝n├╝ belirler. Edge modunu kullan─▒larak mevcut en y├╝ksek modu kullanmas─▒ i├žin ayarlanm─▒┼čt─▒r.
HTML:
meta name="viewport"
Sayfan─▒n viewport boyutuyla 1:1 orant─▒ya sahip olmas─▒ndan emin olur
HTML:
link href="css/bootstrap.min.css" rel="stylesheet"
Bu ise BootstrapÔÇÖin ├žekirdek CSSÔÇÖinin eklendi─či k─▒s─▒md─▒r
JavaScript:
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"
Kod:
Google CDN arac─▒l─▒─č─▒yla jQueryÔÇÖi y├╝kler. Sayfalar bir y─▒ll─▒─č─▒na ├Ânbelleklenebilece─činden HTTP arac─▒l─▒─č─▒yla CDNÔÇÖden y├╝klenmeleri daha iyidir.
JavaScript:
src="js/bootstrap.min.js"
BootstrapÔÇÖin ├žekirdek JavaScriptÔÇÖini ekler. Bu s├Âz diziminin d├╝zg├╝n ├žal─▒┼čmas─▒ i├žin daima jQuery s├Âz diziminin alt─▒nda konumland─▒r─▒lmas─▒ gerekir. Ekleme i┼člemi GoogleÔÇś─▒n URLÔÇÖsi veya elle indirme arac─▒l─▒─č─▒yla yap─▒labilir.

Sonu├ž Olarak​


Bootstrap front end geli┼čtiriciler aras─▒nda git gide daha da pop├╝ler olan ├╝cretsiz bir frameworkÔÇÖt├╝r. Kullan─▒m─▒ kolayd─▒r ve geli┼čtiricilerin tekrar tekrar s├Âz dizimi yazmas─▒na gerek kalmad─▒─č─▒ i├žin vakitlerinden tasarruf etmelerini sa─člar.

Bu framework ayr─▒ca olduk├ža esnektir ve front end web sitesi geli┼čtirme i├žin neredeyse b├╝t├╝n gereksinimleri kar┼č─▒lar. En iyi ├Âzelliklerinden birisiyse web sayfalar─▒n─▒n b├╝t├╝n ekran boyutlar─▒nda ideal bi├žimde ├žal─▒┼čmas─▒n─▒ sa─člamas─▒d─▒r.

Bu rehberimizde Bootstrap nedir ve Bootstrap kullan─▒m─▒ nas─▒l olur ├Â─črendiniz. E─čer bir front end geli┼čtiricisiyseniz Bootstrap kullanmak i├žin en iyi zaman ┼čimdidir.
 

KuLvar Turkey, Freelance i┼č Ortakl─▒klar─▒ ve ilanlar─▒, Freelance Tan─▒t─▒m Yaz─▒s─▒ Sat─▒┼č─▒, Web Yaz─▒l─▒m Hizmetlerine Ho┼čgeldiniz.

KuLvar.Net - Hakk─▒nda!

KuLvar.Net ???????? Destek Forumu, Tamamen ├ťcretsiz ve "Kar┼č─▒l─▒ks─▒z" Hizmet Vermektedir."Resmi Kurum" ve Markalar ile Resmi Hi├ž Bir Ba─č─▒m─▒z Yoktur.!

KuLvar.Net - Bilgilendirme!

KuLvar.Net ???????? Destek Forumunda, Payla┼č─▒lan Mesajlar, Konular, ve Resimler'den Do─čabilecek,T├╝m Yasal Sorumluluk'lar Payla┼čan Ki┼čiye Aittir.!

├ťst