Bu derste tekrar edip önyükleme ızgara sistemini göstereceğiz ve ızgaralı sistem muhtemelen
insanların form uyku saatlerini önyükleme kullandıklarının bir numaralı nedeni.
Düğmeler, önyükleme ile yapabileceğiniz güzel, üslupsal değişikliklerdir ancak önyükleme ızgara
sistemi, uygulamanızın tamamının iskeleti gibi davranacaktır.
Yapıyı eklemek ve uygulamamızı yapmak için gerçekten kolay bir yol var.
Bu yüzden ızgara sistemiyle neler yapabileceğinize dair birkaç örnek gösterseyim.
Bootstrap ex-beau'dan açık birkaç site var, burada ilk olan su sürahisi için bir
ürün sayfası ve kaydırın.
Buraya dikkat edin.
Üç parçamız yan yana duruyor ve burada boyutlarını değiştirdikçe fark ediyoruz; burada ölçekleniyorlar ve tabletin
boyutuna geldiğinde birbirlerinin üzerine yığıyorlar.
İşte burada, burada benzer bir etkiye sahip olduğumuz bootstrap grid sistemi bu.
Ölçeklendirilir ve tablet ve mobil boyut üzerine yığılırlar.
Başka bir örnek.
Bu, İzlandalı müzisyen ve Olafur Arnolds ve bu sitede ilerleyin.
oluşturulan bazı içeriklerimiz var, ancak bunun yalnızca bir ızgaralı sistemle oluşturulduğu değil.
Burada, benzer düzeni görebileceğiniz ızgara sistemiyle
İşte bu içerik.
Bu tur burada bitiyor.
Temel olarak ızgara sistemini kullanarak, bazı içeriğin ekranın yüzde 100'ünü almasını istiyoruz diyebiliriz, daha
sonra bunları her birinin vurduğumuza kadar ekran genişliğinin yüzde 25'ini almasını istediğimizi söylemek
için de kullanabiliriz. her biri için cep telefonu yüzü veya tablet boyutu 50'yi alıyor ve daha sonra
Mobil'i kullandığımızda her birinin yüzdesi 100'ü buluyor.
Aynı şey burada bitti.
Ekranla birlikte parçalamamızı ve kaç parçayı istediğimizi seçmemize izin veriyor.
Kendi öğelerimizin her birinin içeri girmesi ve burada gördüğümüz en sonuncusu.
Buna benzer içerik barındıran yaratıcı Tim çöle gidin denir.
İşte ızgara sistemi ve burada da.
Bu yüzden tüm ızgara sistemi ile yapılır.
Tüm bunlar çok önemli, çok heyecan verici şeyler.
Önyükleme yapmadan yapmamız gereken şeylere kıyasla işleri kolayca düzenlememize yardımcı oluyor.
Böylece bootstraps grid sistemini ve bootstrap kullanarak yaptığımız pek çok uygulamayı kullanacağız.
Ve onlardan birini göstermeme izin ver.
Bu, kamp kampanyamızın başvurusu ve kampanyamızın tamamının bir ızgarası olduğuna dikkat edin.
Ekranı yeniden boyutlandırdıkça ölçeklediklerini fark ettik ve ardından iki numaraya, ardından da Mobil'e gidiyoruz.
Birine rastlıyoruz ve mobil düzenini kullanmak gerçekten güzel.
Bu, bir ızgaralı sistem kullanacağımız tek bir yer.
Şimdi ızgara sistemini kullanarak bu ekranı tam ekrandan kullanarak bazı kodları yazmaya başlayalım ve
Değerlendirilen sekmesinde dotcom'u bootstrapped almak için geri dönelim.
Izgaralı sisteme tıklayabilirsiniz.
Izgara sistemine biraz yer var ama burada sadece tek bir sayı işaret
ederek başlayacağım 12.
Izgara sisteminin çalışması için bu gerçekten önemlidir.
Dolayısıyla, her konteyner ve önyükleme 12 farklı sütuna bölünebilir ve ardından ızgara sistemini
kullanarak her bir öğenin kaç adet 12 ünite alabileceğini seçebiliriz.
Dolayısıyla bu davada, 12 birimden yaklaşık 10'u alan bir şeyleri varmış gibi görünüyor.
Ve sonra 12 birimden ikisi ya da dokuz ve üç olabilirler, ancak sol taraftaki bu
12'den daha fazlasına sahip olan bazı oranlara sahiptirler ve sağ taraftaki 12'den küçük bir bölümü vardır.
Kampa geri dönersek, buradaki konteynırımız burada.
Ve her biri 12 üniteden her biri üç ünite alır.
Dört eşit sütunla sonuçlanıp sonra da burada aşağı çekeceğiz.
Şimdi her biri 12 kişiden altı birim alıyor.
Bu yüzden yine 12 sayısı çok önemli.
Şimdi sağa gidelim.
İlk ızgarımız.
var ızgara yok ht m bootstrap SS dosyası dışında boş ve başlatmak için bir konteyner tanımlamanız gerekir.
Bu yüzden bir dosya
Her ne zaman bir Boucek grid kullanırsak, bunun bir konteynırın içinde olması gerekir.
Yani sınıf konteynerle eşittir.
Yapmamız gereken ilk şey, her satır yerine sıra sınıfına sahip başka bir div bulmaktır.
Toplam 12 adet araç var.
Yaparak başlayacağımız şey sadece 50 50'lik bir bölme yaparak, 12'lik bölümden 6'sını alan bir div
ve daha sonra 12'den 6'sını alan başka bir div alacağız.
Şimdi bunu yapalım.
Bir div ekleyeceğiz ve sonra da ikinci bölümümüzü ekleyeceğim ve şu anda sadece iki cihaz boş.
Çalışmayacaksın
Ama ne yapacağım, birincisine bir sınıfa eklemek ve bu biraz tuhaf sütun olacak, büyük bir altı
olacak ve burada aynı şeyi yapacağız.
Sınıf altı sütun büyüklüğüne eşittir.
Sonra burada bazı içerik ekleyeceğiz.
Sadece altı sütun daha diyecekler.
Aynı şey burada.
Ve bunu yaptığımızda kurtaralım ve aslında şebekenin kendisini görmediğimiz pek fazla göremeyeceğiz.
Bu nedenle daha net hale getirmek için burada bir stil etiketi yerine bir sınıf tanımlayacağım.
Yapacağım bir sınıf tanımlamak.
Ben sadece pembe diyeceğim ve bu sınıfı iki div'a uygulayacağım, böylece onları görebiliyorum.
Şu an sadece beyazlar.
Sınır yok.
Sadece biraz metin.
Ama bunu eklersek.
Çok pembe
Ardından arka planın pembe olmasını istiyoruz ve mor bir sade bir piksel mor renkte yapacağız ve
bundan sonra pembe sınıfı bu iki div'ye uygulayacağız.
Her biri altı ünite alır.
Şimdi geri dönelim ve tazeliyoruz.
Oraya gidiyoruz.
Kabın tam yarısını alan iki div bulunduğunu görebilirsiniz.
Konteyner burada ve burada başlıyor.
Ve ikiye bölündük.
Şimdi geri dönüp biraz daha oynayabiliriz ve üçüncü bir sütuna eklemeyi deneyelim.
Ve bu sefer orta sütun sekiz birimi, daha sonra sol ve sağ iki olacak.
Sonunda biter ve bu sayıları burada değiştireceğim.
Oraya gidiyoruz.
Ortada güzel bir ortalanmış sütun ve ardından bir yan bar vb. Için kullanabileceğimiz
sol ve sağdaki iki küçük sütunla sonuçlanacağız.
Bu, tüm bootstrap grid sisteminin altında yatan çok temel bir kavram.
İçinde çalıştığımız her konteyner için 12 ünite var ve bu 12 üniteyi istediğiniz
herhangi bir şekilde atayabiliriz.
Dolayısıyla, 12 sütun her biri bir sütun büyüklüğünde yapabiliriz ve bunun
gibi 12 kere yapabiliriz.
Sayımı kaybetmediğime emin olun.
Oraya gidiyoruz.
Ve ţu an bu iki ţeyden kurtulacađýz.
Ve ben taze olsaydım, bir satırda eşit aralıklarla boyutlandırılmış 12 sütun bulunduğunu göreceksin.
Her biri bir birim alır ve sana başka satırlar ekleyebileceğimizi de gösteririm.
Şimdi şunu yapalım, div sınıfı satıra eşit ve sadece sahip olduğumuz ilk satının altına gidecek.
Bu yüzden bunun içinde div yapalım.
Sınıf Dasch sütununa eşit ve dört tane yapalım.
Bu nedenle, eşit boyutta üç üniteye bölünürüz.
Yani onun için sütun arge böyle yapıyor.
Şimdi bir göz atalım ve pembe sınıfı uygulamadığımızı görebilirsiniz ancak eşit aralıklarla boyutlandırılmış üç
sütun var, bunlara düşen 12 eşit boyutlu sütun oluşturuldu.
Bu yüzden pembe sınıfı sadece olanları görmek daha kolay hale getirmek için ekleyebiliriz.
Ve işte gidiyoruz.
Dolayısıyla bu sadece basit bir örnek.
Aslında bu pembe kutuları sitemizde bulamazsınız.
Ancak burada görebileceğiniz gibi satırların bulunduğu ve her satırın dört sütun geçtiği bir ızgaraya sahibiz.
Her biri üç ünite genişliğinde veya burada bu yaratıcı Tim sitesinde.
Her birinin dört birimi genişliğinde olan üç sütun var.
Aynı şey burada.
Burada üç sütun geçiyor.
Dört sütun var.
Her biri üç ünite genişliğinde.
Bir sonraki video ızgarasının en temel noktaları budur.
Izgarayı nasıl duyarlı hale getireceğimiz ve farklı boyutlarda farklı düzenlere sahip olduğumuz hakkında konuşacağız.
Şu anda büyük sütun ile çalışıyoruz.
var ve bunları bir sonraki videoda göreceğiz ve ayrıca, bu sütunların herhangi birinin
içine başka bir satır ekleyebileceğimiz ve bunları bölebileceğimiz yerli ızgaraları nasıl yazdıracağımızı da göreceğiz. 12 parça daha.
Büyük bir araçla açıkladım ve diğer üç boyut da