Bu birime hoş geldiniz, sana jumbotron ve önyükleme biçimlerini ve girdilerini içeren birkaç
başka bileşeni göstereceğim.
Ancak bunu yapmadan önce, bootstrap gibi yeni araçlar öğrenirken gerçekten önemli olan bir
şeyle ilgilenmek için biraz zaman ayırmak istiyorum.
İnsanları web geliştiricileri haline getirme eğitimi deneyimimde, bir önyüklemenin öğrencilerin
bazılarının huzursuz olmaya başladıkları ilk yerlerden biridir ve yaptıklarını bilmiyor gibi hissediyorlar
ve o zaman aniden bir başkası tarafından başvurumuza yazılmış bir
sürü kod içeriliyoruz.
Ancak burada dokümanlara bakarsanız çok uzun sürdükleri için kapsamlıdır, ancak bunlar çok
işe yarıyor ve bunu her şeyi anlamak için okumanız gereken bir kılavuz olarak
değil.
Bu önyükleme kullanmadan önce bitirmek zorunda olduğunuz konusunda yol gösterici bir şey değildir.
Bir referanstır, eğer bir forma ihtiyacınız varsa, tabloya ihtiyacınız varsa form bölümüne bakarsınız.
Bir nav çubuğuna ihtiyacınız varsa tablo bölümüne basarsınız.
burada, tek tek kod bitlerini referans alarak kendi kod parçalarını kopyalamak örnekleri
okumaya yönelik bazı gösterimleri kontrol etmeye başlamıştır. Önceden açılmış olarak kullandım. Bu noktada yıl.
NFR bölümüne bakarsınız, ancak dokümanlara onları kullanacağınızmış gibi davranmanız önemlidir;
Ve çoğu için oldukça iyi hissediyorum.
Ancak, önyüklemeyle ilgili herhangi bir şey üzerinde çalışırken dokümanları açık bırakıyorum.
Bu derste, bir web geliştiricisinin nasıl olacağı hakkında konuştuğum ilk videolardan birinde,
örnekleri sürekli olarak referans gösteriyorum.
Ezberlemede ve bilginin her bir parçasını bilmede bir uzman olmuyorsunuz.
Evet, şeyleri bilmelisin.
Evet, bazı şeyleri anlamalı ve ezberlemelisiniz, ancak bir uzman ya da ezberleşmeyeceksiniz.
Bilgiye erişme konusunda uzmanlaşıyorsunuz.
Ve ezberleyeceğiniz bazı bilgilerin yanı sıra birçoğunun dokümantasyonunda veya örnek
videolar kitaplarında her türlü kaynağa çevrimiçi olacak.
Pekâlâ, bütün konuşmaları özetlemek için.
Temel olarak, yalnızca evet önyükleme yapmak için bir sürü şey olduğunu ve bunun yüzde 20'sini 30 oranında
göreceğinizi aklında tutmanızı istiyorum ve orada çok daha fazlası var.
Ancak buna korkmayın.
yapacağınızı göstermediğim bir şey yapmanız gerekiyorsa dokümanlara rahatlıkla erişmeniz gerekir.
Size nasıl
Dokümanları açın ve arayın.
Ve önyüklemeli dotcom'u almaya ilişkin harika örnekler ve açıklamalar daima vardır.
Tamam, bu yüzden önemli unsurlardan bazıları hakkında konuşmaya
devam edelim ve Jumbotron'u göstereceğim.
Resmi dokümanlara göre bir Jumbotron, isteğe bağlı olarak sitenizdeki önemli içeriği sergilemek için isteğe bağlı
olarak tüm görünüm alanını genişleten hafif, esnek bir bileşendir.
Burada bir örneğini burada görebilir ve bir Jumbotron kullanmak istiyorsanız gerçekten çok kolay.
Tek yapmamız gereken div sınıfı jumbotron yazmak ve sonra içine koyduğumuz her şey Jumbotron'un
bir parçası olacak.
Haydi deneyelim.
Aşağıdaki düğmeleri, Jumbotron jumbo tron ​​sınıfına sahip bir div olacak düğmeler olacak ve orada bir
H1 yaparsanız veya H-1, bunun bir jumbotron olduğunu ve oradaki gibi bir düğme
ekleyeceğini söyleyelim paragrafımıza bir paragraf eklemek de jibber olacaktır.
Şu an için yeterince iyi.
olacak.
Ve bir düğme ve düğmesi sadece selam orada
TAMAM.
Ve sonra bir düğme birkaç seçeneğe sahibiz.
Bir düğme başarısı yapacağız ve onu büyük kılacak ve tasarruf edeceğim.
Şimdi neye sahip olduğumuza bir göz atalım.
Ve tarayıcı pencerenizin tüm genişliğini kapladığını görebileceğiniz bir Jumbotron var ve bu genellikle
bizim istediğimiz değil.
ne oluyor JumboTron, içindeki konteynerin yüzde 100'ünü almak üzere kurulmuş olması.
Ve
Bu durumda hiçbir şeyin dışında değil.
Ancak kısa bir süre size grid sistemini ve önyüklemeyi göstereceğim ve merkezileştirilmesini ve
ekranın üçte birini almasını isterseniz bunun ekranın ne kadarını almasını istediğinizi tam olarak kontrol edebilelim.
Ekranın üçte ikisi ekranın dörtte biri kadar bootstrap ızgara sistemini kullanarak
yapabileceğimiz tüm farklı seçeneklere sahibiz.
Şimdilik sınıfa konteynerle eşit olan ve hangi kabın yapacağı bir div olan yapamayacağımız başka
bir öğe göstereceğim.
Sadece div sınıfı konteynırların içine malzeme koyarsak, biraz boşluk bırakır ve etrafına dolgu verir
ve nesneleri merkezleştirir.
Böylece konteyner görebildiğiniz
tüm bu alanı kapladığını inceliyor ancak bunun üzerinde bir miktar marj var.
Konuşmadığımız ızgara sistemini kullanmak zorunda kalmadan hızlı bir gelişme
istiyorsanız, div sınıfı konteyner ekleyebilir ve şimdi bu güzel görünüşlü Jumbotron'u alıyoruz.
Ve eğer bu kodu zaten kaplara koyduk ama
Jumbotron'a koymayacağız.
Söz konusu konteynerden hala etkilenmiş olduğunu göreceksiniz.
Jumbotron'un dışında, ancak konteynırın içinde saklamak ve yenilemek, konteynırın içinde olduğunu da görüyor ve
bunu görsel olarak yansıtıyor.
Tamam, bileşenlere ve bir sonraki sana göstereceğim şeylere geri dönelim.
Biz en üste gidiyoruz.
Değerlendirmeyi görmeye gitmeliyiz, formları ve bunların nasıl çalıştığını göstereceğim.
Böylece formları tıklarsınız ve epeyce farklı türde ve farklı örnekler var.
Ve ben bir şey yazmadan önce önce tarayacağım.
İşte bir önyükleme biçimi için temel bir örnek.
Oluşturan pazarı görebilirsiniz.
Ardından, satır içi form olarak bilinen olanı kullanırız ve satır içi formun başka bir türüne ve farklı
girdi türlerine ve başka bir form türüne sahip olduğumuz başka bir biçime sahibiz.
Ve şimdi, tüm farklı form türleri hakkındaki bu konuşmalar, desteklenen
farklı girdi türlerini denetler.
Yani şu renklerin hepsi.
bırakılmış radyo düğmeleri satır içi onay kutuları satır içi radyo düğmeleri açılır menüleri devam etmeyi seçer.
E-posta numarası hafta içi saat ve benzeri metin alanları farklı onay kutuları devre dışı bırak onay kutuları devre dışı
Diğer forum durumlarımız var.
Odak noktamız var.
Bu mavinin çevresinde vurgulamayı görebilirsiniz.
Bu varsayılan önyükleme odak stilidir.
Engellilere ekleyerek girdileri de devre dışı bırakabiliriz ve yapabileceğimiz başka şeyler de var, ancak
yedeklemeye devam edip temel örneklemeye odaklanacağız ve bu formun
tamamını kopyalayarak başlayacağız. bittikten sonra biraz inceleyelim.
O halde buraya dönelim ve biz de bu formu her şeyden sonra ekleyelim.
Ama kap içinde yapacağım.
Bu tam ekrana bir dakika izin vereyim.
Formumuz var ve bu formun içinde biraz içerik var.
Tarayıcıya geri dönelim ve neye benzediğine bir göz atalım.
Muhtemelen fark edeceğiniz ilk şey, formumuzun bu konteynerin her tarafına geçmesidir.
Bunun yüzde 100'ünü alıyor ve bunu kontrol edebileceğimiz bir şey.
önyükleme ızgaraları sisteminden bahsedip, bu yolun yüzde 50'sine gitmesi gerektiğini kolayca söyleyebiliyoruz.
Bir zamanlar
Bu, önyükleme ızgara sisteminden bahsedecek birşey veya biz henüz orda değiliz, kolayca
değiştirebileceğimiz bir şey.
Bu yüzden sadece onunla gideceğiz.
Şimdilik yüzde 100 kadar sürüyor.
Bu devasa garip bir forum arıyor, ancak sorun yok.
Nasıl olduğuna bayılıyoruz.
Bu nedenle yüce saymaya geri dönüp bir kerede bu parçayı keselim.
Bu forum etiketinin içinde bir forum etiketi var.
Bir div sınıfı form grubu vardır ve önyükleme belgelerine geri dönüp form grubunu
ararsanız bunun ne hakkında daha fazla bilgi edinmek isterseniz, rap grubu etiketlerini ve kontrollerini optimum
aralık için form grubunda görebilirsiniz.
Dolayısıyla, bu form grubunun sınıf formundan kurtulursak ve birincisi ve ikisi arasında
yaparsak, sonuçta ne olduğunu göreceksin.
Kaydedip yenileyeceğim, boşlukların bu girdiler arasında nasıl değiştiğini görüyorsun.
gerçekten bir girdiniz olduğu yerde nasıl kullandığınız ve etiketin birlikte gruplandırılmasını istiyorsanız oluşur.
Bu yüzden geri dönüp form grubunu ekleyebiliriz ve bu
Dikkat edin, burada biraz boşluk eklenir.
Burada sadece bu ikisini birlikte görsel olarak gruplayan biraz boşluk ekliyor ve ardından Grip'in bunları
görsel olarak bir araya getirdiği gibi burada bunlar da burada.
Bu da form grubu.
Sonra etiketler normaldir.
Hiçbir Boucek sınıfını etiketlemek için fantezi bir şey eklemek zorunda değiliz, ancak girdi sınıf form kontrolü içeriyor.
Öyleyse, ondan kurtulduğumda neler olacağını görelim.
Bu yüzden sadece birincisinde yapacağım ve e-posta girdisini koyup geri dönüp yenileyeyim.
Bunun tamamen normal bir varsayılan tarayıcı girdisine dönüştüğünü unutmayın.
Yani yuvarlak köşeler elde etmiyorsunuz.
Aynı doldurma ve boşlukları alamıyoruz.
Ayrıca tıkladığımızda aynı odak efekti elde etmiyoruz, çünkü mavi bir çizgi elde edersek, ancak bunun dışında
bir farklılık gösterir.
görsel değişiklikler ama aslında grid sistemiyle çalıştıklarında göreceğiniz bazı önemli farklılıklar
ve bunların davranışları ve diğerleriyle etkileşim kurma biçimi var. elementler.
Önyükleme anahattı biraz daha ince ve bunlar sadece ikisi arasındaki hemen
Geri dönüp form kontrolü tekrar ekleyecektir.
Gerçekten, damılamak isteseydik burada her şey kaynar ve grup ve şekil kontrolü oluşturur.
Bu iki sınıf, şeylerin güzel görünmesi için gerçekten sorumludur.
Şimdi bu paragraf sınıf yardım bloğu var ve bundan ne elde ettiğimize bir göz atalım.
ile ilgili bazı şeyler hakkında sadece küçük bir ipucu veren bu metin burada normal bir Pucelle düğmesi
olan ya da a ile b arasında eğilimli olan düğmemiz var. düşer ve daha büyük ya
da daha küçük hale getirebiliriz ekstra küçük herhangi bir diğer düğme gibi rengi değiştiririz.
Formunuzun bir kısmı ve sınıf yardım bloğu
Böylece, bunun, Lego'ya bir jumbotrona ekleyebileceğimiz bir düğmesi olduğumuz Legos'a biraz
benzediğini zaten görebilirsiniz.
Ayrıca kendi başınıza ekleyebiliriz veya bir form yerine ekleyebiliriz.
Bu, uygulamanızın farklı bölümlerine ekleyebileceğimiz küçük bir tak ve çalıştır bileşenidir.
Şimdi geri dönelim ve satır içi form olan başka bir form türünü inceleyelim.
Bu biraz farklı görünüyor.
formunda bir açıklama ekleyelim ve işleri düzgün biçimde girelim.
Bu kodu yalnızca kopyalayıp, farklılıklara bir göz atarsak, ilk formdan ayrılıp satır
İyi görünüyor.
Her şeyin aynı olduğuna dikkat edin.
Form grubumuzdaki girdiler üzerinde halen bir form kontrolü var, ancak büyük bir fark var.
Her şey bir formun içindeyken sınıf formuyla aynı satıra sahiptir.
Şimdi sana başlangıç ​​neye benzediğini göstereceğim.
Geri dönersek bize bu güzel çizgi formunu verir.
Ve bundan kurtulup kurtardığım anda artık burada olduğumuz gibi düzenli bir forma dönüyor.
Bu yüzden sadece bir sınıfda onu kontrol edecek tüm stiller bulunur.
Dolayısıyla onu Form satırında tutacağız.
Ve yine boşluk ideal değil.
Izgara sistemi hakkında konuştuğumuzda bu giderilecektir.
Önyükleme strap formları hakkında daha fazla şey konuşabilirdik.
Muhtemelen 30 45 dakikalık bir konferans verebiliriz sadece karmaşık formlar oluşturmak için önyükleme yaparak bu
farklı parçaların ve farklı şeylerin tümünü öğrenebiliriz ve farklı şeyler ile çalışabileceğimiz her çeşit
stilleri özel boyutlandırma doğrulamaları yapabiliriz.
Ama bunu yapmayacağım.
Önemli temel bilgileri aldık.
Boucek formlarının bir çeşit ekmek ve tereyağı çeşidi olan iki tür form var,
bunlar temel düzenli formumuz ve daha sonra bir satıriçi formumuz var ve formların etrafında kullandığımız
önyükleme farklı yönlerinde birkaç başka özellik olacak.
Ancak şu an zaman harcamak yerine, PRICHEP formlarının tüm ayrıntılarını ve
ayrıntılarını süpürmektense, aslında bootstrap kullanırken onlara ihtiyacım olduğunda bu küçük parçalara
atacağım.
Dolayısıyla, formlar hakkında iki paketler, gerçekten önemli form kontrolü ve form olan grup olacak. Form
kontrolü, girdileri bootstrap rafine edilmiş form grubu sadece güzel bir boşluk ekleyerek yapar.
Yani her ne koyarsanız yapın, bir form grubunun biraz boşluk kazandığını ve daha sonra tek satırlık bir çizgiyle çizgi oluşturduğunu söyledi.
Bir formu sarmalarsanız, formun tamamı sıraya girer.
Sonra da Jumbotron hakkında konuştuk.
Çok basit sınıf Jumbotron'a eşittir.
Böylece bir akran görüyorsunuz.
Ve sonra her şeyi bir kabın içine koyduk.
Ve ne olduğunu göstermek için o konteynırdan kurtulursak.
Bu boşluğu güzel kenar boşluğunun ortadan kalktığı şekilde yenileyin.
Bu nedenle, konteynırlar, uygulamanızda biraz hızlı boşluk elde etmek için işleri güzelce görünmesini sağlar.
Tamam, bu yüzden bu videoyu bitirmeden önce 10 saniye geçireceğim, size bir düğüm noktası ve express ve
Mongo ile mongoose ve bir grup teknoloji kullanarak bağlanmış bir arka uç veritabanına sahip bir uygulama oluşturacağımızı gösteren
bir site gösteren bir site göstereceğim ve kullandığımız Arabirimi prototip olarak hazırlamak için önyükleme yaparak oldukça
hızlı bir şekilde oldukça iyi görünmesini sağlayın ve burada bir Jumbotron bulunduğunu görebilirsiniz.
Daha sonra açıklayacağımız ızgara sistemini kullandığımız düğmelerden bazılarını kullanıyoruz.
Ve sonra giriş yaparsam bir formumuz olduğunu görebilirim.
Dolayısıyla bunlar, ekranın tüm genişliğini almamak için ızgara sistemini kullanarak stil
oluşturduğum form kontrolleridir.
Aksine, bu küçük orta bölümü kaplar.
Bu yüzden, ızgaralı sistem hakkında konuştuğumuz zaman göreceğiz.
Ancak sana sadece bunun gerçek bir uygulama olduğunu ve bunun prototipi hazırlamamıza ve çabucak iyi görünmesine
yardımcı olması için önyüklemeyi kullanacağımız bir şey olduğunu göstermek istiyorum