Bootstrap 4: 7 Adımlarla Gözəl və Sadə Bir Veb Saytı Necə Hazırlanır

2024 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2024-01-30 07:45

Bu Təlimatın məqsədi Bootstrap 4 ilə onlayn portfel hazırlamaq üçün sadə bir giriş - HTML və ya başqa bir şəkildə proqramlaşdırma ilə tanış olanlara bir neçə fərqli məzmun blokunun necə yaradılacağını izah etməkdir. və qarşılaşa biləcəyiniz bir neçə problem var.

Portfel, daha çox idarə olunmaq üçün bir sıra kiçik addımlara bölünür: HTML çərçivəsi, CSS çərçivəsi, Javascript çərçivəsi, naviqasiya çubuğu və ana səhifə (məzmun blokları ilə).

Bir şeyə dair izahatlarım hələ də sizi çaş -baş qoyursa, suallarınız, təklifləriniz və ya qarışıq olduğunuz elementi google ilə şərh etməkdən çekinmeyin. Proqramlaşdırma saytları və Bootstrap üçün bir çox qaynaq mövcuddur.

Qeyd: Bu təlimat hər şeyi əhatə etmir və HTML, CSS və ya Javascript-də necə proqramlaşdırılacağını öyrənmək üçün istifadə edilməməlidir.

Lazımi mənbələr

• Bootstrap 4
• jQuery 3.3.1

İsteğe bağlı mənbələr

• FontAwesome
• Google Şriftləri
• vurğulamaq.js

Tam nümunəyə keçmək və ya depoya baxmaq istəyirsinizsə:

• Tam Nümunə
• Depo

Qeyd: Eyni mətn redaktoru ilə birlikdə izləmək istəyirsinizsə, nümunələrim üçün şəkillərdə Sublime istifadə edəcəyəm.

Addım 1: Quraşdırma

Qovluq Quraşdırması

1. Yükləyəcəyimiz hər şeyi saxlaya biləcəyiniz bir yerdə bir qovluq yaradın. Bu portfel üçün kök qovluğunuz olacaq.
2. Bunun içərisində "bootstrap" adlı bir qovluq yaradın
3. Kök portfel qovluğunuzda "jquery" adlı başqa bir qovluq yaradın

Portfolio Qovluğu

| ----- bootstrap | ----- jquery

Bootstrap 4

1. Veb saytına daxil olun və "Tərtib edilmiş CSS və JS" bölməsinin altındakı "Yüklə" düyməsini basın.
2. . Zip faylını "Yükləmələr" qovluğunda və ya başqa əlverişli yerdə saxlayın.
3. . Zip faylını açın və "css" və "js" qovluqlarını əvvəllər hazırladığınız "bootstrap" qovluğuna çıxarın.

jQuery

1. Veb saytlarını ziyarət edin və "sıxılmamış, inkişaf jQuery 3.3.1" yükləyin
2. Bu faylı əvvəllər yaratdığınız "jquery" qovluğunda saxlayın.

Həqiqi portfel üzərində işləməyə başlayanda bütün çərçivələr hazırdır.

Addım 2: HTML Çərçivəsi (index.html)

Adınız

Bu çərçivə çox mürəkkəb bir şey deyil, amma quruluşun ümumi məqsədlərini izah etmək istəyirəm.

JQuery -dən sonra JS -i yükləyin

Bootstrap -ın Javascript faylı ilə jQuery faylları arasında bir növ üst -üstə düşmə var. Bu üst -üstə düşmənin nə qədər geniş olduğunu sınamadım, ancaq bir nümunə naviqasiya çubuğunda istifadə etdiyim açılan funksiyadır. Əvvəlcə Bootstrap -a yükləsəniz, açılan düymə işləmir.

FontAwesome

Hər hansı bir veb inkişaf etdirmisinizsə, çox güman ki, FontAwesome -in nə olduğunu bilirsiniz. Ancaq bu belə deyilsə, əlavə fərdiləşdirmə üçün bir alət dəsti olan bir simvol dəstidir. Mənim kimi olsanız və heç bir sənət qabiliyyətiniz yoxdursa inanılmaz dərəcədə faydalıdır.

hightlight.js

Bu çərçivə, veb səhifələrdə dinamik kodu vurğulamağa imkan verir. Yalnız ümumi proqramlaşdırma dillərindən istifadə edirsinizsə, istifadə etdiyim digər çərçivələr kimi idxal edə bilərsiniz, ancaq xüsusi bir dil dəsti yükləmək üçün bir seçim də var. Sonuncu seçimi bir neçə makro və ini dillərə görə seçdim, amma bu tamamilə sizə bağlıdır.

Qeyd: İki nişan və vurğulama.js kimi sənədlərə sərt kodlu bağlantılardan istifadə etdiyim yerlərdən xəbərdar olun. Ayrıca, yalnız Bootstrap və jQuery tələb olunduğundan, digər çərçivələri əlavə etmək və ya silməkdən çekinmeyin. Hər hansı birini silsəniz, sonradan uyğun gələn kod sətirlərini silməyi unutmayın.

Addım 3: CSS Çərçivəsi (style.css)

/ * * İnşallah bg rəngini boz rəngə boyamaq və font stilini dəyişmək veb saytın istehlakını asanlaşdırır */ body {background: grey; font-family: 'Open Sans', sans-serif; }

/*

* Bu, naviqasiya çubuğunun hər şeyin üstündə olmasını təmin edir */ nav {z-index: 9999; }

/*

* Bu paraqraf mətnini daha oxunaqlı etməlidir */ p {font-size: 18px; margin-top: 5px; alt kənar: 5 piksel; }

/*

* Bu, bütün kod bloklarımın düzgün biçimlendirilmesini təmin edir */ code {text-align: left; }

/*

* Siyahıların güllə olmasını istəmirəm */ li {list-style-type: none; }

/*

* Bağlantılar standart olaraq mavi rəngdədir və onların Bootstrap üslubuna uyğun gəlmələrini istəyirəm */ li a, a {color: white; }

/*

* Məzmunun üst-üstə düşmədiyindən əmin olmaq üçün navbarı olan bir divə sinif etiketi bağlayıram */.navFix {padding-bottom: 70px; }

/*

* Artan ölçü navbar uzanır */.social-media {font-size: 1.3em; }

/*

* Açılır bağlantılar üçün standart işıqlandırma rəngi ağdır */.dropdown-menu a: hover {background-color: #212529; }

/*

* Divləri müəyyən bir hündürlüyə göstərən pdfləri göstərin */.pdfFill {hündürlük: 45rem; }

/*

* Düymələr və kod blokları arasında bir qədər boşluq əlavə edin */.codeStyle {padding-top: 30px; }

Bir müddət sonra sizi xilas etmək üçün məzmuna əsaslanan CSS elementlərini bu çərçivəyə daxil etdim. Hamısı çox sadədir və oxucular üçün portfellə qarşılıqlı əlaqəni asanlaşdıran həyat keyfiyyətinə aid dəyişikliklərdir.

nav z-indeksi

Çox məhdud miqdarda veb inkişaf etdirmə təcrübəm var, buna görə Bootstrap-ın naviqasiya çubuğunu tətbiq edərkən bunun ümumi bir problem olub-olmadığına əmin deyiləm, amma heç bir öndən arxaya istiqamətləndirmə spesifikasiyası olmadan naviqasiya çubuğu əslində digər məzmun altında görünəcək. Bootstrap Kartları. Bu, yığıla bilən navbarda ən çox nəzərə çarpır, amma təhlükəsizlik üçün indeks dəyişikliyini hər halda daxil etdim.

kod hizalanması

Adətən elementləri hizalamaq üçün Bootstrap-ın "əsaslandırmaq-məzmun mərkəzi" və "mətn mərkəzi" siniflərindən istifadə etdiyim üçün kodumun o mərkəzə uyğun təbiəti miras almasını istəmirəm. Hizalama dəyişikliklərinin üzərinə yazmaq və kod etiketlərini sola hizalamaqla bu asanlıqla düzəldilir: bu kodda nişan boşluğunu qoruyur.

navFix doldurma

Bootstrap -ın naviqasiya çubuğu səhifənin yuxarısına yapışdırıldıqda məzmun onun altına yüklənəcək. Navbarın səhifənin özü deyil, görünüş sahəsinin yuxarı hissəsinə yapışdırıldığı üçün bunun baş verdiyinə inanıram. Naviqasiya çubuğu ilə məzmunun qalan hissəsi arasındakı boşluğu artırmaqla bu düzəldilir.

Pdf hündürlüyü

Pdf fayllarının standart hündürlüyü inanılmaz dərəcədə kiçikdir. Əslində oxunmazdır, buna görə bir anda təxminən bir səhifə üçün kifayət qədər yer vermək üçün hündürlüyü dəyişdim.

Addım 4: Javascript Çərçivəsi (javascript.js)

/ * * Bu, 'keçid' sinifli hər hansı bir elementi axtarır və ya gizlədir və ya gizlədir */ function toggleSection (id, toggleID) {if (document.getElementById (id)) {var divID = document.getElementById (id); var divArray = document.getElementsByClassName (keçid ID);

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

divID.style.display = "blok";

}

saxta qayıtmaq;

}

/*

* Müəyyən bir qaydada işə salınması lazım olan kod */ $ (sənəd).ready (function () {/ * * Fayllardan məzmunu yükləyin */

/*

* Veriləri yükləmək üçün kiçik bir gecikməni məcbur edin */ setTimeout (function () {/ * * */ $ ('ön kod') ilə yüklənmiş bütün kodu qeyd edin. Hər biri (funksiya (i, blok) { hljs.highlightBlock (blok);});}, 1000); });

Bu portfelin dəyişdirilməsini və idarə olunmasını asanlaşdırmaq üçün bir səhifəlik format istifadə etməyə qərar verdim. Hər şeyi çox vaxt yerli saxlayır və məzmunun yüklənməsini daha sürətli edir.

keçid Bölməsi

Hansı məzmunun göstərilməsini və ya gizlənməsini idarə etmək üçün sinif dəyərlərindən istifadə etdim, çünki çox vaxt birdən çox elementi ayırmaq və qruplaşdırmaq üçün divlərdən istifadə edirəm. Fərdi düymələri qruplaşdırmaq üçün bundan istifadə edə bilərsiniz, ancaq heç bir məzmunun göstərilməməsi üçün "blok" ekranını qurmadan əvvəl əlavə bir yoxlama tələb olunur.

sənəd yüklənməsi

Normal HTML fayllarına bir çox müstəqil proqramlaşdırma kodu daxil etmək ümumiyyətlə qarışıq olduğu üçün bunu daxil etdim. Başqa fayllardan məzmun yüklədikdən sonra prosesi məcbur etmək üçün bu dinamik işıqlandırma metodundan istifadə edə bilərik.

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

Bu, məzmunu necə yükləyəcəyimizə bir nümunədir.

Addım 5: Naviqasiya Çubuğu

Baş hərflər

• Ev
• Mənim haqqımda
• Layihələr Dərsliklər
• Mənimlə əlaqə saxlayın

• Naviqasiya çubuğu portfeldəki hər şeydən ən mürəkkəb elementdir. Dərslərin şəffaf birləşməsi, bir növ tapmacaya bənzəyir ki, bu da qaydalar kitabına davamlı baxmağı tələb edir.

  Bootstrap funksionallığı

  Bootstrap əsasən fərqli sinif dəyərləri ilə işləyir. "Nav" elementinin özünə baxanda hər sinifin məqsədini müəyyən etmək o qədər də çətin deyil:

  "Navbarımız" "md" (orta), "genişləndirmək" qabiliyyətli, "qaranlıq" seçimimizdir. Və biz bunu "zirvəyə" düzəltdik. Çaşqın görünür, çünki bu, identifikatorların qarışığıdır, lakin onlara element üçün sifət kimi baxsanız, baş verənləri başa düşmək daha asan olar.

  Marka

  Marka, sol üstdəki hər veb saytında gördüyünüz tipik logo və addır. Hər bir istifadəçinin bu nöqtədə gözlədiyi sınaqdan keçirilmiş dizayn elementidir.

  Qeyd: "i" etiketləri əslində FontAwesome nişanlardır və bu etiketləri hər hansı bir simvol səhifəsindən alırsınız.

  Keçid/Yığıla bilən Düymə (Mobil)

  Bu düymə yalnız mobil cihazlarda görünür. Lakin naviqasiya çubuğunun genişləndirilməsi lazım olduğunu "nav" bəyannaməsinə daxil etdiyimiz üçün bu elementlər bir-birlərinə şəxsiyyət vəsiqələri və "məlumat dəyişdirmə" vasitəsi ilə bağlanır.

  Navbar Bağlantıları (Sol tərəf)

  Bu bağlantılar tamamilə portfeliniz üçün hansı kateqoriyalara ehtiyacınız olduğuna bağlıdır. Başlanğıc nöqtəsi olaraq bir neçə tipik nümunəni daxil etdim, amma heç kim eyni deyil. Sənət heykəlləri hazırlamağa diqqət etdiyiniz üçün "Dərsliklər" bölməsinə ehtiyacınız olmayacaq. Hər bir "li" elementi kopyalana və yapışdırıla bilər, buna görə nə lazım olduğunu anladıqdan sonra naviqasiyanı qurmaq asandır.

  Qeyd: Texniki olaraq digər açılan menyularda açılan menyular yarada bilərsiniz, lakin interfeysin təmiz görünməsi üçün daha çox CSS və Javascript əlavə etmək istəmirsinizsə bunu məsləhət görməzdim.

  Navbar bağlantıları (sağ tərəf)

  Doğru bağlantı siyahısını "ml-auto" sinifinə verərək, Bootstrap iki siyahını bərabər şəkildə ayırır. Bu, təmiz sol və sağ tərəf bölgüsünü yaradır. Bu məkanı sosial media bağlantıları üçün istifadə etmək qərarına gəldim, çünki varlığınızı artırmaq üçün çox yaygın və populyar bir üsuldur. Bu əlaqəli deyilsə, bu bağlantıları bir axtarış çubuğu, giriş məlumatları və s. Üçün silə bilərsiniz. Ancaq unutmayın ki, istifadə etmək üçün vacib bir yerdir. Sol tərəfdəki navbar bağlantılarına bənzər şəkildə bunları da kopyalayıb yapışdıra bilərsiniz.

  Qeyd: Əgər əvvəlcədən qurduğum bağlantılardan istifadə etməyi planlaşdırırsınızsa, həqiqi "href" bağlantılarındakı "istifadəçi adını" dəyişdirin.

  Addım 6: Ana səhifə

  

  

  

  Adınız

  Proqramçı Yazıçı Gamer

  Bu bölmə və sonrakı məzmun səhifələriniz portfelinizə nə qoymaq istədiyinizə bağlıdır. Açıqca hər bir məzmun növünə müraciət edə bilmərəm, ancaq şəkilləri, pdfləri, videoları, kod bloklarını, bəzi tipik daxil etmələri daxil etməyə çalışdım.

  Cədvəl Formatı

  Ana səhifə bir masa kimi qurulacaq. Son məhsulunuzu yaratmaq üçün inanılmaz dizayn bacarıqlarıma güvənməzdim, amma çox dinamik və çevik olduğunu göstərmək üçün satır və sütun birləşmələrinin fərqli variantlarını əlavə etdim. Solda düymələr və sağda məzmun olması üçün 3 satır və 2 sütun yarada bilərsiniz və ya tamamilə fərqli bir şey edə bilərsiniz. Yalnız bir az təcrübə lazımdır.

  Düymələr

  Bu funksiyalar adi düymələr kimi işləyir. Buradakı yeganə real Bootstrap inteqrasiyası, mövzunun qalan hissəsi ilə uyğunlaşacaq üslubdan qaynaqlanır. Əks təqdirdə, məzmununuzu nümayiş etdirmək üçün lazım olduğu qədər və ya çox kiçik düymələr yaradın və sonra href bağlantılarını divlər üçün identifikatorlarla uyğunlaşdırdığınızdan əmin olun.

  Proqramlaşdırma kodunun məzmunu

  "Kod" etiketləri, vurğulamaq üçün bütün qeydləri idarə etmək üçün istifadə edir. Javascript.js faylından xatırlayırsınızsa, digər fayllardan məzmun yükləmək üçün bir bölmə var.

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

  • Bunun birinci hissəsi məzmunu daxil etmək istədiyiniz elementin "id" ini axtarır.
  • İkinci hissə, yükləmək istədiyiniz faylın yeridir.

  Qeyd: Məzmun əslində tamamilə yüklənməyəcək, çünki bu veb səhifəni serverdə deyil, yerli olaraq redaktə etmək şansınız çoxdur. Təlimatın sonunda müraciət edəcəyim bir çox fərqli yolla həll edilə bilər.

  YouTube Video

  Gömülü "iframe" əslində YouTube -dan gəlir. Onları necə əldə edəcəyimi geniş izah etməyəcəyəm, ancaq bir videonu "Paylaş" a getdiyiniz zaman, videonuzu veb səhifədə göstərmək üçün lazım olan kodu yaratmağa kömək edəcək bir "Daxil et" seçimi var.

  Addım 7: İrəli bax

  Veb saytınıza daxil etmək istədiyiniz bir elementi və ya məzmun növünü əhatə etmədiyim üçün çox yaxşı bir şans var. Şükürlər olsun ki, növbəti addımları özünüz atmaq üçün bir çox yaxşı seçim var.

  Bootstrap Sənədləri

  Bootstrap-ın sənədləri əvvəlcədən proqramlaşdırılmış və sınaqdan keçirmək üçün portfelinizə kopyalayıb yapışdıra biləcəyiniz nümunələr axtarırsınızsa başlamaq üçün əla bir yerdir. Kartlara, Karusellərə və Formalara toxunmadım. Seçimləri görmək üçün "Komponentlər" bölməsinə baxmağınızı çox tövsiyə edirəm.

  W3 Məktəbləri

  W3Schools, veb proqramlaşdırma və inkişafla əlaqəli hər şeyi öyrənə biləcəyiniz gözəl bir veb saytdır. Məndən çox ağıllıdırlar və düşünə biləcəyiniz hər bir HTML, CSS və Javascript funksiyasını əhatə edirlər.

  Portfelinizə Hosting

  Bu Təlimat, veb saytınızı bir neçə fərqli platformada necə yerləşdirəcəyinizi öyrədir. Portfelinizi insanlara, işə götürənlərə və s. Göstərmək istəsəniz atmanız lazım olan addımlardır.

  Təcrübə edin və əylənin

  Böyük bir portfel yaratmağın yeganə yolu, maraqlı görünən hər şeyi və hər şeyi sınamaq və sınamaqdır. Bir çox xülya dizayn portfelləri və veb saytlar əla keçid effektləri və ya dinamik fonlardan istifadə edir, lakin heç biri əvvəlcədən hazırlanmamışdır.