Bootstrap Dərsləri – 4 | Nizamlama necə edilir?

Teknotower-in dəstəyi ilə Bootstrap dərs seriyamızın 4-cü hissəsi ilə davam edirik. Bu dərs başlamamışdan əvvəl sizlərə bizim giriş dərsimizi oxumağınızı tövsiyə edirəm.

Bu kursa daxildir:

1. Flex nədir?
2. Sətir sütununun düzülüş qaydası necə edilir?
3. Orden sinfi nədir?
4. Offset sinfi nədir?
5. Mətni necə uyğunlaşdırmaq lazımdır?
6. Rəngləmə necə edilir?

Flex nədir?

"Flexible Box Layout" kimi tanınan Flex, tanış CSS3 modullarından alınan bir quruluşdur. Ətraflarında mövcud olan obyektlərdən müstəqil şəkildə yerləşdirəcəyimiz qutuları yer tutur. Əvvəlki Flex modulları;

• display:box : 2009-cu ildə standartlaşdırılıb və hal-hazırda köhnəlir. Yalnız mobil üzərində bir neçə brauzer onu dəstəkləyir.
• display:flexbox : Defined in 2011. Hibrid həll. Hal-hazırda köhnəlir. Yalnız IE 10 dəstəkləyir.
• display:flex : 2014-cü ilin mart ayında standartlaşdırılmış və hal-hazırda istifadədə olan tərif. Yeni nəsil brauzerlərin hamısı bunu dəstəkləyir.

Dərsimizdə Flex-dən "d-flex" formatında istifadə edəcəyik. CSS siniflərimizin əksəriyyətində bu formatdan istifadə edəcəyik. Bunu displey-fleksin qısaldılmış forması hesab etmək olar.

Sətir sütununun düzülüş qaydası necə edilir?

Biz mövqe prosesini iki yolla həyata keçirə bilərik. Bunlar: üfüqi və şaquli mövqedir.

• Sütunları üfüqi olaraq mövqe etdirin:

*justify-content-* sinfindən istifadə edəcəyik. Grid strukturuna kiçik əlavələrlə fərqli nəticələr əldə etmək olar. Məsələn, sütun genişliyimiz ümumi olaraq 12 olmalı ikən, 9-dan istifadə edəcəyik və boş 3 yeri bir boşluq olaraq istifadə edərək şəkli daha yaxşı anlayacaq. Bu boş yerə əsasən sütunlarımız üçün uyğun gələ bilərik. Bunun üçün sıranın yerləşdiyi div e divs;

• orta hesabla –> justify-content-center
• –> justify-content-start to lean sola
• ––> justify-content-end
• –>-məzmun-arasında-haqq qazandır
• –> justify-content-around dəyərlər ətrafda və onların arasında genişlik uyğun tərk etmək üçün verilir.

Şəklin kodu aşağıdakı kimidir.

    <h2>Alignment</h2>
    <hr>
  <div sinif="konteyner-1">
  <hr>

<p class="font-weight-bold">EXAMPLES</p>

<p> Horizontality</p>
 <hr>
         --------- 1-ci nümunə
         <div class="d-flex justify-content-start ">
           <div class="col-example">col</div>
           <div class="col-example">col</div>
           <div class="col-example">col</div>
         </div>
         <br><br><r>
         --------- 2-ci nümunə

<div class="d-flex justify-content-end ">
           <div class="col-example">col</div>
           <div class="col-example">col</div>
           <div class="col-example">col</div>
         </div>
         <br><br><r>
         --------- 3-cü nümunə

<div class="d-flex justify-content-center">
           <div class="col-example">col</div>
           <div class="col-example">col</div>
           <div class="col-example">col</div>
         </div>
         <br><br> <hr>
         --------- 4-cü nümunə

<div class="d-flex justify-content-between ">
           <div class="col-example">col</div>
           <div class="col-example">col</div>
           <div class="col-example">col</div>
         </div>
         <br><br><r>
         --------- 5-ci nümunə

<div sinif="d-flex justify-content-around">
           <div class="col-example">col</div>
           <div class="col-example">col</div>
           <div class="col-example">col</div>
         </div>

• 

• 

• Sütunları şaquli olaraq yerləşdirmə:

*align-items- və ya align-self-* siniflərindən istifadə edəcəyik. Bootstrap 4-də şaquli düzülüş 2 üsulla edilə bilər. Metod 1-də sətir daxilində yuvalanmış bütün sütunları şaquli olaraq onların yuxarı-orta və ya alt qiymətləri üzrə yer tutur. Aşağıdakı nümunədə cərgənin yerləşdiyi dalış sütunları şaqulidir;

• –> align-items-üstündə yerləşdirməyə başlayın
• –> align-items-center
• –> align-items-end dəyərləri onları aşağıda yerləşdirməyə verilir.

2-ci metod vahid sütunun şaquli düzülüşunu dəyişməkdir. Buna görə; şaquli şəkildə arzu olunan sütuna;

• –> align-self-start onu üstündə yerləşdirməyə
• –> ortadakı mövqe üçün özünütənqid mərkəzi
• –> align-self-end qiymətlərini altda qoymaq üçün col dəyərindən sonra yazmaq kifayətdir.

Şaquli şəkildə həyata keçiriləcək siniflərin istifadəsi aşağıdakı kodda da müşahidə olunur.

           <div sinif="d-flex align-items-start">
                <div class="p-2 bd-highlight">col</div>
                <div class="p-2 bd-highlight">col</div>
                <div class="p-2 bd-highlight">col</div>
              </div>
           <div sinif="d-flex align-items-end">
                <div sinif="p-2 bd-highlight">col1</div>
                <div sinif="p-2 bd-highlight">col1</div>
                <div sinif="p-2 bd-highlight">col1</div>
              </div>
           <div sinif="d-flex align-items-center">
                <div class="col-example">col</div>
                <div class="col-example">col</div>
                <div class="col-example">col</div>
              </div>
           <div sinif="d-flex align-items-baseline">
                <div class="col-example">col</div>
                <div class="col-example">col</div>
                <div class="col-example">col</div>
              </div>
           <div sinif="d-flex align-items-stretch">
                <div class="col-example">col</div>
                <div class="col-example">col</div>
                <div class="col-example">col</div>
              </div></div>

Orden sinfi nədir?

Nizam-intizam sortinq sinifidir. Mövcud nizamı dəyişməkdə kömək edir. Məsələn; Qoy indiki sıramız col-1, col-2, col-3 və col-4 olsun . Burada biz kol-siniflərimizi istədiyimiz kimi nizam-1, əmr-2, əmr-3 və əmr-4 kimi aid edə bilərik. Kol-1, sifariş-3, kol-2, sifariş-1, kol-3, sifariş-4 , 4, qayda-2, sifarişlər kol-1, kol-2, kol-3 və kol-4-dürsə; Kol-2, kol-4, kol-1 və kol-3 olacaq.

  <div sinif="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">1st post </div>
  <div class="order-2 p-2 bd-highlight">2-ci yazı </div>
  <div class="order-1 p-2 bd-highlight">3-cü yazı </div>
</div>

Offset sinfi nədir?

Sütunlar ətrafında boşluqlar olan mövqelər–> *offset-md-* Offset, istenilen eni boşluqların sütunun sol tərəfində qalmasını təmin edir. Məsələn, "col-md-6 offset-md-3" kimi istifadə olunur. To mülkiyyəti nəzərə alınsaq , sol tərəfdə 3 vahid boşluq olan 6 vahid enli sütun yaradılır .

Mətni necə uyğunlaşdırmaq lazımdır?

Qutuda yazdığımız mətnləri qutu kənarlarına uyğun olaraq da tutmaq mümkündür. Amma necə? Gəlin görək! Mətnin düzülüş sinifləri və onların məqsədyönlü istifadəsi aşağıdakılardır:

• mətn-sol: Sol mətn.
• text-center: Mətn.
• text-right: Sağ dilli mətn.
• text-justify: Sətir uzunluğuna görə uyğunlaşdırılmış mətn.
• text-nowrap. Xətti doldurmuş mətn. Kod və ekran çıxışına baxsaq:

  <p class="text-left"> sol əsaslı mətn .</p>
  <p class="text-center"> Centered text .</p>
  <p class="text-right"> right-justified text .</p>
  <p class="text-justify">Sət uzunluğuna görətext. </p>
  <p class="text-nowrap"> sətiri doldurmuş mətn .</p>

Rəngləmə necə həyata keçirilir?

Rəngləmə üçün istifadə edilməsi lazım olan siniflər:

1. mutasiya etdi
2. ibtidai
3. müvəffəqiyyət
4. İnfo
5. xəbərdarlıq
6. Təhlükə
7. ikinci dərəcəli
8. Qaranlıq
9. bədən
10. İşıq siniflərini istifadə edərkən əmələ gələcək rənglər aşağıdakılardır.

Yuxarıdakı şəklin kodu belədir:

  <h2>Coloring</h2>
  <a href="#" class="text-muted"> class="text-muted </a> <br><br>
  <a href="#" class="text-primary"> class="text-primary </a><br><br>
  <a href="#" class="text-success"> class="text-success </a><br><br>
  <a href="#" class="text-info"> class="text-info </a><br><br>
  <a href="#" class="text-warning"> class="text-warning </a><br><br>
  <a href="#" class="text-danger"> class="text-danger </a><br><br>
  <a href="#" class="text-secondary"> class="text-secondary </a><br><br>
  <a href="#" class="text-dark"> class="text-dark </a><br><br>
  <a href="#" class="text-body"> class="text-body </a><br><br>
  <a href="#" class="text-light"> class="text-light </a><br><br>

Arxa Rəngləmə:

Arxa fon rəngləmə üçün istifadə olunan siniflər:

1. bg-əsas mətn-ağ
2. bg-success text-white
3. bg-info mətn-ağ
4. bg-xəbərdarlıq mətni-ağ
5. bg-təhlükə text-white
6. bg-ikinci dərəcəli mətn-ağ
7. bg-qaranlıq mətn-ağ
8. bg-light text-dark sinifləri istifadə olunur.

Bəs biz ondan istifadə edərkən əmələ gələcək rəng şəkli və kodu necə olacaq?

  <div sinif="konteyner">
    <h2>İyun rəngləmə</h2>

<p class="bg-primary text-white"> Bu sinif="bg-primary text-white </p>
    <p class="bg-success text-white" > Bu sinif="bg-success text-white </p>
    <p class="bg-info text-white"> Bu class="bg-info text-white </p>
    <p class="bg-warning text-white"> Bu class="bg-warning text-white </p>
    <p class="bg-danger text-white"> Bu class="bg-danger text-white </p>
    <p class="bg-secondary text-white">Bu class="bg-secondary text-white </p>
    <p class="bg-dark text-white"> Bu class="bg-dark text-white </p>
    <p class="bg-light text-dark"> Bu class="bg-light text-dark </p>
  </div>

Xüsusi

Kursu bitirməmişdən əvvəl kiçik bir mövzuya toxunmaq istəyirəm: Hindistanda filləri çoxaltmaq üçün fillər kiçik olanda ayaqlarını zəncirlə dirəyə bağlayırdılar. Bu kiçik fillər zəncirləri aradan qaldırmaq üçün çox səy göstərdilər, özlərinə xəsarət dəydilər. Lakin onların gücü bu zəncirləri çıxarmaq üçün kifayət deyil. Onlar həmişə onu tam gücləri ilə çıxarmağa çalışırlar. Fillər praktiki zəkaya malik heyvanlardır. Buna baxmayaraq, cəhdləri uğursuz olan fillər bir müddətdən sonra zəncirə alışıblar. Onlar onu yenidən aradan qaldırmaq üçün heç bir səy göstərməyə başlayırlar. Onlar başa düşürdülər ki, nəticə dəyişməyəcək. Vaxt keçir. Fillər nəhəng olurlar. Onlar bu zənciri aradan qaldırmağa qadir olsalar da, bir daha bu zənciri çıxarmağa çalışmırlar. Onlar buna öyrəşdilər, çünki balaca olanda çox sınayırdılar və eyni nəticəni əldə etdilər. İndi onlar hesab edirlər ki, azad ola bilməzlər, məhduddurlar. Artıq qırılmayan şey fillərin ayağındakı zəncir deyil, öz ağıllarıdır.

Buna psixologiyada "Öyrənilmiş acizlik" deyilir.

Hər birimiz öyrənmə ilə bağlı zehnimizdə zəncirlər qurmuşuq. Onları qıraq.

Sözsüz ki, Bootstrap kursları və süpürgələrlə gündəmə gəlmək üçün instagram səhifəmizi izləyin.

Bu məqalədə Bootstrapda nizamlama məsələsini sizinlə müzakirə etdik. Növbəti məqaləmizdə; rendering, borders və daha çox ilə…