Bootstrap 4 texnologiyasi. Bootstrap 4 da JavaScript buyruqlari

Bootstrap 4 texnologiyasi. Bootstrap 4 da JavaScript buyruqlari

Reja

1. 
   Kirish
   
2. 
   Asosiy qism
   

2.1 Bootstrap 4 texnologiyasi

2.2 Bootstrap 4 da JavaScript buyruqlari

3. 
   Xulosa
   
4. 
   Foydalanilgan adabiyotlar
   

1. 
   Kirish
   

Bugungi kunda bizning yurtimizda ham axborot texnologiyalari kundan-kunga rivojlanib bormoqda. Har kuni yaxshi texnologiyalar yan ishlanmalar va yangidan-yangi tizimlar misolida buni ko’rishimiz mumkindir. Yurtimizdagi bunday tizimlarni juda ko’pi bugungi kunda Web texnologiyalarida yaratilmoqda. Chunki web texnologiyalari inson tushuna oladigan tilga o’tkazilgan, yani mashina tilidan inson tiliga. Web dasturlari yoki web-ilovalari (foydalanuvchi interfeys) web brauserda ishlaydigan mijoz-server dasturi hisoblanadi. Endi biz mulohaza yuritmoqchi bo’lgan texnologiya esa Bootstrap texnologiyasi hisoblanadi. Bu texnologiya mijoz tarafda yani foydalanuvchi interfeys tomonda ishlaydi. Hozirgi kunda juda ko’p web dasturlarida juda ko’p qo’llanib kelinmoqda.


2.1 Bootstrap 4 texnologiyasi

Oldin biz Bootstrap 4 texnologiyasiga kirishdan oldin Bootstrap o’zi nima ekanligini qanday foydalanish kerakligini tushunib olamiz. Web ilova yaratish mobaynida kodni oson va qulay yozish uchun kutubxonalar yaratilgan. Masalan HTML CSS va JavaScript uchun kutubxonalari mavjuddir. Bu kutubxonalar jamlanmasi esa Bootstrap texnologiyasini tashkil qiladi.

• 
  Bootstrap tez va oson veb-ishlab chiqish uchun bepul oldingi asos hisoblanadi
  
• 
  Bootstrap tipografiya, shakllar, tugmalar, jadvallar, navigatsiya, modalliklar, tasvirlar karusellari va boshqalar uchun HTML va CSS-ga asoslangan dizaynlashtirilgan andozalar, shuningdek ixtiyoriy JavaScript-ni plaginlari
  
• 
  Bootstrap, sizga osonlik bilan javob beruvchi dizaynlarni yaratish qobiliyatini beradi
  

Bugungi kunda internetda eng mashxur kutubxonalardan biri xisoblanmish Bootstrap asosiy maqsadlaridan biri web-ilovalarini nafaqat kompyuterda balki mobilni ham ko’rganda o’zining shaklini o’zgartirmaslikni hisobga olgan.



1-rasm Bootstrap texnologiyasi

Bootstrap 4 bootstrapning eng yangi versiyasi bo’lib, bootstrap 3 ga qaraganda yangilangan kodlar esa soddalashgan va tushunarli qilib ishlangan. Bootstrap 4 barcha asosiy brauzerlarning va platformalarning eng so'nggi, barqaror versiyalarini qo'llab-quvvatlaydi. Biroq, Internet Explorer 9 va pastga qo'llab-quvvatlanmaydi.

Foydalanish

Bootstrap 4 yoki bootstrap texnologiyalaridan foydalanishni ya’ni projectga qo’shishni 2 xil yo’li mavjuddir.

1. 
   Bootstrap kutubxonalari https://getbootstrap.com/ saytidan tortib olib foydalanish mumkin va tortilgan kutubxonalarni esa CSS va JS fayllarni qanday qilib ulasak kutubxonani ham shunday qilib ulab foydalanishimiz mumkin.
   

2. 
   Bu yo’li esa internetga ulangan holda bootstrapning saytidan foydalanib ishlatish mumkindir. Bu yo’ldan foydalanishda albatta har doim internet bo’lishi kerak.
   

Kodlaring farqi

Bootstrap 3

input-lg

Bootstrap 4

    
      @
    
    
  

Qo’shimcha CSS tomonlama margin va paddinglarni class sifatida qo’shilgan.

Mt-1, mb-2, pt-4, pl-5…..

CSS uchun yana bir yangi modul “CARD” qo’shilgan. Buning yordamida chegaralarni belgilab uning ichida har xil ko’rinishlar xosil qilishimiz mumkindir.

   Header
   Content 
   Footer

Kartaning orqa fon rangini qo'shish uchun kontekstual sinfi (.bg-primer, .bg-warning, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark va .bg-light berishimiz mumkindir.

2.2 Bootstrap 4 da JavaScript buyruqlari

Barcha Bootstrap plaginlarini faqat JavaScript API orqali ishlatishingiz kerakligiga ishonamiz. Barcha ommaviy API-larni yagona, zanjirli usullar va to'plamni qaytadan qaytarish.

$('.btn.danger').button('toggle').addClass('fat')

Barcha usullar ixtiyoriy ob'ektlar ob'ektini, muayyan usulni maqsad qilgan satrni hech narsani qabul qilmasligi kerak:

$('#myModal').modal()

$('#myModal').modal({ keyboard: false })

$('#myModal').modal('show')

Bu buyuruq audio, video, image fayllarini ishga tushurish buyurug’idir.

const VP = document.getElementById('videoPlayer')
const VPToggle = document.getElementById('toggleButton')

VPToggle.addEventListener('click', function() {

if (VP.paused) VP.play()
else VP.pause()
})

myVideo.pause()

ForEach () usuli, qatorning har bir elementi uchun bir marta qayta qo'ng'iroq vazifasini bajaradi; har qanday () va ba'zi () usullardan farqli o'laroq, u har doim aniqlanmagan qiymatni qaytaradi.

Misol.

const items = ['item1', 'item2', 'item3'];

const copy = [];

items.forEach(function(item){

copy.push(item)

});

Listning quyidagicha funksiyalari ham mavjud

Array.prototype.find()

Array.prototype.findIndex()

Array.prototype.map()

Array.prototype.every()

Array.prototype.some()

Map.prototype.forEach()

Set.prototype.forEach()

Find () usuli, qatorda topilgan birinchi elementning qiymatini qaytarib berish funktsiyasiga o'tgan holatga mos keladigan qiymatni qaytaradi. Aks holda, aniqlanmaydi.
console.log([4, 6, 8, 12].find(isPrime)); // undefined, не найдено

console.log([4, 5, 8, 12].find(isPrime)); // 5
Map () usuli, qatorning har bir elementi uchun belgilangan funktsiyani chaqirish natijasida yangi qator hosil qiladi.
var numbers = [1, 4, 9];

var roots = numbers.map(Math.sqrt);
FindIndex () usuli, element tekshirish funktsiyasi holatiga javob bersa, katalogdagi katalogni qaytaradi. Aks holda -1 qaytaradi.
console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, не найдено

console.log([4, 6, 7, 12].findIndex(isPrime)); // 2
Har bir () usuli, qatorning barcha elementlari o'tgan funktsiyada ko'rsatilgan holatga mos keladimi-yo'qligini tekshiradi.
[12, 5, 8, 130, 44].every(isBigEnough); // false

[12, 54, 18, 130, 44].every(isBigEnough); // true
Ba'zi () usuli, eng kamida, qator elementning o'tkazilayotgan funktsiyada ko'rsatilgan holatga mosligini tekshiradi.
[2, 5, 8, 1, 4].some(isBiggerThan10); // false

[12, 5, 8, 1, 4].some(isBiggerThan10); // true
ForEach () usuli, kiritilgan vazifani Map ob'ektining har bir kalit / qiymat jufti uchun bir marta kiritilgan tartibda amalga oshiradi.

var numbers = [1, 2, 3, 4];
var newNumbers = numbers.reduce(function(newArray, number){

newArray.push(number);
if(number % 2 == 0) {

/* Add it a second time. */

newArray.push(number);

}
return newArray; /* This is important! */

}, []);

Cheksiz massiv yarating, Next () ga har bir chaqiruv uchun 1 va 1000 o'rtasida tasodifiy sonni tanlang:

var iterator = Stream

.generate(function() {

return Math.floor(Math.random() * 1000) + 1;

})

.filter(function (num) {

return num % 2 === 1;

})

.iterator();

iterator.next();

iterator.next();

Xulosa. Bootstrap texnologiyasi bu HTML,CSS va JavaScriptlarning mukammal kutubxonasidir. Bu texnologiya yordamida front-endni qurishni oson yo’lini ko’rib chiqdik.Bunda stardart funksiyalardan foydalandik. Standart klasslardan foydalangan holda vaqtni ancha techashni o’rgandik.

Foydalanilgan adabiyotlar.

1. 
   Н.Культин задачи по С++.
   
2. 
   Т.С.Павловская C++ Программирование на языке высокого уровня.
   
3. 
   Nazirov.O.N , Qobulov.A .F C++ Dasturlash tili
   
4. 
   Johan Hortens " C++ Language Tutorial " Last revision: June, 2007
   
5. 
   Madraximov Sh.F, Gaynazarov S.M "С++programmalash tili" Toshkent -2008
   
6. 
   www.ziyonet.uz.
   
7. 
   www.google.com.
   
8. 
   www.dastur.uz.
   
9. 
   www.w3schools.com