Components

Bootstrap Bileşenler Accordion

1

Bootstrap’ta Accordion (katlanabilir) bileşeni, içerik gruplarını düzenlemek ve gizlemek için kullanılır. Kullanıcı etkileşimi ile belirli içerik bölümlerinin açılıp kapanmasını sağlar. Bu, kullanıcıların daha fazla bilgiye ihtiyaç duyduklarında içeriği görüntülemelerini kolaylaştırır ve sayfanın düzenini daha düzenli hale getirir.

Devamını Oku

Bootstrap Bileşenler Alert

2

Bootstrap’ta Alert (uyarı) bileşeni, kullanıcıya bilgi vermek veya belirli bir durumu belirtmek için kullanılan görsel bir bileşendir. Alert bileşeni, başarı, hata, uyarı ve bilgi mesajları gibi çeşitli durumları belirtmek için farklı renklerde ve stillerde sunulabilir. Aşağıda Bootstrap alert bileşeni hakkında detaylı bilgi ve örnekler bulunmaktadır.

Devamını Oku

Bootstrap Bileşenler Badge

3

Bootstrap’ta Badge (rozet) bileşeni, belirli bir içeriği vurgulamak veya ek bilgi sağlamak amacıyla kullanılan küçük, renkli etiketlerdir. Genellikle bildirim sayıları, durumları veya kategorileri belirtmek için kullanılır. Badge’ler, içerik üzerinde belirli bir anlam taşır ve kullanıcıların dikkatini çekmek için etkili bir görsel araçtır.

Devamını Oku

Bootstrap Bileşenler Buttons

4

Bootstrap’ta Buttons (butonlar) bileşeni, kullanıcı etkileşimi sağlamak için kullanılan önemli ve görsel olarak çekici elementlerdir. Bootstrap, butonları özelleştirmenin ve farklı durumları belirtmenin birçok yolunu sunar. Aşağıda Bootstrap butonlarının özellikleri, türleri ve nasıl kullanılacağı hakkında bilgi bulunmaktadır.

Devamını Oku

Bootstrap Bileşenler Button Group

5

Bootstrap’ta Button Group (buton grubu) bileşeni, bir arada kullanılacak birden fazla butonu düzenlemek için kullanılır. Bu, kullanıcıların benzer işlevleri bir arada bulmalarını kolaylaştırır ve tasarım açısından daha düzenli bir görünüm sağlar. Button Group, butonları yatay veya dikey olarak düzenlemenize olanak tanır.

Devamını Oku

Bootstrap Bileşenler Card 1

6

Bootstrap’ta Card bileşeni, içeriklerinizi düzenlemek ve şık bir şekilde sunmak için kullanılan çok yönlü bir yapıdır. Kartlar, başlıklar, metin, görseller, butonlar ve diğer içerik türlerini içerebilen kutulardır. Bootstrap kartları, genellikle kullanıcı arayüzlerinde bilgi gruplamak için kullanılır ve özelleştirme imkanları ile dikkat çeker.

Devamını Oku

Bootstrap Bileşenler Card 2

7

Bootstrap'ta Card 2 bileşeni, temel kart yapısının daha gelişmiş ve özelleştirilmiş bir örneğidir. Bu versiyon, kart içeriğini daha çekici hale getirmek için çeşitli stil ve yapılandırma seçenekleri sunar. İşte Card bileşeninin gelişmiş özellikleri ve nasıl kullanılacağına dair bilgiler.

Devamını Oku

Bootstrap Bileşenler Card 3

8

Bootstrap'ta Card 3 bileşeni, kullanıcı arayüzü tasarımında esneklik ve estetik sunan daha karmaşık kart yapılarıdır. Kartlar, bilgi sunmak için çok yönlü bir araçtır ve birçok farklı bileşen ile birleştirilebilir. Bu sürümde, kartları daha ilgi çekici hale getirmek için daha fazla özelleştirme ve etkileşim sunulmaktadır.

Devamını Oku

Bootstrap Bileşenler Carousel 1

9

Bootstrap'ta Carousel, kullanıcıların içeriklerini slaytlar halinde göstererek dinamik bir görsel deneyim sunan bir bileşendir. Genellikle resim galerileri, haber güncellemeleri veya içerik vurgulama için kullanılır. Carousel bileşeni, otomatik olarak dönen slaytlar, kullanıcı etkileşimleriyle manuel geçiş yapma olanağı ve daha fazlasını içerir.

Devamını Oku

Bootstrap Bileşenler Carousel 2

10

Bootstrap Carousel, Bootstrap framework'ü kullanarak web sitenizde görsel veya içerik kaydırma (slideshow) oluşturmanızı sağlayan bir bileşendir. Bootstrap 5 ile birlikte gelen Carousel bileşeni, kullanıcıların içerikleri veya resimleri kaydırarak görüntülemelerini kolaylaştırır. İşte Bootstrap Carousel'in temel özellikleri ve nasıl kullanıldığına dair bir açıklama:

Devamını Oku

Bootstrap Bileşenler Close Button

11

Bootstrap, kullanıcı arayüzünü geliştirmek için çeşitli bileşenler sunar ve bu bileşenlerden biri de "Close Button" yani "Kapatma Düğmesi"dir. Genellikle bildirimler, modal pencereler ve diğer etkileşimli bileşenlerde kullanılır. Close button, kullanıcıların belirli bir içeriği veya bileşeni kapatmalarına olanak tanır.

Devamını Oku

Bootstrap Bileşenler Collapse

12

Bootstrap Collapse bileşeni, kullanıcıların içeriği açıp kapatmalarına olanak tanıyan etkileşimli bir bileşendir. Genellikle menüler, yan paneller, form alanları veya bilgi kutuları gibi içerikleri gizlemek veya göstermek için kullanılır. Bu bileşen, kullanıcı arayüzünü daha düzenli ve kullanışlı hale getirmeye yardımcı olur.

Devamını Oku

Bootstrap Bileşenler Dropdown 1

13

Bootstrap Dropdown, kullanıcıların bir menü açarak seçenekleri görüntülemelerini ve seçim yapmalarını sağlayan bir bileşendir. Genellikle formlar, gezinme menüleri veya kullanıcı arayüzü bileşenlerinde kullanılır. Dropdown menüler, kullanıcı etkileşimini artırmak ve arayüzü daha düzenli hale getirmek için harika bir yoldur.

Devamını Oku

Bootstrap Bileşenler Dropdown 2

14

Bootstrap Dropdown bileşeninin ikinci bir örneği olarak, daha karmaşık bir dropdown menüsü oluşturalım. Bu örnekte, birden fazla alt menü içeren bir dropdown yapısı ve bazı farklı özellikler ekleyeceğiz. Böylece Bootstrap'ın sunduğu dropdown özelliklerinin nasıl genişletilebileceğini göreceğiz.

Devamını Oku

Bootstrap Bileşenler List Group 1

15

Bootstrap List Group bileşeni, içeriği liste halinde düzenlemek için kullanılan şık ve düzenli bir yapıdır. Bu bileşen, sıralı veya sırasız listeler oluşturmanızı ve her bir liste öğesine bağlantılar, simgeler veya eylem düğmeleri eklemenizi sağlar. List Group, genellikle yan menüler, bilgi panelleri veya içerik grupları gibi durumlarda kullanılır.

Devamını Oku

Bootstrap Bileşenler List Group 2

16

Bootstrap List Group bileşeninin ikinci örneği olarak, daha fazla özelleştirme ve etkileşim ekleyerek, liste öğelerine simgeler, eylem düğmeleri ve bağlantılar dahil eden gelişmiş bir liste oluşturalım. Bu örnekte, kullanıcıların etkileşimde bulunabileceği daha zengin bir kullanıcı arayüzü oluşturacağız.

Devamını Oku

Bootstrap Bileşenler Modal 1

17

Bootstrap Modal, kullanıcıların etkileşimde bulunabileceği, sayfanın geri kalanını geçici olarak kaplayan bir iletişim kutusudur. Modallar, genellikle kullanıcıdan bilgi almak, bildirimde bulunmak veya önemli içerikleri vurgulamak için kullanılır. Bootstrap ile modal bileşeni, hızlı bir şekilde oluşturulabilir ve özelleştirilebilir.

Devamını Oku

Bootstrap Bileşenler Modal 2

18

Bootstrap Modal bileşeninin ikinci örneği olarak, daha gelişmiş bir modal yapısı oluşturalım. Bu örnekte, form elemanları ekleyerek kullanıcıdan bilgi almak amacıyla kullanılacak bir modal tasarlayacağız. Böylece modalın nasıl etkileşimli hale getirileceğini ve kullanıcılardan veri toplayabileceğimizi göreceğiz.

Devamını Oku

Bootstrap Bileşenler Navbar

19

Bootstrap Navbar, bir web uygulamasının veya sitenin üst kısmında bulunan, gezinmeyi kolaylaştıran ve genellikle logo, bağlantılar ve menü düğmeleri içeren bir bileşendir. Kullanıcıların site içinde hızlı bir şekilde gezinmesine olanak tanır ve responsive (duyarlı) yapısıyla farklı ekran boyutlarına uyum sağlar.

Devamını Oku

Bootstrap Bileşenler Navbar 2

20

Bootstrap Navbar bileşeninin ikinci örneği olarak, daha karmaşık bir yapı oluşturalım. Bu örnekte, kullanıcıların daha fazla içeriğe erişebilmesi için açılır menü (dropdown) öğeleri ekleyeceğiz. Ayrıca, arama çubuğu ve düğmeler gibi ek bileşenler de kullanacağız. Bu tür bir navbar, genellikle daha fazla sayfa veya alt içerik bağlantıları sunmak için kullanılır.

Devamını Oku

Bootstrap Bileşenler Nav Tab

21

Bootstrap Nav Tabs, kullanıcıların içerikler arasında geçiş yapmasını sağlayan ve sekme görünümünde düzenlenmiş bir navigasyon bileşenidir. Bu özellik, özellikle birden fazla içerik alanını organize etmek ve kullanıcıların hızlı bir şekilde farklı bölümlere geçiş yapmasını sağlamak için kullanılır.

Devamını Oku

Bootstrap Bileşenler Offcanvas

22

Bootstrap Offcanvas, sayfanın kenarından açılan ve kullanıcıların ek bilgi veya içeriklere hızlı erişimini sağlayan bir bileşendir. Kullanıcı etkileşimini artırmak için kullanılır ve özellikle mobil cihazlarda duyarlı bir şekilde çalışır. Offcanvas, genellikle menüler, ek bilgi alanları veya bildirimler için kullanılır.

Devamını Oku

Bootstrap Bileşenler Pagination

23

Bootstrap Pagination, web sayfalarında çok sayıda içeriği düzenlemek ve kullanıcıların bu içerikler arasında geçiş yapmasını sağlamak için kullanılan bir bileşendir. Genellikle, birden fazla sayfaya yayılan veri listeleri veya içerikler için kullanılır, böylece kullanıcılar belirli bir sayfaya kolayca erişebilir.

Devamını Oku

Bootstrap Bileşenler Placeholder

24

Bootstrap Placeholder, yüklenmekte olan içerikler için yer tutucu metin veya görsel sağlar. Genellikle, bir sayfa veya bileşen içindeki içerik henüz yüklenmediğinde kullanıcıya görsel bir gösterim sunmak için kullanılır. Bu özellik, kullanıcı deneyimini geliştirmek ve sayfa yüklenirken içeriklerin düzenli görünmesini sağlamak için faydalıdır.

Devamını Oku

Bootstrap Bileşenler Popovers

25

Bootstrap Popover, kullanıcı etkileşimi sırasında daha fazla bilgi veya içerik sağlamak için kullanılan küçük bilgi baloncuklarıdır. Genellikle, bir öğeye tıklanarak veya üzerine gelindiğinde açılır ve ek bilgiler sunar. Popover'lar, formlar, düğmeler veya bağlantılar gibi çeşitli bileşenlerle kullanılabilir.

Devamını Oku

Bootstrap Bileşenler Progressbar

26

Bootstrap Progressbar, bir işlemin ilerlemesini görsel olarak göstermek için kullanılan bir bileşendir. Genellikle, yükleme süreçleri, görevlerin tamamlanma yüzdesi veya herhangi bir zaman alıcı işlemin ilerlemesi hakkında kullanıcıya bilgi vermek amacıyla kullanılır. Progressbar, kullanıcı deneyimini artırır ve işlem süresi hakkında bilgi sağlar.

Devamını Oku

Bootstrap Bileşenler Scrollspy

27

Bootstrap Scrollspy, uzun sayfalarda kullanıcıların hangi bölümde bulunduklarını göstermek için kullanılan bir bileşendir. Bu özellik, sayfa kaydırıldıkça belirli bölümlerin başlıklarını vurgular ve kullanıcıya hangi bölümde olduğunu anlaması için görsel bir geri bildirim sağlar. Genellikle, tek sayfalık uygulamalarda veya uzun içerikli sayfalarda kullanılır.

Devamını Oku

Bootstrap Bileşenler Spinners

28

Bootstrap Spinner'lar, kullanıcıların bir sayfa veya işlemin yüklendiğini belirtmek için kullanılan animasyonlu yüklenme göstergeleridir. Bu bileşenler, bir sayfanın yüklenmesi veya bir veri işleminin tamamlanmasını beklerken kullanıcıya görsel bir geri bildirim sağlar.

Devamını Oku

Bootstrap Bileşenler Toast

29

Bootstrap, popüler bir frontend frameworküdür ve kullanıcı arayüzü oluşturmayı kolaylaştıran birçok bileşen sunar. Toast bileşeni, Bootstrap'in sağladığı etkileşimli bir bildirim öğesidir. Toast'lar, kısa ve öz mesajlar göstermek için kullanılır ve genellikle bir kullanıcının dikkatini çekmek veya bilgi vermek amacıyla kullanılır. Örneğin, bir form gönderiminden sonra başarı veya hata mesajı olarak kullanılabilirler.

Devamını Oku

Bootstrap Bileşenler Tooltips

30

Bootstrap'un Tooltips bileşeni, bir öğenin üzerine gelindiğinde veya odaklanıldığında küçük bir bilgi balonu gösteren bir araçtır. Bu bileşen, kullanıcıya ek bilgi vermek veya açıklamalar sağlamak amacıyla kullanılır.

Devamını Oku

Bootstrap 5 Dersleri

Öne çıkan gönderiler

Ençok Okunankar

Tags

Sayfalarımız