1
00:00:00,250 --> 00:00:03,150
Bu videoda kampı şekillendirmeye devam edeceğiz.

2
00:00:03,360 --> 00:00:08,590
Her bir sayfaya bir gezinti çubuğu ekleyeceğiz ve şimdilik nav çubuğu oldukça boş olacak.

3
00:00:08,700 --> 00:00:14,780
Ancak sonunda oturum açma ve oturum açma gibi düğmelerin hepsinin bu işlevselliği kaydedecektir.

4
00:00:15,030 --> 00:00:19,710
Fakat o zamana kadar orada bazı yer tutucu metinler koyacağız ve şimdi yeni kamp

5
00:00:19,710 --> 00:00:23,510
formunu da şekillendireceğiz çünkü şu anda oldukça kaba bir şekle sahip.

6
00:00:23,580 --> 00:00:28,860
Şimdi sunucuyu çalıştıralım ve elimizdeki özelliklere bir göz atalım.

7
00:00:28,890 --> 00:00:31,150
İşte açılış sayfamımız.

8
00:00:31,680 --> 00:00:36,250
İşte görüşümüz, tüm kampın kamp listesini değiştirmesi.

9
00:00:36,290 --> 00:00:38,180
Oldukça güzel görünüyor.

10
00:00:38,430 --> 00:00:40,490
Burada bir nav bar istiyoruz.

11
00:00:40,890 --> 00:00:43,370
Aynı şey yeni kamp alanı ekleme konusunda.

12
00:00:43,740 --> 00:00:49,290
Formu ortalayacağız ve bu iki girişi yan yana koymak yerine

13
00:00:49,290 --> 00:00:51,050
birbirlerinin üstüne istifleyeceğiz.

14
00:00:51,360 --> 00:00:56,400
Ancak nav barıyla başlayacağız ve kampın şablonunda çalışalım.

15
00:00:56,610 --> 00:01:00,990
Bu yüzden geri dönüp kamp şablonunu açıp başlayacağız.

16
00:01:00,990 --> 00:01:08,220
biraz ve bizim açılan kapılardaki tüm düğmeleri olmadığında en azından başlamamamız bu kadar uzun sürmeyecek.

17
00:01:08,220 --> 00:01:13,440
Önyüklemeyi kaldırılmış kutuyu açacağım ve bileşenlere ve nav çubuğuna geçeceğim ve

18
00:01:13,440 --> 00:01:19,890
kendimi her zaman bu bölümde buluyorum çünkü önyükleme aygıtı gezinme çubuğunu eklemek gerçekten kolay

19
00:01:19,890 --> 00:01:22,910
olmasına rağmen yine de görebilirsiniz. biçimlendirme

20
00:01:22,950 --> 00:01:27,690
Güzel ve sade bir şekilde başlayacağız, ancak o zaman bile hala hatırlamamız gereken bir sürü sınıf var.

21
00:01:28,140 --> 00:01:32,700
Dolayısıyla önyüklemeyi Darcs'ı yukarı çekmeye kesinlikle utanmazsınız, bu sınıfta başka

22
00:01:32,710 --> 00:01:35,040
şeyler gibi, şeyleri aramaktan utanmamalısınız.

23
00:01:35,100 --> 00:01:40,320
Ancak özellikle bootstrap bazen sadece bu sınıfların ve öğelerin karmaşası olabilir ve dokümanlara

24
00:01:40,320 --> 00:01:42,860
bakmadan bunu yapmak için bir yol yoktur.

25
00:01:42,870 --> 00:01:48,870
Tamam, böylece geri döneceğiz ve kamp şablonunun üst kısmında biraz oda

26
00:01:48,870 --> 00:01:55,180
yapacağız ve bir Nav tanımlayarak başlayacağız. Bu da başlık gibi.

27
00:01:55,320 --> 00:01:59,450
Bir div yapabiliriz, ancak Nav'u yapabiliriz. biraz daha anlamlıdır.

28
00:01:59,460 --> 00:02:00,870
Daha semantik.

29
00:02:01,050 --> 00:02:09,580
Bu yüzden, sınıf gezinme çubuğuyla bir nav yapacağım ve daha sonra nav çubuğu çizgi varsayılanını kullanacağım.

30
00:02:09,600 --> 00:02:14,640
Farklı tipler ve farklı renkler var ya da tersine çevrilebilen bir gezinme çubuğuna sahip olabiliriz, ancak

31
00:02:14,640 --> 00:02:16,240
varsayılan ayna ile devam edeceğiz.

32
00:02:16,410 --> 00:02:25,500
sınıfa böyle bir son için nav çubuk çizgisine eşit bir çapa etiketi ekleyeceğimize eşit.

33
00:02:25,590 --> 00:02:33,570
Ve sonra sınıf, konteynır sıvısına eşit sınıf ile bir div ekleyecek ve

34
00:02:36,480 --> 00:02:45,570
bu sadece bize güzel dolgu yapacak ve bazı alanlarda oraya gelecek ve sonra nav

35
00:02:45,570 --> 00:02:54,090
çubuğu başlığına eşit sınıfla başka bir div içine ekleyeceğiz ve içimizde sınıf, başlığımızın

36
00:02:54,330 --> 00:03:03,870
Ve sonra bağlantıyı sadece eğik çizgi olacak şekilde ayarlayabiliriz ve sonra bunu kapatıp, öyle yelpaze

37
00:03:03,870 --> 00:03:04,850
kampına ekleyeceğiz.

38
00:03:04,980 --> 00:03:07,750
Ve bu basit biçimlendirmeyle neler elde ettiğimizi görelim.

39
00:03:07,920 --> 00:03:14,430
Dolayısıyla, nav çubuğu başlığı olan bir konteynır ile NAV'ye sahibiz ve nav çubuğu başlığının sadece neph bar

40
00:03:14,820 --> 00:03:16,730
markası olan bir öğesi var.

41
00:03:17,010 --> 00:03:18,290
Yenilelim.

42
00:03:18,780 --> 00:03:24,060
Tamam, böylece nav çubuğumuz var ve sonra burada markamız var ve bu,

43
00:03:24,060 --> 00:03:27,710
tıkladığınızda bizi iğrenç açılış sayfasına geri götürecek bir bağlantı.

44
00:03:28,200 --> 00:03:34,320
Tamam, o halde giriş ve kaydolmak için birkaç yer tutucuyu buraya ekleyin.

45
00:03:34,320 --> 00:03:40,500
Çalışmazlar ya da hiçbir şey yapmazlar, ancak iyi görünüyorsa bu işi yapalım, şimdi bizim kampa geçelim.

46
00:03:40,890 --> 00:03:47,710
E. J. şablon olarak nav çubuğunun ve konteynırın içinde ancak N içinde değil. F. Bar Hetter.

47
00:03:47,970 --> 00:03:55,950
Başka bir div'e ekleyeceğiz ve bu div'ın, bunun ne olduğunu görecek bir çöküş sınıfı olacaktır.

48
00:03:55,950 --> 00:03:56,220
 

49
00:03:56,220 --> 00:04:01,810
Ve bir dakika sonra Neph Bar Dasch da öyle çöker.

50
00:04:01,890 --> 00:04:13,710
Sonra içimizde bir UL ekleyeceğiz ve bu UL'nin nav çubuk çizgisi nav'u ve ardından da sağdaki çubuğun sağına taşınacak olan nav

51
00:04:13,770 --> 00:04:20,430
çubuk çizgisi sınıfı olacak ve daha sonra bunun içine gideceğiz. şimdilik üç

52
00:04:20,430 --> 00:04:24,520
bağlantıya sahip ve her biri bir müttefik olacak.

53
00:04:25,170 --> 00:04:32,820
Sonra Ally'nin içinde bir bağlantı etiketi olacak ve ilk girişi yapacak.

54
00:04:32,850 --> 00:04:40,830
Ve şu an için H ref, rota yolumuza ayarlanacak çünkü henüz giriş yok ve kayıt

55
00:04:40,830 --> 00:04:42,940
için aynı şeyi yapacağız.

56
00:04:42,980 --> 00:04:49,540
Kaydolun ve sonra da bunun gibi oturumu kapatalım.

57
00:04:49,910 --> 00:04:50,680
TAMAM.

58
00:04:51,210 --> 00:04:52,580
Bakalım bu neye benziyor.

59
00:04:52,590 --> 00:04:59,550
Yenilersek çökmenin ne işe yaradığı hakkında konuşmadan önce iyi görünmüyor, burada bir

60
00:04:59,550 --> 00:05:02,090
küçük sınıfı UL'de kaçırdık.

61
00:05:02,290 --> 00:05:06,470
Görünüşe göre şimdi eklemedik biz sadece nav çubuğu ekledik.

62
00:05:06,470 --> 00:05:13,680
Şimdi hiç doğru bulmadık ama nav'u kendim eklemedik böylece şimdi kaydedeceğiz, yenileyeceğiz ve

63
00:05:13,680 --> 00:05:20,430
NAV'ın sağ tarafındaki üç bağlantıya da son verdik ve buradaki boyutu da değiştirdiğimde.

64
00:05:20,430 --> 00:05:25,130
Dikkat et burada sağ çöktü.

65
00:05:25,680 --> 00:05:29,300
Ve nihayetinde elimizdeki küçük bir hamburger simgesi olacak.

66
00:05:29,340 --> 00:05:32,610
Tıpkı tıkladığınız yere ve menüye benziyor.

67
00:05:33,050 --> 00:05:36,180
Şimdilik, o boyuta ulaştığımızda onları gizliyoruz.

68
00:05:36,450 --> 00:05:36,690
TAMAM.

69
00:05:36,690 --> 00:05:42,240
Dolayısıyla, nav çubuğu için yapılması gereken tek şey, bunun yalnızca bir sayfada olduğu gerçeğidir.

70
00:05:42,240 --> 00:05:45,390
Şimdi bunu tüm sayfalara ekleyelim.

71
00:05:45,390 --> 00:05:50,030
Öyleyse onu kopyalayalım veya keselim ve başlığa taşımaya gidiyoruz.

72
00:05:50,460 --> 00:05:52,400
Bu yüzden kafaya veya kısmen hareket ettirin.

73
00:05:52,680 --> 00:05:53,790
Ben sadece onu açarım.

74
00:05:53,790 --> 00:06:00,130
Komut satırı C9 görünümlerini kullanarak, Parshall'ın eğik çizgi başlığını Ijaw Evet kaydırın.

75
00:06:00,570 --> 00:06:03,840
Ve sonra sadece cesedin üstünde bunu ekleyeceğiz.

76
00:06:04,320 --> 00:06:06,080
Bunu düzgün bir şekilde girelim.

77
00:06:06,570 --> 00:06:09,230
Tamam gidiyoruz.

78
00:06:09,900 --> 00:06:15,840
Üstbilgimizde gezinme çubuğumuz var, böylece kısmi başlığı eklediğimiz dosyalar artık

79
00:06:15,840 --> 00:06:20,550
gezinme çubuğuna sahip olacak, ancak sunucuyu tekrar başlatacaktır.

80
00:06:20,850 --> 00:06:25,790
Yeni bir kampanya eklersek, o bar da alırsak hâlâ burada.

81
00:06:26,160 --> 00:06:31,270
Ve ana sayfaya gidersek, aynı zamanda yeterli barımız olur.

82
00:06:31,530 --> 00:06:32,110
Harika.

83
00:06:32,130 --> 00:06:36,950
Şimdi bu formu biraz daha iyi görünmesi için ilerleyelim.

84
00:06:36,990 --> 00:06:40,840
Daha önce bahsettiğim gibi, bu forma yapmak istediğim iki büyük şey var.

85
00:06:40,860 --> 00:06:46,470
İlki, sayfanın ortasına yerleştirmek ve ikincisi, üç girişi ya da iki

86
00:06:46,950 --> 00:06:52,320
girişi ve düğmeyi ekran boyunca yatay olarak hizalamak yerine formun dikey

87
00:06:52,320 --> 00:06:53,270
olarak istiflenmesi.

88
00:06:53,370 --> 00:06:56,120
Onları alıp üst üste istif etmek istiyorsunuz.

89
00:06:56,370 --> 00:07:00,820
Yeni nokta olan doğru dosyayı açarak başlayalım.

90
00:07:00,960 --> 00:07:01,510
Evet.

91
00:07:01,650 --> 00:07:11,470
Dolayısıyla, Ejay'ın bizi tanıdığını ve o zamana kadar şu ana kadar sahip olduğumuz şekli C9'un görüşlerine göre çizgi üzerinde bulacağız.

92
00:07:11,970 --> 00:07:18,750
Kolay başlayalım ve önyükleme sınıflarının bazılarını formlara veya girdilere ekleyelim ve bu da

93
00:07:19,020 --> 00:07:20,810
form çizgi denetimi yapıyor.

94
00:07:21,150 --> 00:07:25,390
Ve bunu hem girişlerde hem de düğmede istiyoruz.

95
00:07:25,500 --> 00:07:33,290
Bootstrap sınıfı PTEN ETN'yi buna benzer şekilde ekleyelim.

96
00:07:33,570 --> 00:07:39,090
Ayrıca arıza arasında da var ve neye benzediğini görelim.

97
00:07:39,090 --> 00:07:40,920
Yani J.'den sonra düğüm

98
00:07:41,030 --> 00:07:42,830
Evet yenile.

99
00:07:43,300 --> 00:07:49,770
Tamam, buradaki önyükleme denetimleri ve önyükleme düğmesini kesinlikle alıyoruz ve

100
00:07:50,100 --> 00:07:51,060
bunu istemiyoruz.

101
00:07:51,210 --> 00:07:54,840
Bu yüzden bunu düzeltmek için yapabileceğimiz birkaç şey var.

102
00:07:54,840 --> 00:07:57,900
Birincisi, her şeyi bir kabın içine koyacağız.

103
00:07:58,110 --> 00:08:01,520
Dolayısıyla div sınıfı konteynerle aynı

104
00:08:04,680 --> 00:08:09,960
kalıyordu ve bunu sadece alt kısmına taşıdım.

105
00:08:10,930 --> 00:08:13,690
İşte gidiyoruz ve bunu düzgün bir şekilde girelim.

106
00:08:13,950 --> 00:08:16,450
Çok az değişiklik kaydedin.

107
00:08:16,530 --> 00:08:19,850
Şimdi biraz boşluk buluyoruz ama bu hala büyük bir form.

108
00:08:20,220 --> 00:08:23,280
Yapacağım sonraki şey ızgaralı sistemi kullanmaktır.

109
00:08:23,520 --> 00:08:30,710
Böylece başka bir div ekleyeceğiz ve bu sınıfın sıraya eşit bir sınıfa sahip olacağız.

110
00:08:30,720 --> 00:08:33,750
Bunu alıp sıraya kopyalayalım.

111
00:08:33,780 --> 00:08:36,630
Böylece tüm form şimdi sıraya giriyor.

112
00:08:36,810 --> 00:08:39,220
Ve bu da aynı şekilde yapılır.

113
00:08:39,610 --> 00:08:44,930
Kaydet yenilemek henüz büyük bir fark değil.

114
00:08:44,970 --> 00:08:51,150
Ve yapacağımız şey, CSSA kullanıyor ve esas olarak marjını vererek bunu merkezileştirmek için önyükleme destesinin

115
00:08:51,150 --> 00:08:52,880
üstüne kendi stillerimizi yazıyor.

116
00:08:52,880 --> 00:08:56,580
Oto hepsi burada sol ve sağ tarafta.

117
00:08:56,700 --> 00:09:01,110
Ve biz sadece içinde bulunduğu konteynırın yaklaşık yüzde 30'unu almak istedik.

118
00:09:01,110 --> 00:09:06,960
Bunu geri dönmeden önce yapmıştık ve kurallardan birini çiğneyeceğim, böylece size erken saatlerde

119
00:09:06,960 --> 00:09:10,120
söyledi ki satır içi stiller yapmayın dedi.

120
00:09:10,230 --> 00:09:13,930
Ve bunu yapmak kesinlikle iyi bir fikirdir.

121
00:09:14,010 --> 00:09:20,010
Ancak şu an için kendi stil sayfalarını oluşturduğumuz yeni bir sürüme varıncaya kadar sırayla

122
00:09:20,010 --> 00:09:20,500
yapacağız.

123
00:09:20,580 --> 00:09:24,130
Bu yüzden formun içine koyduğumuz yeni bir div yapacağım.

124
00:09:24,270 --> 00:09:26,130
Aynen böyle.

125
00:09:26,760 --> 00:09:34,760
Sonra div tarzı vereceğim ve yüzde 30 ile diyerek başlayacağım.

126
00:09:34,980 --> 00:09:39,650
Ve bunu bırakın, hayır görüyorum ki daha küçük bir form alıyoruz.

127
00:09:39,660 --> 00:09:41,820
Şimdi bunu merkezlemek istiyoruz.

128
00:09:41,820 --> 00:09:43,080
Yani biz buraya dönelim.

129
00:09:43,110 --> 00:09:49,730
Üst ve alt sıfır, Otto sol ve sağda.

130
00:09:50,430 --> 00:09:52,790
Şimdi formumuzu merkezileştirdik.

131
00:09:52,800 --> 00:09:58,750
Yapacağımız sonraki şey, düğmenin tüm genişliğini almasını sağlamanın yanı sıra, bu da oldukça uzun sürüyor.

132
00:09:58,790 --> 00:10:05,760
Ancak yapacağımız şey, DTN bloğunu vermek ve bunu bir blok öğesi yapmanın Bootstrap yöntemiyle inşa etmek.

133
00:10:05,790 --> 00:10:08,370
Ve şimdi tüm satırı ele alıyor.

134
00:10:08,400 --> 00:10:13,530
Sonra bunu yapmak için tüm bu unsurlar arasında biraz boşluk bırakalım.

135
00:10:13,710 --> 00:10:17,300
Form grubu sınıfında yerleşik bootstraps kullanacağız.

136
00:10:17,370 --> 00:10:25,250
Dolayısıyla, bir div sınıfı ECOs form çizgi grubuna ihtiyacımız var ve her girdi için buna ihtiyaç duyacağız.

137
00:10:25,470 --> 00:10:34,440
Dolayısıyla, her girdi onun gibi birinin içine girer ve sonra bunu sadece kopyalarım ve

138
00:10:34,560 --> 00:10:41,240
burada bir tane daha buluruz ve bu onun içine girer.

139
00:10:41,850 --> 00:10:44,080
Sonra düğme için bir tane daha var.

140
00:10:44,610 --> 00:10:50,860
Dolayısıyla üç kez klasik form grubumuz var ve kapanış div etiketlerine de ihtiyacımız var.

141
00:10:50,850 --> 00:10:54,810
Orada bir tane var, biz de diğer kapanış div etiketine ihtiyacımız var.

142
00:10:55,190 --> 00:10:56,060
TAMAM.

143
00:10:56,220 --> 00:10:59,140
Dolayısıyla bu form grubu sadece işleri birlikte engelliyor.

144
00:10:59,160 --> 00:11:01,530
Ama aynı zamanda biraz alan da sunuyor.

145
00:11:01,530 --> 00:11:03,300
Şimdi bu düğme burada.

146
00:11:03,390 --> 00:11:08,730
Odaklanabilecek bir sonraki şey, metnin ortalanması ve bunu yapmak için yapmamıza

147
00:11:08,730 --> 00:11:11,010
rağmen metne hizalama merkezi vermektir.

148
00:11:11,490 --> 00:11:13,680
Ve yine bu doğrultuda yapacağım.

149
00:11:13,680 --> 00:11:19,710
En azından uzun vadede iyi bir fikir değil ama bu sadece çabucak bir şey yapmak için mükemmel bir kullanım.

150
00:11:20,160 --> 00:11:24,290
Yani stil ve metni hizalama merkezine yapacağız.

151
00:11:25,650 --> 00:11:31,470
Şimdi ortada olanı kaydedin.

152
00:11:31,980 --> 00:11:35,030
Sonraki yapmamız gereken bu düğmenin rengini değiştirmek.

153
00:11:35,070 --> 00:11:37,000
Beyaz çok iyi görünmüyor.

154
00:11:37,230 --> 00:11:44,730
Şimdi, yenilemeyi kaydetmek için mavi yapacak birincil düğme birincil yapalım.

155
00:11:44,760 --> 00:11:46,430
Evet, çok daha iyi görünüyor.

156
00:11:46,800 --> 00:11:51,700
Ayrıca bu bağlantıyı geri dön bağlantısını da ortadan kaldıralım.

157
00:11:51,900 --> 00:11:56,850
Dolayısıyla bunu sadece kopyalayacağız ve yapmamız gereken tek şey bu sınırın içine koymak.

158
00:11:56,880 --> 00:12:07,200
Auto div yani formdan sonra bu div burada böyle ve kaydetmek.

159
00:12:07,200 --> 00:12:07,810
Oraya gidiyoruz.

160
00:12:07,860 --> 00:12:14,310
biraz dolgu veya kenar boşluğu ekleyerek bunu yapmak için bu H-1'e karşı hemen değil.

161
00:12:14,970 --> 00:12:18,750
Geri döndük ve gerçekten yapmamız gereken son şey

162
00:12:19,080 --> 00:12:22,460
Geri döneceğiz ve zaten seçtiğimiz bu div var.

163
00:12:22,530 --> 00:12:28,050
Sıfır sıfırdan ziyade, başlangıçta 20 piksel bir marj verebiliriz.

164
00:12:28,050 --> 00:12:29,750
Bakalım nasıl göründüğünü.

165
00:12:30,580 --> 00:12:32,140
Tamam, biraz daha iyi görünüyor.

166
00:12:32,340 --> 00:12:36,070
50 gibi bir şey daha yapalım.

167
00:12:36,600 --> 00:12:38,280
Ve bu biraz fazla olabilir.

168
00:12:38,280 --> 00:12:40,230
Kesinlikle kendi tercihin.

169
00:12:40,350 --> 00:12:43,570
Hadi geri dönelim 25.

170
00:12:44,700 --> 00:12:44,940
Tamam.

171
00:12:44,940 --> 00:12:46,420
Bu şimdilik yeterince iyi.

172
00:12:46,440 --> 00:12:51,990
İstediğiniz kadarıyla oyna ve bunları beğenirsen veya daralırsan bu formun girdilerini daha

173
00:12:51,990 --> 00:12:57,060
geniş hale getirebilirsin, ancak ortada kalacak ve biraz aşağı inecek cevap

174
00:12:57,060 --> 00:12:58,160
veren olduğunu görebilirsiniz.

175
00:12:58,170 --> 00:13:00,420
Son olarak, bu markadan kurtulalım.

176
00:13:00,420 --> 00:13:01,920
Kesinlikle buna ihtiyacın yok.

177
00:13:02,070 --> 00:13:06,570
Altbilgimizin alt kısmında altbilgiye gidelim ve hile yapacağız.

178
00:13:06,620 --> 00:13:11,530
Şimdilik bunu yaparsanız, tasarruflardan kurtulacağız.

179
00:13:11,700 --> 00:13:17,670
Şimdi formumuz çok kötü görünmüyor geri dönüp gidebiliriz kampların bir listesini biz yeterince çubuk

180
00:13:18,180 --> 00:13:19,800
ekleyebiliriz bir tane ekleyebiliriz.

181
00:13:19,920 --> 00:13:24,000
Ayrıca geri dönüp henüz yapılmayan açılış sayfasını görüntüleyebiliriz.

182
00:13:24,210 --> 00:13:28,740
Muhtemelen en çok çalışıyor ve diğer sayfalardan oldukça farklı olacak, daha güzel görünüyor

183
00:13:28,740 --> 00:13:31,360
ve çok daha fazla özel stile sahip olacak.

184
00:13:31,380 --> 00:13:33,280
Bu yüzden onu daha sonra saklayacağım.

185
00:13:33,570 --> 00:13:38,550
Ve sonra numaramız burada hiçbir şey yapmayan kukla düğmelerimiz var.

186
00:13:38,550 --> 00:13:38,890
Tamam