"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. Flex elastik qutu Bootstrap 4
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-startto 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>
Üfüqi düzülüş
Üfüqi düzülüş
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.
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:
mutasiya etdi
ibtidai
müvəffəqiyyət
İnfo
xəbərdarlıq
Təhlükə
ikinci dərəcəli
Qaranlıq
bədən
İşıq siniflərini istifadə edərkən əmələ gələcək rənglər aşağıdakılardır.
Bəs biz ondan istifadə edərkən əmələ gələcək rəng şəkli və kodu necə olacaq?
Kodu görsək;
<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ə…
To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.
Functional Always active
The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
Preferences
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistics
The technical storage or access that is used exclusively for statistical purposes.The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.