Bootstrap 4: 7 Adımda Şık ve Basit Bir Web Sitesi Nasıl Yapılır?

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:18

Bu Eğitilebilir Yazının amacı, programlamaya aşina olanlara - HTML veya başka türlü - Bootstrap 4 ile çevrimiçi bir portföy oluşturmaya basit bir giriş vermektir. Web sitesinin ilk kurulumunda, birkaç farklı içerik bloğunun nasıl oluşturulacağı konusunda size yol göstereceğim. ve karşılaşabileceğiniz birkaç sorun.

Portföy, denemek ve daha yönetilebilir hale getirmek için birkaç küçük adıma bölünmüştür: HTML çerçevesi, CSS çerçevesi, Javascript çerçevesi, gezinme çubuğu ve ana sayfa (içerik bloklarıyla birlikte).

Bir şey için yaptığım açıklamalar hala kafanızı karıştırıyorsa, sorularınızı, önerilerinizi veya kafanız karışan öğeyi google'da yorum olarak bırakmaktan çekinmeyin. Web siteleri ve Bootstrap programlamak için birçok kaynak mevcuttur.

Not: Bu kılavuz her şeyi kapsamaz ve HTML, CSS veya Javascript'te nasıl programlanacağını öğrenmek için bir yedek olarak kullanılmamalıdır.

Gerekli kaynaklar

• Önyükleme 4
• jQuery 3.3.1

İsteğe Bağlı Kaynaklar

• Yazı TipiMüthiş
• Google Yazı Tipleri
• vurgu.js

Örneğe atlamak veya depoya bir göz atmak isterseniz:

• Tam Örnek
• depo

Not: Aynı metin düzenleyici ile takip etmek isterseniz, örnekler için resimlerde Sublime kullanacağım.

Adım 1: Kurulum

Klasör Kurulumu

1. İndireceğimiz her şeyi saklayabileceğiniz bir yerde bir klasör oluşturun. Bu, portföy için kök dizininiz olacaktır.
2. Bunun içinde "bootstrap" adlı bir klasör oluşturun.
3. Kök portföy klasörünüzün içinde “jquery” adında başka bir klasör oluşturun.

Portföy Klasörü

|----- önyükleme |----- jquery

Önyükleme 4

1. Web sitelerini ziyaret edin ve “Derlenmiş CSS ve JS” bölümünün altındaki “İndir” düğmesini tıklayın.
2. .zip dosyasını “İndirilenler” klasörünüze veya başka bir uygun konuma kaydedin.
3. .zip dosyasını açın ve “css” ve “js” klasörlerini daha önce oluşturduğunuz “bootstrap” klasörüne çıkarın.

jQuery

1. Web sitelerini ziyaret edin ve “sıkıştırılmamış, geliştirme jQuery 3.3.1” dosyasını indirin
2. Bu dosyayı daha önce oluşturduğunuz “jquery” klasörünün içine kaydedin.

Asıl portföy üzerinde çalışmaya başladığımızda tüm çerçeveler artık hazır.

2. Adım: HTML Çerçevesi (index.html)

Adınız

Bu çerçeve aşırı karmaşık bir şey değil, ancak kurulumun genel amaçlarını açıklamak istiyorum.

JQuery'den Sonra Bootstrap JS

Bootstrap'in Javascript dosyası ile jQuery's arasında bir tür örtüşme var gibi görünüyor. Bu örtüşmenin ne kadar kapsamlı olduğunu test etmedim, ancak bir örnek, gezinme çubuğunda kullandığım açılır menü işlevidir. Önce Bootstrap'i yüklerseniz, açılır düğme çalışmaz.

Yazı TipiMüthiş

Herhangi bir web geliştirme yaptıysanız, FontAwesome'ın ne olduğunu biliyorsunuzdur. Ancak durum böyle değilse, ekstra kişiselleştirme için bir araç seti içeren bir simge setidir. Benim gibiyseniz ve kesinlikle hiçbir sanatsal yeteneğe sahip değilseniz, inanılmaz derecede faydalıdır.

hightlight.js

Bu çerçeve, web sayfalarında dinamik kod vurgulamaya izin verir. Yalnızca ortak programlama dilleri kullanıyorsanız, kullandığım çerçevelerin geri kalanı gibi içe aktarabilirsiniz, ancak özel bir dil kümesi indirme seçeneği de vardır. Birkaç makro ve ini dili nedeniyle ikinci seçeneği seçtim, ancak tamamen size kalmış.

Not: İki simge ve vurgu.js gibi dosyalara sabit kodlanmış bağlantılar kullandığım yerlere dikkat edin. Ayrıca, yalnızca Bootstrap ve jQuery gerekli olduğundan, diğer çerçeveleri eklemekten veya kaldırmaktan çekinmeyin. Herhangi birini kaldırırsanız, daha sonra karşılık gelen kod satırlarını kaldırmayı unutmayın.

3. Adım: CSS Çerçevesi (style.css)

/* * Umarım bg rengini griye çevirmek ve yazı tipi stilini değiştirmek web sitesinin kullanımını kolaylaştırır */ body { background: grey; yazı tipi ailesi: 'Açık Sans', sans-serif; }

/*

* Bu, gezinme çubuğunun her şeyin üstünde olmasını sağlar */ nav { z-index: 9999; }

/*

* Bu, paragraf metnini daha okunaklı hale getirmelidir */ p { font-size: 18px; üst kenar boşluğu: 5 piksel; kenar boşluğu-alt: 5px; }

/*

* Bu, tüm kod bloklarımın doğru biçimlendirildiğinden emin olur */ code { text-align: left; }

/*

* Listelerde madde işareti olmasını istemiyorum */ li { list-style-type: none; }

/*

* Bağlantılar varsayılan olarak mavidir ve Bootstrap'in stiliyle aynı hizada olmalarını istiyorum */ li a, a{ color: white; }

/*

* İçeriğin çakışmadığından emin olmak için gezinme çubuğunu içeren bir div'e sınıf etiketi bağlarım */.navFix { padding-bottom: 70px; }

/*

* Artan boyut gezinme çubuğunu uzatır */.social-media { font-size: 1.3em; }

/*

* Açılır bağlantılar için varsayılan vurgu rengi beyazdır */.dropdown-menu a:hover { background-color: #212529; }

/*

* Belirli bir yüksekliğe kadar pdf'leri gösteren Force div'ler */.pdfFill { height: 45rem; }

/*

* Düğmeler ve kod blokları arasına biraz boşluk ekleyin */.codeStyle { padding-top: 30px; }

Size daha sonra zaman kazandırmak için içerik tabanlı CSS öğelerini bu çerçeveye dahil ettim. Hepsi çok basittir ve çoğunlukla, okuyucular için portföyle etkileşimi kolaylaştıran yaşam kalitesi değişiklikleridir.

gezinme z-endeksi

Çok sınırlı miktarda web geliştirme deneyimim var, bu yüzden Bootstrap'ın gezinme çubuğunu uygularken bunun yaygın bir sorun olup olmadığından emin değilim, ancak herhangi bir önden arkaya yönlendirme özelliği olmadan, gezinme çubuğu aslında diğer içeriğin altında görünecek. Bootstrap Kartları. Bu, en çok daraltılabilir gezinme çubuğunda fark edilir, ancak yine de güvenlik için dizin değişikliğini dahil ettim.

kod hizalama

Öğeleri hizalamak için genellikle Bootstrap'in "haklı içerik merkezi" ve "metin merkezi" sınıflarını kullandığımdan, kodumun bu merkeze hizalanmış doğayı devralmasını istemiyorum. Bu, herhangi bir hizalama değişikliğinin üzerine yazılarak ve kod etiketlerinin sola hizalı hale getirilmesiyle kolayca düzeltilir: bu, koddaki sekme aralığını korur.

navFix dolgu

Bootstrap'in gezinme çubuğu sayfanın en üstüne takılı kaldığında içerik onun altına yüklenir. Bunun, gezinme çubuğunun aslında sayfanın kendisi yerine görünümün en üstüne takılı kalması nedeniyle olduğuna inanıyorum. Ne olursa olsun, bu, gezinme çubuğu ile içeriğin geri kalanı arasındaki boşluğu artırarak sabitlenir.

pdf yüksekliği

Pdf dosyalarının varsayılan yüksekliği inanılmaz derecede küçüktür. Esasen okunamaz, bu yüzden her seferinde kabaca bir sayfaya yetecek kadar yer açmak için yüksekliği değiştirdim.

4. Adım: Javascript Çerçevesi (javascript.js)

/* * Bu, 'toggle' sınıfına sahip herhangi bir öğeyi arar ve onu gizler veya gösterir */ function toggleSection(id, toggleID) { if (document.getElementById(id)) { var divID = document.getElementById(id); var divArray = document.getElementsByClassName(toggleID);

for (var i = 0; i < divArray.length; i++) { divArray.style.display = "none"; }

divID.style.display = "blok";

}

yanlış döndür;

}

/*

* Belirli bir sırada çalıştırılması gereken kod */ $(document).ready(function() { /* * Dosyalardan içerik yükle */

/*

* Verileri yüklemek için küçük bir gecikmeye zorlayın */ setTimeout(function() { /* * */ $('pre code').each(function(i, block) { hljs.highlightBlock(blok); }); }, 1000); });

Bu portföyün değiştirilmesini ve yönetilmesini kolaylaştırmak için tek sayfalık bir format kullanmaya karar verdim. Her şeyi çoğunlukla yerel tutar ve içeriğin daha hızlı yüklenmesini sağlar.

toggleSection

Hangi içeriğin gösterilmesi veya gizlenmesi gerektiğini yönetmek için sınıf değerlerini kullandım çünkü çoğu zaman birden çok öğeyi ayırmak ve gruplandırmak için divs kullanıyorum. Bunu, tek tek düğmeleri gruplamak için de kullanabilirsiniz, ancak "blok" ekranını hiçbir içeriğin gösterilmesine izin vermeyecek şekilde ayarlamadan önce fazladan bir kontrol gerektirir.

belge yükleme

Bunu ekledim çünkü normal HTML dosyalarına bir grup bağımsız programlama kodu eklemek genellikle dağınıktır. Diğer dosyalardan içerik yükledikten sonra işlemin gerçekleşmesini sağlamak için bu dinamik vurgulama yöntemini kullanabiliriz.

$('#mq2-intro').load("files/tutorials/mq2/mq2-intro/content.html");

Bu, içeriği nasıl yükleyeceğimize bir örnektir.

Adım 5: Gezinme Çubuğu

baş harfler

• Ev
• Benim hakkımda
• Projeler Eğitimleri
• Bana ulaşın

Gezinme çubuğu, portföydeki her şeyin en karmaşık öğesidir. Sınıfların saf kombinasyonu, onu sürekli olarak kural kitabına bakmanızı gerektiren bir bulmaca gibi yapar.

Önyükleme İşlevselliği

Bootstrap, temelde farklı sınıf değerleri aracılığıyla çalışır. "Nav" öğesinin kendisine bakıldığında, her sınıfın amacını belirlemek çok zor değil:

"Gezinme çubuğumuz", "md" (orta), "genişletilebilir", "karanlık" seçeneğidir. Ve onu "en üste" "sabitledik". Karmaşık bir tanımlayıcı olduğu için kafa karıştırıcı görünüyor, ancak onlara öğenin sıfatları olarak bakarsanız, neler olduğunu anlamak çok daha kolay hale gelir.

Marka

Marka, her web sitesinde sol üstte gördüğünüz tipik logo ve addır. Bu, her kullanıcının bu noktada beklediği denenmiş ve gerçek bir tasarım öğesidir.

Not: "i" etiketleri aslında FontAwesome simgeleridir ve bu etiketleri herhangi bir simgenin sayfasından alırsınız.

Açma/Kapatma Düğmesi (Mobil)

Bu düğme yalnızca mobil cihazlarda görünür. Ancak, gezinme çubuğunun genişletilebilir olması gerektiğini "nav" bildirimine dahil ettiğimizden, bu öğeler kimlikleri ve "veri değiştirme" tanımlayıcıları aracılığıyla birbirine bağlanır.

Navbar Bağlantıları (Sol Taraf)

Bu bağlantılar tamamen portföyünüz için hangi kategorilere ihtiyacınız olduğuna bağlıdır. Başlangıç noktası olarak birkaç tipik örnek ekledim ama hiç kimse aynı değil. Sanat heykelleri yapmaya odaklandığınız için bir "Öğreticiler" bölümüne ihtiyacınız olmayabilir. Her "li" öğesi kopyalanıp yapıştırılabilir, bu nedenle neye ihtiyacınız olduğunu anladığınızda, gezinmeyi ayarlamak kolaydır.

Not: Teknik olarak diğer açılır menüler içinde açılır menüler oluşturabilirsiniz, ancak arayüzün temiz görünmesi için daha fazla CSS ve Javascript eklemek istemiyorsanız bunu tavsiye etmem.

Navbar Bağlantıları (Sağ Taraf)

Doğru bağlantı listesini "ml-auto" sınıfını vererek, Bootstrap iki listeyi eşit olarak ayırır. Bu, temiz sol ve sağ taraf bölümünü oluşturur. Varlığınızı artırmak için çok yaygın ve popüler bir yöntem olduğu için bu alanı sosyal medya bağlantıları için kullanmaya karar verdim. Bu alakalı değilse, bu bağlantıları bir arama çubuğu, oturum açma bilgileri vb. için not edebilirsiniz. Ancak bunun kullanılmasının önemli olduğunu unutmayın. Ve sol taraftaki gezinme çubuğu bağlantılarına benzer şekilde, bunları da kopyalayıp yapıştırabilirsiniz.

Not: Zaten kurmuş olduğum bağlantıları kullanmayı planlıyorsanız, gerçek "href" bağlantılarındaki "kullanıcı adını" değiştirin.

6. Adım: Ana Sayfa

Adınız

Programcı Yazar Oyuncu

Bu bölüm ve sonraki içerik sayfalarınız, portföyünüze ne koymak istediğinize bağlı olacaktır. Açıkçası her içerik türünü ele alamam, ancak resimleri, pdf'leri, videoları, kod bloklarını ve bazı tipik eklentileri dahil etmeye çalıştım.

Tablo Formatı

Ana sayfa bir tablo görevi görecek şekilde ayarlanmıştır. Son ürününüzü yaratmak için harika tasarım becerilerime güvenmezdim, ancak çok dinamik ve esnek olduğunu göstermek için satır ve sütun kombinasyonlarının farklı varyasyonlarını ekledim. Solda düğmeler ve sağda içerik olacak şekilde 3 satır ve 2 sütun oluşturabilir veya tamamen farklı bir şey yapabilirsiniz. Sadece biraz deneme gerekiyor.

Düğmeler

Bunlar esasen normal düğmelerin yaptığı gibi işlev görür. Buradaki tek gerçek Bootstrap entegrasyonu, stilin temanın geri kalanıyla eşleşmesinden kaynaklanmaktadır. Aksi takdirde, içeriğinizi sergilemek için ihtiyaç duyduğunuz kadar çok veya az düğme oluşturun ve ardından href bağlantılarını div'lerin kimlikleriyle eşleştirdiğinizden emin olun.

Programlama Kodu İçeriği

"Kod" etiketleri, tüm vurgulamayı yönetmek için Highlight.js'nin kullandığı varsayılan etiketlerdir. Javascript.js dosyasından hatırlıyorsanız, diğer dosyalardan içerik yüklemek için bir bölüm var.

$('#home-programmer-macro').load("files/home/watchLoot.mac");

• Bunun ilk kısmı, içeriği eklemek istediğiniz öğenin "kimliğini" arar.
• İkinci kısım, yüklemek istediğiniz dosyanın konumudur.

Not: Bu web sayfasını bir sunucu yerine yerel olarak düzenleme olasılığınız yüksek olduğundan, içerik tam olarak yüklenmeyecektir. Bu, Eğitilebilirliğin sonunda ele alacağım bir dizi farklı yolla ele alınabilir.

Youtube videosu

Yerleşik "iframe" aslında YouTube'un kendisinden gelir. Bunları nasıl elde edeceğinizi kapsamlı bir şekilde açıklamayacağım, ancak bir videoyu "Paylaş" a gittiğinizde, videonuzu web sayfasında göstermek için gerekli kodu oluşturmanıza yardımcı olacak bir "Yerleştir" seçeneği vardır.

Adım 7: İleriye Bakmak

Web sitenize eklemek istediğiniz bazı öğe veya içerik türlerini ele almamış olma ihtimalim çok yüksek. Neyse ki, sonraki adımları kendiniz atmanız için birçok iyi seçenek var.

Bootstrap Belgeleri

Bootstrap'ın belgeleri, önceden programlanmış ve denemek için portföyünüze kopyalayıp yapıştırabileceğiniz örnekleri olan öğeler arıyorsanız, başlamak için harika bir yerdir. Kartlara, Karusellere veya Formlara dokunmadım. Seçenekleri görmek için "Bileşenler" bölümüne bakmanızı şiddetle tavsiye ederim.

W3Okulları

W3Schools, web programlama ve geliştirme ile ilgili hemen hemen her şeyi öğrenebileceğiniz harika bir web sitesidir. Benden çok daha akıllılar ve aklınıza gelebilecek hemen hemen her HTML, CSS ve Javascript işlevselliğini kapsıyorlar.

Portföyünüzü Barındırma

Bu Eğitilebilir Tablo, web sitenizi birkaç farklı platformda nasıl barındıracağınızı öğretir. Portföyünüzü insanlara, işe alım görevlilerine vb. gösterebilmek istiyorsanız, atmanız gereken adımlar bunlardır.

Deneyin ve Eğlenin

Harika bir portföy oluşturmanın tek yolu, ilginç görünen her şeyi denemek ve denemektir. Birçok süslü tasarım portföyü ve web sitesi harika geçiş efektleri veya dinamik arka planlar kullanır, ancak bunların hiçbiri önceden yapılmamıştır.