Bu derste sizlere, NFR olan Bootstrap'ın tümünde en önemli ve
en yaygın kullanılan bileşenlerden birini göstereceğim ve böylece Boucek dotcom'u göreceksiniz.
Burada yeterince çubuk kullanıyorlar.
Yelp kampı uygulamamızda da kullanacağız ve nav çubuğunu yeniden boyutlandırdık.
Ne kadar duyarlı olduğuna dikkat edin ve tablaya ne boyutta ve mobil boyutta girdiğimde bu güzel hamburger
elde ettiğimize dikkat edin.
Bu yüzden bu derste bütün bunların üzerine doğru çalışacağız.
Ancak daha basit başlayacağız.
Yapmamız gereken ilk şey, bileşenlere gidip gezi çubuğuna gidip daha önce gitmemiz gereken yeni bir
dosya oluşturduk çünkü sadece biraz kod yazacağız.
Eskisi dağınıklaşıyordu.
Ben onu naff Bar H T M L olarak adlandırıyorum.
Tek sahip oldukları şey, buradaki başlığı değiştirmeden önyükleme bağlantısının bağlantısıdır.
Buna sadece önyükleme çubuğu çubukları diyebilirim.
Aynen böyle.
Şimdi dokümanlara gidelim ve varsayılan nav çubuğuna bir göz atalım.
Bu örnekte burada bir marka bağlantımız olabilecek tüm önemli özellikleri sergiliyoruz.
Menülere düşebileceğimiz başka bağlantılar da olabilir.
Bir nav bar formumuz olabilir ve sol tarafta bulunan sağ taraftaki şeyleri alabilmemiz için
bir düğme görebiliriz.
Bu gerçekten her şeyi sergiliyor.
Bootstrap naf barlarının mutfak lavabosudur ve dolayısıyla biçimlendirme biraz uzundur.
Bu videonun sonunda tüm bu parçalarla çalışacağız.
Ancak daha basit bir şekilde başlamak istiyorum, size bir numara yapmanın en basit yolunu göstereceğim.
Bu yüzden bir nav öğesi oluşturmamız gerekiyor ve bu NAV öğesinin iki sınıfı olması gerekiyor, nav
çubuğu ve nav çubuğu istiyor ve Dasch varsayılanıyla başlayabiliyoruz.
Ve şimdi tarayıcıdaki dosyaya bakıp yenileyelim.
Umutla karşılaştığımı ve ekran görüntüsü için yeterli barın bulunduğu çok soluk çubukların üstten
geçtiğini görebiliyorsunuz, yani aslında NF barını nasıl başlatıyor olacağız.
Şimdi onu biraz içerikle dolduralım.
İlk göz atacağımız şey, bu markaya nasıl ekleyebileceğimiz.
Temel olarak şirketinizin adı.
Çoğu durumda.
Ve bu bir nav çubuğu başlığı kullanıyor ve daha sonra NFR başlığının içinde bir nav çubuğu markası kullanıyoruz.
Bu yüzden, div sınıfının nav çubuğu çizgi başlığına eşit olduğunu ekleyerek başlayalım ve içimizde bir çapa etiketi
olan nav bar markasına ekleyeceğiz.
Genellikle o şirket adına tıkladığınızda sizi ana sayfaya geri götürür.
Bu yüzden burada demirleme etiketini yapacağız ve Thorpes'a eşit bir trafikle başlayacağız, böylece bizi
bir yere götürmeyecek.
Sınıf, nav çubuk çizgi markasına eşit olacak ve sadece bir şirket adı oluşturacağız.
Bakalım etrafımda bir kahve fincanı var mı, o halde kahve içelim gidelim.
Ancak aslında onu gerçek bir başlangıç ​​yapmak için yazım hatalarını biraz değiştirmeliyiz.
Tamam Alex.
Benim için yeterince iyi.
K ile kahve
Hadi bir göz atalım.
Yenile ve şu anda bir bağlantı olan NAV bar markamız var.
Tıkırdayım.
Şu anda hiçbir yere götürmüyor, ancak sonunda şirket uygulamalarımıza sahip olacak,
böylece şirket adına tıkladığınızda sizi bir sonraki sayfaya geri götürecek.
Bakalım, hakkında bağlantı kurmak gibi bazı diğer bağlantıları ekleyebilir miyiz.
Kaydolmak için kayıt olun.
Barda bulunan tüm ortak bağlantılar.
Hemen sayfa bağlantısını ekleyerek başlayalım.
Dolayısıyla geri döneceğiz ve daha sonra nav çubuğu başlığının dışına, bu div'de başka bir div oluşturmak
için tüm içeriği en azından NAV çubuğumuzun sol tarafında toplayacağız.
Yani, başlığı var ve sonra bazı içeriğe sahip olacağız ve sağ tarafta bir şeyler istiyorsak,
başka bir sınıfı olan başka bir div yapacağız.
Sınıf burada.
Aslında iki biz, nav ve nav bar çizgisi nav'ını istiyoruz.
Navbar çizgisinin adlandırılması hakkında bana soru sormayın.
Önyüklemenin en büyük eleştirilerinden biri, biraz çirkin olması ve bazen çok
anlamlı olmamasıdır.
önyükleme desteğinin semantik anlamsızlığına yanıt olarak yaratılan bir CSSA çerçevesi var.
Ve aslında, anlamsal UI çağırırsanız,
Ve benim de gerçekten hoşlandığım şey bu.
Ve öğretmeyi tartıştım.
Ancak sonuç olarak, henüz yaygın olarak kullanılmadığı için henüz harika dersler olmuyor.
Yani burada bizim farkına geri.
Sınıf nav bar nav ve sınıf nav her ikisi de.
Ve sonra bu NFR'de istediğimiz her öğe için bir müttefik eklemeliyiz ve bağlamak istersek Y'de
sadece bir bağlantı etiketi aldık.
Bu yüzden bu bir yere gidecek.
Bir kez daha ve bu Hakkında sayfasına gelecek.
Geri dönüp yenileyeyim, şimdi hakkında bir bağlantı bulalım, kontağa bir daha ekleyelim save go.
Şimdi iki bağlantımız var, şimdi devam edelim ve sayfanın sağ tarafına bir şeyler ekleyelim.
Bunu yapmak için kayıt ya da kaydolmak için iki bağlantı eklemek ve çubuğun sağ tarafında oturum açmak için bir tane
daha ekleyelim.
yerine daha kullanışlı olacaksınız, aynı şekilde çalışacak ancak bir div ile iyi çalışsa
bile iyi bir müttefik olmasını istiyorsunuz. Bir UL yerine olmak biraz daha mantıklı.
Burada bir başka kapsayıcıya ihtiyacımız var ve aslında div'leri kullanmak
Böylece başka bir UL ekleyeceğiz ve bu da Nav olacak. nav çubuğu çizgi nav ve nav bar
çizgi.
Sağ.
Ve bunu doğru yazdığımızdan emin olmamız gerekir; aksi takdirde bu sınıf etkili olmaz.
Bunun için ne yapacağız, o nav çubuğunun sağ tarafı için yeni bir içerik grubu yapmak.
Ve şimdi sadece doldurmamız lazım.
Bu yüzden hem edgewise'da iki bağlantı ekleyeceğim.
Birincisi hiçbir yere gitmeyecek ve kayıt yaptıracağını söyleyecek ve daha sonra giriş yapacağımızı söyleyen başka bir tane
daha alacağız.
Hadi bir bakalım.
Sayfayı yenileyin ve sağ tarafta içerik bulunduğunu görebilirsiniz.
Bununla birlikte, karşı tarafın tam karşısında ve ana içeriğimize biraz boşluk eklemek için daha önce konteyneri
daha önce kullandığımız gibi bir kutuya yeterli bir kutuya ekleyebileceğimizi düzeltmek için.
Gezinme çubuğu yerine bir tane ekleyebiliriz.
Bu yüzden her şeyi kutu yerine neph bara koydum.
Yani sınıf konteynerle eşittir.
Sadece aşağı taşımak.
Her şeyin düzgün girintili olduğundan emin olun.
Oraya gidiyoruz.
Test yapalım.
Güzel.
Şimdi her şey güzel ve doğru merkezlenmiş.
Konteyi navun dışına ekleyip eklemediğimi göstereceğim ve tüm nav çubuğunu içeri attın.
Ne olacağını göreceğiz.
Şimdi yeterince taze olsaydım, aslında keserdim ve caddenin bir ucunda sadece yola girerdi.
Yani konteyner bunu içerisine koyduğumuz her şeyi yapar.
Ve bu durumda, gezinme çubuğunun içindeki konteynırın, gerçek naf parçası kendisini
sıkıştırmamasına, ancak içindeki içeriği kısıtlamasına izin vermek istiyoruz.
TAMAM.
Yani konteynır bizim Hetter var, biz sol şeyler var ve sağ tarafta bazı içerik var,
böylece burada görebilirsiniz.
Şimdi biraz yukarı çıkıp gidip bu temel gezinme çubuğunu veya varsayılan
doku çubuğunu dokümanlara götürelim ve bu şeyin tamamını kopyalalım ve hemen aşağıda koyacağız biraz alan
yaratıyor.
Daha netleştirmek için çok fazla yorum var.
Varsayılan gezinme çubuğu.
Ve ona yenilemeye bir göz atalım.
Yani burada bu gezinme çubuğu var ve vurgulamak istediğim birkaç şey var.
Birincisi, menülere düştük ama aslında çalışmıyorlar.
Ve biz de pencereyi yeniden boyutlandırırken hamburger menüsünü alıyoruz.
Bu bağlantılar gitmektedir.
Form gider ve bunları açığa çıkarmak için buraya tıklamamız gerekir.
Ancak bu da işe yaramıyor.
Bu yüzden işe başlayarak başlayalım ve ardından tüm bu farklı parçalar hakkında konuşacağız ve işe
yaramak için ne yaptıklarını konuşacağız.
Gidip bootstrap javascript dosyasını eklemeliyiz.
Bu nedenle, önyükleme belgelerine geri dönersek indirmeyi tıklarız.
Ayrıca burada ihtiyacımız olan bir javascript dosyası var.
Cdn sürümünü kullanacağım ancak karşıdan yüklediğiniz klasöre de geliyor.
Buna sadece bootstrapped denir.
Evet.
Veya simge durumuna küçültülmüş sürüm Mencius'u önyükledi.
Ve bunu ekleyelim ve bunu vücudumuzun dibinde yapalım ve kaydedelim.
Ve javascript hakkında konuşmadığımızı da biliyorum.
Senaryonun ne olduğunu ve burada hangi kaynağın önemli olmadığını bilmiyorsun.
Onu yalnızca önyüklemeye takacağız.
Ve şimdi yenileyelim.
Sana göstereceğim küçük bir sorunu çözebilir miyiz, bootstraps javascript'in sorguyu gerektirdiğini
söylüyor.
Bunun ne olduğunu ve bu mesaja nasıl geldiğini merak etmeyin.
Ancak aldığım gerçek mesajı görmen için sana göstermek istiyorum.
Konuşmadığımız J sorgusu gerekiyor.
Ancak gitmek ve almak için yeterince kolaydır.
Herhangi bir javascript yazmak zorunda değiliz.
Herhangi bir javascript bilmek zorunda değilsiniz.
Sadece onu eklemek zorundayız.
Bu yüzden tek yapmamız gereken, Jay sorguları için arama yapan CDN'dir. Bu CDN, kodda Jay dot
com'dur ve burada en son sürümü seçip bu URL'yi kopyalamanız gerekir.
Bu Querrey dosyası ve sonra buraya geri döneceğiz.
Bu komut etiketlerinden bir tane daha ekleyeceğiz.
Temelde bu kesin kodu kopyalayarak.
Aslında bunu doğru satırı kopyalamanızı ve bu URL'yi sizin olduğunuz jey sorgusu haline getirmeyi
kolaylaştırmak için yapacağım.
Eğer hepsi başarısız olursa bunu sadece yazabilirsiniz.
Bir l olduğunuzda bu kötü değil, ancak bunu Jay queery CDN'yi arayarak bulup kurtaracağım
ve bu bir sorguya dayandığından bootstraps javascript dosyasından önce gelmesi gerekiyor.
Bu yüzden bir kez daha Jay sorgusunun ne işe yaradığı konusunda fazla endişelenmeyin.
Her şey birkaç dakika sonra geliyor.
Ancak, önyükleme desteğinden ve özellikle nav çubuklarından ve açılır menüden en iyi şekilde yararlanmak için.
Bu iki satıra her kullandığımızda ihtiyacımız olan şey şu ki şimdi geri dönüp yenileneceğiz.
Her şeyden önce menüler düşürüldü, şimdi açılır menülere sahip olduğumuzu göreceksiniz.
Bu videoda bu konuda konuşmayacağız ancak yeniden boyutlandırdığımızda ve o hamburgeri alıyorum.
Tıkladığımda hamburger şimdi işe yarıyor.
Gizli malzemeyi değiştirir.
İşte burada çalışması şu an burada tüm bu içeriğin gizlendiği ve
gördüğümüz şey üstbilgi ve düğme olan bu küçük kesme noktası.
daha sonra düğmeye tıkladığımızda, daha önce gizli olan tüm içerik yeniden görünür ve işe başlayalım.
Ve
Şimdi bizim için.
Ancak, yalnızca bu dört bağlantıyı gizlemek istediğiniz yerde çok daha az karmaşık bir
sürüm yapacağız; böylece yeniden boyutlandırdığımızda bu dört bağlantı gizli ve daha sonra gerçekten hızlı gösterilecekler.
Nasıl bir göz atarak başlayacak yapmak için, bu varsayılan sürümde bir nav çubuğunun
bu devasa canavarını gerçekleştiriyor.
Ve burada önemli çizgiye dikkat çekeceğim.
Bu div'ın içine koyduğumuz her şeyi daraltmak için Mobil boyutu tıkladığımızda daraltır ve böylece bizim için düğmeyi yapmaz.
Div sınıfı çöküşü nav çubuğu çöküşü
Saklanmada yeniden görünüşte geçiş yapmaz, ancak o tablete ve mobil
boyuta çarparak içeri koyduğumuz içeriği gizler.
Dolayısıyla bunu kopyalayacağız ve onu gizlemek istediğimiz içeriğin etrafına kaydırmamız gerekiyor ve
bunu burada gizlemek istiyoruz.
Bu iki Juelz Yani, o küçük ekran boyutuna ulaştığımızda gizlemek istediğimiz dört link.
Bu yüzden kapanış etiketini ekleyin ve kaydedin ve burada bir çizgi var ve bu önemlidir ve bir
an sonra halledeceğim.
Bu bizi henüz etkilemez, ancak yenilersek.
Göreceksin.
Şimdi yeniden boyutlandırdığımda, çöküş div'indeki tüm içeriğin kaybolduğu bir nokta
var.
Şimdi yeniden ortaya çıkmıyor.
Bu hamburgeri alamayız.
Hiçbir şeyden bir şey alamadık ama artık ortadan yok oldu.
Bunun nedeni, bu satırda div sınıfı çöküşü nav barının çöküşünü eklediğimizden kaynaklanıyor.
Yapmamız gereken sonraki şey hamburgere eklemek ve tamamen biraz kod.
Ne yazık ki hala kendimiz yapmak zorunda kalmamızdan çok daha iyi.
Ancak aslında burada hamburger var.
Bu yüzden onu kopyalayıp, kahvemize dokunmadan önce şekerleme yapacağım.
Ve kurtaracağız, yaptıklarına geri döneceğim.
Sadece tazeleyelim.
Ve eğer şimdi yeniden boyutlandırırsam hamburgeri alıyorum.
Oraya gidiyoruz.
Şimdi nasıl çalıştığına biraz açıklayayım.
Dolayısıyla bir düğme var ve o düğmenin içinde üç yayılma var ve her
biri bu çubuklardan birinin yapımından sorumludur.
Yani gördüğümüz bir görüntü değil, aslında o hamburgeri yapmak için o dar çubuklara
biçimlendirilmiş olan bu küçük spand üreten her takım.
Ve sonra, içeriğin üzerine tıkladığımızda içeriğin gösterilmesi ve saklanması kadarıyla, gerçekten
önemli olan şey, bu veri hedefi niteliğine sahip olduğumuz ve bunun B-S örneğimizde ne olursa olsun belirtilmesidir.
Şimdi çöküşüm için kulübümüz için bir önyükleme örneği örneği ve şimdi sadece evet olarak değiştirelim.
Nav. demo da öyle.
Ardından göstermek ve gizlemek istediğimiz içeriğin gerçekte çökmesini istediğimiz
kimliğini değiştirmeliyiz.
Bu yüzden, rakip nav demosuna uyacak şekilde değiştireceğim.
Bir önemli fark dikkat edin.
Arctic Thor'u eklemiyoruz Ekrandaki gibi CSI ile aynı CSI'yı seçtiğimizde, bir ID'yi hedeflemek için
bu Octa Thorpe'u kullanmamız gerektiğini söylüyor, böylece Kimliğini sadece metin adı olarak bırakıyoruz.
Demo burada Thorpe'e eklediysek yenilemeyi bırakacak.
Şimdi yeniden boyutlandırırsak hamburgeri alırım ve üzerine tıklarlar ve gösteri ve saklamayı değiştirmek için çalışırlar.
Harika.
Size gösterecek en son şey, bu çöküşün dışında bir şeyi hareket ettirsek.
Bu bağlantıları buraya alalım.
Hesap ya da hakkında ve temas ve biz sadece burada çöküşü div dışında hareket
ve yenilemek onlar aslında çöküşü olmadığını görebilirsiniz orada kalmak ve daha sonra çöküşün bu ve diğer
ikisi üzerine tıklayın toggled.
Şimdi bu iyi görünüyor demiyorum ama bu çöküş div önemini göstermektedir yok. bununla bağlantılı olan her şey solda ya da sağda.
Öyleyse çöküş ne olmuştu ne olursa olsun ya da bizim davamızda
Bu küçük boyuta ulaştığımızda hepsi çöker.
Sonra tekrar göstermek için buradaki düğmeyi tıklarız ve bu düğmenin
bir veri hedefi özelliği vardır ve buna karşılık gelen kimlik bilgileri gizlenir ve tıklandığında gösterilir.
Ve bu, burada bu fikri oluşturuyor.
Tamam, böyle bir maraton.
Bir önyükleme çubuğu yapma hattına giren çok şey.
parçalarını parçalayıp düzleştirmek oldu.
Ama gene de orada olduğumuz yol, dosyamıza kopyalarak ve
Bu örnek
kodu alıp hangi parçalara ihtiyacımız olduğunu bulup oradan gitmek istediğimiz her seferinde yeterince şey yapıyoruz.