Bootstrap-ın əsas məqsədi həssas, mobil ilk vebsaytlar yaratmaqdır. Veb saytın bütün interfeys elementlərinin bütün ekran ölçülərində optimal işləməsini təmin edir.

Bootstrap iki variantda mövcuddur – əvvəlcədən tərtib edilmiş və mənbə kodu versiyasına əsaslanır . Təcrübəli tərtibatçılar sonuncuya üstünlük verirlər, çünki bu, öz layihələrinə uyğun üslubları fərdiləşdirməyə imkan verir.

Məsələn, Bootstrap-ın “mənbə kodu” versiyası Sass portuna daxil olmaq imkanı verir . Bu o deməkdir ki, o, Bootstrap-ı idxal edən fərdi üslub cədvəli yaradır və sizə lazım olduqda aləti dəyişdirməyə və genişləndirməyə imkan verir.

Siz həmçinin Bootstrap- ı paket meneceri – çərçivələri, kitabxanaları və aktivləri idarə edən və yeniləyən alətlə quraşdıra bilərsiniz.

Ən məşhur paket menecerlərindən bəzilərinə npm , Composer və Bower daxildir . Npm server tərəfdən asılılıqları idarə edir, Composer isə ön hissəyə diqqət yetirir. Əgər PHP əsaslı layihələr üzərində işləyirsinizsə, bunun əvəzinə Bower-dən istifadə etməyi düşünün .

Populyarlığına görə getdikcə daha çox Bootstrap icması meydana çıxır. Bunlar veb tərtibatçıları və veb dizaynerləri üçün bilikləri bölüşmək və Bootstrap yamaqlarının ən son versiyalarını müzakirə etmək üçün əla yerlərdir.

Niyə Bootstrap istifadə etməlisiniz?

Bootstrap-ın bəzi interfeys komponentlərinə naviqasiya çubuqları, şəbəkə sistemləri, şəkil karuselləri və düymələr daxildir.

Əgər siz hələ də Bootstrap-ı sınamağa dəyər olub-olmadığına əmin deyilsinizsə, onu istifadə etməyin digər veb inkişaf çərçivələri ilə müqayisədə üstünlükləri buradadır.

İstifadə rahatlığı

İlk növbədə, Bootstrap-ı öyrənmək asandır. Populyarlığına görə, işə başlamağınıza kömək edəcək çoxlu dərs vəsaitləri və onlayn forumlar mövcuddur.

Bootstrap-ın veb tərtibatçıları və veb dizaynerləri arasında bu qədər populyar olmasının səbəblərindən biri onun sadə fayl strukturuna malik olmasıdır. Onun faylları asan daxil olmaq üçün tərtib edilmişdir və onları dəyişdirmək üçün yalnız HTML, CSS və JS haqqında əsas bilik tələb olunur.

Siz həmçinin öyrənmə alətləri kimi məşhur məzmun idarəetmə sistemləri üçün mövzulardan istifadə edə bilərsiniz. Məsələn, WordPress mövzularının əksəriyyəti hər hansı bir başlanğıc veb tərtibatçısının daxil ola biləcəyi Bootstrap istifadə edərək hazırlanmışdır.

Saytın səhifə yükləmə müddətini artırmaq üçün Bootstrap CSS və JavaScript fayllarını kiçildir. Bundan əlavə, Bootstrap komanda əsaslı layihələr üçün ideal olan vebsaytlar və tərtibatçılar arasında sintaksis üzrə ardıcıllığı qoruyur.

Cavab verən şəbəkə

Bootstrap əvvəlcədən təyin edilmiş şəbəkə sistemi ilə gəlir və sizi sıfırdan yaratmaqdan xilas edir. Şəbəkə sistemi cərgə və sütunlardan ibarətdir ki, bu da sizə CSS faylı daxilində media sorğularını daxil etmək əvəzinə mövcud sistemin daxilində bir şəbəkə yaratmağa imkan verir.

Bundan əlavə, Bootstrap-ın şəbəkə sistemi məlumatların daxil edilməsi prosesini daha sadə edir. O, veb-layihə ehtiyaclarınıza əsasən hər bir sütunun xüsusi kəsilmə nöqtələrini təyin etməyə imkan verən çoxlu media sorğularını ehtiva edir.

Standart parametrlər adətən kifayət qədərdir. Şəbəkə yaratdıqdan sonra yalnız konteynerlərə məzmun əlavə etməlisiniz.

Bootstrap şəbəkə sistemi həm masaüstü, həm də mobil əsaslı layihələri daha yaxşı yerləşdirmək üçün iki konteyner sinfinə malikdir – sabit konteyner ( .konteyner ) və maye konteyneri ( .konteyner-maye ).

Birinci konteyner sinfi sabit enli konteyner təqdim edir, ikincisi isə layihənizi bütün ekran ölçülərinə uyğunlaşdıra bilən tam enli konteyner təklif edir.

Brauzer Uyğunluğu

Veb saytınızı müxtəlif brauzerlər vasitəsilə əlçatan etmək sıçrayış sürətini azaltmağa və axtarış nəticələrində daha yüksək yer tutmağa kömək edir. Bootstrap populyar brauzerlərin ən son versiyalarına uyğun olaraq bu tələbi yerinə yetirir.

WebKit və Gecko kimi daha az tanınan brauzerləri dəstəkləməməsinə baxmayaraq , Bootstrap ilə veb saytlar da onlarda düzgün işləməlidir. Bununla belə, daha kiçik ekranlarda modallar və açılan siyahılarla bağlı məhdudiyyətlər ola bilər.

Bootstrap Şəkil Sistemi

Bootstrap əvvəlcədən təyin edilmiş HTML və CSS qaydaları ilə təsvirin göstərilməsi və cavab reaksiyasını idarə edir.

.img-responsive sinifinin əlavə edilməsi istifadəçilərin ekran ölçüsünə əsasən şəkillərin ölçüsünü avtomatik dəyişəcək. Bu, veb saytınızın performansına fayda verəcək, çünki şəkil ölçülərini azaltmaq saytın optimallaşdırılması prosesinin bir hissəsidir.

Bootstrap həmçinin şəkillərin formasını dəyişdirməyə kömək edən .img-circle və .img-rounded kimi əlavə siniflər təqdim edir .

Bootstrap Sənədləri

Bootstrap bu çərçivədən ilk dəfə istifadə etməyi öyrənmək istəyən tərtibatçılar üçün sənədlər təqdim edir. Bootstrap sənədləri səhifəsində tapa biləcəyiniz bir neçə mövzu var :

• Məzmun ‒ əvvəlcədən tərtib edilmiş Bootstrap mənbə kodunu əhatə edir.
• Brauzerlər və cihazlar ‒ bütün dəstəklənən veb və mobil brauzerləri və mobil əsaslı komponentləri sadalayır.
• JavaScript ‒ jQuery üzərində qurulmuş müxtəlif JS plaginlərini parçalayır.
• Mövzu ‒ daha asan fərdiləşdirmə üçün daxili Sass dəyişənlərini izah edir.
• Alətlər ‒ sizə müxtəlif hərəkətlər üçün Bootstrap-ın npm skriptlərindən istifadə etməyi öyrədir.
• Əlçatanlıq ‒ Bootstrap-ın struktur işarələmə, komponentlər, rəng kontrastı, məzmunun görünməsi və keçid effektləri ilə bağlı xüsusiyyətlərini və məhdudiyyətlərini əhatə edir.

Sənədlərə əsas təcrübələr üçün kod nümunələri də daxildir. Siz hətta layihələriniz üçün kod nümunələrini kopyalaya və dəyişdirə, sıfırdan kodlamağa vaxtınıza qənaət edə bilərsiniz.

Niyə Bootstrap istifadə etməməlisiniz

Üstünlüklərinə baxmayaraq, Bootstrap xüsusi layihələr üçün uyğun olmayan müəyyən məhdudiyyətlərə malikdir.

Bootstrap ardıcıl vizual üsluba malik olduğundan, bir layihəni digərindən fərqləndirmək üçün ağır fərdiləşdirmə və üslubu ləğv etmək lazımdır. Əks halda, bu çərçivə ilə qurulan bütün veb-saytlar eyni naviqasiya, struktur və dizayn komponentlərinə malik olacaq və onları qeyri-peşəkar göstərəcək.

Çox sayda funksiyaya malik olmaq böyük ölçülü faylları ehtiva etmək deməkdir. Layihənizdə Bootstrap-dan istifadə etsəniz, vebsaytın yükləmə müddətini ləngidə və serverinizi yükləyə bilər . Bu problemin qarşısını almaq üçün yalnız sizə lazım olan sinifləri əlavə etdiyinizə və faylların kiçildilmiş versiyasından istifadə etdiyinizə əmin olun.

Bootstrap populyar brauzerlərin ən son versiyası ilə uyğun gəlsə də, köhnə versiyalarda belə deyil. Bu o deməkdir ki, vebsaytınızın görünüşü tamamilə istifadəçilərin brauzerlərini yeniləməkdə göstərdikləri səydən asılı olacaq.

Başqa bir mənfi cəhət, Bootstrap üslublarının nisbətən həcmli olmasıdır. Bu, lazımsız HTML çıxışı ilə nəticələnə bilər, mərkəzi emal vahidi resurslarının israfına səbəb ola bilər.

İstifadəsi asan olsa da, Bootstrap əvvəlcə cüzi öyrənmə əyrisinə malikdir. Mövcud sinifləri və komponentləri öyrənmək üçün vaxt tələb olunur, bu, texniki biliyi olmayan biri üçün çətin ola bilər.

Bootstrap-ın 3 əsas faylı

Bootstrap üç əsas faylda – Bootstrap.css , Bootstrap.js və Glyphicons -da yığılmış sintaksis kolleksiyasından ibarətdir . Nəzərə alın ki, Bootstrap JS plaginləri və komponentlərini işə salmaq üçün jQuery adlı JS kitabxanası tələb edir .

Budur, veb-saytın istifadəçi interfeysi və funksionallığını idarə edən üç əsas çərçivə faylı.

Bootstrap.css

Bootstrap.css veb-saytın tərtibatını təşkil edən və idarə edən CSS çərçivəsidir. HTML veb səhifənin məzmunu və strukturu ilə işlədiyi halda, CSS tərtibatın özü ilə məşğul olur. Bu səbəbdən hər iki strukturun müəyyən bir hərəkəti yerinə yetirmək üçün birlikdə yaşaması lazımdır.

Bootstrap.css və onun funksiyaları tərtibatçıya lazım olan sayda səhifədə vahid görünüş yaratmağa kömək edir. Nəticədə, veb tərtibatçısı əl ilə redaktə etmək üçün saatlar sərf etməli olmayacaq.

Sıfırdan kodlaşdırma əvəzinə, yalnız veb səhifəni CSS faylına istinad etməlisiniz. İstənilən zəruri dəyişiklik yalnız həmin faylda edilə bilər.

CSS funksiyaları yalnız mətn üslubları ilə məhdudlaşmır, çünki siz onlardan veb-sayt daxilində cədvəllər və şəkil tərtibatı kimi digər aspektləri formatlaşdırmaq üçün istifadə edə bilərsiniz.

CSS-də çoxlu bəyannamələr və seçicilər olduğundan, onların hamısını yadda saxlamaq bir qədər vaxt apara bilər. Öyrənmə prosesinizi asanlaşdırmaq üçün CSS bloquna baxın .

Bootstrap.js

Bu fayl Bootstrap-ın əsas hissəsidir. O, veb-saytın interaktivliyinə cavabdeh olan JavaScript fayllarından ibarətdir.

JavaScript sintaksisini dəfələrlə yazmağa vaxta qənaət etmək üçün tərtibatçılar adətən jQuery-dən istifadə edirlər – populyar açıq mənbəli, cross-platform JavaScript kitabxanası.

Burada jQuery-nin edə biləcəyi bir neçə nümunə var:

• Dinamik olaraq başqa bir yerdən məlumatların çıxarılması kimi AJAX sorğularını yerinə yetirin .
• JavaScript plaginləri toplusundan istifadə edərək vidjetlər yaradın.
• CSS xassələrindən istifadə edərək fərdi animasiyalar yaradın.
• Veb saytın məzmununa dinamika əlavə edin.

CSS xassələri və HTML elementləri olan Bootstrap yaxşı işləyə bilsə də, cavab verən dizayn yaratmaq üçün jQuery lazımdır. Əks halda, yalnız üslub cədvəli dilinin çılpaq, statik hissələrini istifadə edə bilərsiniz.

Buna görə də, hər bir proqram mühəndisi jQuery haqqında öyrənməlidir, çünki bu, veb inkişafının vacib hissəsidir.

Qlifonlar

Nişanlar veb-saytın ön hissəsinin ayrılmaz hissəsidir, çünki onlar tez-tez istifadəçi interfeysində hərəkətləri və məlumatları göstərirlər.

Bootstrap, Glyphicons Halflings dəstini ehtiva edən Glyphicons adlı nişanlardan istifadə edir . Dizayn əsas olsa da, onlar əsas funksiyalarını yerinə yetirirlər və istifadə etməkdə sərbəstdirlər.

Daha qəşəng nişanlar tapmaq istəyirsinizsə, Glyphicons niş-xüsusi saytlar üçün müxtəlif premium dəstlər satır.

Siz həmçinin Flaticon , GlyphSearch və Icons8 kimi müxtəlif veb-saytlarda fərdi və mövzuya aid nişanları pulsuz yükləyə bilərsiniz .

Glyphicons ölçüsünü dəyişdirmək üçün CSS font-size xüsusiyyəti ilə standart üslubu ləğv etməlisiniz .

Veb İnkişafında Bootstrap-dan necə istifadə etmək olar

Bootstrap-dan necə istifadə olunacağına dair daha yaxşı şəkil əldə etmək üçün aşağıdakı nümunəyə nəzər salın.