Bu videoda kampı şekillendirmeye devam edeceğiz.
Her bir sayfaya bir gezinti çubuğu ekleyeceğiz ve şimdilik nav çubuğu oldukça boş olacak.
Ancak sonunda oturum açma ve oturum açma gibi düğmelerin hepsinin bu işlevselliği kaydedecektir.
Fakat o zamana kadar orada bazı yer tutucu metinler koyacağız ve şimdi yeni kamp
formunu da şekillendireceğiz çünkü şu anda oldukça kaba bir şekle sahip.
Şimdi sunucuyu çalıştıralım ve elimizdeki özelliklere bir göz atalım.
İşte açılış sayfamımız.
İşte görüşümüz, tüm kampın kamp listesini değiştirmesi.
Oldukça güzel görünüyor.
Burada bir nav bar istiyoruz.
Aynı şey yeni kamp alanı ekleme konusunda.
Formu ortalayacağız ve bu iki girişi yan yana koymak yerine
birbirlerinin üstüne istifleyeceğiz.
Ancak nav barıyla başlayacağız ve kampın şablonunda çalışalım.
Bu yüzden geri dönüp kamp şablonunu açıp başlayacağız.
biraz ve bizim açılan kapılardaki tüm düğmeleri olmadığında en azından başlamamamız bu kadar uzun sürmeyecek.
Önyüklemeyi kaldırılmış kutuyu açacağım ve bileşenlere ve nav çubuğuna geçeceğim ve
kendimi her zaman bu bölümde buluyorum çünkü önyükleme aygıtı gezinme çubuğunu eklemek gerçekten kolay
olmasına rağmen yine de görebilirsiniz. biçimlendirme
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.
Dolayısıyla önyüklemeyi Darcs'ı yukarı çekmeye kesinlikle utanmazsınız, bu sınıfta başka
şeyler gibi, şeyleri aramaktan utanmamalısınız.
Ancak özellikle bootstrap bazen sadece bu sınıfların ve öğelerin karmaşası olabilir ve dokümanlara
bakmadan bunu yapmak için bir yol yoktur.
Tamam, böylece geri döneceğiz ve kamp şablonunun üst kısmında biraz oda
yapacağız ve bir Nav tanımlayarak başlayacağız. Bu da başlık gibi.
Bir div yapabiliriz, ancak Nav'u yapabiliriz. biraz daha anlamlıdır.
Daha semantik.
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.
Farklı tipler ve farklı renkler var ya da tersine çevrilebilen bir gezinme çubuğuna sahip olabiliriz, ancak
varsayılan ayna ile devam edeceğiz.
sınıfa böyle bir son için nav çubuk çizgisine eşit bir çapa etiketi ekleyeceğimize eşit.
Ve sonra sınıf, konteynır sıvısına eşit sınıf ile bir div ekleyecek ve
bu sadece bize güzel dolgu yapacak ve bazı alanlarda oraya gelecek ve sonra nav
ç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
Ve sonra bağlantıyı sadece eğik çizgi olacak şekilde ayarlayabiliriz ve sonra bunu kapatıp, öyle yelpaze
kampına ekleyeceğiz.
Ve bu basit biçimlendirmeyle neler elde ettiğimizi görelim.
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
markası olan bir öğesi var.
Yenilelim.
Tamam, böylece nav çubuğumuz var ve sonra burada markamız var ve bu,
tıkladığınızda bizi iğrenç açılış sayfasına geri götürecek bir bağlantı.
Tamam, o halde giriş ve kaydolmak için birkaç yer tutucuyu buraya ekleyin.
Çalışmazlar ya da hiçbir şey yapmazlar, ancak iyi görünüyorsa bu işi yapalım, şimdi bizim kampa geçelim.
E. J. şablon olarak nav çubuğunun ve konteynırın içinde ancak N içinde değil. F. Bar Hetter.
Başka bir div'e ekleyeceğiz ve bu div'ın, bunun ne olduğunu görecek bir çöküş sınıfı olacaktır.
Ve bir dakika sonra Neph Bar Dasch da öyle çöker.
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
çubuk çizgisi sınıfı olacak ve daha sonra bunun içine gideceğiz. şimdilik üç
bağlantıya sahip ve her biri bir müttefik olacak.
Sonra Ally'nin içinde bir bağlantı etiketi olacak ve ilk girişi yapacak.
Ve şu an için H ref, rota yolumuza ayarlanacak çünkü henüz giriş yok ve kayıt
için aynı şeyi yapacağız.
Kaydolun ve sonra da bunun gibi oturumu kapatalım.
TAMAM.
Bakalım bu neye benziyor.
Yenilersek çökmenin ne işe yaradığı hakkında konuşmadan önce iyi görünmüyor, burada bir
küçük sınıfı UL'de kaçırdık.
Görünüşe göre şimdi eklemedik biz sadece nav çubuğu ekledik.
Şimdi hiç doğru bulmadık ama nav'u kendim eklemedik böylece şimdi kaydedeceğiz, yenileyeceğiz ve
NAV'ın sağ tarafındaki üç bağlantıya da son verdik ve buradaki boyutu da değiştirdiğimde.
Dikkat et burada sağ çöktü.
Ve nihayetinde elimizdeki küçük bir hamburger simgesi olacak.
Tıpkı tıkladığınız yere ve menüye benziyor.
Şimdilik, o boyuta ulaştığımızda onları gizliyoruz.
TAMAM.
Dolayısıyla, nav çubuğu için yapılması gereken tek şey, bunun yalnızca bir sayfada olduğu gerçeğidir.
Şimdi bunu tüm sayfalara ekleyelim.
Öyleyse onu kopyalayalım veya keselim ve başlığa taşımaya gidiyoruz.
Bu yüzden kafaya veya kısmen hareket ettirin.
Ben sadece onu açarım.
Komut satırı C9 görünümlerini kullanarak, Parshall'ın eğik çizgi başlığını Ijaw Evet kaydırın.
Ve sonra sadece cesedin üstünde bunu ekleyeceğiz.
Bunu düzgün bir şekilde girelim.
Tamam gidiyoruz.
Üstbilgimizde gezinme çubuğumuz var, böylece kısmi başlığı eklediğimiz dosyalar artık
gezinme çubuğuna sahip olacak, ancak sunucuyu tekrar başlatacaktır.
Yeni bir kampanya eklersek, o bar da alırsak hâlâ burada.
Ve ana sayfaya gidersek, aynı zamanda yeterli barımız olur.
Harika.
Şimdi bu formu biraz daha iyi görünmesi için ilerleyelim.
Daha önce bahsettiğim gibi, bu forma yapmak istediğim iki büyük şey var.
İlki, sayfanın ortasına yerleştirmek ve ikincisi, üç girişi ya da iki
girişi ve düğmeyi ekran boyunca yatay olarak hizalamak yerine formun dikey
olarak istiflenmesi.
Onları alıp üst üste istif etmek istiyorsunuz.
Yeni nokta olan doğru dosyayı açarak başlayalım.
Evet.
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.
Kolay başlayalım ve önyükleme sınıflarının bazılarını formlara veya girdilere ekleyelim ve bu da
form çizgi denetimi yapıyor.
Ve bunu hem girişlerde hem de düğmede istiyoruz.
Bootstrap sınıfı PTEN ETN'yi buna benzer şekilde ekleyelim.
Ayrıca arıza arasında da var ve neye benzediğini görelim.
Yani J.'den sonra düğüm
Evet yenile.
Tamam, buradaki önyükleme denetimleri ve önyükleme düğmesini kesinlikle alıyoruz ve
bunu istemiyoruz.
Bu yüzden bunu düzeltmek için yapabileceğimiz birkaç şey var.
Birincisi, her şeyi bir kabın içine koyacağız.
Dolayısıyla div sınıfı konteynerle aynı
kalıyordu ve bunu sadece alt kısmına taşıdım.
İşte gidiyoruz ve bunu düzgün bir şekilde girelim.
Çok az değişiklik kaydedin.
Şimdi biraz boşluk buluyoruz ama bu hala büyük bir form.
Yapacağım sonraki şey ızgaralı sistemi kullanmaktır.
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.
Bunu alıp sıraya kopyalayalım.
Böylece tüm form şimdi sıraya giriyor.
Ve bu da aynı şekilde yapılır.
Kaydet yenilemek henüz büyük bir fark değil.
Ve yapacağımız şey, CSSA kullanıyor ve esas olarak marjını vererek bunu merkezileştirmek için önyükleme destesinin
üstüne kendi stillerimizi yazıyor.
Oto hepsi burada sol ve sağ tarafta.
Ve biz sadece içinde bulunduğu konteynırın yaklaşık yüzde 30'unu almak istedik.
Bunu geri dönmeden önce yapmıştık ve kurallardan birini çiğneyeceğim, böylece size erken saatlerde
söyledi ki satır içi stiller yapmayın dedi.
Ve bunu yapmak kesinlikle iyi bir fikirdir.
Ancak şu an için kendi stil sayfalarını oluşturduğumuz yeni bir sürüme varıncaya kadar sırayla
yapacağız.
Bu yüzden formun içine koyduğumuz yeni bir div yapacağım.
Aynen böyle.
Sonra div tarzı vereceğim ve yüzde 30 ile diyerek başlayacağım.
Ve bunu bırakın, hayır görüyorum ki daha küçük bir form alıyoruz.
Şimdi bunu merkezlemek istiyoruz.
Yani biz buraya dönelim.
Üst ve alt sıfır, Otto sol ve sağda.
Şimdi formumuzu merkezileştirdik.
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.
Ancak yapacağımız şey, DTN bloğunu vermek ve bunu bir blok öğesi yapmanın Bootstrap yöntemiyle inşa etmek.
Ve şimdi tüm satırı ele alıyor.
Sonra bunu yapmak için tüm bu unsurlar arasında biraz boşluk bırakalım.
Form grubu sınıfında yerleşik bootstraps kullanacağız.
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.
Dolayısıyla, her girdi onun gibi birinin içine girer ve sonra bunu sadece kopyalarım ve
burada bir tane daha buluruz ve bu onun içine girer.
Sonra düğme için bir tane daha var.
Dolayısıyla üç kez klasik form grubumuz var ve kapanış div etiketlerine de ihtiyacımız var.
Orada bir tane var, biz de diğer kapanış div etiketine ihtiyacımız var.
TAMAM.
Dolayısıyla bu form grubu sadece işleri birlikte engelliyor.
Ama aynı zamanda biraz alan da sunuyor.
Şimdi bu düğme burada.
Odaklanabilecek bir sonraki şey, metnin ortalanması ve bunu yapmak için yapmamıza
rağmen metne hizalama merkezi vermektir.
Ve yine bu doğrultuda yapacağım.
En azından uzun vadede iyi bir fikir değil ama bu sadece çabucak bir şey yapmak için mükemmel bir kullanım.
Yani stil ve metni hizalama merkezine yapacağız.
Şimdi ortada olanı kaydedin.
Sonraki yapmamız gereken bu düğmenin rengini değiştirmek.
Beyaz çok iyi görünmüyor.
Şimdi, yenilemeyi kaydetmek için mavi yapacak birincil düğme birincil yapalım.
Evet, çok daha iyi görünüyor.
Ayrıca bu bağlantıyı geri dön bağlantısını da ortadan kaldıralım.
Dolayısıyla bunu sadece kopyalayacağız ve yapmamız gereken tek şey bu sınırın içine koymak.
Auto div yani formdan sonra bu div burada böyle ve kaydetmek.
Oraya gidiyoruz.
biraz dolgu veya kenar boşluğu ekleyerek bunu yapmak için bu H-1'e karşı hemen değil.
Geri döndük ve gerçekten yapmamız gereken son şey
Geri döneceğiz ve zaten seçtiğimiz bu div var.
Sıfır sıfırdan ziyade, başlangıçta 20 piksel bir marj verebiliriz.
Bakalım nasıl göründüğünü.
Tamam, biraz daha iyi görünüyor.
50 gibi bir şey daha yapalım.
Ve bu biraz fazla olabilir.
Kesinlikle kendi tercihin.
Hadi geri dönelim 25.
Tamam.
Bu şimdilik yeterince iyi.
İstediğiniz kadarıyla oyna ve bunları beğenirsen veya daralırsan bu formun girdilerini daha
geniş hale getirebilirsin, ancak ortada kalacak ve biraz aşağı inecek cevap
veren olduğunu görebilirsiniz.
Son olarak, bu markadan kurtulalım.
Kesinlikle buna ihtiyacın yok.
Altbilgimizin alt kısmında altbilgiye gidelim ve hile yapacağız.
Şimdilik bunu yaparsanız, tasarruflardan kurtulacağız.
Şimdi formumuz çok kötü görünmüyor geri dönüp gidebiliriz kampların bir listesini biz yeterince çubuk
ekleyebiliriz bir tane ekleyebiliriz.
Ayrıca geri dönüp henüz yapılmayan açılış sayfasını görüntüleyebiliriz.
Muhtemelen en çok çalışıyor ve diğer sayfalardan oldukça farklı olacak, daha güzel görünüyor
ve çok daha fazla özel stile sahip olacak.
Bu yüzden onu daha sonra saklayacağım.
Ve sonra numaramız burada hiçbir şey yapmayan kukla düğmelerimiz var.
Tamam