12-ma’ruza. Bootstrap freymvork texnologiyasi. Bazaviy shablonlarni sozlash

Download 201.77 Kb. bet 4/4 Sana 18.06.2023 Hajmi 201.77 Kb. #1566431

Bog'liq
12-ma’ruza

Bu sahifa navigatsiya:

• Maslahat
• Misol Link Button Button
• Misol Primary Secondary
• Tugma olchamlari
• Tugmalar guruhlari.
• BOOTSTRAP 5 ROYXATI GURUHLARI
• Faol holat .activeJoriy elementni ajratib korsatish uchun sinfdan foydalaning : Misol
• Raqamlangan royxat guruhlari .list-group-numberedOldinda raqamlar bolgan royxat elementlarini yaratish uchun sinfdan foydalaning : Misol
• Gorizontal royxat guruhlari
• Bootstrap 5 Navbar Navigatsiya paneli.
• Bootstrap 5 Form Sinfga ega barcha matnli va elementlari .form-control togri shakl uslubiga ega boladi: Misol
• Mustahkamlash uchun savollar

Katta ≥992px	Juda katta ≥1200px
XXL ≥1400px
.container-sm	100%	540px	720px	960px	1140px	1320px
.container-md	100%	100%	720px	960px	1140px	1320px
.container-lg	100%	100%	100%	960px	1140px	1320px
.container-xl	100%	100%	100%	100%	1140px	1320px
.container-xxl	100%	100%	100%	100%	100%	1320px

Misol





Bootstrap 5 Grid tizimi
Bootstrap grid tizimi flexbox bilan qurilgan va sahifa bo'ylab 12 tagacha ustunga ruxsat beradi. Agar siz barcha 12 ta ustundan alohida foydalanishni xohlamasangiz, kengroq ustunlar yaratish uchun ustunlarni birga guruhlashingiz mumkin:

Grid sinflari
Bootstrap 5 grid tizimi oltita sinfga ega:

• 
  .col- (qo'shimcha kichik qurilmalar - ekran kengligi 576px dan kam)
  
• 
  .col-sm- (kichik qurilmalar - ekran kengligi 576 pikselga teng yoki undan katta)
  
• 
  .col-md- (o'rta qurilmalar - ekran kengligi 768 pikselga teng yoki undan katta)
  
• 
  .col-lg- (katta qurilmalar - ekran kengligi 992 pikselga teng yoki undan katta)
  
• 
  .col-xl- (xlarge qurilmalar - ekran kengligi 1200px ga teng yoki undan katta)
  
• 
  .col-xxl-(xxlarge qurilmalari - ekran kengligi 1400px ga teng yoki undan katta)
  

Yuqoridagi sinflar yanada dinamik va moslashuvchan tartiblarni yaratish uchun birlashtirilishi mumkin.
Maslahat: Har bir sinf kattalashadi, shuning uchun smva uchun bir xil kengliklarni o'rnatmoqchi mdbo'lsangiz, faqat ni belgilashingiz kerak sm.
Bootstrap 5 tugmalari
Tugmacha uslublari. Bootstrap 5 turli xil uslubdagi tugmalarni taqdim etadi:

Misol
Basic
Primary
Secondary
Success
Info
Warning
Danger
Dark
Light
Link

Tugma sinflari , , yoki elementlarda ishlatilishi mumkin:
Misol
Link Button
Button



Nima uchun havolaning href atributiga # qo'yamiz?
Bizda uni bog'laydigan sahifa yo'qligi va biz "404" xabarini olishni istamaganimiz uchun havola sifatida # ni qo'yamiz. Haqiqiy hayotda bu, albatta, "Qidiruv" sahifasining haqiqiy URL manzili bo'lishi kerak.
Tugma konturi
Bootstrap 5 shuningdek, sakkizta kontur/chegaralangan tugmalarni taqdim etadi. Qo'shimcha "hover" effektini ko'rish uchun sichqonchani ularning ustiga olib boring:

Misol
Primary
Secondary
Success
Info
Warning
Danger
Dark
Light
Tugma o'lchamlari .btn-lgKatta tugmalar uchun sinfdan yoki kichik .btn-smtugmalar uchun sinfdan foydalaning:

Misol
Large
Default
Small
Tugmalar guruhlari. Bootstrap 5 tugmalar guruhida bir qator tugmalarni (bitta satrda) guruhlash imkonini beradi:

Misol

BOOTSTRAP 5 RO'YXATI GURUHLARI
Eng asosiy ro'yxat guruhi - bu ro'yxat elementlari bo'lgan tartibsiz ro'yxat:

Asosiy ro'yxat guruhini yaratish uchun

class bilan element va class .list-groupbilan
• elementlardan foydalaning .list-group-item:
  Misol
  
  
  
  • First item
  
  
  • Second item
  
  
  • Third item
  
  
  
  Faol holat
  
  .activeJoriy elementni ajratib ko'rsatish uchun sinfdan foydalaning :
  Misol
  
  
  
  • Active item
  
  
  • Second item
  
  
  • Third item
  
  
  
  Raqamlangan ro'yxat guruhlari
  .list-group-numberedOldinda raqamlar bo'lgan ro'yxat elementlarini yaratish uchun sinfdan foydalaning :
  
  Misol
  
  
  
  1. First item
  
  
  2. Second item
  
  
  3. Third item
  
  
  
  Gorizontal ro'yxat guruhlari
  Agar roʻyxat elementlari vertikal oʻrniga gorizontal (bir-birining ustiga emas, yonma-yon) koʻrsatilishini istasangiz, .list-group-horizontalsinfni quyidagiga qoʻshing .list-group:
  
  Misol
  
  
  
  • First item
  
  
  • Second item
  
  
  • Third item
  
  
  • Fourth item
  
  
  
  Nav menyulari
  
  Agar siz oddiy gorizontal menyu yaratmoqchi bo'lsangiz, .navsinfni
  elementga, so'ngra .nav-item har biri uchun
  • qo'shing va .nav-linksinfni ularning havolalariga qo'shing:
    Misol
    
    
    
    • 
      Link
      
    
    
    • 
      Link
      
    
    
    • 
      Link
      
    
    
    • 
      Disabled
      
    
    
    
    Tabs
    
    .nav-tabsNav menyusini sinf bilan navigatsiya yorliqlariga aylantiring . .activeSinfni faol/joriy havolaga qo'shing . Yorliqlarni almashtirishni istasangiz, ushbu sahifadagi oxirgi misolga qarang.
    Misol
    
    
    
    • 
      Active
      
    
    
    • 
      Link
      
    
    
    • 
      Link
      
    
    
    • 
      Disabled
      
    
    
    
    Bootstrap 5 Navbar
    
    Navigatsiya paneli. Navigatsiya paneli sahifaning yuqori qismida joylashgan navigatsiya sarlavhasi:
    Asosiy Navbar. Bootstrap yordamida navigatsiya paneli ekran o'lchamiga qarab kengayishi yoki yiqilishi mumkin.
    Sinf bilan standart navigatsiya paneli yaratiladi .navbar , undan keyin sezgir siqilish sinfi mavjud: .navbar-expand-xxl|xl|lg|md|sm (navbarni vertikal ravishda xxlarge, juda katta, katta, o'rta yoki kichik ekranlarda to'playdi).
    Navbarga havolalar qo'shish uchun
    elementdan (yoki a
    ) foydalaning . Keyin sinfga
    ega elementlarni va .nav-itemundan keyin sinfga ega elementni qo'shing .nav-link:
    Bootstrap 5 Form
    Sinfga ega barcha matnli va elementlari .form-control to'g'ri shakl uslubiga ega bo'ladi: <br /> <br /><b>Misol</b> <br /><form action="/action_page.php"> <br /><div class="mb-3 mt-3"> <br /><label for="email" class="form-label">Email:</label> <br /><input type="email" class="form-control" id="email" placeholder="Enter email" name="email"> <br /></div> <br /><div class="mb-3"> <br /><label for="pwd" class="form-label">Password:</label> <br /><input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd"> <br /></div> <br /><div class="form-check mb-3"> <br /><label class="form-check-label"> <br /><input class="form-check-input" type="checkbox" name="remember"> Remember me <br /></label> <br /></div> <br /><button type="submit" class="btn btn-primary">Submit</button> <br /></form> <br />Shuni <a href="/aktsiyalarni-baholash-va-ularni-oziga-hos-jihatlari.html">ham yodda tutingki</a>, biz .form-labelto'g'ri to'ldirishni ta'minlash uchun har bir yorliq elementiga sinf qo'shamiz. <br />Belgilash katakchalarida turli belgilar mavjud. Ular bilan konteyner elementi atrofida o'ralgan .form-check, va teglar bir sinf bor .form-check-label, tasdiqlash qutilari va radio tugmalari foydalanish esa .form-check-input. <br /><b><span id='Mustahkamlash_uchun_savollar'>Mustahkamlash uchun savollar</span></b> <br /><ol> <li/> <br />Bootstrap texnologiyasi haqida ayting. <br /><li/> <br />Bootstrap qanday ulanadi? <br /><li/> <br />Konteynerlar haqida ma’lumot bering. <br /><li/> <br />Grid tizimi haqida tushuncha bering. <br /><li/> <br />Bootstrap 5 CDN haqida ma’lumot bering. <br /><li/> <br />Bootstrap komponentlari haqida ma’lumot bering. <br /><li/> <br />Bootstrap NAV menyulari haqida ma’lumot bering. <br /><li/> <br />Bootstrap 5 formalari haqida tushuncha bering. <br /><li/> <br />Bootstrap TAB lari haqida tushuntiring. <br /><li/> <br />Gorizontal ro'yxat guruhlari qanday bo’ladi? <br /></ol> </input></input></input>
    
    
    Download 201.77 Kb.
    
    Do'stlaringiz bilan baham:
    
    1   2   3   4
    
    
    
    

    ---

    Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©fayllar.org 2024
    ma'muriyatiga murojaat qiling