bootstrap 4 dərslik


Çəkmə mobil cavab verən veb saytları daha tez və asanlıqla qurmağınıza kömək edən ön bir çərçivədir. İlk olaraq Twitter tərəfindən hazırlanan Bootstrap, veb tətbiqləri inkişaf etdirməkdən WordPress mövzularına qədər hər şey üçün istifadə olunur. Həm də tamamilə pulsuz, çox yönlü və intuitivdir.

Bootstrap ilə, standart HTML-dən mürəkkəb veb səhifələrini sehr edə və ehtiyaclarınıza uyğunlaşdıra bilərsiniz. Bootstrap, həmçinin karusellər, düymələr, göstərişlər və daha çox əlavə funksionallıq təmin edə biləcək bir sıra jQuery eklentisi ilə təmin olunur.

Son, lakin ən əsası, vaxt və enerjiyə qənaət edəcək veb səhifələr yaratmaq üçün çox sayda qısa yol verir. Sizə lazım olan yalnız HTML və CSS-in həssas, mobil ilk və bütün müasir brauzerlərlə uyğun olanları yaratmaq üçün əsas anlayışıdır..

P.S. Bootstrap tam başlayanlar üçün mükəmməl bir seçim deyil. Bəzi HTML və CSS bilikləri faydalı olardı. Alternativ olaraq veb sayt yaratmaq üçün veb qurucularından və ya WordPress-dən istifadə edə bilərsiniz.

Bootstrap (məzmun cədvəli) istifadə edərək veb sayt necə yaradılır:

  1. Addım 1: Quraşdırma və baxış
    1. HTML səhifə yaradın
    2. Bootstrapı CDN vasitəsilə yükləyin və ya yerli olaraq yerləşdirin
    3. JQuery daxil edin
    4. Bootstrap JavaScript-i yükləyin
    5. Hamısını bir yerə qoyun
  2. Addım 2: Açılış səhifənizi dizayn edin
    1. Bir naviqasiya çubuğu əlavə edin
    2. Xüsusi CSS daxil edin
    3. Bir səhifə məzmunu konteyneri yaradın
    4. Fon şəkli və xüsusi JavaScript əlavə edin
    5. Bir Overlay əlavə edin
    6. Bir səhifə başlığı və bədən mətni daxil edin
    7. CTA düyməsini yaradın
    8. Üç sütunlu bir hissə qurun
    9. Əlaqə forması əlavə edin
    10. İki sütun altbilgi yaradın
    11. Mediya sorğularını əlavə edin
    12. Veb saytınızı canlı edin

Bootstrap istifadə edərək veb sayt yaratmağın ümumi vaxtı: 3-4 saat.
Bacarıq səviyyəsi: Başlayan vasitəçi

Addım 1: Quraşdırma və baxış


Bootstrap istifadə etmək üçün əvvəlcə onu inkişaf mühitinizə, aka veb səhifəsinə inteqrasiya etməlisiniz. Bunun üçün iki fərqli imkanınız var: uzaqdan yükləyin və ya yerli olaraq Bootstrap yükləyin və istifadə edin. Ancaq hər ikisi üçün əvvəlcə onu yükləmək üçün bir şeyə ehtiyacınız var.,

1. HTML səhifə yaradın

İlk addım olaraq Bootstrap istifadə edəcəyimiz bir baza olaraq sadə bir HTML şablonu yaradacağıq. Bunun üçün etmək istədiyiniz ilk şey, kompüterinizdə və ya layihə sənədləri üçün bir qovluq yaratmaqdır. Bu vəziyyətdə sadəcə çağıracağam çəkmə qurğusu. Burada yeni bir mətn faylı yaradın və zəng edin indeks.html. Seçdiyiniz bir mətn redaktoru ilə açın. Notepad++) və sonra aşağıdakı kodu ona yapışdırın.





Bootstrap Tutorial Nümunə Səhifə








Davam etmədən əvvəl sənədinizi saxlamağı unutmayın!

2a. Bootstrapı CDN vasitəsilə yükləyin

Artıq izah edildiyi kimi, Bootstrap əsasən stil cədvəlləri və skriptlərdən ibarətdir. Buna görə, bunlar xüsusi şriftlər kimi digər aktivlər kimi veb səhifənizin başlığına və altbilgisinə yüklənə bilər. Çərçivə bunun üçün bir CDN (məzmun çatdırılması şəbəkəsi) giriş yolunu təklif edir. Onu tapa bilərsiniz Bootstrap yükləmə səhifəsi, daha aşağıda.

Bootstrapı səhifənizə daxil etmək üçün aşağıdakı kodu aşağıdakı koda yapışdırın şablonunuzun bölməsi.

İndi faylı saxladığınız zaman onu açan hər hansı bir brauzer avtomatik olaraq Bootstrap aktivlərini yükləyəcəkdir.

Uzaq metoddan istifadə etmək yaxşı bir fikirdir, çünki bir çox istifadəçi artıq brauzerinizin ön yaddaşındakı çərçivəyə sahib olacaqdır. Əgər belədirsə, saytınıza gələrkən səhifəni yükləmə müddətinin sürətlənməsinə səbəb olduqda onu yenidən yükləməli olmurlar. Nəticədə, canlı saytlar üçün tövsiyə olunan metod budur.

Ancaq təcrübə və inkişaf üçün və ya İnternet bağlantısından müstəqil olmaq istəyirsinizsə, Bootstrap-ın öz nüsxəsini də əldə edə bilərsiniz. Bu dərs vəsaiti üçün etdiyim iş budur, çünki onu göndərmək üçün daha az kod çıxır.

2b. Yerli Bootstrap-a ev sahibliyi edin

Bootstrap qurmağın alternativ bir yolu, sabit diskinizə yükləmək və faylları yerli istifadə etməkdir. Yükləmə seçimlərini uzaq versiyaya bağlantılar ilə eyni yerdə tapa bilərsiniz. Burada tərtib edilmiş CSS və JS fayllarını əldə etməyinizə əmin olun. Mənbə sənədlərinə ehtiyacınız yoxdur.

Bunu etdikdən sonra, faylı açın və içindəki məzmunu eyni qovluğa köçürün indeks.html. Bundan sonra Bootstrap CSS-ni layihənizə bu kimi yükləyə bilərsiniz:

Buradakı Bootstrap faylını tapacaq olan fayl yolunun olduğunu görəcəksiniz. Vəziyyətinizdə, yolunuzun əsl quraşdırma ilə uyğun olduğundan əmin olun. Məsələn, Bootstrap’ın fərqli bir versiyasını yükləsəniz, qovluqların adları fərqli ola bilər.

3. jQuery daxil edin

Bootstrapın tam işləməsini əldə etmək üçün jQuery kitabxanasını da yükləməlisiniz. Burada da onu uzaqdan yükləmək və ya yerli olaraq yerləşdirmək imkanı var.

Birinci halda, jQuery-in son versiyasına keçid tapırsınız burada. Kitabxananı səhifənizə yükləmək üçün istifadə etdiyiniz yerdən əvvəl kod sətirini söylədiyi yerə qoyaraq istifadə edə bilərsiniz səhifənizdə.

Alternativ olaraq, jQuery yükləyin (sağ vurun> Linki saxla…), açın və layihə qovluğuna qoyun. Sonra, bu şəkildə faylınızla eyni yerə daxil edin:

Yenə də yolunuzun quraşdırma ilə uyğun olduğundan əmin olun.

4. Bootstrap JavaScript-i yükləyin

Bootstrap qurmağın son addımı Bootstrap JavaScript kitabxanasını yükləməkdir. Bunlar çərçivənin yüklənmiş versiyasına daxil edilmişdir və eyni zamanda uzaq mənbələrə keçidləri əvvəlki kimi tapırsınız. Bununla birlikdə, tərz cədvəlindən fərqli bir yerə yükləyəcəyik. Başlıq yerinə, jQuery çağırışından dərhal sonra səhifə altbilgisinə daxil olur.

Uzaqdan bu kimi zəng edə bilərsiniz:

Və ya yerli olaraq belə:

5. Hamısını bir yerə qoyun

Yuxarıdakı addımları düzgün izləmisinizsə, uzaqdan həll etmək üçün bu kimi görünən bir faylla başa çatmalısınız:

   Bootstrap Tutorial Nümunə Səhifə         

Alternativ olaraq, yerli qonaqlıq verərsinizsə, səhifənizin şablonu aşağıdakı koda bənzəməlidir:

   Bootstrap Tutorial Nümunə Səhifə         

Əgər bu nə varsa və işinizi qurtarmısınızsa, indi növbəti mərhələyə keçməyə hazırsınız.

Addım 2: açılış səhifənizi dizayn edin


Tamamilə, bu, çox hazırlıq işləri idi. Ancaq çox da çətin deyildi, elə deyilmi? Üstəlik, indi əyləncə başlayır.

Bu anda, nümunə saytınıza gedərkən sadəcə boş bir səhifəni görməlisiniz. Bunu dəyişdirməyin vaxtı gəldi.

1. Bir naviqasiya çubuğu əlavə edin

Etmək istədiyimiz ilk şey, səhifənin yuxarısına bir naviqasiya çubuğu əlavə etməkdir. Bu, ziyarətçilərinizə saytınızı gəzməyə və qalan səhifələrinizi kəşf etməyə imkan verir.

Bunun üçün biz istifadə edəcəyik navbar sinif. Bu biridir standart elementlər Bootstrap. Varsayılan olaraq cavab verən və avtomatik olaraq kiçik ekranlarda çökəcək bir naviqasiya elementi yaradır. Ayrıca marka, rəng sxemləri, boşluq və digər komponentlərin əlavə edilməsi üçün daxili dəstək təklif edir.

Biz aşağıdakı kimi istifadə edəcəyik və yalnız aşağıda yerləşdirəcəyik etiket:

 Loqo   

Kodun bəzi izahı:

  • navbar-genişləndirmək-md – Bu, naviqasiya çubuğunun şaquli və ya hamburger simvolundan tam ölçülü bir üfüqi çubuğa qədər genişləndiyini göstərir. Bu vəziyyətdə, onu Bootstrap-da 768px-dan daha böyük bir şey olan orta ekranlara qoyduq..
  • navbar-marka – Bu veb saytın markalanmasında istifadə olunur. Buraya bir logo şəkil faylı da əlavə edə bilərsiniz.
  • navbar-toggler – Çökmüş menyu üçün keçid düyməsini göstərir. Parça data-toggle = "dağılması" bunun başqa bir seçim olan açılan yerə deyil, hamburger menyusuna çevriləcəyini təyin edir. A müəyyən etmək vacibdir məlumat hədəfi bir CSS id ilə (ilə müəyyən edilir) #) və sarın bölmək həqiqi ətrafında eyni adla navbar element.
  • navbar-toggler-icon – Yəqin ki, təxmin edə bildiyiniz kimi, bu, istifadəçiləri kiçik ekranlarda menyunu açmaq üçün tıkladığı simge yaradır.
  • navbar-nav – Üçün sinif
      menyu maddələrini saxlayan siyahı elementi. Sonuncular ilə işarələnir nav-maddənav-link.

    Bunu niyə bu qədər izah edirəm?

    Çünki bu Çəkmə nöqtəsidir. Tez bəzi HTML və CSS sinifləri ilə elementlər yaratmağa imkan verən bu standartların hamısına sahibsiniz. Üslubu təmin etmək üçün hər hansı bir CSS yazmaq lazım deyil, hər şey artıq Bootstrap daxilində qurulub. Üstəlik, hər şey qutudan kənarda mobil cavabdır! Bunun nə qədər faydalı olduğunu görməyə başlayırsınız?

    Yuxarıda göstərilənlər saytınıza bir naviqasiya çubuğu əlavə etmək üçün kifayətdir. Ancaq bu anda yenə çox az görünür.

    bootstrap təlimatı naviqasiya çubuğu əlavə edin

    Ona görə çox üslubu olmadığı üçün. Əlavə edə bildiyiniz halda standart rənglər (məsələn, navbara bənzər bir sinif verərək bg-tünd navbar-qaranlıq), bunun əvəzinə özümüzü əlavə etmək istəyirik.

    2. Xüsusi CSS daxil edin

    Xoşbəxtlikdən, standart üslubu dəyişdirmək istəyirsinizsə, stil tablolarının böyük bir kitabxanasından keçmək və dəyişiklikləri əl ilə etmək lazım deyil. Bunun əvəzinə, yalnız bir WordPress uşaq mövzusunda olduğu kimi, mövcud üslubu yazmaq üçün istifadə edə biləcəyiniz öz CSS sənədlərinizi əlavə edə bilərsiniz..

    Bunun üçün sadəcə mətn redaktorunuzla boş bir fayl yaradın və zəng edin ana.css. Saxla və sonra Bootstrap saytınızın baş hissəsinə əlavə edin:

    Bu əsas qovluqda olan bir stil cədvəli üçün koddur. Əgər içərinizi yerləşdirməyə qərar verərsinizsə css qovluq, linkə düzgün yolu daxil etdiyinizə əmin olun.

    Buradan, saytınıza xüsusi CSS əlavə edə bilərsiniz. Məsələn, naviqasiya çubuğunu və onun elementlərini tərtib etmək üçün bu kimi işarələrdən istifadə edə bilərsiniz:

    bədən { taxma: 0; marj: 0; fon: # f2f6e9; } / * --- naviqasiya çubuğu --- * / .navbar { fon: # 6ab446; } .nav-link, .navbar marka { rəng: #fff; kursor: göstərici; } .nav-link { margin-sağ: 1em! vacib; } .naviqasiya: hover { rəng: # 000; } .navbar-dağılma { haqlı-məzmunlu: çevik; }

    Və nəticə budur:

    bootstrap tutorial stil naviqasiya çubuğu

    Əvvəlkindən daha yaxşı görünür, elə deyil?

    3. Bir səhifə məzmunu konteyneri yaradın

    Naviqasiya çubuğundan sonra istədiyiniz növbəti şey səhifə məzmunu üçün bir konteynerdir. Bootstrap-da bu, həqiqətən asandır, çünki bunun üçün lazım olan bütün şey navbar etiketinin altındadır:

    Diqqət yetirin konteyner-maye sinif. Bu u mənim başlanğıc Bootstrap dərslərindən biridir. Onu tətbiq etmək bölmək element avtomatik olaraq ona bir dəstə CSS tətbiq edir.

    The -maye hissəsi konteynerin ekranın bütün genişliyi boyunca uzanmasına əmin olur. Yalnız bir var konteyner, ona tətbiq olunan sabit genişliklər var, buna görə ekranın hər iki tərəfində həmişə yer olacaqdır.

    Ancaq səhifəni yenidən yükləsəniz, hələ bir şey görməyəcəksiniz (geliştirici alətlərindən istifadə etməsəniz). Yalnız boş bir HTML elementi yaratdığınıza görə. Bu artıq dəyişməyə başlayacaq.

    4. Arka plan şəkli və xüsusi JavaScript əlavə edin

    Bu Bootstrap təlimatındakı növbəti addım olaraq, eniş səhifəmizin başlığı üçün tam ekranlı fon şəklini əlavə etmək istəyirik. Bunun üçün görüntünün bütün ekrana uzanması üçün bəzi jQuery-dən istifadə etməliyik.

    Bunu xüsusi CSS daxil etdiyiniz şəkildə edirsiniz. Əvvəlcə adın mətn faylını yaradın ana.js və saytınızın qovluğuna yerləşdirin. Sonra bağlanmadan əvvəl zəng edin içərisində etiket indeks.html.

    Bundan sonra, etmək üçün bu kod parçasını kopyalayabilirsiniz

    element bütün ekrana uzanır:

    $ (sənəd) .siz (funksiya () { $ ('. başlıq'). hündürlüyü ($ (pəncərə) .height ()); })

    Sonra qalan bir şey arxa plan qurmaqdır. Bunu içəridə belə edə bilərsiniz ana.css:

    .başlıq { background-image: url ('şəkillər / başlıq-fon.jpg'); fon ölçüsü: örtük; fon-mövqe: mərkəz; mövqe: nisbi; }

    Yuxarıdakı yol ilə göstərilən yerə kifayət qədər ölçülü bir şəkil qoysanız, buna bənzər bir nəticə əldə edəcəksiniz:

    bootstrap təlimatı başlıq fon şəklini ehtiva edir

    5. Bir Overlay əlavə edin

    Fon görüntüsünü əlavə şık etmək üçün əlavə bir örtük əlavə edəcəyik. Bunun üçün daha əvvəl daxil etdiyiniz bir başqa bir element yaradacaqsınız.

    Sonra, xüsusi CSS sənədinizə aşağıdakıları əlavə edə bilərsiniz:

    .üst-üstə düşmək { mövqe: mütləq; min hündürlük: 100%; min en: 100%; sol: 0; üst: 0; fon: rgba (0, 0, 0, 0.6); }

    Daha əvvəl daxil etdiyiniz görüntü üçün bu gözəl bir örtük yaradacaq:

    bootstrap tutorial əlavə örtük əlavə edin

    6. Bir səhifə başlığı və bədən mətni daxil edin

    İndi bir mövzu başlığı və bəzi bədən mətni şəklində bir səhifə başlığı əlavə etmək istərdiniz. Bu yolla ziyarətçiləriniz hansı saytda olduqlarını və ondan nə gözləyə biləcəklərini dərhal biləcəklər.

    Bunları yaratmaq üçün, bu parçanı son addımda qurduğunuz konteynerin altına əlavə edin:

    Açılış səhifəsinə xoş gəlmisiniz!

    Lorem ipsum dolor amet oturur, adipiscing elit. Aralıq otağı üçün bir neçə addım atmaq lazımdır. Sed aliquet id id sapien rutrum, idrak pozuntularının çox olması. Faritra sem ullamcorper-də fransa id idini təxirə salın.

    Bundan sonra aşağıdakı işarəni əlavə edin ana.css.

    .təsviri { sol: 50%; mövqe: mütləq; üst: 45%; çevir: çevir (-50%, -55%); mətn align: center; } .təsvir h1 { rəng: # 6ab446; } .təsviri p { rəng: #fff; şrift ölçüsü: 1.3rem; xətt boyu: 1.5; }

    Etdiyiniz zaman açılış səhifəsi indi belə görünür:

    bootstrap təlimatı səhifə başlığı və təsviri əlavə edin

    Həqiqətən bir araya gəlməyə başlayır, elə deyilmi??

    7. CTA düyməsini yaradın

    Heç bir açılış səhifəsi, əksər hallarda bir düymə şəklində fəaliyyət çağırışı olmadan tamamlanmır. Bu səbəbdən, bu Bootstrap dərsliyində birinin necə yaradılacağını daxil etməməyimizə səbəb olardı.

    Çərçivə düymələri tez və asanlıqla yaratmaq üçün çox sayda vasitə təklif edir. Bir çox nümunə tapa bilərsiniz burada. Mənim vəziyyətimdə içindəki səhifə məzmununun altına aşağıdakı işarəni əlavə edirəm konteyner:

    Bundan əlavə, bu CSS-i də əlavə edirəm ana.css:

    .təsvir düyməsinə { haşiyə: 1px bərk # 6ab446; fon: # 6ab446; sərhəd-radius: 0; rəng: #fff; } .təsvir düyməsinə: hover { sərhəd: 1px bərk #fff; fon: #fff; rəng: # 000; }

    Saxladıqdan və yenidən yüklədikdən sonra belə görünür:

    bootstrap təlimatı fəaliyyət düyməsinə zəng əlavə edin

    8. Üç sütunlu bir hissə qurun

    Artıq işlərin necə qurulduğundan məmnunam. Ancaq hələ səhifə ilə bitməmişik. Bundan əlavə, əlavə məlumat üçün əsas məzmunun altından üç sütun yaratmaq istəyirik. Güclü oynadığı üçün bu Bootstrapın bir xüsusiyyəti: bir grid yaratmaq. Bu vəziyyətdə bunu necə etmək olar:

    Lorem ipsum

    Lorem ipsum dolor amet oturur, adipiscing elit. Aralıq otağı üçün bir neçə addım atmaq lazımdır. Sed aliquet id id sapien rutrum, idrak pozuntularının çox olması.

    Lorem ipsum

    Lorem ipsum dolor amet oturur, adipiscing elit. Aralıq otağı üçün bir neçə addım atmaq lazımdır. Sed aliquet id id sapien rutrum, idrak pozuntularının çox olması.

    Fark edəcəyiniz ilk şey budur sıra element. Şəbəkə üçün bir konteyner rolunu oynamaq üçün sütunlar yaratdıqda bu lazımdır.

    Sütunlara gəldikdə, hamısında bir neçə sinif var: col-lg-4, col-md-4col-sm-12. Bunlar sütunlarla və fərqli ekranlarda olacaq ölçülərlə işləməyimizi göstərir.

    Bunu başa düşmək üçün bir Bootstrap gridində bir sıra bütün sütunların hər dəfə 12 nömrəsinə əlavə olunduğunu bilməlisiniz. Beləliklə, yuxarıdakı siniflərə verilməsi, böyük və orta ekranın üçdə birini alacaqlarını bildirir. ekranlar (12-nin 3-ə bölünməsi 4-dür), lakin kiçik qurğulardakı bütün ekran (12 sütundan 12-si).

    Anlamlıdır, olmur?

    Şəkilləri daxil etdiyimi və əlavə etdiyimi də görəcəksiniz .görüntü-maye sinif onlara. Bu, səhifənin baxıldığı bir ekranla bərabər miqyas alması üçün onları cavablandırmaqdır.

    Bundan əlavə, adi bir yerə aşağıdakı üslubu daxildir:

    .xüsusiyyətləri { marj: 4em avto; taxma: 1em; mövqe: nisbi; } .xüsusiyyət başlığı { rəng: # 333; şrift ölçüsü: 1.3rem; şrift çəkisi: 700; margin-alt: 20px; mətn çevirmək: böyük; } .xüsusiyyətləri img { -webkit-box-kölgə: 1px 1px 4px rgba (0, 0, 0, 0.4); -moz-box-kölgə: 1px 1px 4px rgba (0, 0, 0, 0.4); qutu kölgəsi: 1px 1px 4px rgba (0, 0, 0, 0.4); margin-alt: 16px; }

    Əsas məzmunun altına əlavə edildikdə və saxlandıqda, belə görünür:

    bootstrap tutorial üç sütun bölmə əlavə edin

    9. Əlaqə forması əlavə edin

    Yeni sahələrdən birinin hələ də boş olduğunu görəcəksiniz. Bunun üçün bir əlaqə forması əlavə etmək istədiyimiz üçün məqsədli idi. Ziyarətçilərin əlaqə saxlamaları üçün səhifələrin enməsi üçün bu çox normal bir tətbiqdir.

    Bootstrap-da əlaqə forması yaratmaq olduqca asandır:

    Əlaqədə olmaq!

    Artıq sütunlar yaratmaq üçün işarələri izah etməməliyəm. İşarələmənin qalan hissəsi nə deməkdir:

    • forma qrupu – Formatlama üçün forma sahələrini sarmaq üçün istifadə olunur.
    • forma-nəzarət – Giriş, mətn sahələri və s. Kimi sahələri göstərir.

    Formalarda edə biləcəyiniz daha çox şey var sənədlər. Ancaq nümayiş məqsədləri üçün yuxarıda göstərilənlər kifayətdir. Qalan boş sütunun içərisinə qoyun və sonra bu üslubu əlavə edin ana.css:

    .xüsusiyyətləri .form-nəzarət, .xüsusiyyətləri giriş { sərhəd-radius: 0; } .xüsusiyyətləri .btn { background-color: # 589b37; haşiyə: 1px bərk # 589b37; rəng: #fff; margin-top: 20px; } .xüsusiyyətləri .btn: hover { background-color: # 333; haşiyə: 1px bərk # 333; }

    Etdiyiniz zaman bu kimi bir forma alırsınız:

    bootstrap təlimatına əlaqə forması daxildir

    10. İki sütun altbilgi yaradın

    Tamam, indi Bootstrap təliminin sonuna yaxınlaşırıq. Açılış səhifəsinə əlavə etmək istədiyiniz son şey iki sütunu olan altbilgi hissəsidir. Bu, artıq sizin üçün çox problem yaratmamalıdır.

    əlavə informasiya

    Lorem ipsum dolor amet oturur, adipiscing elit. Aralıq otağı üçün bir neçə addım atmaq lazımdır. Sed aliquet id id sapien rutrum, idrak pozuntularının çox olması.

    Lorem ipsum dolor amet oturur, adipiscing elit. Aralıq otağı üçün bir neçə addım atmaq lazımdır. Sed aliquet id id sapien rutrum, idrak pozuntularının çox olması.

    Əlaqə

    1640 Riverside Drive, Hill Valley, California
    [e-poçt qorunur]
    + 01 234 567 88
    + 01 234 567 89

    Adi grid işarələməsindən başqa, bu bölmə Bootstrap ilə mətbəə dəyişdirmək üçün bir neçə imkan vurğulayır:

    • mətn böyük hərf
    • şrift-çəki cəsur
    • mətn mərkəzi

    Etdikləri siniflərin adından olduqca aydın olmalıdır. Bootstrap və mətbəə haqqında daha çox məlumat tapa bilərsiniz burada.

    Yuxarıda göstərilənlərə əlavə olaraq, bu kimi üslubu istifadə edə bilərsiniz:

    .səhifə altbilgi { background-color: # 222; rəng: #ccc; padding: 60px 0 30px; } .altbilgi müəllif hüquqları { rəng: # 666; padding: 40px 0; }

    Nəticədə belə görünən gözəl bir altbilgiyə səbəb olur:

    önyükleme təlimatına səhifə altbilgi daxildir

    11. Mediya sorğularını əlavə edin

    Səhifə əsasən hazırdır. Həm də tam məsuliyyət daşıyır. Lakin, brauzerin mobil görünüşündə yuxarı hissə hələ tam çıxmır.

    mobil dizaynda açılış sınığı tutorial səhv

    Ancaq narahat olmayın, sadə bir media sorğusu ilə bunu asanlıqla düzəldə bilərsiniz. Bootstrap saytınızı tərtib etmək üçün SASS istifadə etməsəniz, bunlar digər hallarda olduğu kimi eyni şəkildə işləyir. Sadəcə yadda saxlamağınız lazımdır əvvəlcədən təyin edilmiş nöqtələr Bootstrap daxil.

    Nəticədə, yuxarıdakı problemi düzəltmək üçün sadəcə bir kod kodu daxil edə bilərsiniz:

    @media (maksimum en: 575.98px) { .təsviri { sol: 0; padding: 0 15px; mövqe: mütləq; üst: 10%; çevirmək: heç biri; mətn align: center; } .təsvir h1 { şrift ölçüsü: 2em; } .təsviri p { şrift ölçüsü: 1.2rem; } .xüsusiyyətləri { marj: 0; } }

    Bundan sonra hər şey olduğu kimi olur:

    önyükleme təlimatı media sorğu əlavə edin

    12. Veb saytınızı bir veb hosta yükləyin

    Birgə təqib etmisinizsə, indi də mobil və tamamilə cavab verən bir veb sayt ilə qurulmalısınız.

    Ancaq bu günə qədər ancaq səndən başqa heç kim yoxdur. Bunu dəyişdirmək üçün veb host və domenə ehtiyacınız var. Bu yolla insanlar veb sayt adresinizi brauzer çubuğuna daxil edə və sonra yeni hazırlanmış Bootstrap veb saytınıza onlayn daxil ola bilərlər.

    Onların buna icazə verməsi üçün saytı serverinizə yükləməlisiniz. Bunu bir FTP müştəri ilə edə bilərsiniz FileZilla. Uzaqdan serverə qoşulmaq üçün FTP ana ünvanınızı, istifadəçi adınızı və şifrənizi host provayderinizdən toplayın. Etdiyiniz zaman, hazırda orada olan faylları və qovluqları görə bilməlisiniz.

    bootstrap veb saytını ftp vasitəsilə serverə yükləyin

    Domeninizin göstərildiyi qovluğa gedin (adətən kök qovluğu). Bunu etdikdən sonra, sabit diskinizdəki Bootstrap faylları olan qovluğu tapın, içərisindəki bütün faylları qeyd edin və yükləməyə başlamaq üçün onları serverə sürün. Bağlantı sürətinizdən, həmçinin faylların sayından və ölçüsündən asılı olaraq proses bir müddət çəkəcəkdir.

    Bununla birlikdə, bir dəfə etdikdə, domeninizə daxil olduqda, bitmiş saytı brauzerinizin pəncərəsində görə biləcəksiniz.

    açılış qurğusu təlimatı açılış səhifəsini bitirdi

    Bir neçə sətir kodu üçün pis deyil?

    Xüsusi CSS və JavaScript daxil olmaqla səhifənin bütün koduna sahib olmaq istəyirsinizsə, bunların hamısını buradan yükləyə bilərsiniz. Bununla, Bootstrap ilə açılış səhifəsi yaratmaq üçün ehtiyacınız var.

    Nəticə

    Bootstrap hər kəs pulsuz istifadə edə biləcəyi açıq mənbə, ön inkişaf çərçivəsidir. Tez dizayn prototipini yaratmağa, veb səhifələr yaratmağa və ümumiyyətlə çalışan yerə vurmağa imkan verir.

    Başlayanlar üçün bu Bootstrap təlimatında gördüyünüz kimi, yalnız HTML, CSS və bəzi əlavə jQuery haqqında əsas biliklərə ehtiyac var. WordPress-i istifadə etmək qədər rahat olmasa da, Bootstrap veb sayt yaratmaq üçün hələ də etibarlı alternativdir.

    İndiyə qədər Bootstrap və onun komponentlərini necə qurmağı və quraşdırmağı, sadə açılış səhifəsini yaratmağı, bəzi təməl məzmunu daxil etməyi və onu tərzləşdirməyi bilirsiniz. Naviqasiya menyularını yarada, arxa plan şəkillərini təyin edə, düymələri, sütunları və əlaqə formalarını daxil edə bilərsiniz.

    Əlbəttə ki, öyrənmək üçün daha çox şey var.

    Bu əsas Bootstrap təlimatı sayəsində indi özünüzü irəliləməyə davam etmək üçün kifayət qədər bilirsiniz. Çərçivəyə daha dərin dalmaq istəyirsinizsə, yaxşı bir başlanğıc nöqtəsidir W3Məktəblər. Bundan başqa, bu yeni başlayan dərsini bəyəndiyinizi və bu barədə düşüncənizi və təcrübənizi eşitmək istəyəcəyinizi ümid edirik.

    Yeniləmə: .pdf və .png versiyalarında yeni başlayanlar üçün bir açılış qurğusu fırıldaqçı vərəqi də yaratdıq.

    Yuxarıdakı Bootstrap təlimatına dair fikirləriniz varmı?? Suallar, şərhlər, sorğular? Aşağıdakı şərh bölməsində bizə bildirin!

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me