Bu derste tekrar hoş geldiniz, önyüklemeyi kendi uygulamalarınıza nasıl kuracağınızı göstereceğim.
Ve sonra bunu yaptıktan sonra sahada kullanmanın önemli temellerinden bazılarını size göstereceğim.
Bu yüzden, yalnızca ana sayfada dotcompost dot com ediniyorum ve buradan bir önyükleme yükle bağlantısı var.
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.
Dosyaları indirebiliriz ve bunu başlamak için yapacağız.
Ardından, bu dosyaları alıp daha ileri gitmeden önce uygulamanıza ekleyebiliriz.
Basit bir arama ekibim var, temel şeyler h DML m l olarak adlandırdığımı yazacağım.
Ve ben sadece bir başlık ekleyeceğim ve sadece birkaç farklı önyükleme unsuru ekleyeceğiz.
Kurulduktan sonra kapsamlı bir şey yapmayacağız, bunu bazı temel önyükleme bileşenleri
için bir oyun alanı olarak kullanacağız.
Tamam, basit bir H-1 önyükleme temellerini ekleyerek başlayalım ve
kaydedin.
Ve sonra tarayıcıda açalım.
Şimdilik orada tutun.
Şimdi bootstrap yükleyin.
Ben indirdim.
Bu dosyayı açarsam, burada görebileceğin birkaç farklı bileşen var.
Bir C S S dizini var ve CCS dizininin içinde epeyce dosya var ancak
gerçekten CSSA'nın üzerine bootstrapped olan yalnızca bir önemli dosya var.
Ve aslında burada aynı dosyada birkaç dakika önyükleme yapıldı.
SS dışında daha az yer kaplamak için dakika dövüşü bastırılmıştı.
Bu ikisi aslında bootstrap kullanan önemli dosyalardır.
Ve bu, bunların üçü de bootstrap için özel bir tema eklemek için kullanılan bir bootstrap teması
bu kadar önemli değil.
İhtiyacımız olan tek şey Dotsie'nin önyüklemeyi değerlendirmek.
Ve biz sadece açarak başlıyoruz böylece ne ile çalıştığımızı görebilirsiniz.
Bu ana bootstraps yeniden değerlendirilen dosyadır.
Sadece bir sürü sınıf.
CSSA'nın her bir satırına bakarsanız, hemen hemen bir sınıf bildirimi atılır.
Ve sonra yapabileceğimiz, uygulamalarımız yerine bu sınıfları kullanmaktır.
Dolayısıyla, beyaz metin ve kırmızı bir arka plan içeren bir düğme almak istiyorsak, nokta düğmesi
tehlikesini uygulayacağız.
Ve burada yaptığı işi.
Ancak tehlike beyaz metinde kırmızı bir arka plan ve kırmızımsı bir sınır vardır.
Öyleyse devam edin ve bunu uygulamanızda diğer CSSA dosyaları gibi ekleyin.
Bu yüzden, burada yapacağım, onu temel çalışma ekibimle aynı dizinde sürükleyip buraya
sürükleyip, bunun yerine birkaç dakika önizlemeyi yapabilirim.
Gerçekten önemli değil.
Teknik olarak bu biraz yükler biraz açar çünkü açarsam, boşlukların tamamı kaldırılmış tek
bir dev olarak görebilirsiniz.
Dolayısıyla yüklemek daha kolay, ancak daha uzun sürümünü yalnızca tam olarak ne
çalıştığımızı görebilmek için kullanacağım.
Şimdi, gerçek dosyamıza gidip bunu kapatacağım ve CSX'in önyüklenebilirliğini de
ekleyeceğiz.
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
kaydedip biz taze kalırsak sayfamızda hafif bir fark göreceksiniz.
Bu H-1'deki yazı tipini izleyin.
Değişir.
Şimdi bootstrap yüklü ya da en azından bootstrap ile birlikte gelen CS'ler var ve şu an ihtiyacımız
olan bu kadar.
Javascript ile henüz çalışmayacağız, ancak buradaki Bootstrap Web sitesinde
gerçekten size verdikleri bootstrap'ı yüklemek için başka bir seçenek yok.
Bootstrap CDN, bu bağlantıyı buraya alıp kodumuza ekleyebiliriz.
Ve bu, aynı dosyaların barındırılan bir sürümüyle bir bağlantı.
Tarayıcıda açıp yapıştırırsak, simge durumuna küçültülmüş dosyanın içeriğine sahip olduğunu görebilir
ve bu dosyada barındırır, böylece sana ait bir bağa sahip olabiliriz, böylece onun yerini alabiliriz.
Başka bir bağlantı.
Ellen olduğunuzu etiketleyin ve yapıştırın ve ben bunu bir yorum yapacağım.
Şimdilik geri dönün ve yenileyin.
Ve hiçbir şey değişmez.
Tek fark, ilk durumda dosyamızı bilgisayarınıza indirmiş ve bağlantı
oluşturuyorduk, ikinci durumda ise hat üzerinde barındırılan harici bir dosyaya bağlanıyoruz.
Şimdi önyükleme dokümanlarına gidelim ve etrafında oynama veya bu bileşenlerin bazılarına başlamaya başlayalım.
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.
Bu yüzden bootstrap'ı almak
Düğmelerle basit başlayalım.
Bir düğme kullanmak istersek yapmanız gereken tek şey dayak sınıfı kullanıp varsayılanı bize beyaz bir düğme
verecek olan bir düğme türü izleyen ama aynı zamanda VTAM birincil BATNA erişim bilgisi
kullanmaktır.
Uyarı tehlike ve bağlantı ve hepsi biraz farklı stil.
Ve tabii ki bu renkleri kendi başımıza değiştirebiliriz, ancak başlamak için
yerleşik bir kere kullanacağız ve burada da görebileceksiniz.
Bir düğme elemanı kullanmak zorunda değiliz, bir bağlantı etiketi, bir düğme ya da bir girdi kullanabilirsiniz.
O halde bunu deneyelim.
Merhaba, bu H-1.
Şimdi bir düğme etiketini ekleyelim ve bu düğme etiketleri tıklamayı ve sadece şu anda sayfayı yenileyelim der
ve bunda bir göz atalım.
Bu çok çirkin düğme.
Ancak eğer gidip, PTEN sınıfını eklersek, sonra da başarılar ve tasarruf edelim, şimdi bu müthiş yeşil
düğmeye basarız.
Bazı temel stilleri almak oldukça kolay.
Ve geri dönelim ve sana da kullanabileceğimiz farklı boyutlardaki düğmeler hakkında birkaç
şey göstereceğim ve gerçekten kolay.
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
bundan sonra gitmek zorunda değilsiniz.
Sınıfların sırası önemli değil ancak buradan sonra DTN yapacağım ve ekstra küçük yapalım ve
sayfanızı yenileyelim.
Oraya gidiyoruz.
Bu işi şimdi bitireceğim ve bir kaç tane daha düğme ekleyelim ama bu bir bağlantı etiketi olacak ve
bu bir etiket olacak ya da H'im var. F. her gün okumakta olan önyükleme çizelgesini (nokta çizelgesi)
elde etmek için okunan nokta üst üste çizgi eğik çizgi ile aynıdır ve metin sadece önyükleme dokümanları diyebilir.
Bu yüzden bunu biraz daha büyük yapın ve ardından sınıfta PTEN'e eşit gereksinimlerin
eklenmesi ve Desch info arasında yapalım ve büyük PTEN çizgi Elgie'yi yapacak ve yenileyecek.
Şimdi iki düğmemiz var.
Bir gerçek bir düğme unsurudur.
Başka birinde bir çapa etiketi var ve bunu tıklarsam bunu bir çapa etiketi görebilirsiniz.
Önceden bootstrap'ı kullanmaya başladığınızda, iyi görünümlü düğmeler elde edebiliyoruz.
Tek tek çoğaltmak için 10 ila 15 satır CSSA almış olurdu.
Şimdi geri dönelim.
Bu tekrar tam ekran yapın ve size düğmeler hakkında birkaç şey göstereceğim.
Yani bedenlerimiz var.
Ayrıca, düğmenin aktifmiş gibi görünmesini sağlayacak ve aktif sınıfı eklememiz
için farklı devletlerimiz var.
çıkacağını görebilirsiniz Ekranda bu ekranın aktif görünmesi yeterince iyi.
Şimdi şunu denersek, bir kaç düğme ekleyelim, böylece küçük minyatür Click Me düğmesini üç kez çoğaltacağım ve
sonuncusu ortadaki sınıfın birisi aktif ve yenilenecek ve umarım bunun ortaya
Geri dönelim ve bu özelliği ekleyerek de bir düğmeyi devre dışı bırakabiliriz.
Engelli eşittir engellidir.
Geri dönelim ve son yenilemeyi devre dışı bırakalım.
Ve şimdi bu düğme devre dışı.
Bu güzel simgeyi alıyoruz.
Renk efekti daha fazla değiştiği yerde efekti yoktur.
Açıkça devre dışı bırakılmış bir düğme.
Sana göstereceğim en son şey, renkleri tekrar değiştirebiliriz, böylece düğme tehlike gecesi bize
kırmızımsı portakal verir ve burada tüm renkleri görebilirsiniz.
Ve elbette, stillerin üzerine yazarak değiştirebilirsiniz, böylece başka bir stil sayfası yapmak yerine
böyle bir şey yapabilirsiniz.
Ben şimdilik burada yapacağım.
Bu yüzden sadece bir satır yapacağız ve aynı zamanda güzellik ve tehlikeyi seveceğiz.
bu şekilde stilleri geçersiz kılabilir ve böylece stilleri geçersizleştiremezsiniz önyüklemenin kutudan çıkardığı araçları kullanın.
Portakal rengini değiştirebiliriz ve şimdi Texas portakalını tehlikeye atabiliriz ve eğer arka
planı gerçekten değiştirmek istersem arka planı turuncu yapar ve
Ve çoğu yerde yoktur.
Tamam bu düğmeler ve hepsi bu videoda yapacağım.
Sadece bootstrap nasıl çalıştığını gerçekten hızlı bir tadı vermek istedim.
Varolan öğelere ve bu sınıflara sınıf ekleme deseni, bir sonraki videoda CSSA dosyasındaki önyüklemede
tanımlanıyor; formlar ve girdiler de dahil olmak üzere önyükleme ile birlikte
gelen diğer önemli parçaların bazılarını vurguluyorum.