Utilizarea bootstrap-ului. Se încarcă fișiere compilate. Componente bootstrap și exemple de utilizare a acestora

A doua jumătate a articolului este deja percepută mai simplu, există mai multe exemple cu capturi de ecran.

Bootstrap - ce este?

Deci, să începem cu o întrebare importantă. Bootstrap este un cadru CSS și JS, în esență un set de fișiere cu cod scris gata făcut. Scopul dezvoltatorilor aproape oricărui cadru este de a simplifica dezvoltarea site-ului pentru ei înșiși și pentru alții care vor avea acces la instrument. În cazul Bootstrap, este complet gratuit, așa că îl puteți folosi în orice mod, editați sursăși refaceți cadrul după cum doriți. Este perfect.

Instalarea Bootstrap

Dacă trebuie doar să conectați fișierele cadru la un document HTML (de exemplu, pentru practică), trebuie doar să descărcați cadrul de pe site-ul oficial getbootstrap.com, să copiați fișierele acestuia în proiect și să le conectați pe cele de care aveți nevoie. o să o fac scurtă recenzie aceste fisiere:

bootstrap.css și bootstrap.min.css - versiuni necomprimate și comprimate ale codului CSS al cadrului. Se recomandă conectarea la proiectul de lucru fișier comprimat, astfel vă veți îmbunătăți ușor viteza de descărcare. Dar dacă intenționați să vizualizați codul într-un fișier, conectați versiunea necomprimată.

bootstrap.js și bootstrap.min.js - fișier cu scripturi

folderul cu fonturi și fișierele glificonuri din el sunt fontul pictogramei Bootstrap. Are aproximativ 200 de icoane. În cele mai multe cazuri, veți avea destui, uneori trebuie să vă conectați pe alții. Vom vorbi mai târziu despre fontul pictogramei.

Acest set standard cadru. De fapt, îl poți personaliza cu ușurință și îl poți schimba după cum ți se potrivește. De exemplu, nu utilizați deloc scripturi sau conectați doar o singură rețea. În general, vom vorbi și despre asta.

Documentația rusă Bootstrap

Când vizitați getbootstrap, probabil ați observat că totul aici este în engleză. Am putea folosi ajutorul rusesc pentru cadru. Este ușor de găsit. Pentru a face acest lucru, mergeți de la pagina principala la secțiunea Noțiuni de bază. Derulați până în jos, va exista un link către traduceri. Căutați rusă acolo și faceți clic pe ea. Gata, acum ești pe versiunea rusă a site-ului. Adevărat, nu totul a fost tradus aici, dar undeva în jur de 70-80% este exact, așa că veți înțelege totul.

Grilă de bootstrap

Orice s-ar putea spune, elementul principal al Bootstrap este plasă adaptivă. În general, fără el, cadrul și-ar pierde aproape toată valoarea, deoarece datorită grilei puteți crea rapid șabloane adaptive. În același timp, este posibil să nu fiți deloc familiarizat cu interogările media, deoarece cadrul se ocupă de implementarea adaptabilității, trebuie doar să atribuiți clasele corecte;

Care sunt aceste clase? Să trecem la documentație, ne va ajuta foarte mult. Accesați secțiunea CSS - Grid System. Reguli generale Lucrul cu o grilă este simplu, le voi enumera acum.

Cum se lucrează cu o rețea?

Gândiți-vă la el ca la un tabel html. Dacă ați scris vreodată cod HTML pentru tabele, știți că tot conținutul este plasat în eticheta tabel, un rând este plasat în eticheta tr și apoi celulele sunt plasate în ea - td .

Deci, totul este similar în grilă. Clasa container servește ca un container general pentru grilă. Există 2 opțiuni pentru grila bootstrap - complet cauciuc și având încă o lățime maximă finită. Deci, atunci când blocului general i se dă clasa container, site-ul va avea o lățime maximă de 1170 pixeli. Nu se va extinde mai departe. Desigur, conținutul va fi centrat.

Dacă setați clasa container-fluid, atunci plasa va fi complet din cauciuc, adică nu vor exista restricții de dimensiune. De exemplu, dacă o persoană deschide un site web pe un monitor lat de 1920 pixeli, îl va vedea în lățime completă.

În consecință, primul lucru atunci când dezvoltați un site web este să decideți cum va fi șablonul - complet cauciucat, sau lățimea acestuia trebuie încă limitată.

Grozav, blocul container ar trebui să conțină un rând de grilă. Trebuie să plasați toate blocurile care sunt pe o singură linie în el. Adică dacă luăm cel mai mult model tipic: antet, partea principală, coloana din dreapta și subsol, apoi sunt 3 coloane. Primul va conține doar antetul, al doilea va conține conținutul și coloană laterală, iar în ultimul există un subsol. Markupul pentru un astfel de site ar fi cam așa:

Un capac
Conținut... și bară laterală
Subsol

Dar deocamdată acesta este marcajul greșit, pentru că lipsește... ce? Așa e, celule! În cazul Bootstrap, acestea sunt numite și coloane. Grila bootstrap este formată din 12 coloane. Poate fi încorporat în orice bloc de orice lățime, cel puțin 1200 pixeli, cel puțin 100. Toate acestea deoarece lățimea coloanelor este specificată nu în pixeli, ci în procente.

Cum funcționează acest sistem cu 12 coloane?

Așa că ajungem la foarte problema importanta asociate cu cadrul. Crede-mă, dacă înțelegi asta, totul este o prostie. Principalul lucru este să înțelegeți cum funcționează grila și modul în care se face rapid aspect adaptiv va fi deschis pentru tine.

Pentru a face acest lucru, parcurgeți documentația de mai jos, acolo veți găsi un tabel care conține proprietăți importante grile

Apropo, coloanele în sine sunt marcate în Bootstrap cu clasa col-, dar aceasta este o clasă compusă, așa că nu scriu niciodată pur și simplu col-. Bootstrap are 4 clasa speciala, care sunt concepute pentru a controla dimensiunea blocurilor la diferite lățimi, iată-le:

ld - pentru ecrane mari, cu o lățime de peste 1200 de pixeli (calculatoare desktop);

md - pentru ecrane medii, latime de la 992 la 1199 (calculatoare, netbook-uri);

sm - pentru ecrane mici, lățime de la 768 la 991 pixeli (tablete);

xs - ecrane foarte mici, lățime mai mică de 768px.

Acestea sunt cele 4 clase, dar pentru a controla dimensiunea elementelor se folosesc numere de la 1 la 12, deoarece, după cum vă amintiți, în grilă sunt exact 12 coloane.

Un capac

Conţinut
Coloana laterală

Subsol

Este destul de ușor de înțeles. În primul rând, creăm un antet, nu trebuie să fie plasat deloc în grilă, deoarece va ocupa 100% din lățime (de obicei). Dar o vom pune oricum. Ce este această clasă col-md-12? După cum v-am spus deja, nimeni nu scrie pur și simplu col-, cu această clasă îi spunem în esență browserului:
Aceasta este o celulă | coloană
Pe dispozitivele medii (clasa md), lățimea sa ar trebui să fie de 12 coloane din 12, adică 100% din lățimea rândului.
Dar cum rămâne cu lățimea pe alte dispozitive? Pe ecranele mari (lg) va fi și 100%, deoarece valorile pentru ecranele mari sunt moștenite, dar pentru cele mai mici nu sunt. Este simplu: dacă ai scris col-xs-4 , atunci lățimea coloanei ar fi de 33% pe toate dispozitivele, iar dacă col-lg-4 , atunci doar pe cele mari. Aceasta este caracteristica, rețineți-o.

Ei bine, dacă valoarea lățimii nu este salvată pe ecrane mai mici, atunci ce se întâmplă? Este resetat. Iată cum se întâmplă:
col-sm-4 - pe ecranele mici blocul va ocupa 33% din latime, la fel va fi si pe ecranele md si lg, dar pe xs, adica pe cele mai mici, latimea va fi resetata la 100%. Deci, amintiți-vă încă o regulă simplă: dacă nu este specificat nimic pentru ecranele mai mici, atunci blocul va fi afișat pe ele la 100% lățime.

Conţinut
Coloana laterală

În esență, îi spunem browserului:
Lăsați blocul de conținut să aibă o lățime de 8 din 12 coloane și această situație va fi pe mici, medii și ecrane mari(este suficient să specificați pentru ecrane mici; pentru ecrane mari, după cum vă amintiți, valoarea este moștenită). Dar pe cele mai mici ecrane blocul va fi ocupat 100%. Acest lucru este corect, de obicei dispozitive mobile site-urile merg exact într-o coloană.
Lăsați coloana laterală să fie de o treime din lățimea rândului pe aceleași ecrane mici, medii și mari. Ei bine, pe cele mai mici, după cum ați înțeles deja, lățimea sa este resetată la 100%. Este atat de simplu.

Ei bine, nu există nimic de-a face cu subsolul. Bine, principii de baza Am rezolvat funcționarea rețelei, dar mai trebuie să vedem cum funcționează...

Grilă imbricată Bootstrap

Faptul este că acum am împărțit șablonul doar în blocuri principale, dar în interior ele pot fi împărțite și în coloane. De exemplu, conținutul poate afișa produse în mai multe coloane. Ce ar trebuii să fac? Este foarte simplu - creăm exact aceeași grilă în interior. Acesta va fi imbricat, dar conține și 12 coloane. Dacă rezumăm toate acestea, ajungem la această concluzie:
În orice bloc poate exista un număr nelimitat de grile. De exemplu, într-un bloc cu produse există o grilă pentru separarea produselor în bloc cu un singur produs, puteți crea o altă grilă, de exemplu, pentru a separa prețurile, informațiile despre disponibilitate și informații suplimentare. informație.

Acum vom încerca să facem o altă grilă în interiorul blocului de conținut pentru a aranja produsele în 3 coloane. Deci, să luăm blocul în care avem conținut:

Conţinut

Și scriem în el:

Catalog:

numele produsului

Descriere produs

După cum puteți vedea, am creat o nouă grilă în interiorul conținutului - am pus un rând în interior, iar în rând vor fi deja 3 blocuri cu produse. Doar copiați blocul col-sm-4 cu cardul de produs și lipiți-l de încă 2 ori, asta este ceea ce obțineți (puteți face orice fotografie a produsului, eu am făcut una mare):

Am ratat încă unul punct important Pentru ca imaginile să se adapteze la blocurile în care sunt amplasate, fiecăruia dintre ele trebuie să i se atribuie clasa img-responsive. Dacă, ca mine, credeți că a face acest lucru este incomod, atunci scrieți în propriul stil.css astfel:

Img( lățime maximă: 100%; înălțime: automat; afișare: bloc; )

Gata, salvați acest cod și conectați fișierul dvs. css la proiect. Acum imaginile vor fi adaptabile în mod implicit.

Ei bine, a ieșit destul de bine? Da, dar fără bootstrap ar trebui să suferi mai mult. Singurul lucru este că atunci când creați o grilă în interiorul oricărui bloc, nu mai trebuie să creați un bloc cu clasa container în el. De ce nu este necesar acest lucru? Da, pentru că blocul în care este creată grila servește drept container.

Astfel, puteți crea câte coloane doriți în orice bloc și puteți face un șablon de orice complexitate. Și toate acestea sunt mult mai rapide decât fără Bootstrap, pentru că trebuie să scrieți toate css-ul de la zero.

Utilități receptive

Aceasta este o altă caracteristică excelentă a bootstrap. Constă în faptul că poți ascunde sau face vizibile orice blocuri la lățimea de care ai nevoie. De exemplu, ascundeți complet coloana laterală pe ecrane înguste, adăugați câteva elemente noi pe dispozitivele mobile, adăugați o coloană pe ecrane late etc.

Există o mulțime de opțiuni de aplicație, dar nu v-am spus despre cel mai important lucru: cum să utilizați aceste utilități? Pentru a face acest lucru, trebuie doar să adăugați clase blocul dorit. Dacă trebuie să-l ascundeți, trebuie doar să specificați următoarea clasă:

Subsol

În ce în acest caz, va face clasa ascuns-xs? Acesta va ascunde subsolul pe dispozitive foarte mici. Pe toate celelalte blocul va fi vizibil.

Dacă, dimpotrivă, trebuie să îl afișați numai pe cele mai mici ecrane, trebuie să utilizați clasa visible-xs-block. În acest caz, blocul va fi ascuns pe toate ecranele, cu excepția celor mai înguste. Deci, clasele de utilitate adaptive sunt scrise astfel:

Cuvântul ascuns sau vizibil, în funcție de ceea ce aveți nevoie

O abreviere xs, sm, md sau lg care indică pe ce ecrane să ascundeți sau să afișați blocul.

Pentru vizibil, trebuie să adăugați una dintre cele trei valori: block - afișați elementul ca element bloc, inline-block - ca element inline-block, inline - inline.

Ei bine, câteva exemple pentru a fi clar:

hidden-xs hidden-lg - va ascunde elementul pe cele mai mici și mai mari ecrane. După cum puteți vedea, puteți specifica mai multe clase separate printr-un spațiu.

visible-xs-inline visible-md-block - pe ecranele mici și mari elementul nu va fi afișat deloc. La cele extra-mici va fi litere mici, iar la cele medii va fi bloc.

visible-lg-block - elementul va fi vizibil numai pe cele mai mari ecrane, pe toate celelalte va fi ascuns

Așa funcționează totul. Exact așa și nu altfel. Sper că înțelegi asta. Să o punem în practică. Avem un șablon de testare, deși unul foarte primitiv.

Sarcină: pentru a face coloana laterală să dispară pe ecranele mici și, de asemenea, un produs pe cele mai mici ecrane. Și astfel încât pe dispozitivele xs produsele sunt deja în 2 coloane, nu 3.

Încercați să o faceți singur, editând doar codul html. Ce trebuie făcut? Mai întâi, să ne uităm la coloană, pentru a o ascunde pe ecranele sm, trebuie doar să adăugați clasa hidden-sm la ea.

Grozav, acum al treilea produs trebuie să primească clasa hidden-xs și va dispărea pe cele mai mici ecrane. Ei bine, clasele celor două bunuri rămase vor fi următoarele:

Adică pe dispozitivele medii blocul va ocupa 4 coloane din 12, ceea ce se poate traduce în 33,33% din lățime, iar pe dispozitivele extra-mici - 50%. Și deoarece un bloc cu un produs va dispărea la această lățime, ambele blocuri cu produse vor fi aranjate frumos pe 1 rând, astfel:

Grozav! După ce ați înțeles acest lucru, puteți deja manipula blocurile de pe pagina web în aproape orice mod doriți. Încercați să vii cu sarcini pentru tine și să le implementezi.

Mișcă-mă până la capăt

În continuare voi arăta încă 1 foarte bun venit— capacitatea de a muta blocul la dreapta sau la stânga. Să presupunem că nu avem 3 produse la rând, ci 1. Și nu ocupă întreaga lățime. Și sarcina ta este să-l aliniezi în centru. Acest lucru este ușor de făcut dacă rețineți că lucrați cu un sistem cu 12 coloane.

Să lăsăm un bloc cu produsul:

Este suficient să faci calcule simple pentru a înțelege cât de mult trebuie să muți blocul pentru a-l centra. Trebuie mutat 4 coloane spre stânga pe ecranele medii și mari și 3 coloane pe cele mici. Cam asa arata:

Clasa col-md-offset-4 spune: pe ecranele medii și mari, mutați blocul spre stânga cu 33% din lățime container părinte(1/3 liniuță stânga, 1/3 lățime bloc, ⅓ liniuță dreapta, rezultând centrare).
Clasa col-xs-offset-6: pe ecranele foarte mici și mici, deplasați la stânga cu 25% (¼ umplutură la stânga, ½ bloc lățime, ¼ umplutură la dreapta).

Sper că înțelegeți esențialul și folosiți aceste clase dacă este necesar.

Componente Bootstrapși exemple de utilizare a acestora

Te felicit. Tocmai am acoperit cel mai important subiect legat de cadru. Este importantă grila și lucrul cu ea. Lucrul cu componente înseamnă deja că accesați documentația și copiați codul acolo componentă necesarăși, dacă este necesar, schimbați-l în funcție de dvs. Dar voi da în continuare mai jos câteva exemple de utilizare a componentelor.

Flotările rapide și anularea înfășurării

Clasele pull-left și pull-right vă permit să faceți rapid orice bloc să plutească trimițându-l la stânga sau la dreapta. Nu uitați de anularea fluxului. Puteți utiliza clasa clearfix pentru aceasta.

Bootstrap: Meniu receptiv orizontal (mobil).

Vom adăuga următoarele componente direct în șablon, așa că dacă doriți să lucrați cu codul și nu doar să citiți, urmați toți pașii după mine.

De fapt, cu Bootstrap este foarte ușor să nu faci doar meniu receptiv, și așa-numitul cel mobil, care este complet minimizat pe ecranele mici și se ascunde sub un singur buton. Această tehnică poate fi văzută în multe șabloane adaptiveși de fapt este foarte ușor de implementat. Exemplu de cod meniul mobil este în documentație, o voi lua de acolo și o voi reface puțin.

Așadar, primul lucru pe care îl voi face este să elimin blocul cu antetul, pentru că meniul nostru, de fapt, va fi antetul în cazul șablonului meu. Codul de meniu trebuie plasat înaintea întregului conținut al site-ului, chiar înaintea blocului containerului. De ce? Da, veți vedea acum singur că grila este deja încorporată în bara de navigare. Deci, iată codul:

Buton de comutare

Logo/nume

Căutare

Nu vă alarmați de faptul că există mult cod. Așa arată site-ul acum:

Dar dacă meniul dvs. nu ocupă întreaga lățime a ecranului, este logic să îl centrați. Pentru a face acest lucru, ar trebui să creați un bloc suplimentar de înveliș pentru meniu, care ar trebui să fie plasat după blocul cu clasa container-fluid. Nu uitați să închideți acest bloc. I-am dat clasa navbar-wrap. Iată stilurile pentru el:

Adică, puteți pur și simplu să limitați lățimea și să o centrați. Sau înlocuiți inițial recipientul-fluid cu recipient .

După cum puteți vedea, am adăugat un logo în meniu, două element simplu, element derulant, formular de căutare. Adică au fost multe elemente. Puteți personaliza cu ușurință meniul pentru dvs., adăugând propriile clase la acesta. Dar deocamdată scopul meu este pur și simplu să vă arăt această componentă.

Iată cum va arăta meniul pe dispozitivele cu lățimea ecranului mai mică de 768 de pixeli:

După cum puteți vedea, meniul s-a prăbușit. Se deschide când faceți clic pe butonul din dreapta colțul de sus. Pe ecran a rămas doar sigla.

Meniu derulant

În același timp, din exemplul de mai sus puteți înțelege cum este creat un element de meniu derulant în Bootstrap, să extragem acest cod pentru mai multe considerație detaliată:

Deci, containerul pentru un articol drop-down este un element obișnuit din listă cu clasa drop-down. În interiorul acestuia se află linkul principal, făcând clic pe care se deschide un meniu derulant. Este foarte important să îi atribuiți un atribut de date, pe care îl vedeți în cod, fără el, nimic nu va funcționa. De asemenea, ar trebui să vă asigurați că fișierul bootstrap.js este conectat la paginile web.

Un interval cu clasa caret nu este altceva decât o săgeată, datorită căreia puteți înțelege că elementul este un element derulant, iar sub meniul în sine este format folosind standardul listă cu puncte. Asta e, totul este destul de simplu, poți folosi acest cod pentru a implementa elementele derulante.

Adăugarea de pesmet (pesmet) folosind Bootstrap

În multe magazine puteți găsi așa-numitul bloc firimituri de pâine, care conține calea completă către pagina curenta. Acest lucru este, de asemenea, ușor de făcut folosind cadrul, consultați codul:

Acasă

Catalog

Bunuri

De fapt, este suficient să specificați clasa breadcrumb pentru o listă numerotată și să introduceți elementele obișnuite ale listei în ea. Apropo, voi centra titlurile de al doilea nivel în șablon (acesta trebuie să fie scris în css):

H2( text-align: center; )

Daca vrei sa schimbi ceva aspect pesmet, trebuie doar să utilizați selectorul .breadcrumb în CSS. De exemplu, în acest fel puteți elimina culoare de fundal:

Pesmet( fundal: transparent; )

Așa arată site-ul acum:

Mesele Bootstrap

În mod implicit, tabelul se va întinde pe întreaga fereastră, așa că înfășurați-l într-o cutie cu o lățime limitată pentru a limita dimensiunile. În mod implicit, arată groaznic, dar dacă adăugați clasa tabelului la eticheta tabelului, totul va fi mult mai frumos:

Rețineți că, în această versiune, celulele au margini clare doar în partea de jos, dacă doriți chenare pe toate cele patru laturi, trebuie să adăugați o altă clasă:

Dacă doriți să faceți tabelul în dungi, adică astfel încât rândurile să aibă o culoare de fundal alternativă, adăugați clasa table-striped. Pentru a evidenția o culoare diferită atunci când treceți cu mouse-ul peste un rând de tabel, utilizați clasa table-hover.

În principiu, acestea sunt toate posibilitățile de tabele. Am scris deja un articol separat despre cum să faci un tabel adaptiv, așa că nu îl voi repeta. Singurul lucru este că puteți adăuga, de asemenea, clase precum info, succes, warning și altele la rândurile și celulele tabelului pentru a le picta în culoarea dorită.

Desigur, puteți scrie cu ușurință propriile clase în style.css și le puteți folosi. Aici terminăm cu tabelele.

P.S. Articolul va fi adăugat și completat...

Concluzie

Sper că articolul a fost util și că ați putut înțelege cele mai importante lucruri. Puteți pune orice întrebări folosind comentarii.

A doua jumătate a articolului este deja percepută mai simplu, există mai multe exemple cu capturi de ecran.

Bootstrap - ce este?

Deci, să începem cu o întrebare importantă. Bootstrap este un cadru CSS și JS, în esență un set de fișiere cu cod scris gata făcut. Scopul dezvoltatorilor aproape oricărui cadru este de a simplifica dezvoltarea site-ului pentru ei înșiși și pentru alții care vor avea acces la instrument. În cazul Bootstrap, este complet gratuit, așa că îl puteți folosi în orice fel, puteți edita codul sursă și personaliza cadrul în orice mod doriți. Este perfect.

Instalarea Bootstrap

bootstrap.css și bootstrap.min.css - versiuni necomprimate și comprimate ale codului CSS al cadrului. Este recomandat să includeți un fișier comprimat în proiectul dvs. de lucru, astfel veți îmbunătăți ușor viteza de încărcare. Dar dacă intenționați să vizualizați codul într-un fișier, conectați versiunea necomprimată.

bootstrap.js și bootstrap.min.js - fișier cu scripturi

Acesta este setul standard al cadrului. De fapt, îl poți personaliza cu ușurință și îl poți schimba după cum ți se potrivește. De exemplu, nu utilizați deloc scripturi sau conectați doar o singură rețea. În general, vom vorbi și despre asta.

Documentația rusă Bootstrap

Când vizitați getbootstrap, probabil ați observat că totul aici este în engleză. Am putea folosi ajutorul rusesc pentru cadru. Este ușor de găsit. Pentru a face acest lucru, mergeți de la pagina principală la secțiunea Noțiuni introductive. Derulați până în jos, va exista un link către traduceri. Căutați rusă acolo și faceți clic pe ea. Gata, acum ești pe versiunea rusă a site-ului. Adevărat, nu totul a fost tradus aici, dar undeva în jur de 70-80% este exact, așa că veți înțelege totul.

Grilă de bootstrap

Orice s-ar spune, elementul principal al Bootstrap este grila de răspuns. În general, fără el, cadrul și-ar pierde aproape toată valoarea, deoarece datorită grilei puteți crea rapid șabloane adaptive. În același timp, este posibil să nu fiți deloc familiarizat cu interogările media, deoarece cadrul se ocupă de implementarea adaptabilității, trebuie doar să atribuiți clasele corecte;

Care sunt aceste clase? Să trecem la documentare, ne va ajuta foarte mult. Accesați secțiunea CSS - Grid System. Regulile generale pentru lucrul cu o grilă sunt simple, le voi enumera acum.

Cum se lucrează cu o rețea?

În consecință, primul lucru atunci când dezvoltați un site web este să decideți cum va fi șablonul - complet cauciucat, sau lățimea acestuia trebuie încă limitată.

Grozav, blocul container ar trebui să conțină un rând de grilă. Trebuie să plasați toate blocurile care sunt pe o singură linie în el. Adică, dacă luăm cel mai tipic șablon: antet, parte principală, coloana din dreapta și subsol, atunci există 3 coloane. Primul va avea doar antetul, al doilea va avea conținutul și bara laterală, iar ultimul va avea subsolul. Markupul pentru un astfel de site ar fi cam așa:

Un capac
Conținut... și bară laterală
Subsol

Cum funcționează acest sistem cu 12 coloane?

Așadar, ajungem la cea mai importantă problemă legată de cadru. Crede-mă, dacă înțelegi asta, totul este o prostie. Principalul lucru este să înțelegeți cum funcționează grila, iar calea către aspectul rapid adaptiv vă va fi deschisă.

Pentru a face acest lucru, parcurgeți documentația de mai jos, acolo veți găsi un tabel care conține proprietăți importante ale grilei.

Apropo, coloanele în sine sunt marcate în Bootstrap cu clasa col-, dar aceasta este o clasă compusă, așa că nu scriu niciodată pur și simplu col-. Bootstrap are 4 clase speciale care sunt concepute pentru a controla dimensiunea blocurilor la diferite lățimi, iată-le:

ld - pentru ecrane mari, cu o lățime de peste 1200 de pixeli (calculatoare desktop);

md - pentru ecrane medii, latime de la 992 la 1199 (calculatoare, netbook-uri);

sm - pentru ecrane mici, lățime de la 768 la 991 pixeli (tablete);

xs - ecrane foarte mici, lățime mai mică de 768px.

Acestea sunt cele 4 clase, dar pentru a controla dimensiunea elementelor se folosesc numere de la 1 la 12, deoarece, după cum vă amintiți, în grilă sunt exact 12 coloane.

Un capac

Conţinut
Coloana laterală

Subsol

Conţinut
Coloana laterală

În esență, îi spunem browserului:
Lăsați blocul de conținut să aibă 8 coloane din 12 și această situație va fi pe ecrane mici, medii și mari (este suficient să specificați pentru ecrane mici, pentru ecrane mari, după cum vă amintiți, valoarea este moștenită). Dar pe cele mai mici ecrane blocul va fi ocupat 100%. Acest lucru este corect, de obicei, pe dispozitivele mobile, site-urile apar într-o coloană.
Lăsați coloana laterală să fie de o treime din lățimea rândului pe aceleași ecrane mici, medii și mari. Ei bine, pe cele mai mici, după cum ați înțeles deja, lățimea sa este resetată la 100%. Este atat de simplu.

Ei bine, nu există nimic de a face cu subsolul. Ei bine, am acoperit principiile de bază ale modului în care funcționează grila, dar încă trebuie să vedem cum funcționează...

Grilă imbricată Bootstrap

Acum vom încerca să facem o altă grilă în interiorul blocului de conținut pentru a aranja produsele în 3 coloane. Deci, să luăm blocul în care avem conținut:

Conţinut

Și scriem în el:

Catalog:

numele produsului

Descriere produs

După cum puteți vedea, am creat o nouă grilă în interiorul conținutului - am pus un rând în interior, iar în rând vor fi deja 3 blocuri cu produse. Doar copiați blocul col-sm-4 cu cardul de produs și lipiți-l de încă 2 ori, asta este ceea ce obțineți (puteți face orice fotografie a produsului, eu am făcut una mare):

Am omis un alt punct important: pentru ca imaginile să se adapteze la blocurile în care sunt amplasate, fiecăreia dintre ele trebuie să primească clasa img-responsive. Dacă, ca mine, credeți că a face acest lucru este incomod, atunci scrieți în propriul stil.css astfel:

Img( lățime maximă: 100%; înălțime: automat; afișare: bloc; )

Gata, salvați acest cod și conectați fișierul dvs. css la proiect. Acum imaginile vor fi adaptabile în mod implicit.

Utilități receptive

Aceasta este o altă caracteristică excelentă a bootstrap. Constă în faptul că poți ascunde sau face vizibile orice blocuri la lățimea de care ai nevoie. De exemplu, ascundeți complet coloana laterală pe ecranele înguste, adăugați câteva elemente noi pe dispozitivele mobile, adăugați o coloană pe ecranele late etc.

Există o mulțime de opțiuni de aplicație, dar nu v-am spus despre cel mai important lucru: cum să utilizați aceste utilități? Pentru a face acest lucru, trebuie doar să adăugați clase la blocul dorit. Dacă trebuie să-l ascundeți, trebuie doar să specificați următoarea clasă:

Subsol

Ce va face clasa hidden-xs în acest caz? Acesta va ascunde subsolul pe dispozitive foarte mici. Pe toate celelalte blocul va fi vizibil.

Cuvântul ascuns sau vizibil, în funcție de ceea ce aveți nevoie

O abreviere xs, sm, md sau lg care indică pe ce ecrane să ascundeți sau să afișați blocul.

Pentru vizibil, trebuie să adăugați una dintre cele trei valori: block - afișați elementul ca element bloc, inline-block - ca element inline-block, inline - inline.

Ei bine, câteva exemple pentru a fi clar:

hidden-xs hidden-lg - va ascunde elementul pe cele mai mici și mai mari ecrane. După cum puteți vedea, puteți specifica mai multe clase separate printr-un spațiu.

visible-xs-inline visible-md-block - pe ecranele mici și mari elementul nu va fi afișat deloc. La cele extra-mici va fi litere mici, iar la cele medii va fi bloc.

visible-lg-block - elementul va fi vizibil numai pe cele mai mari ecrane, pe toate celelalte va fi ascuns

Așa funcționează totul. Exact așa și nu altfel. Sper că înțelegi asta. Să o punem în practică. Avem un șablon de testare, deși unul foarte primitiv.

Grozav, acum al treilea produs trebuie să primească clasa hidden-xs și va dispărea pe cele mai mici ecrane. Ei bine, clasele celor două bunuri rămase vor fi următoarele:

Mișcă-mă până la capăt

În continuare vă voi arăta un alt truc foarte bun - capacitatea de a muta un bloc la dreapta sau la stânga. Să presupunem că nu avem 3 produse la rând, ci 1. Și nu ocupă toată lățimea. Și sarcina ta este să-l aliniezi în centru. Acest lucru este ușor de făcut dacă rețineți că lucrați cu un sistem cu 12 coloane.

Să lăsăm un bloc cu produsul:

Clasa col-md-offset-4 spune: pe ecranele medii și mari, decalați blocul la stânga cu 33% din lățimea containerului părinte (1/3 offset stânga, 1/3 lățime bloc, ⅓ offset dreapta, rezultând centrarea).
Clasa col-xs-offset-6: pe ecranele foarte mici și mici, deplasați la stânga cu 25% (¼ umplutură la stânga, ½ bloc lățime, ¼ umplutură la dreapta).

Sper că înțelegeți esențialul și folosiți aceste clase dacă este necesar.

Componente bootstrap și exemple de utilizare a acestora

Te felicit. Tocmai am acoperit cel mai important subiect legat de cadru. Este importantă grila și lucrul cu ea. Lucrul cu componente înseamnă deja că mergi pur și simplu la documentație, copiezi acolo codul componentei dorite și, dacă este necesar, îl schimbi pentru a se potrivi nevoilor tale. Dar voi da în continuare mai jos câteva exemple de utilizare a componentelor.

Flotările rapide și anularea înfășurării

Bootstrap: Meniu receptiv orizontal (mobil).

Vom adăuga următoarele componente direct în șablon, așa că dacă doriți să lucrați cu codul și nu doar să citiți, urmați toți pașii după mine.

De fapt, cu Bootstrap poți face foarte ușor nu doar un meniu adaptiv, ci și unul așa-zis mobil, care este complet restrâns pe ecrane mici și ascuns sub un singur buton. Această tehnică poate fi văzută în multe șabloane receptive și este de fapt foarte ușor de implementat. Exemplul de cod al meniului mobil este în documentație, îl voi lua de acolo și îl voi reface puțin.

Buton de comutare

Logo/nume

Căutare

Adică, puteți pur și simplu să limitați lățimea și să o centrați. Sau înlocuiți inițial recipientul-fluid cu recipient .

După cum puteți vedea, am adăugat în meniu un logo, două elemente simple, un element derulant și un formular de căutare. Adică au fost multe elemente. Puteți personaliza cu ușurință meniul pentru dvs., adăugând propriile clase la acesta. Dar deocamdată scopul meu este pur și simplu să vă arăt această componentă.

Iată cum va arăta meniul pe dispozitivele cu lățimea ecranului mai mică de 768 de pixeli:

După cum puteți vedea, meniul s-a prăbușit. Se deschide când faceți clic pe butonul din colțul din dreapta sus. Pe ecran a rămas doar sigla.

Meniu derulant

În același timp, din exemplul de mai sus puteți înțelege cum este creat un element de meniu derulant în Bootstrap, să extragem acest cod pentru o privire mai detaliată:

Un interval cu clasa caret nu este altceva decât o săgeată, datorită căreia puteți înțelege că elementul este un element derulant, iar sub meniul în sine este format folosind o listă standard cu marcatori. Asta e, totul este destul de simplu, poți folosi acest cod pentru a implementa elementele derulante.

Adăugarea de pesmet (pesmet) folosind Bootstrap

În multe magazine puteți găsi un așa-numit bloc de pesmet, care conține calea completă către pagina curentă. Acest lucru este, de asemenea, ușor de făcut folosind cadrul, consultați codul:

Acasă

Catalog

Bunuri

H2( text-align: center; )

Dacă doriți să schimbați cumva aspectul pesmetului, trebuie doar să utilizați selectorul .breadcrumb în CSS. De exemplu, iată cum puteți elimina culoarea de fundal:

Pesmet( fundal: transparent; )

Așa arată site-ul acum:

Mesele Bootstrap

Rețineți că, în această versiune, celulele au margini clare doar în partea de jos, dacă doriți chenare pe toate cele patru laturi, trebuie să adăugați o altă clasă:

Desigur, puteți scrie cu ușurință propriile clase în style.css și le puteți folosi. Aici terminăm cu tabelele.

P.S. Articolul va fi adăugat și completat...

Concluzie

Sper că articolul a fost util și că ați putut înțelege cele mai importante lucruri. Puteți pune orice întrebări folosind comentarii.

Salutări tuturor oaspeților de pe blogul meu și pacienților de dezvoltare web. Publicația de astăzi va fi dedicată introducerii unui cadru atât de popular precum Bootstrap. După ce ați citit articolul actual, veți afla de ce a fost creat, cum să lucrați cu bootstrap și cum să îl instalați, ce instrumente oferă acest cadru și unde este cel mai des folosit. Ei bine, acum mergeți mai departe și alegeți noul material!

Ce este Bootstrap?

Bootstrap este un cadru conceput special pentru dezvoltarea interfeței (interfeței externe) a serviciilor și aplicațiilor web.

Include șabloane standard constând din tipografie, butoane, formulare, diverse meniuri, inclusiv meniuri derulante, tabele, ferestre modale, navigare, glisoare (obișnuite și sub formă de carusel) și alte instrumente, precum și tot felul de pluginuri pe .

Cele mai populare dintre ele sunt Tooltip, care este responsabil pentru ferestrele pop-up, Dropdown, care este responsabil pentru listele drop-down, Carousel, care organizează un glisor care poate fi derulat și altele.

CU lista plina pluginuri existente, șabloanele și componentele pot fi găsite pe site-ul oficial http://getbootstrap.com/getting-started/. De asemenea, cu ajutorul acestuia, începând cu cea de-a doua versiune, puteți crea un layout responsive.

Câteva cuvinte despre istorie

Cred că trebuie să cunoști puțină istorie a creării instrumentului care este descris pentru a înțelege ce este.

Bootstrap a fost creat de Mark Otto și Jacob Thornton special pentru rețea socială Stare de nervozitate. A acționat ca o bibliotecă internă. De aceea poți găsi uneori numele Twitter Bootstrap.

Biblioteca se numea inițial Twitter Blueprint. Cu toate acestea, în momentul în care produsul a fost lansat publicului larg (și acest lucru s-a întâmplat pe 19 august 2011), numele său a fost schimbat în Bootstrap. Astăzi există patru versiuni ale cadrului.

Cel mai vizibil și la cerere pe acest moment este Bootstrap 3. A fost primul care a folosit conceptul mobilprimul. În plus, au fost introduse multe amendamente și îmbunătățiri.

Care sunt beneficiile utilizării Bootstrap?

De fapt, ca și în cazul tuturor tehnologiilor, utilizarea Bootstrap vine cu aspecte pozitive și negative. Prin urmare, nu utilizați niciodată acest cadru fără gânduri. Într-unul dintre articole, am descris în detaliu avantajele și dezavantajele lucrului cu Bootstrap.

Și acum vreau să-ți îndrept atenția către confort soluții gata făcute pe care le oferă Bootstrap și aspectele pozitive ale acestora.

Deci, atunci când conectați cadrul descris, vi se oferă posibilitatea de a utiliza astfel de elemente gata făcute precum:

Tot felul de componente, care includ: bare de navigare, liste derulante, butoane, indicatori de progres, paginare și altele;
Pluginuri JavaScript, inclusiv tranziții, elemente modale și drop-down, blocuri pop-up și sfaturi cu instrumente, restrângerea, implementarea filelor, glisoare și altele;
Șabloane de grilă, inclusiv cele plutitoare;
Aspecte;
Și, desigur, implementarea designului responsive.

Merită să acordați o atenție deosebită grilelor sau, așa cum sunt numite și machetelor. Acum va fi un mic spoiler, iartă-mă, pentru că am decis să dedic un articol separat acestui subiect, dar nu este nimic de făcut!

Datorită acestui instrument, Bootstrap este foarte des folosit pentru a scrie site-uri web. Pentru că acesta este un mecanism cu adevărat competent și puternic pentru aspectul blocului. Creatorii cadrului au oferit suma maxima coloane - 12. Acest lucru este mai mult decât suficient pentru a instala „cadru”.

În plus, în unele situații, utilizarea Bootstrap nu numai că simplifică codul, ci și economisește semnificativ timpul. În același timp, nu trebuie să vă faceți griji că unele elemente nu vor funcționa în browserele problematice (da, fac aluzie la IE), deoarece Bootstrap este pe deplin compatibil cu .

Cum se conectează cadrul?

Există mai multe opțiuni de conectare a acestui instrument. Bănuiesc că voi începe prin a instala fișierul de boot.

Deci, pe site-ul oficial, folosind linkul, puteți descărca versiunile actuale Bootstrap. Totul este foarte simplu. Pur și simplu selectați pachetul de instalare care vi se potrivește și faceți clic pe butonul „Descărcare”. Pe același site puteți descărca versiunea alfa a Bootstrap 4.

A doua cale este, desigur folosind CDN. Deci, pentru a conecta cele mai recente versiuni ale cadrului, trebuie să inserați următorul link:

Dacă trebuie să conectați un mic Versiunea JavaScript, apoi copiați această linie:

Ei bine, subiectele sunt legate după cum urmează:

Pe site-ul Russified puteți viziona un videoclip de instruire despre conectarea acestui cadru (http://mybootstrap.ru/video-obuchenie-twitter-bootstrap/).

Atât, prieteni, e timpul să ne luăm la revedere. Nu uitați să distribuiți postări interesante colegilor și, de asemenea, să vă abonați la actualizările blogului meu. Pa! Pa!

Cu stima, Roman Chueshov

Citește: de 213 ori

A treia lecție conține o mică teorie despre construcția șablonului și grila Bootstrap.
Bootstrap vede șablonul site-ului după cum urmează

Când construiți un șablon folosind Bootstrap, sunt utilizate trei niveluri de imbricare

Primul nivel este container - zona în care sunt plasate toate blocurile site-ului (cadru roșu).
Al doilea nivel este rândul - zona în care sunt plasate blocurile pentru material
Al treilea nivel pentru diferite dispozitive el este diferit. Acesta este materialul în sine.

În general, Bootstrap este oarecum similar cu o masă obișnuită. Există un cadru general, apoi există rânduri și celule. Dacă tragem o analogie cu un tabel html, atunci rolul containerului este jucat de etichetă

, rolul de rând este atribuit etichetei Și ultimul nivel aceasta este celula însăși cu materialul ).

Bootstrap Grid

Grila implicită Bootstrap constă din 12 celule cu aceeasi latime iar în funcție de rezoluția ecranului, lățimea celulelor poate varia. Celulele bootstrap au abilitate interesantă, pe care îl puteți folosi este pentru a adapta celulele la lățimea ecranului.

Șablon Bootstrap 101 Bună, lume! Aceasta este versiunea Photoshop Aceasta este versiunea Photoshop Aceasta este versiunea Photoshop a Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh This is Photoshop "s version Aceasta este versiunea Photoshop a Lorem Ipsum Proin gravida nibh vel velit auctor aliquet, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh Aceasta este versiunea Photoshop. of Lorem Ipsum Proin gravida nibh vel velit auctor aliquet.

Descărcați exemplul, rulați fișierul index.html și începeți încet să redimensionați browserul. Veți vedea trei stări care sunt scrise în șablon.

Exemplul folosește următoarea construcție

Salut Lume!

Aceasta este versiunea Photoshop Aceasta este versiunea Photoshop a Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh.... col-sm este o clasă pentru dispozitive mici ().

mai jos este tabelul
col-md este conceput pentru dispozitive cu o lățime de 970px și mai mult. col-md are următoarea structură. col-md-[ Urmează un număr care indică numărul de celule ocupate, implicit sunt 12

] Am setat 3, așa că inițial șablonul este împărțit în 4 coloane. Dacă setăm cele 4 div-uri la col-md-6, vom obține o pagină cu două coloane. Raportul dintre celule ar trebui să fie de până la 12. Încercați să îl setați la 8:4. Apoi, ca rezultat, veți obține prima celulă de două ori mai largă decât a doua.

Am întâlnit deja primul nivel. Al doilea nivel de imbricare îndeplinește funcția de container, dar în raport cu blocurile de informații ( similar cu eticheta

Bootstrap are un tabel pentru grupuri de dispozitive, dacă doriți să modificați afișarea materialului, de exemplu pentru telefoane, puteți adăuga pur și simplu stiluri.
Dispozitive foarte mici

Telefoane (Șablon Bootstrap de bază Faceți clic pe butonul

Pasul 2: Conectarea cadrului Bootstrap 3 la pagina web

Pentru a conecta cadrul Twitter Bootstrap 3 la o pagină web, trebuie să faceți următoarele: Fișier bootstrap CSS (bootstrap.min.css);

A conecta ultima versiune biblioteci jQuery, care este necesar pentru ca scripturile Bootstrap să funcționeze;

Includeți fișierul JavaScript Bootstrap compilat și minimizat (bootstrap.min.js).

Notă: Fișiere JavaScript cel mai bine este să vă conectați înainte de închidere eticheta corporală(adică înainte de ), deoarece aceasta va îmbunătăți viteza de încărcare a conținutului principal al paginii web.

DOCTYPE html > Șablon Bootstrap de bază Faceți clic pe butonul $(function() ( $("").popover()))

Pasul 3: Salvați pagina web și verificați dacă componenta Bootstrap funcționează

După ce creați o pagină web care are conectat cadrul Twitter Bootstrap 3, trebuie să o salvați într-un fișier cu extensia html(De exemplu: „index.html”). După aceasta, trebuie să deschideți pagina web creată într-un browser web și să verificați funcționarea componentei Bootstrap „Popovers”.

Notă: Când salvați un fișier de pagină web într-un editor de text, acordați atenție extensiei acestuia, care ar trebui să fie „html”. Din moment ce unii editori de text, cum ar fi notepad, salvează automat fișierele cu extensia „txt”.

Structura de fișiere a proiectului, care se bazează pe platforma Twitter Bootstrap 3:

Demonstrarea componentei Bootstrap „Popovers”:

Faceți clic pe butonul