Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitim içeriği olup, bir eğitmen tarafından Bootstrap kütüphanesindeki Popover özelliğinin nasıl kullanılacağı adım adım gösterilmektedir.
- Videoda, Popover özelliğinin Bootstrap kütüphanesinden nasıl ekleneceği, nasıl kullanılacağı ve özelleştirileceği anlatılmaktadır. Eğitmen, önce Bootstrap sitesinden Popover kütüphanesini nasıl bulacağını, ardından örnek kodları nasıl kopyalayacağını ve kendi sayfasına nasıl entegre edeceğini göstermektedir. Ayrıca, Popover'ın açılış yönünü (top, bottom, left, right) değiştirme, pointer ekleme ve title özelliğini kullanma gibi temel özellikler de açıklanmaktadır. Video, bir sonraki derste bu özelliklerin nasıl düzenleneceği ve ikonlar ekleneceği bilgisiyle sonlanmaktadır.
- Popover Kütüphanesi Tanıtımı
- Bu derste popover kütüphanesi incelenecek ve tooltip yerine popover kullanılacak.
- Popover, tıklandığında bir baloncuk açarak kısa özgeçmiş gösterecek.
- Bootstrap sitesindeki JavaScript bölümünden popover kütüphanesi bulunabilir.
- 00:43Popover Kullanımı
- Popover kütüphanesinde sağ, sol, üst ve alt açılma seçenekleri bulunmaktadır.
- Örnek kullanım kodları kopyalanarak sayfaya eklenecek.
- Popover için "data-title" ve "data-content" özellikleri kullanılır.
- 01:38Popover Kodlarının Uygulanması
- Popover için bir "a" etiketi oluşturulup "özgeçmiş görüntüle" yazısı eklendi.
- "data-title" özelliği ile "Mahmut" adı, "data-content" özelliği ile özgeçmiş metni eklendi.
- Popover için "popover" sınıfı eklendi ve CSS'de "cursor: pointer" özelliği ile fare üzerine geldiğinde işaretçi değişti.
- 07:14Popover Özelliklerinin Düzenlenmesi
- "data-title" özelliği yerine "title" özelliği kullanılarak başlık metni eklendi.
- Birden fazla popover oluşturulabilir ve her birine farklı özellikler verilebilir.
- İlerleyen bölümlerde popover'lar düzenlenecek ve ikonlar atanacak.