„Bootstrap Framework“ pažangios žiniatinklio sąsajos kūrimas

Kitoje pamokoje buvo paaiškinta „Bootstrap“ vartotojo sąsajų įžanga, taip pat pamoka apie tai, kaip kurti žiniatinklio projektą naudojant „Bootstrap 2.0“.
Mes galime atsisiųsti „Bootstrap“ ir įdėti jį į savo svetainės katalogą arba naudoti jį susiedami su jūsų internetine biblioteka.
„Bootstrap“ yra atvirojo kodo sistema ir atidaryti greitesniam ir paprastesniam žiniatinklio kūrimui.
Ieškodami galime rasti daugybę „css“ bendruomenės indėlių ir kitų vartotojų sukurtų tinkintų komponentų bei dizaino šablonų, kad jie būtų prieinami, yra daug komponentų, skirtų kurti naršymo juostas, modalinius langus ir iššokančius langus, vaizdo karuselės, meniu ir daugelį kitų kaip „JavaScript“ ir „Jquery“ papildiniai, siekiant patvirtinti formas ir kitas funkcijas

Lentelės ir eilutės su efektais

„Bootstrap“ jau yra užprogramuoti CSS stiliai ir efektai, kuriuos galime naudoti, pavyzdžiui, norėdami pakeisti lentelės eilučių spalvą ir kai pelė pereina per ją.

Kodas bus toks:

Lentelė ir eilutės su efektu
 

 
 
Transporto priemonė
 
Šaltinis
 
Būklė
 
Kaina
 

 

 

 
 
„Fiat 500“
 
Madridas
 
Naudotas
 
9690€
 

 
 
„Honda“ susitarimas
 
Barselona
 
Naudotas
 
14500€
 

 
 
Renault laguna
 
Toledas
 
Naudotas
 
2800€
 

 

 

Toliau sukursime meniu su submeniu, naudojant tik „Bootstrap CSS“:

DIDELIS

Kodas bus toks:

Daugiapakopis meniu naudojant „Css Bootstrap“
Klientų pardavimo administratorius 

Sistema
Vartotojai
Nustatymai

Leidimai
Serveriai

Vps serveris A.
Vps serveris B.


Išteklių sunaudojimas
Atsarginė kopija

Mes paaiškiname struktūrą ir iš anksto nustatytas klases. Klasė apibrėžia žiniatinklio dydį, nustatytą pagal numatytuosius nustatymus „Bootstrap“.

 .konteineris {plotis: 1170 taškų; } 

Toliau nurodytos eilučių klasės suteikia kairę ir dešinę paraštes visame puslapyje:

 .row {; paraštė dešinėn: -15 taškų; } 

Išskleidžiamajame meniu klasėje jau yra „Bootstrap“ ir „btn btn“ pirminių mygtukų klasės. Pridėsime submeniu ir lygių klases, kad galėtume sugeneruoti submeniu. Atminkite, kad klasės turi hierarchijas, todėl, jei pavadinsime tą pačią klasę, kurią turime „Bootstrap“, ir pridėsime prie jos tam tikrą atributą, vyrauja paskutinė deklaracija.
Tai taikoma tuo atveju, kai pridedame „shift“ kairės atributą, nors klasė jau yra apibrėžta „bootstrap.min.css“

 .dropdown-menu {left: 150px; } 

Css ir jquery iššokantis langas su html turiniu
Mes naudosime iššokimo funkciją, kuri parodys iššokantįjį langą, kai nuoroda užvesta pele ir turinio kintamasis turi rodyti html.
Mes paimsime ankstesnę lentelę ir pridėsime stulpelį techniniam lapui.
Kiekvienoje nuorodoje turėsime šį sakinį, o tada su ID iškviesime scenarijų.

 
 

 
 
Transporto priemonė
 
Šaltinis
 
Būklė
 
Kaina
 
Nuotraukos
 

 

 

 
 
„Fiat 500“
 
Madridas
 
Naudotas
 
9690€
 
Duomenų lapas
 

 
 
„Honda“ susitarimas
 
Barselona
 
Naudotas
 
14500€
 
Duomenų lapas
 

 

 

 

Jei turime platų sąrašą, galime sukurti „JQuery“ funkciją, kur galime siųsti dinaminį turinį, pavyzdžiui, išgautą iš duomenų bazės.

Stulpeliai ir blokai puslapyje

„Bootstrap“ yra pagrįstas 1200 pikselių pločiu, padalytu į 12 blokų, apimančių 99% žiniatinklio struktūros, kiekvienas blokas apima 8,33333%, tai atitinka 100 pikselių, taip pat turi 1 pikselio erdvę.
Visada blokų derinys toje pačioje eilutėje, norint pridėti 12, pavyzdžiui:
Du blokai po 3 ir vienas iš 6

„Bootstrap“ blokai
„Col-md-3“ 300 pikselių blokas.
„Col-md-6“ 600 pikselių blokas.
Col-md-3 300 pikselių blokas.
800 pikselių col-md-8 blokas.

Žemiau pateikiame 8 bloko dydį, kuris yra 800 pikselių:

Šie blokai reaguoja, nes yra sukonfigūruoti „Bootstrap css“. Čia matome pavyzdį, kaip blokai prisitaiko prie mobiliojo įrenginio ekrano pasikeitimo.

Kaip pritaikyti „Bootstrap“, kad būtų pakeisti stiliai ir funkcijos

Norėdami sukurti stilius ir funkcijas, kad jie būtų suderinami su „Bootstrap“, turime naudoti ją kaip ir bet kurią kitą css ar js biblioteką kaip kitą projekto sistemą, šiuo atveju ji bus naudojama kuriant ir funkcionaliai vartotojo naršyklėje. Turėtume vengti reformuoti pradines bibliotekas, bet prikabinti savo, taigi, kai „Bootstrap“ kūrėjai išleis naujinimą, neturėsime problemų įtraukdami naują, jei savo pakeitimus laikysime atskirai.
Norėdami apibrėžti savo stiliaus lapus, turime sukurti naują CSS stilių failą, kad galėtume apibrėžti savo pakeitimus, nedarant įtakos pradiniam CSS. Prisiminkime, pavyzdžiui, hierarchiją.
Jei „Bootstrap“ css bootstrap.min.css

 .col-md-3 {plotis: 25%; } 

Ir mes norime, kad ji turėtų kraštinę, tada atskirame faile mano stiliai.css galime paskelbti:

 .borderojo {kraštas: 1 taškas raudona} 

Tada puslapyje mes iškviečiame abu failus

Bloke mes jį taikome taip:

Col-md-3 300 pikselių blokas.

Tai būtų tolygu deklaruoti taip:

 col-md-3 {plotis: 25%; kraštinė: 1 taškas raudona; } 

Dabar, jei dėl kokių nors priežasčių jis turėjo du panašius teiginius, tarkime

 .borderojo {kraštas: 1 taškas raudona; } .clientblock {kraštas: 1px vientisa mėlyna; }
Col-md-3 300 pikselių blokas.

Nugalės paskutinis paskelbtas nuosprendis. Todėl blokas turės mėlyną kraštą.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką