Bootstrap 4 me trajnimin e redaktorit. Rregullimi i blloqeve adaptive në një rresht

Bazuar në numrin e yjeve në GitHub.

Nëse dëshironi të zotëroni Bootstrap, në veçanti, versionin e tij të fundit, të katërt, atëherë ky material është përgatitur posaçërisht për ju. Këtu, duke përdorur një shembull të vogël nga fundi në fund që mund të zotërohet vërtet në gjysmë ore, do të demonstrohen bazat e Bootstrap, pasi t'i kuptoni ato, do të jeni në gjendje të bëni diçka nga vetja duke përdorur këtë kornizë.

Parakushtet Ky material ka për qëllim zhvilluesit fillestarë të uebit të cilët kanë një kuptim bazë të HTML, CSS dhe jQuery.

Këtu është një faqe interneti me një faqe për të cilën do të flasim për krijimin duke përdorur Bootstrap.

Projekt i gatshëm i krijuar duke përdorur Bootstrap

Npm instaloni bootstrap
Bootstrap mund të lidhet me një faqe duke përdorur një rrjet të ofrimit të përmbajtjes. Për ta bërë këtë, shtoni lidhjen e mëposhtme në etiketë:

Versioni më i fundit i Bootstrap mund të shkarkohet nga këtu dhe të përdoret në nivel lokal.

Struktura e projektit duhet të duket si figura e mëposhtme.

Struktura e projektit Rreth aftësive të Bootstrap 4 Versioni i parë i qëndrueshëm i Bootstrap 4 u lëshua në fund të janarit të këtij viti. Bootstrap tani përfshin disa veçori interesante që nuk ishin të pranishme në versionin e tij të mëparshëm. Gjegjësisht, nëse flasim për përmirësime dhe ndryshime, mund të vërejmë sa vijon:

• Bootstrap 4 u rishkrua duke përdorur teknologjinë flexbox, ndërsa Bootstrap 3 përdorte teknologjinë float. Nëse nuk jeni njohur me flexbox, hidhini një sy këtij burimi.
• CSS e Bootstrap 4 përdor njësi rem, ndërsa më parë përdorte njësi px. mund të zbuloni se si ndryshojnë ato.
• Disa komponentë, të tillë si panelet, janë hequr. Mund të gjeni detaje rreth ndryshimeve të bëra në Bootstrap 4.

Në fakt, Bootstrap 4 ka shumë gjëra të reja në krahasim me Bootstrap 3, nëse ju nevojitet, mund të njiheni me këto risi. Tani po fillojmë të punojmë në projektin tonë arsimor Bootstrap Grid System Sistemi Bootstrap Grid është krijuar për krijimin e paraqitjeve të faqeve. E bën të lehtë zhvillimin e faqeve të internetit të përgjegjshme. Në versionin e ri të Bootstrap, emrat e klasave nuk kanë ndryshuar (duhet theksuar se class.xs nuk ekziston më).

Rrjeti është i ndarë në 12 kolona, ​​kjo strukturë, e konfiguruar sipas nevojës së zhvilluesit, është baza e paraqitjes së faqes.

Për të përdorur rrjetin Bootstrap, duhet të shtoni klasën .row në elementin kryesor të faqes. Kur vendosni madhësitë e elementeve të mbivendosur, përdoren klasat e mëposhtme (në vend të një ylli në fund të emrit të klasës, tregohet numri i kolonave të rrjetit bazë me 12 kolona që duhet të zërë një element i veçantë):

• col-lg-* - klasa e përdorur për faqet e destinuara për pajisje me ekran të madh si laptopët;
• col-md-* - klasë për faqet e krijuara për pajisje me ekran të mesëm, të tilla si tabletët;
• col-sm-* - klasë për faqet që janë krijuar për ekrane të vegjël, si ato që gjenden në telefonat inteligjentë.

Shiriti i navigimit Shiritat e navigimit në Bootstrap krijohen duke përdorur klasën .navbar. Në fakt, është një mbështjellës në të cilin vendosen elementet që formojnë shiritin e navigimit. Më poshtë është paneli që do të krijojmë tani. Ndodhet në krye të faqes dhe nuk zhduket kur lëviz.

Shiriti i navigimit

Pra, në mënyrë që një shirit navigimi të shfaqet në faqe, ne do të shtojmë një etiketë në index.html me klasën .navbar , brenda së cilës, duke përdorur klasa të tjera si .navbar-brand , .navbar-toggler dhe .nav -item , ne krijojmë disa elementë dhe strukturë të veçantë të sistemit të navigimit të faqes. Klasa .fixed-top ju lejon të rregulloni shiritin e navigimit në krye të faqes. Këtu është faqosja e shiritit të navigimit:

Shtëpi

• Rreth
• Portofoli
• Ekipi
• Posto
• Kontaktoni

Tani le të krijojmë një skedar main.css dhe ta lidhim atë me faqen duke vendosur sa vijon në etiketën e skedarit index.html:

Kjo do t'ju lejojë të personalizoni stilet e elementeve të faqes duke vendosur rregullat CSS në këtë skedar. Le të shtojmë rregulla në këtë skedar CSS që vendosin modelin e ngjyrave të shiritit të navigimit:

Navbar( sfond:#F97300; ) .nav-link , .navbar-brand( ngjyra: #f4f4f4; kursori: treguesi; ) .nav-link( margin-djathtas: 1em !i rëndësishëm; ) .nav-link:hover( sfond : #f4f4f4; ngjyra: #f97300;
Rrjeti i ri Bootstrap bazohet në flexbox, kështu që ju duhet të përdorni vetitë e duhura për të lidhur përmbajtjen. Për shembull, për të vendosur menunë e shiritit në të djathtë, duhet të përdorni veçorinë justify-content dhe të vendosni vlerën e saj në flex-end:

Navbar-collapse ( justify-content: flex-end; )
Për të personalizuar ngjyrën e sfondit të shiritit të navigimit, mund të përdorni klasat .bg-light (sfondi i hapur), .bg-dark (sfondi i errët) dhe .bg-primary (ngjyra kryesore e sfondit). Ne përdorim cilësimet e mëposhtme:

Bg-errë (ngjyra e sfondit:#343a40! e rëndësishme) .bg-primare (ngjyra e sfondit:#343a40! e rëndësishme)

Kreu i faqes Etiketa e mëposhtme përdoret për të përshkruar kokën e faqes:

Le të përgatisim një plan urbanistik për kokën e faqes. Ne duam që ajo të zërë të gjithë lartësinë e dritares, kështu që jQuery do të jetë i dobishëm këtu. Le të krijojmë një skedar main.js dhe ta lidhim atë me index.html përpara etiketës mbyllëse:

Le të shtojmë sa vijon në skedarin main.js:

$(dokument).ready(funksion())( $(".header").height($(dritare).lartësi()); ))
Do të ishte një ide e mirë të vendosni një imazh të bukur të sfondit në kokën e faqes. Le ta bëjmë kështu:

/*stili i kokës*/ .header( imazh i sfondit: url("../images/headerback.jpg"); bashkëngjitja e sfondit: fikse; madhësia e sfondit: kopertina; pozicioni i sfondit: në qendër; )
Kjo është ajo me të cilën përfunduam.

Kreu i faqes me imazhin e sfondit

Për momentin, titulli i faqes duket pak bosh, kështu që le të shtojmë një element në të, duke i caktuar klasën .overlay , e cila do të çojë në krijimin e një blloku që ndodhet në krye të imazhit të sfondit të kokës. Le të ndryshojmë seksionin e skedarit index.html ku kemi përshkruar kokën si më poshtë:

Pastaj, në main.css, shtoni sa vijon:

Mbivendosja (pozicioni: absolute; min-lartësia: 100%; min-gjerësia: 100%; majtas: 0; lart: 0; sfondi: rgba (244, 244, 244, 0.79); )
Tani le të shtojmë një përshkrim të projektit në kokë. Do ta vendosim në një element të ri me klasën .container . Kjo është një klasë ndihmëse për kornizën Bootstrap, e krijuar për të vendosur përmbajtjen bazuar në nevojat e një paraqitjeje të përgjegjshme. Ja se si do të ndryshojë shënimi në këtë hap:

Tani le të shtojmë një element tjetër këtu, të cilit do t'i caktojmë class.description:

▍ Përshëndetje, Mirë se vini në faqen time zyrtare të internetit

Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat jo proident, ndodh në culpa qui officia deserunt mollit anim id est laborum.

Shiko me shume
Kësaj etikete do t'i caktojmë gjithashtu klasën .text-center, e cila do të lejojë që përmbajtja e saj të përafrohet në qendër të faqes. Ekziston një buton në fund të përshkrimit të faqes. Le të flasim se si ta konfigurojmë atë.

Buttons Bootstrap ofron shumë klasa për butona. Ju mund të shihni disa shembuj të dizajnit të butonave. Ne, siç mund ta shihni në shembullin e shënjimit nga seksioni i mëparshëm, shtuam klasat .btn dhe elementit. btn-outline-secondary .

Tani le të vendosim stilet për class.description:

Përshkrimi( pozicioni: absolut; sipër: 30%; margjina: automatik; mbushja: 2em; ) .përshkrimi h1( ngjyra:#F97300 ; ) .përshkrimi p( ngjyra:#666; madhësia e shkronjave: 20 px; gjerësia: 50%; lartësia e linjës: 1,5;
Kështu do të duket kreu i faqes pasi të keni përfunduar hapat e mësipërm:

Kreu i faqes që përmban një përshkrim të projektit Rreth seksionit Së pari, le të shohim se çfarë duam të krijojmë. Këtu është një seksion i faqes me informacione rreth zhvilluesit të uebit.

Rreth seksionit

Këtu do të përdorim aftësitë e rrjetit të Bootstrap për të krijuar një plan urbanistik me dy pjesë. Le të fillojmë duke shtuar class.row në elementin prind të seksionit:

Pjesa e parë e paraqitjes do të jetë në të majtë, do të përmbajë një foto. Pjesa e dytë, e vendosur në të djathtë, përmban një përshkrim.

Ja se si duket shënimi në anën e majtë të këtij seksioni:

// ana e majte S.Web Developer
Dhe kjo është ajo që do të ndodhë pasi përshkrimi i anës së djathtë të paraqitjes të shtohet këtu:

Zhvilluesi i S.Web ▍D.John

Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ushtrime ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

Vini re vendosjen e gjerësisë së kolonave duke përdorur klasat col-lg-*, col-md-* dhe col-sm-* të përshkruara më sipër.

Këtu janë stilet për të gjitha këto:

Rreth( margjina: 4em 0; mbushja: 1em; pozicioni: relative; ) .rreth h1 (ngjyra:#F97300; diferenca: 2em; ) .rreth img (lartësia: 100%; gjerësia: 100%; rreze-kufitare: 50% ) .about span( ekran: bllok; ngjyra: #888; pozicioni: absolut; majtas: 115 px; ) .about .desc(mbushje: 2em; kufiri-majtas:4px solid #10828C; ) .rreth .desc h3( ngjyra: #10828C;

Seksioni i portofolit Le të kalojmë tani në seksionin në të cilin do të prezantohet portofoli i zhvilluesit. Ai do të përmbajë një galeri me vepra.

Seksioni i portofolit

Kur krijoni paraqitjen e këtij seksioni, zbatohen të njëjtat parime të punës me rrjetin që diskutuam më lart:

Portofoli
Shtimi i klasës .img-fluid në secilën prej imazheve i bën ato të përgjegjshme.

Çdo element në galerinë tonë, në ekranet e mesme dhe të mëdha, zë 4 kolona (mos harroni - klasa col-sm-12 përdoret për pajisjet me ekrane të vogla, klasa col-md-4 përdoret për ekranet e mesme, col-lg-4 - për pajisjet me ekrane të mëdha). Si rezultat, në ekranet e mëdha dhe të mesme, një element do të përbëjë afërsisht 33.3% të elementit të kontejnerit në pajisjet e vogla, secili element do të zërë të gjithë ekranin (12 kolona).

Stilimi i galerisë së punimeve:

/*Portfolio*/ .portfolio( marzhi: 4em 0; pozicioni: relative; ) .portofoli h1( ngjyra:#F97300; marzhi: 2em; ) .portofoli img(lartësia: 15rem; gjerësia: 100%; diferenca: 1em; )

Seksioni i blogut dhe puna me karta Le të flasim për krijimin e një seksioni që përmban njoftime të materialeve nga blogu i mbajtur nga zhvilluesi ynë i kushtëzuar i uebit.

Seksioni i blogut

Për të krijuar këtë seksion, do të na duhen të ashtuquajturat karta (kartat në terminologjinë Bootstrap).

Për të krijuar një kartë, duhet të përfshini një element në paraqitje dhe të shtoni klasën .card në të. Ju mund të përdorni klasat e mëposhtme për të konfiguruar elementë të ndryshëm të kartës:

• .card-header: kokë
• .kartë-trup: përmbajtja kryesore
• .card-title: titull
• .card-footer: footer
• .kartë-imazh: imazh

Shënimi HTML për këtë seksion do të duket kështu:

Blog Titulli i postimit

Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lexo më shumë Titulli i postimit

Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lexo më shumë Titulli i postimit

Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lexo më shumë
Këtu janë stilet për kartat:

Blog( margjina: 4em 0; pozicioni: relative; ) .blog h1( ngjyra:#F97300; margjina: 2em; ) .blog .kartë( kuti-hije: 0 0 20px #ccc; ) .blog .kartelë img( gjerësia: 100%; lartësia: 12em; .blog .card-title(color:#F97300;)
Kështu do të duket faqja jonë me një faqe pas krijimit të seksionit Blog:

Faqe pas shtimit të seksionit Blog Seksioni i ekipit Ky seksion do të përmbajë informacion rreth ekipit të projektit.

Seksioni i ekipit

Për të formuar këtë seksion, ne do të përdorim një rrjet, duke e ndarë hapësirën e disponueshme në mënyrë të barabartë midis imazheve. Çdo imazh (në ekrane të mëdha dhe të mesme) do të zërë 3 kolona rrjeti, që është 25% e hapësirës totale.

Këtu është shënimi HTML për këtë seksion:

Ekipi ynë Sara Menaxher Chris S.inxhinjer Zhvilluesi i Layla Front End J.Jirard Team Manger
Dhe këtu janë stilet:

Ekipi ( diferenca: 4em 0; pozicioni: relative; ) .ekipi h1 ( ngjyra:#F97300; diferenca: 2em; ) .team .artikull( pozicioni: relative; ) .team .des( sfondi: #F97300; ngjyra: #fff ;
Le ta dekorojmë këtë seksion me animacion që shfaqet kur vendosni miun mbi imazhe. Duhet të duket si imazhi më poshtë.

Animacion kur rri pezull miun mbi një imazh

Për të arritur këtë efekt, shtoni stilet e mëposhtme në main.css:

Ekipi .artikulli:hover .des(lartësia: 100%; sfondi:#f973007d; pozicioni: absolute; gjerësia: 89%; mbushja: 5em; lart: 0; rrezja kufi-poshtë-majtas: 0; )

Formulari i komenteve Ky seksion i faqes do të përmbajë një formular me të cilin vizitorët e faqes mund t'i dërgojnë mesazhe pronarit të sajtit. Këtu, si zakonisht, për të stiluar elementët dhe për të siguruar reagimin e tyre, ne do të përdorim aftësitë e Bootstrap.

Formulari i komenteve

Ashtu si Bootstrap 3, Bootstrap 4 përdor klasën .form-control për fushat e hyrjes, por tani ka diçka të re. Për shembull - në vend të class.input-group-addon e vjetëruar, përdoret class.input-group-prepend e re (për ikonat dhe etiketat). Më shumë detaje mbi këtë mund të gjenden në dokumentacionin e Bootstrap 4 Në rastin tonë, çdo fushë hyrëse do të vendoset në një element që i është caktuar një klasë .form.

Le të shtojmë sa vijon në skedarin index.html:

Kontaktoni
Këtu janë stilet për seksionin e formularit të komenteve, të cilat duhet të vendosen në skedarin main.css:

Forma e kontaktit( margjina: 6em 0; pozicioni: relative; ) .forma e kontaktit h1( mbushja:2em 1px; ngjyra: #F97300; ) .forma e kontaktit .djathtas( gjerësia maksimale: 600 px; ) .forma e kontaktit . djathtas .btn-secondary( sfondi: #F97300; ngjyra: #fff; kufiri:0; ) .contact-form .right .form-control::placeholder(ngjyra: #888; madhësia e shkronjave: 16px; )

Fontet Fontet standarde nuk janë të përshtatshme për të gjithë. Ne përfituam nga Google Font API për të përdorur fontin Raleway në projektin tonë. Këtu do të duket shumë mirë. Për të importuar fontin, shtoni direktivën e mëposhtme në skedarin main.css:

@import url ("https://fonts.googleapis.com/css?family=Raleway");
Më pas, le të vendosim stile globale për etiketa të ndryshme HTML:

Html,h1,h2,h3,h4,h5,h6,a( font-familja: "Raleway"; )

Efektet e lëvizjes Imazhi më poshtë tregon sjelljen e faqes që duam të arrijmë.

Lëvizja e faqes kur klikoni lidhjet në shiritin e navigimit

Në mënyrë që faqja të lëvizë pa probleme në seksionin e dëshiruar kur klikoni në lidhjet e shiritit të navigimit, do të duhet t'i drejtohemi aftësive të jQuery. Nëse nuk jeni shumë të njohur me këtë bibliotekë, dijeni se këtu nuk ka asgjë të komplikuar - thjesht shtoni kodin e mëposhtëm në skedarin main.js:

$(".navbar a").click(function())( $("body,html").animate(( scrollTop:$("#" + $(this).data("vlera")).offset ( ).lart ),1000) ))
Pas kësaj, shtoni një atribut të vlerës së të dhënave në secilën prej lidhjeve në shiritin e navigimit dhe bëni shënimin të duket si ky:

Rreth

Portofoli

Blog

Ekipi

Kontaktoni

Në mënyrë që e gjithë kjo të funksionojë më në fund, mbetet vetëm shtimi i atributit id në elementin kryesor të çdo seksioni të faqes. Në këtë rast, duhet të siguroheni që vlera e tij të jetë identike me atë të specifikuar në atributin e vlerës së të dhënave të lidhjes përkatëse. Për shembull, këtu është atributi përkatës për seksionin Rreth:

Kjo e plotëson shembullin tonë. Shto etiketa

Në janar të këtij viti, Bootstrap 4 (i njohur gjithashtu si v4) u lëshua më në fund pasi u vu në versionet alfa për më shumë se dy vjet. Ai përfaqëson një rishkrim serioz të funksionalitetit. Jo vetëm që prezanton shumë ndryshime nën kapuç, Bootstrap 4 gjithashtu përmban një numër konceptesh të reja që do t'ju nevojiten për t'i mbështjellë kokën.

Prandaj, në këtë artikull, unë do të flas për ndryshimet më të rëndësishme në Bootstrap në v4 në krahasim me v3. Unë po supozoj se ju keni përdorur tashmë Bootstrap, kështu që nuk do t'i shpjegoj parimet bazë.

Tani le të shohim ndryshimet më të rëndësishme (pa rend të veçantë):

# 1: Pamja e butonit

Le të fillojmë me diçka argëtuese dhe vizuale! Butonat në v4 kanë një dizajn më të sheshtë se në v3. Këtu janë butonat e mëparshëm:

Dhe këtu janë disa nga të rejat:

Kjo është më shumë në përputhje me udhëzuesit modern të dizajnit, të tilla si udhëzuesit e dizajnit të materialit që kanë fituar popullaritet të madh gjatë dy viteve të fundit.

#2: Pyetje të përmirësuara në media

Sipas mendimit tim, Boostrap v3 kishte shumë pak pika kontrolli për rrjetin, për shembull më i vogli, xs, ishte në 768 piksele. Shumë trafik sot vjen nga pajisje shumë më të vogla, dhe kjo ka qenë zhgënjyese për shumë zhvillues.

$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;

rrjeti $ - pikat e ndërprerjes : ( xs: 0, sm: 576 px, md: 768 px, lg: 992 px, xl: 1200 px ) ! default;

Kjo e bën të lehtë krijimin e rrjetave që funksionojnë mirë në të gjitha madhësitë e ekranit.

#3: Mbështetja e Flexbox na jep më shumë fleksibilitet

Rrjetat e famshme të Bootstrap tani krijohen duke përdorur Flexbox në vend të float. Në shikim të parë, kjo nuk bën shumë ndryshim për zhvilluesit pasi shumica e paraqitjeve të rrjetit funksionojnë saktësisht njësoj. Megjithatë, kjo hap disa mundësi të reja.

Më parë, ne duhej të përcaktonim gjerësinë e secilës kolonë (nga 1 në 12). Tani mund të përcaktoni gjerësinë e një kolone dhe më pas lejoni që Flexbox të vendosë automatikisht gjerësinë e të tjerave. Këtu është një shembull se si ta bëni këtë:

Siç mund ta shihni, ne vendosëm gjerësinë e kolonës së mesme në 6 (që është gjysma e gjerësisë së plotë) dhe kolonat e tjera thjesht zënë pjesën tjetër të hapësirës.

1 nga 3 2 nga 3 (më gjerë) 3 nga 3

< div class = "container" > < div class = "row" > < div class = "col" > 1 nga 3 < / div > < div class = "col-6" > 2 nga 3 (më gjerë) < / div > < div class = "col" > 3 nga 3 < / div > < / div > < / div >

Klasat Flexbox

Bootstrap 4 vjen gjithashtu me një sërë klasash që mund t'i përdorni për të menaxhuar kontejnerët dhe elementët Flexbox. Për ta kthyer një element në një kontejner Flexbox, thjesht jepni klasën d-flex.

Unë jam një kontejner flexbox!

< div class = "d-flex" >Unë jam një kontejner flexbox!< / div >

Kjo jep një enë Flexbox me tekst brenda tij:

Shënim. Unë po mbuloj vetëm stilet e lidhura me Flexbox.

Le të shtojmë disa elementë të tjerë dhe të prezantojmë një klasë tjetër për të kontrolluar se si janë pozicionuar në kontejner.

Korniza e Bootstrap 4. Fillimi i shpejtë

Mësoni bazat e Bootstrap 4 me një shembull praktik të dizajnimit të një blogu nga e para

< div >Artikull Flex< / div >

< div >Artikull Flex< / div >

< div >Artikull Flex< / div >

< / div >

Si rezultat, elementët përqendrohen në enë:

#4: Menaxhimi i dhëmbëzimit duke përdorur klasa

Është shumë e lezetshme. Tani mund të kontrolloni mbushjen dhe kufijtë duke përdorur klasat p-* dhe m-*. Mbushja mund të ndryshojë nga 0,25 në 3 rem duke përdorur numrat nga 0 në 5. Për shembull, le ta vendosim kontejnerin Flexbox në klasën p-5 për të krijuar mbushje maksimale.

Një artikull në të cilin do të analizojmë rrjetin Bootstrap 4, i cili përdoret për të krijuar paraqitje responsive të faqes në internet.

Qëllimi i rrjetit

Korniza e rrjetit Bootstrap 4 është krijuar për krijimin e paraqitjeve të përgjegjshme të faqes në internet.

Rrjeti Bootstrap 4 bazohet në pyetjet e medias CSS Flexbox dhe CSS. Studimi i tyre do t'ju lejojë të kuptoni më në detaje se si funksionon rrjeti Bootstrap 4.

Një paraqitje adaptive është një paraqitje që mund të ndryshojë pamjen e saj në varësi të gjerësisë së zonës kryesore (portit të shikimit) të shfletuesit. Kjo do të thotë që në disa gjerësi të portave të pamjes, faqosja e përgjegjshme mund të duket në një mënyrë, por në të tjera mund të duket krejtësisht ndryshe.

Në Bootstrap 4, ndryshimi i pamjes së paraqitjes zbatohet përmes pyetjeve të medias. Çdo kërkesë për media në Bootstrap bazohet në gjerësinë minimale të pamjes së shfletuesit (pika e ndërprerjes, pika e ndërprerjes, emri i pajisjes).

Korniza e Bootstrap 4 ka 5 pika ndërprerjeje ose emra pajisjesh (të paetiketuara, sm, md, lg, xl), dhe për këtë arsye ju lejon të krijoni një plan urbanistik që mund të duket ndryshe në secilën prej tyre.

Në Bootstrap 4, në krahasim me Bootstrap 3, numri i pikave të ndërprerjes është ndryshuar. Në Bootstrap 3 kishte katër prej tyre: xs, sm, md dhe lg.

Elementet e rrjetit

Rrjeti Bootstrap 4 përbëhet nga elementët e mëposhtëm:

• Kontejnerë mbështjellës (enë dhe kontejner-lëng);
• Rreshtat (rresht);
• Blloqe adaptive (col).

Mbështillni kontejnerët

Një kontejner mbështjellës është një element i rrjetit Bootstrap 4 nga i cili fillon krijimi i një faqosjeje reaguese ose blloku. Elementë të tjerë të rrjetit (rreshtat dhe blloqet adaptive) duhet të vendosen brenda tij.

Bootstrap 4 ka 2 lloje të mbështjellësve të kontejnerëve: me fiksim të përgjegjshëm dhe me lëng të përgjegjshëm.

Shënimi HTML i një kontejneri të fiksuar me përgjegjshmëri:

...

Shënimi HTML i kontejnerit të përgjegjshëm të gomës:

...

Kontejneri i parë (reagues-fiks) përdoret kur ju duhet të krijoni një plan urbanistik me një gjerësi që duhet të mbetet konstante brenda një gjerësie të caktuar të portës së shikimit të shfletuesit.

Varësia e gjerësisë së një kontejneri të fiksuar me përshtatje nga gjerësia e portit të shikimit të shfletuesit tregohet në tabelë:

Kjo do të thotë që një kontejner i fiksuar me përshtatje do të ketë:

• Gjerësia 100% për gjerësinë e portës së pamjes deri në 576 px;
• 540px me gjerësi të portës së pamjes nga 576 në 768px;
• 720px me gjerësi të portës së pamjes nga 768 në 992px, etj.

Në drejtimin horizontal, kontejneri me përgjigje fikse pozicionohet në qendër, kjo bëhet në bootstrap.css nëpërmjet veçorive CSS margin-majtas: auto dhe margin-djathtas: auto .

Kontejneri i dytë (gome reaguese) përdoret kur ju duhet të krijoni një plan urbanistik plotësisht fleksibël të një faqeje ose një blloku. Ky kontejner ka gjerësi 100% për çdo gjerësi të portës së pamjes.

Për më tepër, kontejnerët me mbështjellës (kontenierë dhe kontejner-lëng) kanë gjithashtu mbushje të brendshme në të majtë dhe të djathtë prej 15 px. Vendosja e mbushjes për kontejnerët e mbështjelljes bëhet në skedarin Bootstrap 4 CSS duke përdorur vetitë padding-left: 15px dhe padding-right: 15px.

Kur krijoni një plan urbanistik duke përdorur rrjetin Bootstrap 4, mos vendosni kontejnerë mbështjellës brenda të tjerëve.

Rreshtat

Një rresht është një element i veçantë i rrjetit (rresht) që përdoret kur krijoni një plan urbanistik në rastet e mëposhtme:

• midis kontejnerit dhe blloqeve adaptive që duhet të vendosen në të;
• ndërmjet njërit dhe blloqeve të tjera adaptive, të cilat duhet të vendosen në bllokun e parë përshtatës.

Shënimi HTML i rreshtit:

...

Ndryshe nga Bootstrap 3, në të cilin rreshti vepronte vetëm për të kompensuar mbushjen e brendshme majtas dhe djathtas të kontejnerëve të mbështjellësit ose blloqeve reaguese, në Bootstrap 4 ai luan një rol shumë të rëndësishëm. Kjo për faktin se ky rrjet është ndërtuar në CSS Flexbox. Në këtë rrjet, ai vepron si një enë përkulëse për elementët fleksibël (blloqe përshtatëse). Ato. nëse përdorni blloqe adaptive jashtë rreshtit, ato nuk do të funksionojnë. Në Bootstrap 4, blloqet reaguese duhet të jenë në një bllok me klasën e rreshtit.

Kompensimi për mbushjen e brendshme të marzheve kryhet në të njëjtën mënyrë si në Bootstrap 3, për shkak të marzheve negative majtas dhe djathtas të barabarta me 15 px (margin-majtas:-15px dhe marzh-djathtas:-15px).

Një shembull se si kompensohet mbushja e fushës:

kontejner (+15 px) -> rresht (-15 px) -> col (+15 pik. -> col (+15 px) -> përmbajtje

Si rezultat, diferenca nga skajet e majta dhe të djathta të enës së mbështjelljes në përmbajtje do të jetë gjithmonë 15 px.

Për më tepër, blloqet adaptive që nuk janë logjikisht të lidhura me njëri-tjetrin nuk duhet të vendosen në një rresht brenda kornizës së një lloj kontejneri mbështjellësi ose blloku tjetër përshtatës. Mënyra më e saktë është ndarja e tyre në grupe të veçanta logjike dhe vendosja e secilit prej tyre në një rresht të veçantë.

Për shembull:

... … … … ...

Blloqe adaptive

Blloqet adaptive janë blloqet kryesore të ndërtimit të një paraqitjeje reaguese, ato do të përcaktojnë se si do të duket faqosja e faqes në internet në pika të ndryshme kontrolli (pa simbol, sm, md, lg dhe xl).

Krijimi i një blloku adaptiv është shumë i thjeshtë: duke shtuar një ose më shumë klasa col-?-? te elementi i kërkuar HTML.

Në klasën col-?-?>, në vend të pikëpyetjes së parë, tregohet emri i pikës së kontrollit: pa emërtim, sm, md, lg ose xl. Në vend të pikëpyetjes së dytë, tregohet gjerësia e bllokut adaptiv, të cilin duhet ta ketë në pikën e specifikuar të kontrollit. Gjerësia e bllokut të përgjegjshëm specifikohet në formë relative duke përdorur një numër nga 1 në 12 (kolona Bootstrap).

Ky numër përcakton se sa të gjerësisë do të zërë blloku adaptiv në pikën e caktuar të kontrollit nga gjerësia e bllokut prind, d.m.th. rresht. Gjerësia e rreshtit në terma numerikë (kolonat e Bootstrap) është 12.

Për shembull, një bllok me klasën col-md-4 në pikën e kontrollit md do të zërë 4/12 të gjerësisë së rreshtit, d.m.th. 33.3% (d.m.th. 4/12*100% = 33.3%).

Blloqet përshtatëse, si dhe kontejnerët, kanë mbushje majtas dhe djathtas 15 px. Këto mbushje për blloqet adaptive të kornizës Bootstrap 4 janë vendosur duke përdorur vetitë CSS padding-left: 15px dhe padding-djathtas: 15px.

Blloqet përshtatëse duhet të vendosen në një rresht. Ato. Çdo bllok adaptiv duhet të ketë një bllok me rreshtin e klasës si prind.

Për shembull, merrni parasysh sa i gjerë do të jetë blloku i mëposhtëm i përgjegjshëm në secilën pajisje:

...

Ky bllok adaptiv do të ketë:

• deri në sm (nga xs) një gjerësi e barabartë me 12 kolona Bootstrap (d.m.th. 12/12*100%=100% e gjerësisë së rreshtit);
• në një pajisje sm, një gjerësi e barabartë me 9 kolona Bootstrap (d.m.th. 9/12*100%=75% e gjerësisë së rreshtit);
• në një pajisje md, një gjerësi e barabartë me 7 kolona Bootstrap (d.m.th. 7/12*100%=58,3% e gjerësisë së rreshtit);
• në një pajisje lg, një gjerësi e barabartë me 5 kolona Bootstrap (d.m.th. 5/12*100%=41,6% e gjerësisë së rreshtit);
• në një pajisje xl, një gjerësi e barabartë me 3 kolona Bootstrap (d.m.th. 3/12*100%=25% e gjerësisë së rreshtit).

Përveç kësaj, kur specifikoni gjerësinë e bllokut adaptiv për një pikë kontrolli, ajo do të zbatohet jo vetëm për këtë pikë, por edhe për të gjitha ato pasuese, nëse ato nuk janë të specifikuara.

Një bllok reagues në pajisjet md dhe lg do të ketë një gjerësi të barabartë me 6 kolona Bootstrap: (12) -> sm(6) -> md -> lg -> xl (3) .

Një bllok reagues në një pajisje sm do të ketë një gjerësi të barabartë me 8 kolona Bootstrap, dhe në pajisjet lg dhe xl do të ketë një gjerësi të barabartë me 4 kolona Bootstrap: (8) -> sm -> md (4) -> lg - > xl.

Blloku i përgjegjshëm në të gjitha pajisjet do të ketë një gjerësi të barabartë me 6 kolona Bootstrap: (6) -> sm -> md -> lg -> xl .

Blloqe adaptive pa kolona

Në Bootstrap 4 grid -auto .

Grupi i parë i klasave (col, col-sm, col-md, col-lg, col-xl) ka për qëllim krijimin e blloqeve adaptive, gjerësia e të cilave do të varet nga hapësira e lirë e linjës. Gjerësia e pa zënë (hapësira e lirë) e linjës shpërndahet në mënyrë të barabartë midis të gjitha blloqeve të tilla. Përveç kësaj, këto blloqe adaptive kanë një gjerësi zero përpara se të ndajnë hapësirën e linjës së lirë (sipas parazgjedhjes).

Le të shohim disa shembuj.

1. Krijoni 5 blloqe adaptive me të njëjtën gjerësi në një rresht.

1/5 2/5 3/5 4/5 5/5

Llogaritja e gjerësisë:

• hapësira e linjës së lirë - 100% (pasi gjerësia e tyre është 0);
• gjerësia e çdo blloku adaptiv është 20% (100%/5);

2. Gjerësia e blloqeve me klasën col nëse ka një bllok adaptiv me numrin e kolonave në rresht.

? 7 kolona? ?

Llogaritja e gjerësisë:

• hapësira e linjës së lirë - 41,67% ((12-7)/12*100%);
• Gjerësia e çdo blloku adaptiv, përveç col-7, është 13.89% (41.67%/3).

Në disa versione të shfletuesve Safari ka një gabim kur përdorni një shënim të tillë, ai mund të ndahet në disa rreshta.

Ka 2 mënyra për ta rregulluar këtë:

• duke vendosur kufirin e blloqeve adaptive.col (kufiri: 1px transparent; )
• duke vendosur vetinë e blloqeve reaguese CSS flex-basis .col ( flex: 1 0 20%; )

Përveç kësaj, rrjeti Bootstrap 4 ju lejon të vendosni blloqe reaguese pa specifikuar numrin e kolonave në disa rreshta.

... ... ... ...

Ky veprim kryhet duke shtuar një element div bosh me klasën w-100 në shënimin përpara bllokut adaptiv, i cili duhet të fillojë me një linjë të re.

Nëse ky veprim duhet të përdoret vetëm për disa pika kontrolli, atëherë duhet të shtoni edhe klasa të shërbimeve responsive Bootstrap 4 në të (klasa w-100).

Në këtë shembull, blloqet adaptive do të transferohen në një linjë të re vetëm në pajisjet me një pamje të vogël ose të vogël.

... ... ... ...

Grupi i dytë i klasave (col-auto, col-sm-auto, col-md-auto, col-lg-auto dhe col-xl-auto) është krijuar për të krijuar blloqe adaptive, gjerësia e të cilave do të përcaktohet sipas përmbajtjen e tyre.

Për shembull:

(1) (2) - gjerësia në pikat e kontrollit md, lg dhe xl do të përcaktohet në bazë të përmbajtjes (3)

Si rezultat:

• në blloqet adaptive xs dhe sm do të vendosen vertikalisht (njëri nën tjetrin) dhe do të zënë të gjithë gjerësinë e rreshtit;
• në md, blloku i përgjegjshëm 2 do të ketë gjerësinë e nevojshme për të shfaqur përmbajtjen e tij; nëse blloku 2 nuk zë të gjithë gjerësinë e rreshtit, atëherë blloqet adaptive 1 dhe 3 do ta ndajnë atë në mënyrë të barabartë midis tyre; nëse blloku 2 zë të gjithë gjerësinë e linjës, atëherë fotografia do të jetë e njëjtë si në pikat e kontrollit xs dhe sm;
• në lg dhe xl, blloku reagues 2 do të ketë gjerësinë e kërkuar për të shfaqur përmbajtjen e tij; nëse blloku 2 nuk zë të gjithë gjerësinë e rreshtit, atëherë blloku 3 do të zërë një gjerësi të barabartë me 2 kolona Bootstrap dhe blloku 1 do të zërë të gjithë gjerësinë e mbetur të rreshtit; nëse blloku 2 zë të gjithë gjerësinë e rreshtit, atëherë shënimi do të jetë i njëjtë si në xs dhe sm, vetëm blloku 3 në 3 rreshta do të ketë një gjerësi të barabartë me 2 kolona Bootstrap.

Rregullimi i blloqeve adaptive në një rresht

Si parazgjedhje, blloqet adaptive në një rresht janë rregulluar në vija horizontale. Brenda vijës horizontale, blloqet adaptive janë rreshtuar në mënyrë sekuenciale nga e majta në të djathtë. Blloqet adaptive me një numër total kolonash jo më shumë se 12 mund të futen në një vijë horizontale.

(1) (2) (3) (4)

Le të shohim një shembull tjetër në të cilin blloqet adaptive kanë gjerësi të ndryshme në pika të ndryshme kontrolli:

Parimi bazë i paraqitjes së paraqitjes

Parimi bazë i paraqitjes së një faqosjeje të faqes në internet në rrjetin Bootstrap 4 është të vendosësh disa blloqe përshtatëse brenda të tjerëve.

Në të njëjtën kohë, gjerësia e blloqeve adaptive është gjithmonë një vlerë relative, e cila vendoset në kolonat Bootstrap dhe varet vetëm nga gjerësia e prindit, d.m.th. rresht.

Përmbajtja e faqes së internetit duhet të vendoset vetëm në blloqe reaguese.

Për shembull, në paraqitjen ekzistuese, përkatësisht në bllokun adaptiv col-8, do të shtojmë edhe 2 blloqe të tjera:

... ...

Për ta bërë këtë, së pari duhet të vendosni një rresht (enë për blloqe adaptive) në bllokun col-8:

... ... Bootstrap 4 - Futja e një rreshti në përmbajtjen e një blloku reagues col-8

Pas kësaj, shtoni 2 blloqe adaptive me radhë:

... ... ... Bootstrap 4 - Futja e blloqeve reaguese në një rresht

Përafrimi i blloqeve adaptive

Përafrimi i blloqeve adaptive në drejtimet horizontale dhe vertikale bëhet në Bootstrap 4 duke përdorur klasat flex të shërbimeve.

Rreshtimi vertikal i blloqeve adaptive

Shtrirja vertikale e blloqeve adaptive brenda një linje rreshti kryhet duke përdorur një nga klasat e mëposhtme, e cila duhet të shtohet në rresht:

• align-item-start (në lidhje me fillimin e rreshtit);
• align-item-center(center);
• align-item-end (në lidhje me fundin).

Për shembull, le të rreshtojmë të gjitha blloqet adaptive në qendër të vijës së rreshtit:

1/2 2/2

Si parazgjedhje, elementët reagues zënë të gjithë lartësinë e rreshtit të rreshtit në të cilin ndodhen.

Rreshtimi vertikal i një blloku specifik adaptiv brenda një linje mund të kryhet nga një nga klasat e mëposhtme:

• align-self-start (në lidhje me fillimin e linjës);
• align-self-center (në qendër);
• align-self-end (në lidhje me fundin).

Këto klasa duhet të shtohen në blloqe adaptive, jo në një rresht.

Për shembull, ne rreshtojmë bllokun adaptiv 2 në skajin e poshtëm të rreshtit:

(1) (2)

Rreshtimi horizontal i blloqeve adaptive

Klasat e mëposhtme janë të destinuara për rreshtimin e blloqeve adaptive në drejtimin horizontal:

• justify-content-start (në lidhje me fillimin e rreshtit të rreshtit - default);
• justifikoj-përmbajtje-qendër (qendër);
• justify-content-end (në lidhje me fundin e rreshtit);
• justify-content-around (në mënyrë të barabartë, duke marrë parasysh hapësirën para bllokut të parë dhe të fundit adaptiv);
• justify-content-mes (në mënyrë të barabartë, me hapësirë ​​të barabartë midis blloqeve reaguese).

Për shembull, le të shpërndajmë blloqet adaptive në drejtimin horizontal në mënyrë të barabartë:

(1) (2)

Struktura e përgjegjshme pa kufij

Mbushja e brendshme e blloqeve adaptive dhe kufijtë e jashtëm negativ të rreshtave mund të hiqen nëse kësaj të fundit i shtohet klasa pa ulluqe (d.m.th. rreshti).

... ... ...

Ju lutemi vini re se kjo klasë (pa ulluqe) prek vetëm blloqet adaptive që vendosen drejtpërdrejt në këtë rresht. Ato. Vetitë CSS për heqjen e mbushjes nuk do të zbatohen për blloqet adaptive që nuk e kanë këtë rresht si prind.

Në Bootstrap 4, kompensimet e përgjegjshme të bllokut mund të bëhen duke përdorur:

• kompensimi i klasave (për një numër të caktuar kolonash);
• klasat e marzhit të shërbimit (të shërbimeve).

klasat e kompensuara

Klasat e kompensimit janë krijuar për të zhvendosur blloqet adaptive në të djathtë me një numër të caktuar kolonash.

Këto klasa kanë sintaksën e mëposhtme:

Offset-(1) ose offset-(pika e ndërprerjes)-(1)

(pika e ndërprerjes) - pika e kontrollit, duke filluar nga e cila do të aplikohet një kompensim në këtë bllok (nëse nuk është specifikuar, atëherë kompensimi do të zbatohet duke filluar nga pajisjet më të vogla).

(2) – vlera e kompensimit e specifikuar duke përdorur numrin e kolonave Bootstrap.

Si shembull, le të vendosim kompensimin në blloqet adaptive siç tregohet në figurë.

(1) (2) (1) (2) (1)

Kompensimi duke përdorur klasat e marzhit

Në versionin e katërt të Bootstrap, ju gjithashtu mund të vendosni kompensimin për blloqet adaptive duke përdorur indencat e margjinës (margin-majtas: auto dhe (ose) margin-djathtas: auto). Ky opsion kompensimi vjen sepse rrjeti në versionin e ri të Bootstrap (4) bazohet në CSS Flexbox.

Ky opsion i zhvendosjes (duke përdorur klasat e marzhit) përdoret kur blloqet duhet të zhvendosen në lidhje me njëri-tjetrin me një sasi të ndryshueshme.

Në Bootstrap 4, për një vendosje më të përshtatshme dhe më përshtatëse të indenteve të margjinës për blloqet (diferencë-majtas: auto dhe (ose) marzh-djathtas: auto), mund të përdorni klasat ml-auto , mr-auto , ml-(breakpoint )-auto dhe mr-(pika e ndërprerjes)-auto .

Bootstrap 4 - Kompensimi i përgjegjshëm i bllokut

(1) (2) (1) (2) (3) (1) (2)

Ndryshimi i rendit vizual të blloqeve adaptive

Si parazgjedhje, blloqet e përgjegjshme shfaqen vizualisht në rendin në të cilin shfaqen në kodin HTML.

Ndryshimi i rendit vizual të një blloku të përgjegjshëm në Bootstrap 4 bëhet duke përdorur klasën order-(visual_number). Kjo klasë është për pikën e kontrollit xs. Nëse rendi i një elementi duhet të përcaktohet jo për pikën e kontrollit xs, por për sm, md, lg ose xl, atëherë përdoret versioni i mëposhtëm i kësaj klase:

Porosi-(pika e ndërprerjes)-(numri_vizual)

Në vend të (visual_number) ju duhet të specifikoni një numër nga 1 në 12.

Ky numër përcakton se si elementët do të shfaqen vizualisht në faqe. Domethënë, të gjithë elementët përshtatës do të ndjekin vizualisht në rend rritës të këtyre numrave. Nëse një element nuk ka një grup të klasës së rendit, ai vendoset në 0.

Për shembull, le të ndryshojmë rendin e dy blloqeve adaptive:

E para (jo e renditur, pa renditje- klasë) E dyta, por do të shfaqet e fundit E treta, por do të shfaqet e dyta

Një shembull tjetër (duke përdorur klasat e rendit përshtatës):

E para (në xs, sm do të shfaqet së dyti) E dyta (në xs, sm do të shfaqet së pari)

Përveç numrave (nga 1 në 12 si parazgjedhje), mund të përdorni edhe fjalët e para dhe të fundit . Këto klasa (order-first, order-(breakpoint)-first, order-last, order-(breakpoint)-last) ju lejojnë të zhvendosni vizualisht një element në fillim ose në fund, përkatësisht.

Klasat order-first dhe order-(breakpoint)-first ushtrojnë efektin e tyre duke vendosur vetinë e rendit CSS të elementit në -1 (rend: -1), dhe klasat order-last dhe order-(breakpoint)-last vendosin CSS porosis pronën me vlerën 13 (renditja: $kolona + 1).

Le të rishkruajmë shembullin e mësipërm duke përdorur klasat e rendit, të cilat përdorin fjalët kyçe të para dhe të fundit:

E para (në xs, sm do të shfaqet e fundit) E fundit (në xs, sm do të shfaqet së pari)

Një shembull duke përdorur klasat e rendit me një numër dhe fjalët e para dhe të fundit:

#1 (XS), #FUNDIT (SM), #1 (MD, LG dhe XL) #2 (XS), #7 (MD, LG dhe XL) #3 (XS), #6 (MD, LG dhe XL ) #4 (XS), #5 (MD, LG dhe XL) #5 (XS), #4 (MD, LG dhe XL) #6 (XS), #3 (MD, LG dhe XL) #7 (XS ), #2 (MD, LG dhe XL) #8 (XS), #FIRST (SM), #8 (MD, LG dhe XL)

Një shembull i paraqitjes adaptive në rrjetin Boostrap 4

Le të krijojmë një plan urbanistik të përgjegjshëm për bllokun e faqes së internetit të paraqitur në figurë duke përdorur rrjetin Bootstrap 4 - Shembull i paraqitjes së bllokut reagues

1. Krijoni shënjimin e bllokut për pajisjet celulare (xs).

(1) (2) (3) (4) (5)

2. Vendosni shënimin për pikën e kontrollit sm:

(1) (2) (3) (4) (5)

3. Vendosni blloqet në numrin e kolonave që duhet të kenë në pajisjet md dhe lg:

(1) (2) (3) (4) (5)

4. Krijo shënim për xl:

(1) (2) (3) (4) (5)

Ne heqim pikat e panevojshme të kontrollit nga blloqet adaptive:

(1) (2) (3) (4) (5)

Përveç kësaj, fillimisht në Bootstrap 4 blloku i përgjegjshëm ka një gjerësi prej 100%. Kjo ju lejon të mos specifikoni numrin e kolonave kur krijoni blloqe adaptive, nëse gjerësia e tyre fillestare duhet të jetë 12 kolona (100%).

(1) (2) (3) (4) (5)