Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan web geliştirme eğitim serisinin bir bölümüdür. Eğitmen, Bootstrap kütüphanesinin modal bileşeninin nasıl kullanılacağını adım adım göstermektedir.
- Videoda, Bootstrap'in modal özelliğinin temel kullanımından başlayarak, header, body ve footer bölümlerinin nasıl oluşturulacağı detaylı olarak anlatılmaktadır. Eğitmen, "What We Do" adlı bir section oluşturarak HTML kodlarını göstermekte, butonlara modal ekleme, fade efekti kullanımı ve farklı boyut seçenekleri (model-lg, model-sm) gibi özelliklerin nasıl eklenebileceğini açıklamaktadır.
- Video, bir web projesinin tamamlanmış halini göstererek başlamakta ve bir sonraki derste tasarımın YouTube videosu çalıştırma özelliğine sahip hale getirileceği bilgisiyle sonlanmaktadır.
- 00:00Projenin Durumu ve Modeller Hakkında Giriş
- Önceki derste team section tamamlanmış ve bu derste projenin bitmiş haline bakılacak.
- Form bölümü değiştirilmiş, artık tıklanıldığında model penceresi açılıyor.
- Bu derste Bootstrap komponentleri ve JavaScript parçalarından olan modeller üzerine konuşulacak.
- 01:30Modeller Hakkında Bilgi
- Getbootstrap.com dökümantasyon sayfasında "model" yazarak model komponenti bulunabilir.
- Bir sonraki derste bu alan tamamlanacak.
- 02:35HTML Kodlarının Hazırlanması
- "What we do" adında yeni bir section oluşturuluyor.
- Konteyner sınıfı kullanılarak bir alan oluşturuluyor.
- Başlık ve paragraf için col-md-12 ve text-center sınıfları kullanılıyor.
- 05:49Stil Atamaları
- Section'a marjin-bottom 250 piksel ve background-color #34495 stilleri veriliyor.
- Bu stil atamaları sadece gösterim amaçlı, sonrasında silinecek.
- 06:45Buton Oluşturma
- Sütun sınıfının altına yeni bir sütun sınıfı oluşturuluyor.
- Buton için btn-btn-primer sınıfı kullanılıyor.
- Butona data-toggle="modal" ve data-target="my-model" attribute'ları ekleniyor.
- 11:57Model Oluşturma
- Model için div sınıfı oluşturuluyor ve "my-model" adı veriliyor.
- Model sınıfına model ve fade class'ları ekleniyor.
- Model diyalog için div sınıfı oluşturuluyor ve model-content, model-header ve h4 etiketleri kullanılıyor.
- 15:22Model Diyalog Oluşturma
- Buton etiketi açılarak "close" sınıfı kullanılarak çarpı işareti butonu oluşturuluyor.
- Çarpı butonuna tıklandığında modelin kapanması için "data-dismiss" özelliği "model" değerine eşitleniyor.
- Modelin header kısmına çarpı butonu, body kısmına paragraf, footer kısmına ise kapatma butonu ekleniyor.
- 19:29Model Diyalog Yapısı
- Model diyalog yapısında "model" sınıfı ile adresleme yapılıyor, böylece buton tıklandığında aynı model oluşturuluyor.
- Modelin content kısmı ile model elementi oluşturuluyor ve header, body, footer bölümleri ekleniyor.
- Bu klasları aklımızda tutmak yerine, dökümantasyon veya framework kütüphanesinden hazır klasları kullanmak daha pratik.
- 21:04Dökümantasyon Kullanımı
- Dökümantasyon sayfasında farklı model örnekleri bulunuyor ve bunlardan istenilenler kopyalanıp kullanılabiliyor.
- Modelin header, body, footer bölümlerinin hepsini kullanmak zorunda değiliz, sadece body bile kullanılabilir.
- Tooltip paragrafları, gridler gibi farklı özellikler de dökümantasyondan kopyalanıp model içine eklenebilir.