Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Videokod kanalında bir eğitmen tarafından sunulan Bootstrap 4 kullanarak web sayfası oluşturma eğitimidir.
- Eğitim, Bootstrap'in ne olduğu ve neden kullanıldığı bilgisiyle başlayıp, Getbootstrap sitesinden başlangıç şablonu kopyalayıp HTML ve CSS dosyalarını entegre ederek bir web sayfası oluşturma sürecini adım adım göstermektedir. Video boyunca navbar, grid yapısı, kart, alert, carousel, list group, modal ve buton gibi Bootstrap'in temel bileşenlerinin nasıl kullanılacağı detaylı olarak anlatılmaktadır.
- Eğitimde ayrıca padding, margin, renk ve boyut gibi özelliklerin nasıl ayarlanacağı gösterilmekte ve responsive tasarım özellikleri açıklanmaktadır. Video sonunda izleyicilerin yorumlarda daha fazla Bootstrap dersi isteyip istemediklerini belirtmeleri istenmektedir.
- 00:05Bootstrap Nedir ve Kullanım Amacı
- Bu eğitim videosunda Bootstrap 4 kullanarak bir web sayfası oluşturulacak.
- Bootstrap, web sayfasında kullanılabilecek elemanların CSS ve JavaScript dosyalarının yazılmış olduğu bir front-end bileşen kütüphanesidir.
- İçerisinde grid yapısı, model, tooltip, dropdown, menü gibi web sayfası oluşturmada kullanılan elemanları kolayca entegre edebileceğimiz bir kütüphanedir.
- 00:34Örnek Web Sayfası
- Örnek web sayfasıda navbar (header), dropdown alan, arama kısmı ve grid yapısı kullanılmıştır.
- Grid kısmında üç bölümlü bir alan ve kart kullanılmış, sağ kısımda model alanı bulunmaktadır.
- Carrousel (slayt gösterme) özelliği de sayfada yer almaktadır.
- 01:16Bootstrap Kullanımı
- Bootstrap'i web sayfasına entegre etmek için getbootstrap sitesindeki dokümantasyon bölümüne gidilmelidir.
- Başlangıç kısmında eklenmesi gereken CSS ve JavaScript dosyaları belirtilmiştir.
- Başlangıç şablonu kopyalanıp HTML dosyasına yapıştırılabilir.
- 02:18HTML Şablonu
- HTML5 belirten etiket ve iki meta etiketi (UTF-8 karakter seti ve response city) kullanılmıştır.
- Bootstrap'in kütüphanesinde bulunan CSS ve JavaScript dosyaları entegre edilmiştir.
- Sayfada "Hello World" yazısı bulunmakta ve Bootstrap entegre edildiğinde yazı tipi değişmektedir.
- 03:46Navbar Oluşturma
- Navbar oluşturmak için "navbar" sınıfı ve "navbar-expand-lg" özelliği kullanılır.
- "navbar-expand-lg" özelliği, ne kadar çözünürlükte responsive geçeceğini belirtir.
- Navbar'ın açık renk olması için "navbar-light" ve "bg-light" sınıfları kullanılır.
- 05:10Navbar Özellikleri
- Navbar'ın içinde "brand" kısmı bulunur, buraya logo veya site adı yazılır.
- Menüyü açabilmek için toggler kullanılır.
- Navbar'ın yukarıda kalması için "fixed-top" özelliği kullanılabilir.
- 07:36Grid Yapısı
- Grid yapısı tablolama yapısına benzer şekilde sayfayı bölmeye yarar.
- Sayfa 12 birim genişliğinde olup, 3, 6 ve 3 şeklinde bölünebilir.
- Grid yapısında "row" etiketi satır oluşturur ve içinde sütunlar yer alır.
- 09:28Konteyner ve Kart Kullanımı
- Konteyner, sayfanın tüm genişliğini almak yerine belli bir genişliğe kadar alır.
- Kart özelliği ile içerikler görsel olarak ayrıştırılabilir.
- Kartlara resim ve liste eklenerek kullanılabilmektedir.
- 11:16Bootstrap Kullanımı ve Örnekler
- Kart sınıfı oluşturulduğunda otomatik olarak border ve içerisindeki renkler gelir.
- RAM ve pixel arasındaki fark, pikselin RAM'in onda biri olmasıdır; 18 RAM, 180 piksele tekabül eder.
- Web sayfasında farklı eylemlere göre çıkan uyarıları gösteren bir kutu (alert) kullanılabilmektedir.
- 12:35Bootstrap Örneklerinin Entegrasyonu
- Bootstrap'da kontrol tuşları, otomatik geçişli slaytlar ve caption özellikleri bulunmaktadır.
- JavaScript ile ilgili farklı ayarlar kullanılabilir.
- "Carrol example controls" id'si tanımlanmış bir örneğin aynısını kullanmak için farklı bir ID tanımlanması gerekir.
- 14:21Kart ve List Kullanımı
- Kart kullanımı için header ve body kısımları kullanılabilir.
- Öğeler arasında boşluk bırakmak için "margin box-3" gibi komutlar kullanılabilir.
- List grupları için "list-group" ve "list-group-item" sınıfları kullanılabilir.
- 17:43Model ve Buton Kullanımı
- Model kullanımı için buton tetikleme ve model kısımları kullanılabilir.
- Butonlarda renk ve boyut ayarları yapılabilir; örneğin "btn-info" mavi rengi, "btn-sm" küçük boyutu sağlar.
- Form kontrolü için "form-control-sm" kullanılarak küçültme yapılabilir.