Bootstrap Nedir ?

Bootstrap Nedir ?

• 1. Bootstrap Bootstrap Bootstrap Nedir? Components (Bileşenler)
• 2. Bootstrap Nedir ? Bootstrap Nedir ? –Bootstrap, Twitter’ın arayüz geliştirici ekibi tarafından 2010 yılında geliştirilmeye başlanmış ve şu an Dünya’nın en iyileri arasında yer alan bir Css Framework’üdür. Bootstrap geliştirilirken sürekli olarak o günün trendlerine göre ufak kabuk değişimleri yaşayarak insanlar için çekici olmayı başarmış ve başarmaktadır. –Bootstrap bizlere düzgün bir grid sistemi, tarayıcı uyumluluğu konusunda duyarlılık, sayfalarımız içerisinde kullanacağımız bir çok elementin değişik bir çok seçeneğiyle birlikte hazır olarak alınabilmesi olanağı sağlıyor. Ayrıca Font olarak içerisinde ikonlar da barındırarak bu konuda ayrıca arayış içerisine girmemize gerek kalmamasını sağlıyor.
• 3. Bootstrap Nedir ? Bootstrap Nedir ? –Bootstrap, responsive desteğiyle artık neredeyse ekstra kod yazdırmadan kendi içerisinde responsive bir site yapabilme olanağı sağlıyor. –Bootstrap her ne kadar Css ve Javascript tarafında sağladığı destek ile ön plana çıkma gibi bir başarı gösterse de ana yapısında ve çıkış amacında grid sistemi yatmaktadır. Mantık olarak sayfayı container içerisinde 12 dikey parçaya bölen Framework, her bir satır içerisinde istediğimiz genişliğe sahip olan kutular yaratmamızı ve bu kutuların hiç bir ekran boyutunda bozulmadan düzenli bir şekilde tutulmasını sağlamaktadır.
• 4.       Components (Bileşenler)Alerts Components (Bileşenler) Alerts –Alert (Uyarı) Seçeneği JavaScripte Kullanıcıya ikaz vermek yada bir statü değişim sırasında ya da butona tıklandığında karşımıza çıkan uyarı kutusudur. –Uyarılar, herhangi bir metin uzunluğu ve isteğe bağlı kapatma düğmesi için kullanılabilir.
• 5. Alerts Alerts –Kullanılabilir ve esnek uyarı mesajlarının bir avuç ile tipik kullanıcı eylemleri için bağlamsal geribildirim mesajları sağlayın.
• 6. Badges Badges –Rozetler için belgeler ve örnekler, küçük sayımız ve etiketleme bileşenimiz. –Rozetler, göreli yazı tipi boyutlandırmayı ve em birimlerini kullanarak ana öğe öğesinin boyutuna uyacak şekilde ölçeklenir.
• 7. Badges Badges –Belirli duruma bağlı olarak, bu rozetler bir cümlenin, bağlantının veya düğmenin sonunda rastgele ek kelimeler veya sayılar gibi görünebilir.
• 8. Breadcrumb Breadcrumb –Segmentleri CSS aracılığıyla otomatik olarak ekleyen gezinme hiyerarşisinde geçerli sayfanın konumunu belirtin.
• 9. Breadcrumb Breadcrumb
• 10. Buttons Buttons –Birden çok boyuta, duruma ve daha fazlasına yönelik destekle formlar, iletişim kutuları ve daha fazlası için Bootstrap’ın özel düğme stillerini kullanın. –Bootstrap, her biri kendi semantik amacına hizmet eden önceden tanımlanmış birkaç düğme stilini içerir.
• 11. Buttons Buttons
• 12. Button Group Button Group –Düğme grubuyla tek bir satırda bir dizi düğmeyi bir araya toplayın ve JavaScript ile süper güçleyin. –Daha karmaşık bileşenler için düğme grupları kümelerini düğme araç çubuklarına birleştirin.
• 13. Button Group Button Group
• 14. Cards Cards –Bootstrap’ın kartları, birden çok biçim ve seçenek içeren esnek ve genişletilebilir bir içerik konteynırı sağlar. –Bir kart esnek ve genişletilebilir bir içerik kabıdır. Üstbilgiler ve altbilgiler için seçenekler, çok çeşitli içerik, bağlamsal arka plan renkleri ve güçlü görüntü seçenekleri içerir. Bootstrap 3'ü biliyorsanız, kartlar eski panellerimizi, kuyuları ve küçük resimlerimizi değiştirir. Bu bileşenlere benzer işlevsellik, kartlar için düzenleyici sınıflar olarak kullanılabilir. –Flexbox ile oluşturulmuş, kolay bir hizalama sunar ve diğer Bootstrap bileşenleriyle iyi bir uyum sağlar.
• 15. Cards Cards
• 16. Carousel Carousel –Öğeler arasında gezinmek için bir slayt gösterisi bileşeni (metin görüntüleri veya slaytları). –Carousel, CSS 3D dönüşümleri ve biraz JavaScript ile oluşturulmuş bir dizi içerikte bisiklet sürmek için bir slayt gösterisi. –Sayfa Görünürlük API'sinin desteklendiği tarayıcılarda, web sayfası kullanıcı tarafından görülemediğinde (örneğin, tarayıcı sekmesi etkin değilken, tarayıcı penceresi simge durumuna küçültülmüşken, vb.) Carousel kaymayı önler.
• 17. Carousel Carousel
• 18. Collapse Collapse –Projenizdeki içeriğin görünürlüğünü birkaç sınıf ve JavaScript eklentilerimizle değiştirin. –Daraltma JavaScript eklentisi, içeriği göstermek ve gizlemek için kullanılır. Düğmeler veya çapalar, değiştirdiğiniz belirli öğelere eşlenen tetikleyiciler olarak kullanılır.
• 19. Collapse Collapse
• 20. Dropdowns Dropdowns –Bootstrap açılır kapanır eklentisiyle, bağlantı listelerini ve daha fazlasını görüntülemek için bağlamsal yer paylaşımları arasında geçiş yapın. –Dropdowns, bağlantı listelerini ve daha fazlasını görüntülemek için değiştirilebilen, bağlamsal üst üste bindirmelerdir. Dahil Bootstrap açılır JavaScript eklentisi ile etkileşimli hale getirildiler.
• 21. Dropdowns Dropdowns
• 22. Forms Forms –Çok çeşitli formlar oluşturmak için form kontrol stilleri, düzen seçenekleri ve özel bileşenler için örnekler ve kullanım yönergeleri. –Bootstrap’ın form kontrolleri, yeniden başlatılmış form stillerimizle sınıfları genişletir. Tarayıcılar ve cihazlar arasında daha tutarlı bir işleme için özelleştirilmiş ekranlarına dahil olmak üzere bu sınıfları kullanın.
• 23. Forms Forms
• 24. Input Group Input Group –Metin girişlerinin, özel seçimlerin ve özel dosya girişlerinin her iki tarafına metin, düğme veya düğme grupları ekleyerek form denetimlerini kolayca genişletin.
• 25. Input Group Input Group
• 26. Jumbotron Jumbotron –Kahraman birimi stili içeriğinin sergilenmesi için hafif, esnek bileşen. –Sitenizdeki önemli pazarlama mesajlarını göstermek için tüm görüntü alanını isteğe bağlı olarak genişletebilen hafif, esnek bir bileşen.
• 27. Jumbotron Jumbotron
• 28. List Group List Group –Liste grupları, bir dizi içeriği görüntülemek için esnek ve güçlü bir bileşendir. İçerdeki herhangi bir içeriği desteklemek için bunları değiştirin ve genişletin. –En temel liste grubu, liste öğeleri ve uygun sınıflar içeren sıralanmamış bir listedir.
• 29. List Group List Group
• 30. Modal Modal –Işık kutuları, kullanıcı bildirimleri veya tamamen özel içerik için sitenize iletişim kutuları eklemek için Bootstrap’ın JavaScript modal eklentisini kullanın.
• 31. Modal Modal
• 32. Navs Navs –Önyükleyicinin dahil edilmiş gezinme bileşenlerini kullanma ile ilgili belgeler ve örnekler. –Bootstrap'te kullanılabilir gezinme, temel .nav sınıfından aktif ve engelli durumlara genel biçimlendirme ve stilleri paylaşır. Her stil arasında geçiş yapmak için değiştirici sınıfları değiştirin. –Base .nav bileşeni, esnek kutu ile üretilmiştir ve her türlü gezinti bileşenini oluşturmak için güçlü bir temel sağlar.
• 33. Navs Navs
• 34. Navbar Navbar –Bootstrap’ın güçlü, duyarlı navigasyon başlığı, navbar için belgeler ve örnekler. Çökme eklentimiz için destek dahil olmak üzere marka oluşturma, gezinme ve daha fazlası için destek içerir.
• 35. Navbar Navbar
• 36. Pagination Pagination –Birden çok sayfaya ilişkin bir dizi alakalı içeriğin belirtilmesi için sayfalandırma ve dokümantasyon gösteren örnekler. –Pagination, HTML öğeleri ile oluşturulur, böylece ekran okuyucuları mevcut bağlantıların sayısını bildirebilir.
• 37. Pagination Pagination
• 38. Popovers Popovers –İOS'ta bulunanlar gibi Bootstrap popover'larını sitenizdeki herhangi bir öğeye eklemek için belgeler ve örnekler.
• 39. Progress Progress –Yığılmış çubuklar, animasyonlu arka planlar ve metin etiketleri için destek içeren Bootstrap özel ilerleme çubuklarını kullanma belgeleri ve örnekleri. –İlerleme bileşenleri iki HTML elemanı, genişliği ayarlamak için bazı CSS ve birkaç özellik ile oluşturulmuştur.
• 40. Progress Progress
• 41. Scrollspy Scrollspy –Hangi portun şu anda etkin olduğunu göstermek için Bootstrap gezinmesini veya liste grubu bileşenlerini kaydırma konumuna göre otomatik olarak güncelleyin.
• 42. Scrollspy Scrollspy
• 43. Tooltips Tooltips –Yerel başlık saklama için animasyonlar ve veri özellikleri için CSS3'ü kullanarak CSS ve JavaScript ile özel Bootstrap araç ipuçlarını eklemeye ilişkin belgeler ve örnekler.
• 44. Tooltips Tooltips
• 45. Kaynakça Kaynakça https://getbootstrap.com/ https://www.ebruaydin.com.tr/twitter/bootstrap- nedir-bootstrap-nasil-kullanilir/