1
00:00:00,410 --> 00:00:06,720
Bu derste tekrar edip önyükleme ızgara sistemini göstereceğiz ve ızgaralı sistem muhtemelen

2
00:00:06,720 --> 00:00:11,310
insanların form uyku saatlerini önyükleme kullandıklarının bir numaralı nedeni.

3
00:00:11,310 --> 00:00:16,500
Düğmeler, önyükleme ile yapabileceğiniz güzel, üslupsal değişikliklerdir ancak önyükleme ızgara

4
00:00:16,500 --> 00:00:19,290
sistemi, uygulamanızın tamamının iskeleti gibi davranacaktır.

5
00:00:19,440 --> 00:00:23,980
Yapıyı eklemek ve uygulamamızı yapmak için gerçekten kolay bir yol var.

6
00:00:24,000 --> 00:00:27,480
Bu yüzden ızgara sistemiyle neler yapabileceğinize dair birkaç örnek gösterseyim.

7
00:00:27,480 --> 00:00:33,990
Bootstrap ex-beau'dan açık birkaç site var, burada ilk olan su sürahisi için bir

8
00:00:34,380 --> 00:00:36,140
ürün sayfası ve kaydırın.

9
00:00:36,240 --> 00:00:37,530
Buraya dikkat edin.

10
00:00:37,560 --> 00:00:46,740
Üç parçamız yan yana duruyor ve burada boyutlarını değiştirdikçe fark ediyoruz; burada ölçekleniyorlar ve tabletin

11
00:00:46,890 --> 00:00:50,310
boyutuna geldiğinde birbirlerinin üzerine yığıyorlar.

12
00:00:51,090 --> 00:00:56,940
İşte burada, burada benzer bir etkiye sahip olduğumuz bootstrap grid sistemi bu.

13
00:00:57,270 --> 00:01:02,100
Ölçeklendirilir ve tablet ve mobil boyut üzerine yığılırlar.

14
00:01:02,880 --> 00:01:04,110
Başka bir örnek.

15
00:01:04,140 --> 00:01:10,440
Bu, İzlandalı müzisyen ve Olafur Arnolds ve bu sitede ilerleyin.

16
00:01:10,560 --> 00:01:19,260
oluşturulan bazı içeriklerimiz var, ancak bunun yalnızca bir ızgaralı sistemle oluşturulduğu değil.

17
00:01:19,260 --> 00:01:23,150
Burada, benzer düzeni görebileceğiniz ızgara sistemiyle

18
00:01:23,160 --> 00:01:25,210
İşte bu içerik.

19
00:01:26,100 --> 00:01:28,350
Bu tur burada bitiyor.

20
00:01:28,350 --> 00:01:33,930
Temel olarak ızgara sistemini kullanarak, bazı içeriğin ekranın yüzde 100'ünü almasını istiyoruz diyebiliriz, daha

21
00:01:34,950 --> 00:01:39,870
sonra bunları her birinin vurduğumuza kadar ekran genişliğinin yüzde 25'ini almasını istediğimizi söylemek

22
00:01:39,870 --> 00:01:46,620
için de kullanabiliriz. her biri için cep telefonu yüzü veya tablet boyutu 50'yi alıyor ve daha sonra

23
00:01:46,620 --> 00:01:49,220
Mobil'i kullandığımızda her birinin yüzdesi 100'ü buluyor.

24
00:01:49,860 --> 00:01:50,850
Aynı şey burada bitti.

25
00:01:50,850 --> 00:01:56,660
Ekranla birlikte parçalamamızı ve kaç parçayı istediğimizi seçmemize izin veriyor.

26
00:01:56,790 --> 00:02:00,660
Kendi öğelerimizin her birinin içeri girmesi ve burada gördüğümüz en sonuncusu.

27
00:02:00,660 --> 00:02:05,670
Buna benzer içerik barındıran yaratıcı Tim çöle gidin denir.

28
00:02:05,680 --> 00:02:09,530
İşte ızgara sistemi ve burada da.

29
00:02:09,570 --> 00:02:11,430
Bu yüzden tüm ızgara sistemi ile yapılır.

30
00:02:11,430 --> 00:02:15,590
Tüm bunlar çok önemli, çok heyecan verici şeyler.

31
00:02:15,760 --> 00:02:20,640
Önyükleme yapmadan yapmamız gereken şeylere kıyasla işleri kolayca düzenlememize yardımcı oluyor.

32
00:02:20,670 --> 00:02:25,660
Böylece bootstraps grid sistemini ve bootstrap kullanarak yaptığımız pek çok uygulamayı kullanacağız.

33
00:02:25,890 --> 00:02:27,500
Ve onlardan birini göstermeme izin ver.

34
00:02:27,540 --> 00:02:33,940
Bu, kamp kampanyamızın başvurusu ve kampanyamızın tamamının bir ızgarası olduğuna dikkat edin.

35
00:02:33,960 --> 00:02:39,750
Ekranı yeniden boyutlandırdıkça ölçeklediklerini fark ettik ve ardından iki numaraya, ardından da Mobil'e gidiyoruz.

36
00:02:40,050 --> 00:02:44,480
Birine rastlıyoruz ve mobil düzenini kullanmak gerçekten güzel.

37
00:02:44,760 --> 00:02:47,840
Bu, bir ızgaralı sistem kullanacağımız tek bir yer.

38
00:02:47,850 --> 00:02:54,060
Şimdi ızgara sistemini kullanarak bu ekranı tam ekrandan kullanarak bazı kodları yazmaya başlayalım ve

39
00:02:54,060 --> 00:02:57,800
Değerlendirilen sekmesinde dotcom'u bootstrapped almak için geri dönelim.

40
00:02:58,050 --> 00:03:00,850
Izgaralı sisteme tıklayabilirsiniz.

41
00:03:00,850 --> 00:03:05,670
Izgara sistemine biraz yer var ama burada sadece tek bir sayı işaret

42
00:03:06,130 --> 00:03:07,300
ederek başlayacağım 12.

43
00:03:07,470 --> 00:03:09,890
Izgara sisteminin çalışması için bu gerçekten önemlidir.

44
00:03:09,900 --> 00:03:15,930
Dolayısıyla, her konteyner ve önyükleme 12 farklı sütuna bölünebilir ve ardından ızgara sistemini

45
00:03:16,230 --> 00:03:21,150
kullanarak her bir öğenin kaç adet 12 ünite alabileceğini seçebiliriz.

46
00:03:21,150 --> 00:03:27,050
Dolayısıyla bu davada, 12 birimden yaklaşık 10'u alan bir şeyleri varmış gibi görünüyor.

47
00:03:27,060 --> 00:03:33,420
Ve sonra 12 birimden ikisi ya da dokuz ve üç olabilirler, ancak sol taraftaki bu

48
00:03:33,420 --> 00:03:40,320
12'den daha fazlasına sahip olan bazı oranlara sahiptirler ve sağ taraftaki 12'den küçük bir bölümü vardır.

49
00:03:40,770 --> 00:03:46,510
Kampa geri dönersek, buradaki konteynırımız burada.

50
00:03:46,890 --> 00:03:51,670
Ve her biri 12 üniteden her biri üç ünite alır.

51
00:03:51,810 --> 00:03:56,850
Dört eşit sütunla sonuçlanıp sonra da burada aşağı çekeceğiz.

52
00:03:56,880 --> 00:04:00,040
Şimdi her biri 12 kişiden altı birim alıyor.

53
00:04:00,240 --> 00:04:02,840
Bu yüzden yine 12 sayısı çok önemli.

54
00:04:02,850 --> 00:04:03,660
Şimdi sağa gidelim.

55
00:04:03,660 --> 00:04:05,130
İlk ızgarımız.

56
00:04:05,250 --> 00:04:12,710
var ızgara yok ht m bootstrap SS dosyası dışında boş ve başlatmak için bir konteyner tanımlamanız gerekir.

57
00:04:12,870 --> 00:04:14,640
Bu yüzden bir dosya

58
00:04:14,860 --> 00:04:18,180
Her ne zaman bir Boucek grid kullanırsak, bunun bir konteynırın içinde olması gerekir.

59
00:04:18,210 --> 00:04:22,230
Yani sınıf konteynerle eşittir.

60
00:04:22,290 --> 00:04:28,950
Yapmamız gereken ilk şey, her satır yerine sıra sınıfına sahip başka bir div bulmaktır.

61
00:04:29,220 --> 00:04:31,100
Toplam 12 adet araç var.

62
00:04:31,350 --> 00:04:37,110
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

63
00:04:37,110 --> 00:04:40,730
ve daha sonra 12'den 6'sını alan başka bir div alacağız.

64
00:04:41,070 --> 00:04:42,050
Şimdi bunu yapalım.

65
00:04:42,120 --> 00:04:48,060
Bir div ekleyeceğiz ve sonra da ikinci bölümümüzü ekleyeceğim ve şu anda sadece iki cihaz boş.

66
00:04:48,330 --> 00:04:49,430
Çalışmayacaksın

67
00:04:49,650 --> 00:04:57,000
Ama ne yapacağım, birincisine bir sınıfa eklemek ve bu biraz tuhaf sütun olacak, büyük bir altı

68
00:04:57,670 --> 00:05:00,300
olacak ve burada aynı şeyi yapacağız.

69
00:05:00,300 --> 00:05:03,520
Sınıf altı sütun büyüklüğüne eşittir.

70
00:05:03,630 --> 00:05:05,200
Sonra burada bazı içerik ekleyeceğiz.

71
00:05:05,210 --> 00:05:10,880
Sadece altı sütun daha diyecekler.

72
00:05:10,950 --> 00:05:12,140
Aynı şey burada.

73
00:05:12,210 --> 00:05:18,950
Ve bunu yaptığımızda kurtaralım ve aslında şebekenin kendisini görmediğimiz pek fazla göremeyeceğiz.

74
00:05:19,020 --> 00:05:24,300
Bu nedenle daha net hale getirmek için burada bir stil etiketi yerine bir sınıf tanımlayacağım.

75
00:05:24,300 --> 00:05:26,670
Yapacağım bir sınıf tanımlamak.

76
00:05:26,730 --> 00:05:31,350
Ben sadece pembe diyeceğim ve bu sınıfı iki div'a uygulayacağım, böylece onları görebiliyorum.

77
00:05:31,490 --> 00:05:32,820
Şu an sadece beyazlar.

78
00:05:32,820 --> 00:05:33,660
Sınır yok.

79
00:05:33,750 --> 00:05:34,840
Sadece biraz metin.

80
00:05:35,010 --> 00:05:36,050
Ama bunu eklersek.

81
00:05:36,180 --> 00:05:37,010
Çok pembe

82
00:05:37,140 --> 00:05:45,660
Ardından arka planın pembe olmasını istiyoruz ve mor bir sade bir piksel mor renkte yapacağız ve

83
00:05:45,660 --> 00:05:49,950
bundan sonra pembe sınıfı bu iki div'ye uygulayacağız.

84
00:05:49,950 --> 00:05:52,660
Her biri altı ünite alır.

85
00:05:52,680 --> 00:05:54,570
Şimdi geri dönelim ve tazeliyoruz.

86
00:05:54,900 --> 00:05:55,580
Oraya gidiyoruz.

87
00:05:55,800 --> 00:05:59,640
Kabın tam yarısını alan iki div bulunduğunu görebilirsiniz.

88
00:05:59,670 --> 00:06:01,930
Konteyner burada ve burada başlıyor.

89
00:06:02,460 --> 00:06:04,530
Ve ikiye bölündük.

90
00:06:04,620 --> 00:06:10,110
Şimdi geri dönüp biraz daha oynayabiliriz ve üçüncü bir sütuna eklemeyi deneyelim.

91
00:06:10,410 --> 00:06:16,150
Ve bu sefer orta sütun sekiz birimi, daha sonra sol ve sağ iki olacak.

92
00:06:16,170 --> 00:06:21,270
Sonunda biter ve bu sayıları burada değiştireceğim.

93
00:06:21,280 --> 00:06:22,200
Oraya gidiyoruz.

94
00:06:22,200 --> 00:06:27,960
Ortada güzel bir ortalanmış sütun ve ardından bir yan bar vb. Için kullanabileceğimiz

95
00:06:27,960 --> 00:06:30,900
sol ve sağdaki iki küçük sütunla sonuçlanacağız.

96
00:06:30,900 --> 00:06:34,860
Bu, tüm bootstrap grid sisteminin altında yatan çok temel bir kavram.

97
00:06:34,920 --> 00:06:40,290
İçinde çalıştığımız her konteyner için 12 ünite var ve bu 12 üniteyi istediğiniz

98
00:06:40,290 --> 00:06:42,210
herhangi bir şekilde atayabiliriz.

99
00:06:42,240 --> 00:06:49,830
Dolayısıyla, 12 sütun her biri bir sütun büyüklüğünde yapabiliriz ve bunun

100
00:06:49,830 --> 00:06:52,170
gibi 12 kere yapabiliriz.

101
00:06:52,290 --> 00:06:53,600
Sayımı kaybetmediğime emin olun.

102
00:06:54,090 --> 00:06:54,670
Oraya gidiyoruz.

103
00:06:54,690 --> 00:06:56,620
Ve ţu an bu iki ţeyden kurtulacađýz.

104
00:06:56,820 --> 00:07:01,630
Ve ben taze olsaydım, bir satırda eşit aralıklarla boyutlandırılmış 12 sütun bulunduğunu göreceksin.

105
00:07:01,650 --> 00:07:07,570
Her biri bir birim alır ve sana başka satırlar ekleyebileceğimizi de gösteririm.

106
00:07:07,740 --> 00:07:14,390
Şimdi şunu yapalım, div sınıfı satıra eşit ve sadece sahip olduğumuz ilk satının altına gidecek.

107
00:07:14,730 --> 00:07:18,870
Bu yüzden bunun içinde div yapalım.

108
00:07:19,020 --> 00:07:23,350
Sınıf Dasch sütununa eşit ve dört tane yapalım.

109
00:07:23,370 --> 00:07:27,280
Bu nedenle, eşit boyutta üç üniteye bölünürüz.

110
00:07:27,360 --> 00:07:36,260
Yani onun için sütun arge böyle yapıyor.

111
00:07:36,420 --> 00:07:44,190
Şimdi bir göz atalım ve pembe sınıfı uygulamadığımızı görebilirsiniz ancak eşit aralıklarla boyutlandırılmış üç

112
00:07:44,190 --> 00:07:49,260
sütun var, bunlara düşen 12 eşit boyutlu sütun oluşturuldu.

113
00:07:49,470 --> 00:07:53,240
Bu yüzden pembe sınıfı sadece olanları görmek daha kolay hale getirmek için ekleyebiliriz.

114
00:07:53,940 --> 00:07:54,800
Ve işte gidiyoruz.

115
00:07:55,140 --> 00:07:57,350
Dolayısıyla bu sadece basit bir örnek.

116
00:07:57,420 --> 00:08:01,470
Aslında bu pembe kutuları sitemizde bulamazsınız.

117
00:08:01,710 --> 00:08:08,730
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.

118
00:08:08,760 --> 00:08:15,830
Her biri üç ünite genişliğinde veya burada bu yaratıcı Tim sitesinde.

119
00:08:15,900 --> 00:08:19,830
Her birinin dört birimi genişliğinde olan üç sütun var.

120
00:08:20,070 --> 00:08:20,900
Aynı şey burada.

121
00:08:20,900 --> 00:08:23,860
Burada üç sütun geçiyor.

122
00:08:23,910 --> 00:08:24,960
Dört sütun var.

123
00:08:24,960 --> 00:08:26,840
Her biri üç ünite genişliğinde.

124
00:08:27,390 --> 00:08:30,650
Bir sonraki video ızgarasının en temel noktaları budur.

125
00:08:30,660 --> 00:08:35,850
Izgarayı nasıl duyarlı hale getireceğimiz ve farklı boyutlarda farklı düzenlere sahip olduğumuz hakkında konuşacağız.

126
00:08:35,850 --> 00:08:38,230
Şu anda büyük sütun ile çalışıyoruz.

127
00:08:38,250 --> 00:08:43,050
var ve bunları bir sonraki videoda göreceğiz ve ayrıca, bu sütunların herhangi birinin

128
00:08:43,050 --> 00:08:49,080
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.

129
00:08:49,080 --> 00:08:52,290
Büyük bir araçla açıkladım ve diğer üç boyut da