1
00:00:00,180 --> 00:00:04,680
Bu derste tekrar hoş geldiniz, önyüklemeyi kendi uygulamalarınıza nasıl kuracağınızı göstereceğim.

2
00:00:04,740 --> 00:00:08,370
Ve sonra bunu yaptıktan sonra sahada kullanmanın önemli temellerinden bazılarını size göstereceğim.

3
00:00:08,850 --> 00:00:14,180
Bu yüzden, yalnızca ana sayfada dotcompost dot com ediniyorum ve buradan bir önyükleme yükle bağlantısı var.

4
00:00:14,850 --> 00:00:19,580
Ve aslında doğrudan bir indirme bağlantısı değil çünkü önyükleme desteğini kullanmanın iki temel seçeneği var.

5
00:00:20,430 --> 00:00:24,340
Dosyaları indirebiliriz ve bunu başlamak için yapacağız.

6
00:00:24,530 --> 00:00:29,360
Ardından, bu dosyaları alıp daha ileri gitmeden önce uygulamanıza ekleyebiliriz.

7
00:00:29,430 --> 00:00:35,230
Basit bir arama ekibim var, temel şeyler h DML m l olarak adlandırdığımı yazacağım.

8
00:00:35,790 --> 00:00:40,770
Ve ben sadece bir başlık ekleyeceğim ve sadece birkaç farklı önyükleme unsuru ekleyeceğiz.

9
00:00:40,800 --> 00:00:45,510
Kurulduktan sonra kapsamlı bir şey yapmayacağız, bunu bazı temel önyükleme bileşenleri

10
00:00:45,510 --> 00:00:47,960
için bir oyun alanı olarak kullanacağız.

11
00:00:48,510 --> 00:00:54,840
Tamam, basit bir H-1 önyükleme temellerini ekleyerek başlayalım ve

12
00:00:57,720 --> 00:00:58,460
kaydedin.

13
00:00:58,700 --> 00:01:01,790
Ve sonra tarayıcıda açalım.

14
00:01:03,240 --> 00:01:05,280
Şimdilik orada tutun.

15
00:01:05,280 --> 00:01:06,690
Şimdi bootstrap yükleyin.

16
00:01:06,780 --> 00:01:08,190
Ben indirdim.

17
00:01:08,250 --> 00:01:13,720
Bu dosyayı açarsam, burada görebileceğin birkaç farklı bileşen var.

18
00:01:13,830 --> 00:01:19,650
Bir C S S dizini var ve CCS dizininin içinde epeyce dosya var ancak

19
00:01:19,650 --> 00:01:23,890
gerçekten CSSA'nın üzerine bootstrapped olan yalnızca bir önemli dosya var.

20
00:01:24,630 --> 00:01:27,710
Ve aslında burada aynı dosyada birkaç dakika önyükleme yapıldı.

21
00:01:27,740 --> 00:01:32,290
SS dışında daha az yer kaplamak için dakika dövüşü bastırılmıştı.

22
00:01:32,460 --> 00:01:36,280
Bu ikisi aslında bootstrap kullanan önemli dosyalardır.

23
00:01:36,600 --> 00:01:41,850
Ve bu, bunların üçü de bootstrap için özel bir tema eklemek için kullanılan bir bootstrap teması

24
00:01:41,850 --> 00:01:43,370
bu kadar önemli değil.

25
00:01:43,380 --> 00:01:45,680
İhtiyacımız olan tek şey Dotsie'nin önyüklemeyi değerlendirmek.

26
00:01:45,780 --> 00:01:49,430
Ve biz sadece açarak başlıyoruz böylece ne ile çalıştığımızı görebilirsiniz.

27
00:01:49,470 --> 00:01:52,200
Bu ana bootstraps yeniden değerlendirilen dosyadır.

28
00:01:52,770 --> 00:01:54,280
Sadece bir sürü sınıf.

29
00:01:54,300 --> 00:02:00,510
CSSA'nın her bir satırına bakarsanız, hemen hemen bir sınıf bildirimi atılır.

30
00:02:00,690 --> 00:02:05,340
Ve sonra yapabileceğimiz, uygulamalarımız yerine bu sınıfları kullanmaktır.

31
00:02:05,340 --> 00:02:12,060
Dolayısıyla, beyaz metin ve kırmızı bir arka plan içeren bir düğme almak istiyorsak, nokta düğmesi

32
00:02:12,060 --> 00:02:12,720
tehlikesini uygulayacağız.

33
00:02:12,900 --> 00:02:14,510
Ve burada yaptığı işi.

34
00:02:14,730 --> 00:02:19,590
Ancak tehlike beyaz metinde kırmızı bir arka plan ve kırmızımsı bir sınır vardır.

35
00:02:19,650 --> 00:02:24,410
Öyleyse devam edin ve bunu uygulamanızda diğer CSSA dosyaları gibi ekleyin.

36
00:02:24,750 --> 00:02:31,880
Bu yüzden, burada yapacağım, onu temel çalışma ekibimle aynı dizinde sürükleyip buraya

37
00:02:32,540 --> 00:02:37,020
sürükleyip, bunun yerine birkaç dakika önizlemeyi yapabilirim.

38
00:02:37,020 --> 00:02:38,520
Gerçekten önemli değil.

39
00:02:38,550 --> 00:02:45,420
Teknik olarak bu biraz yükler biraz açar çünkü açarsam, boşlukların tamamı kaldırılmış tek

40
00:02:45,690 --> 00:02:47,570
bir dev olarak görebilirsiniz.

41
00:02:47,850 --> 00:02:53,640
Dolayısıyla yüklemek daha kolay, ancak daha uzun sürümünü yalnızca tam olarak ne

42
00:02:53,640 --> 00:02:55,450
çalıştığımızı görebilmek için kullanacağım.

43
00:02:55,470 --> 00:03:02,130
Şimdi, gerçek dosyamıza gidip bunu kapatacağım ve CSX'in önyüklenebilirliğini de

44
00:03:02,130 --> 00:03:03,120
ekleyeceğiz.

45
00:03:03,220 --> 00:03:11,370
Dolayısıyla diğer stil sayfaları gibi bağlantılı bir etikete ihtiyacımız var ve Tref, Css önyükleme noktasındadır ve

46
00:03:11,370 --> 00:03:16,310
kaydedip biz taze kalırsak sayfamızda hafif bir fark göreceksiniz.

47
00:03:16,320 --> 00:03:18,140
Bu H-1'deki yazı tipini izleyin.

48
00:03:18,420 --> 00:03:19,590
Değişir.

49
00:03:19,620 --> 00:03:24,720
Şimdi bootstrap yüklü ya da en azından bootstrap ile birlikte gelen CS'ler var ve şu an ihtiyacımız

50
00:03:24,720 --> 00:03:25,500
olan bu kadar.

51
00:03:25,650 --> 00:03:30,060
Javascript ile henüz çalışmayacağız, ancak buradaki Bootstrap Web sitesinde

52
00:03:30,510 --> 00:03:35,310
gerçekten size verdikleri bootstrap'ı yüklemek için başka bir seçenek yok.

53
00:03:35,400 --> 00:03:40,750
Bootstrap CDN, bu bağlantıyı buraya alıp kodumuza ekleyebiliriz.

54
00:03:41,010 --> 00:03:44,870
Ve bu, aynı dosyaların barındırılan bir sürümüyle bir bağlantı.

55
00:03:45,120 --> 00:03:49,920
Tarayıcıda açıp yapıştırırsak, simge durumuna küçültülmüş dosyanın içeriğine sahip olduğunu görebilir

56
00:03:49,920 --> 00:03:56,670
ve bu dosyada barındırır, böylece sana ait bir bağa sahip olabiliriz, böylece onun yerini alabiliriz.

57
00:03:56,970 --> 00:03:57,540
Başka bir bağlantı.

58
00:03:57,540 --> 00:04:01,530
Ellen olduğunuzu etiketleyin ve yapıştırın ve ben bunu bir yorum yapacağım.

59
00:04:01,530 --> 00:04:04,230
Şimdilik geri dönün ve yenileyin.

60
00:04:04,380 --> 00:04:06,020
Ve hiçbir şey değişmez.

61
00:04:06,030 --> 00:04:10,950
Tek fark, ilk durumda dosyamızı bilgisayarınıza indirmiş ve bağlantı

62
00:04:10,950 --> 00:04:16,650
oluşturuyorduk, ikinci durumda ise hat üzerinde barındırılan harici bir dosyaya bağlanıyoruz.

63
00:04:16,650 --> 00:04:20,750
Şimdi önyükleme dokümanlarına gidelim ve etrafında oynama veya bu bileşenlerin bazılarına başlamaya başlayalım.

64
00:04:21,240 --> 00:04:27,330
için geri dönün ve CS'leri tıklayın ve yalnızca kullanacağımız daha önemli parçalardan bazılarını göstereceğim.

65
00:04:27,330 --> 00:04:29,150
Bu yüzden bootstrap'ı almak

66
00:04:29,400 --> 00:04:31,940
Düğmelerle basit başlayalım.

67
00:04:32,460 --> 00:04:40,650
Bir düğme kullanmak istersek yapmanız gereken tek şey dayak sınıfı kullanıp varsayılanı bize beyaz bir düğme

68
00:04:40,990 --> 00:04:48,510
verecek olan bir düğme türü izleyen ama aynı zamanda VTAM birincil BATNA erişim bilgisi

69
00:04:48,740 --> 00:04:49,220
kullanmaktır.

70
00:04:49,260 --> 00:04:54,080
Uyarı tehlike ve bağlantı ve hepsi biraz farklı stil.

71
00:04:54,240 --> 00:04:58,860
Ve tabii ki bu renkleri kendi başımıza değiştirebiliriz, ancak başlamak için

72
00:04:58,860 --> 00:05:02,500
yerleşik bir kere kullanacağız ve burada da görebileceksiniz.

73
00:05:02,700 --> 00:05:08,600
Bir düğme elemanı kullanmak zorunda değiliz, bir bağlantı etiketi, bir düğme ya da bir girdi kullanabilirsiniz.

74
00:05:08,820 --> 00:05:10,720
O halde bunu deneyelim.

75
00:05:11,730 --> 00:05:13,030
Merhaba, bu H-1.

76
00:05:13,230 --> 00:05:22,740
Şimdi bir düğme etiketini ekleyelim ve bu düğme etiketleri tıklamayı ve sadece şu anda sayfayı yenileyelim der

77
00:05:22,740 --> 00:05:25,860
ve bunda bir göz atalım.

78
00:05:25,950 --> 00:05:27,310
Bu çok çirkin düğme.

79
00:05:27,690 --> 00:05:37,740
Ancak eğer gidip, PTEN sınıfını eklersek, sonra da başarılar ve tasarruf edelim, şimdi bu müthiş yeşil

80
00:05:37,740 --> 00:05:39,200
düğmeye basarız.

81
00:05:39,330 --> 00:05:41,870
Bazı temel stilleri almak oldukça kolay.

82
00:05:42,190 --> 00:05:47,670
Ve geri dönelim ve sana da kullanabileceğimiz farklı boyutlardaki düğmeler hakkında birkaç

83
00:05:47,670 --> 00:05:50,110
şey göstereceğim ve gerçekten kolay.

84
00:05:50,130 --> 00:05:58,410
Sadece düğmeye büyük ya da küçük eklememiz ya da düğme ekstradan küçük olması gerekiyor, bu yüzden düğme başarısından sonra denenmiş ve

85
00:05:58,410 --> 00:06:00,500
bundan sonra gitmek zorunda değilsiniz.

86
00:06:00,510 --> 00:06:08,600
Sınıfların sırası önemli değil ancak buradan sonra DTN yapacağım ve ekstra küçük yapalım ve

87
00:06:08,600 --> 00:06:09,740
sayfanızı yenileyelim.

88
00:06:09,750 --> 00:06:11,170
Oraya gidiyoruz.

89
00:06:11,170 --> 00:06:16,710
Bu işi şimdi bitireceğim ve bir kaç tane daha düğme ekleyelim ama bu bir bağlantı etiketi olacak ve

90
00:06:16,710 --> 00:06:24,640
bu bir etiket olacak ya da H'im var. F. her gün okumakta olan önyükleme çizelgesini (nokta çizelgesi)

91
00:06:24,660 --> 00:06:30,480
elde etmek için okunan nokta üst üste çizgi eğik çizgi ile aynıdır ve metin sadece önyükleme dokümanları diyebilir.

92
00:06:30,550 --> 00:06:38,550
Bu yüzden bunu biraz daha büyük yapın ve ardından sınıfta PTEN'e eşit gereksinimlerin

93
00:06:38,550 --> 00:06:47,330
eklenmesi ve Desch info arasında yapalım ve büyük PTEN çizgi Elgie'yi yapacak ve yenileyecek.

94
00:06:47,340 --> 00:06:48,690
Şimdi iki düğmemiz var.

95
00:06:48,750 --> 00:06:50,620
Bir gerçek bir düğme unsurudur.

96
00:06:50,620 --> 00:06:55,210
Başka birinde bir çapa etiketi var ve bunu tıklarsam bunu bir çapa etiketi görebilirsiniz.

97
00:06:56,340 --> 00:07:01,200
Önceden bootstrap'ı kullanmaya başladığınızda, iyi görünümlü düğmeler elde edebiliyoruz.

98
00:07:01,370 --> 00:07:05,330
Tek tek çoğaltmak için 10 ila 15 satır CSSA almış olurdu.

99
00:07:05,760 --> 00:07:06,960
Şimdi geri dönelim.

100
00:07:06,990 --> 00:07:10,980
Bu tekrar tam ekran yapın ve size düğmeler hakkında birkaç şey göstereceğim.

101
00:07:11,220 --> 00:07:12,720
Yani bedenlerimiz var.

102
00:07:12,750 --> 00:07:18,560
Ayrıca, düğmenin aktifmiş gibi görünmesini sağlayacak ve aktif sınıfı eklememiz

103
00:07:18,570 --> 00:07:21,080
için farklı devletlerimiz var.

104
00:07:21,390 --> 00:07:27,060
çıkacağını görebilirsiniz Ekranda bu ekranın aktif görünmesi yeterince iyi.

105
00:07:27,060 --> 00:07:37,140
Şimdi şunu denersek, bir kaç düğme ekleyelim, böylece küçük minyatür Click Me düğmesini üç kez çoğaltacağım ve

106
00:07:37,140 --> 00:07:43,590
sonuncusu ortadaki sınıfın birisi aktif ve yenilenecek ve umarım bunun ortaya

107
00:07:43,620 --> 00:07:49,290
Geri dönelim ve bu özelliği ekleyerek de bir düğmeyi devre dışı bırakabiliriz.

108
00:07:49,290 --> 00:07:51,850
Engelli eşittir engellidir.

109
00:07:52,440 --> 00:07:57,950
Geri dönelim ve son yenilemeyi devre dışı bırakalım.

110
00:07:58,180 --> 00:08:00,020
Ve şimdi bu düğme devre dışı.

111
00:08:00,120 --> 00:08:01,940
Bu güzel simgeyi alıyoruz.

112
00:08:02,070 --> 00:08:05,110
Renk efekti daha fazla değiştiği yerde efekti yoktur.

113
00:08:05,220 --> 00:08:07,460
Açıkça devre dışı bırakılmış bir düğme.

114
00:08:07,560 --> 00:08:14,610
Sana göstereceğim en son şey, renkleri tekrar değiştirebiliriz, böylece düğme tehlike gecesi bize

115
00:08:14,610 --> 00:08:18,630
kırmızımsı portakal verir ve burada tüm renkleri görebilirsiniz.

116
00:08:18,870 --> 00:08:24,300
Ve elbette, stillerin üzerine yazarak değiştirebilirsiniz, böylece başka bir stil sayfası yapmak yerine

117
00:08:24,300 --> 00:08:25,850
böyle bir şey yapabilirsiniz.

118
00:08:25,860 --> 00:08:27,270
Ben şimdilik burada yapacağım.

119
00:08:27,330 --> 00:08:32,330
Bu yüzden sadece bir satır yapacağız ve aynı zamanda güzellik ve tehlikeyi seveceğiz.

120
00:08:32,460 --> 00:08:40,050
bu şekilde stilleri geçersiz kılabilir ve böylece stilleri geçersizleştiremezsiniz önyüklemenin kutudan çıkardığı araçları kullanın.

121
00:08:40,050 --> 00:08:46,440
Portakal rengini değiştirebiliriz ve şimdi Texas portakalını tehlikeye atabiliriz ve eğer arka

122
00:08:46,440 --> 00:08:51,550
planı gerçekten değiştirmek istersem arka planı turuncu yapar ve

123
00:08:52,200 --> 00:08:53,580
Ve çoğu yerde yoktur.

124
00:08:54,030 --> 00:08:56,940
Tamam bu düğmeler ve hepsi bu videoda yapacağım.

125
00:08:56,940 --> 00:09:00,300
Sadece bootstrap nasıl çalıştığını gerçekten hızlı bir tadı vermek istedim.

126
00:09:00,300 --> 00:09:06,450
Varolan öğelere ve bu sınıflara sınıf ekleme deseni, bir sonraki videoda CSSA dosyasındaki önyüklemede

127
00:09:06,460 --> 00:09:11,010
tanımlanıyor; formlar ve girdiler de dahil olmak üzere önyükleme ile birlikte

128
00:09:11,010 --> 00:09:13,540
gelen diğer önemli parçaların bazılarını vurguluyorum.