Exemple de utilizare Bootstrap. Instalare cadru standard. Flotările rapide și anularea înfășurării
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 de aproape orice 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 BootstrapDacă trebuie doar să conectați fișierele cadru la un document HTML (de exemplu, pentru practică), doar descărcați cadrul de pe site-ul oficial getbootstrap.com, copiați fișierele acestuia în proiect și conectați-le pe cele de care aveți nevoie. o să o fac scurtă recenzie aceste fisiere:
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ă BootstrapCâ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 de bază. Derulați până în jos, va exista un link către traduceri. Căutați limba 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 bootstrapOrice 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; nu aveți nevoie de ele, deoarece cadrul se ocupă de implementarea adaptabilității; trebuie doar să atribuiți clasele corecte blocurilor.
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 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
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 pentru că 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 clase speciale care sunt concepute pentru a controla dimensiunea blocurilor la diferite lățimi, iată-le:
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 în orice caz 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ă? Se resetează. 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%. Așadar, 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ă 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 dispozitive mobile ah, site-urile merg exact într-o coloană.
Lăsați coloana laterală să aibă 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, de asemenea, 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ă BootstrapFaptul 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 interiorul oricărui bloc poate fi suma nelimitata grile De exemplu, într-un bloc cu produse există o grilă pentru separarea produselor; în blocul cu un produs în sine, 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 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, salvează acest cod și conectează fișierul CSS la proiect. Acum imaginile vor fi adaptive î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 receptiveAceasta 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
Ce va face clasa hidden-xs în acest caz? 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:
Ei bine, câteva exemple pentru a fi clar:
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ă adauge 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.
Î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 acestoraTe 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, copiați acolo codul componentei dorite și, dacă este necesar, îl modificați pentru a se potrivi nevoilor dumneavoastră. Dar voi da în continuare mai jos câteva exemple de utilizare a componentelor.
Flotările rapide și anularea înfășurăriiClasele 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 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 adaptiveși de fapt este 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.
Deci, 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 î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 dreapta colțul de sus. Pe ecran a rămas doar sigla.
Î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ă:
Echipament de antrenament
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 breadcrumbs (breadcrumbs) folosind BootstrapÎn multe magazine puteți găsi un așa-numit bloc de pesmet, care conține calea completă către pagina curenta. Acest lucru este, de asemenea, ușor de făcut folosind cadrul, consultați codul:
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: 
Î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:
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.
| Bower | $ bower install bootstrap |
| npm | $ npm instalează bootstrap@3 |
| Compozitor | $ compozitor necesită twbs/bootstrap |
Pentru experimente cu Bootstrap, prima opțiune cu conexiune externă. Cu toate acestea, să pună în aplicare probleme practice pe site-uri reale este mai bine, după părerea mea, să minimizezi numărul de biblioteci externe. Prin urmare, este mai bine să descărcați Bootstrap și să îl conectați local. Și acest lucru se poate face în două moduri.
Prima metodă este cea mai evidentă. Accesați pagina oficială de descărcare și faceți clic pe butonul „Descărcați Bootstrap”:
Veți descărca o arhivă care va conține trei foldere (css, fonts și js) cu fișiere. Despachetați-le într-un director separat și creați-vă propriul index.html în el, la care puteți conecta toate stilurile, scripturile și fonturile. Ca bază pentru conținutul documentului HTML, puteți lua codul de mai sus cu înlocuirea legăturilor către componentele Bootstrap de la extern la local:
Apropo, folderele implicite ale Bootstrap conțin mai multe fișiere suplimentare care pot fi eliminate pentru a economisi spațiu. De exemplu, în folderul css puteți șterge toate fișierele cu extensia .map, precum și fișierele de temă și stil neminificate (fără prefixul .min) (vor rămâne doar două fișiere: bootstrap.min.css și bootstrap-theme. min.css). Ștergem totul din folderul js, cu excepția fișierului bootstrap.min.js. Nu atingem fonturile (dacă sunt necesare). Ca rezultat, ar trebui să aveți următoarea structură de fișiere:
Această metodă este bună pentru toată lumea, cu excepția asta Livrare Standard Este posibil ca Bootstrap să nu includă toate pluginurile și este folosit doar stilul standard. Dacă nu creați doar o pagină de test, ci un site web real, atunci probabil că va trebui să schimbați mult șablon standardînregistrare
Așadar, pentru a nu căuta fișiere mai târziu, puteți personaliza tema Bootstrap pentru a se potrivi cerințelor dumneavoastră în avans. Pentru a face acest lucru, veți avea nevoie de cunoștințe de limba engleză și de înțelegerea cel puțin a principiilor de bază ale aspectului CSS. Pentru a vă crea propriul ansamblu Bootstrap, accesați o pagină specială și completați numeroase câmpuri într-un formular care vă permite să vă setați propriile stiluri pentru orice element de pe viitorul dvs. site:
Aceasta este o sarcină destul de lentă, dar mult mai rapidă decât editarea manuală a codului de stil și a scripturilor gata făcute. În opinia mea, merită să petreci cele 20-40 de minute suplimentare pentru a te economisi câteva ore mai târziu căutând parametrii care trebuie modificați.
După ce au fost făcute toate modificările, faceți clic pe butonul „Compilați și descărcați” din partea de jos și versiunea dvs. personalizată Bootstrap va fi descărcată ca arhivă. Apropo, pe lângă folderele deja familiare nouă, această versiune Arhiva va conține și un fișier config.json. Conține o listă cu toate variabilele pe care le edităm în pagina de setări. Deci, în viitor, puteți descărca acest fișier și descărca imediat Bootstrap-ul configurat, fără a fi nevoie să introduceți manual toți parametrii!
Cum se lucrează cu documentațiaDeci, în acest moment avem deja un document HTML gata făcut cu Bootstrap conectat la el. Dar încă nu știm cum să lucrăm cu acest Bootstrap... Pentru a afla, trebuie să citiți documentația foarte extinsă de pe site-ul oficial sau versiunea sa în limba rusă (există o altă traducere bună în limba rusă).
În opinia mea, este mai bine să folosiți documentația originală, deoarece este mai nouă și nu conține ambiguități, spre deosebire de traduceri. În plus, structura meniului principal de pe site-ul oficial este mai logică - secțiunile principale ale documentației sunt situate în partea stanga, și diverse altele în dreapta.
Principalele subiecte de ajutor pentru Bootstrap sunt:
- Noțiuni introductive - conține informații despre cum să conectați Bootstrap la proiectul dvs. și câteva șabloane pe care le puteți utiliza pentru a începe;
- CSS - descrie toate clasele CSS existente pentru Bootstrap și oferă exemple de utilizare a acestora în codul final;
- Componente - aceasta sectiune oferă recomandări cu privire la principiile utilizării componentelor specifice Bootstrap;
- JavaScript - ne prezintă exemple de utilizare a scripturilor Bootstrap și a pluginurilor sale.
În plus, există și secțiuni cu teme gata făcute, o expoziție de lucrări pe Bootstrap, posturi vacante, un blog (și în versiunea rusă există și un forum cu drepturi depline), dar acestea sunt secțiuni secundare. Pentru a stăpâni Bootstrap, va trebui să ne concentrăm atenția asupra celor de mai sus.
Documentația este foarte extinsă și poate fi foarte ușor să fii confuz la început. Pentru a preveni acest lucru, principalul lucru este să înțelegeți structura și principiul descrierii materialului din acesta. De fapt, aici nu există instrucțiuni clasice - totul este stabilit în exemple concrete. Mai mult, pentru fiecare exemplu pot exista mai multe opțiuni care descriu diferențele și condițiile de utilizare.
Din punct de vedere structural, descrierea apare în aceeași ordine în care apare de obicei aspectul. Adică la început descriu entitati comune, apoi elementele sunt specificate de sus în jos. De exemplu, în secțiunea CSS, totul începe cu o descriere a doctype, a etichetelor META și se termină cu cazuri speciale de utilizare a preprocesoarelor Less și Sass.
Pentru a simplifica căutarea entității necesare, puteți utiliza bara lateralăîn bara laterală din dreapta. Din păcate, căutarea prin documentație nu este furnizată aici...
Unul dintre cele mai importante lucruri de învățat despre Bootstrap este înțelegerea grilei sale. Grila Bootstrap este un fel de celule gata făcute în care puteți imbrica orice conținut. În același timp, conținutul acestor „celule” este aliniat în modul în care avem nevoie și atunci când dimensiunea ecranului se modifică, acesta se adaptează corect la noua sa lățime.
Putem găsi informații despre grilă în subiectul de ajutor CSS - Sistem grilă:
Totul este descris aici destul de detaliat, totuși, pe scurt și mai clar, grila Bootstrap poate fi comparată cu principiul care a fost folosit cândva aspect tabelar. Aici trebuie să creați și un container (analog cu un tabel -
| ).
Algoritm general lucreaza cu Grilă de bootstrap poate fi redusă la următorii pași: În total, există 4 clase de coloane de bază în Bootstrap, care pot fi combinate între ele pentru a gestiona mai bine capacitatea de răspuns pe diferite ecrane:
În practică, clasa .col-md- este folosită cel mai adesea cu un număr care indică 1/12 din lățimea totală a ecranului. De exemplu, pentru a dispune o coloană pe întregul ecran, vom folosi class.col-md-12. Pentru două coloane care se întind pe jumătate din ecran - două blocuri cu clase.col-md-6. Pentru trei coloane, respectiv, trei c.col-md-4 etc. Apropo, nu este necesar ca coloanele să aibă dimensiuni egale. Este foarte posibil să combinați (în 12 bucăți, desigur) lățimi, de exemplu, .col-md-4 și .col-md-8 sau .col-md-2, .col-md-3 și .col- md-7. Nici măcar nu trebuie să utilizați întreaga lățime făcând, de exemplu, o singură coloană pe rând, să spunem .col-md-5:
Coloanele pot fi deplasate orizontal în raport cu grila de coordonate inițială sau afișate în afara ordinului. De exemplu, pentru a plasa două coloane .col-md-4 în centrul paginii, putem aplica un offset adăugând o altă clasă .col-md-offset-2 ((12-(4+4))/2 la primul nostru bloc de coloană =2). Și pentru a schimba ordinea, adăugați clasele .col-md-push- (pentru a muta coloana la intervalul dorit) și .col-md-pull- (pentru a trage coloana la începutul liniei):
În cele din urmă, coloanele pot fi imbricate în interiorul altor coloane într-un rând. Mai mult, acest lucru se poate face în două moduri: investind într-un container nou și investind doar în linie nouă. Dacă introduceți un nou container într-o coloană cu un set de rânduri și coloane proprii, atunci i se vor aplica toate stilurile specifice containerului. Când adăugați doar o linie, stilurile sunt salvate ca pentru o coloană (nu vor fi indentări suplimentare etc.):
După cum puteți vedea, poziționarea blocurilor de coloane în Bootstrap nu este atât de dificilă. Grila este o invenție foarte convenabilă care „ucide” două păsări dintr-o singură lovitură: vă face aspectul mai precis din punctul de vedere al designerilor și adaugă automat adaptabilitate paginii dvs. web. Singurul lucru de reținut este că nu puteți încălca structura de imbricare, de exemplu, adăugarea directă a unei coloane într-un container sau în interiorul unei alte coloane fără a declara un nou rând. Puteți citi mai multe despre lucrul cu stiluri în Bootstrap în secțiunea de documentație CSS. Și conform grilei, asta este în esență tot. Sa trecem peste. Componente BootstrapPe lângă grilă, foarte caracteristică utilă Bootstrap este un întreg set de componente standard care sunt utilizate în majoritatea site-urilor web moderne. De fapt, folosind doar aceste componente, puteți crea rapid un site web cu drepturi depline, cu o bară de meniu receptivă, activă " firimituri de pâine”, diverse bannere și informatoare, butoane și meniuri derulante, paginare și chiar fonturi de pictograme gata făcute! Și, ceea ce este tipic, toată această bunătate este creată, ca și grila, prin simpla adaugare la DIV necesar al claselor cerute! Adevărat, în unele locuri, trebuie să observați și structura de imbricare a blocurilor (de exemplu, pentru a crea un meniu), dar cred că acest lucru nu va fi deosebit de dificil. Mai mult, sunt destule exemple pe pagina cu o descriere a componentelor. Aici vom lua în considerare doar câteva cazuri speciale. Lucrul cu fonturi de pictogrameBootstrap 3 are un font de pictograme bun în pachetul său de bază - Glyphicons. Semnificația unor astfel de fonturi este că, în loc de caractere alfabetice, conțin diverse grafica vectoriala. Spre deosebire de imaginile raster obișnuite, imaginile cu fonturi de pictograme sunt scalate perfect fără pierderi de calitate, motiv pentru care au devenit atât de răspândite odată cu popularizarea aspectului adaptiv. Noul Bootstrap 4 nu are încă un font de pictogramă (poate că va fi înlocuit cu FontAwesome, mai popular), dar în cea de-a treia versiune există un font și poate fi folosit. Principala cerință pentru o astfel de utilizare este inserarea simbolului dorit folosind un element HTML separat dedicat acestuia. De exemplu, trebuie să inserăm un simbol al rublei rusești lângă un anumit număr. În tabelul cu o listă de pictograme ale fontului Glyphicons sub imaginea sa, copiați numele clasei (sau mai degrabă două deodată) „glyphicon glyphicon-ruble” și aplicați-l pe etichetă, pe care o introducem după numărul nostru: Cost - 999 Cu toate acestea, este adesea necesar nu numai să inserați această sau acea pictogramă, ci și să schimbați, de exemplu, dimensiunea și culoarea acesteia. Pentru a face acest lucru, în Bootstrap se recomandă să nu reatribuiți stiluri standard pentru clasa dorită cu un simbol, ci să adăugați o altă clasă suplimentară cu parametrii de design necesari la lista de clase SPAN care o inserează sau să adăugați stiluri prin intermediul stilului. atribut. De exemplu, așa: Myrub(dimensiunea fontului:10px; culoare:verde;) Cost - 999 Cost - 999
După cum am menționat mai sus, Bootstrap are destul de multe implementări diferite ale tuturor tipurilor de blocuri de text. Aproape toate sunt implementate prin simpla adăugare a clasei corespunzătoare la DIV-ul dorit, dar au diferențe vizuale. Pentru comparație, sugerez să formatați aceeași frază cu un titlu, text și buton în formular tipuri variate blocuri: Titlu Buton
Aproape toate tipurile de blocuri, cu excepția poate jumbotronul și comentariile, nu afectează în niciun fel stilul conținutului blocului în sine. Doar fundalul și cadrul se schimbă, iar poziția conținutului se schimbă ușor. În interiorul jumbotronului (clasa - jumbotron) tot textul pare puțin mai mare decât dimensiunea standard. Acest tip block este uneori numit banner și este adesea folosit ca ecran de diapozitiv de titlu în paginile de destinație (site-uri populare de o singură pagină). Vă permite să evidențiați informațiile principale, concentrând atenția utilizatorului asupra lor doar prin mărirea ușor a fonturilor. Cel mai bun efect poate fi obținut dacă completați clasa jumbotron cu clasa .text-center, care va alinia conținutul bannerului în centrul paginii! Titlu Buton Apropo, particularitatea jumbotronului este că poate fi întins pentru a umple întregul ecran fără căptușeală sau cadru. Pentru a face acest lucru, trebuie să încălcați puțin regulile Aspecte bootstrapși mutați blocul cu clasa.jumbotron în afara tuturor liniilor și containerelor. În schimb, containerul cu rânduri și celule va trebui plasat în interiorul bannerului rezultat pe ecran complet!
Titlu Buton
Este doar păcat că Bootstrap nu are clase pentru alinierea verticală a conținutului aceluiași jumbotron și creșterea înălțimii blocului pentru a umple întregul ecran. Atunci nu ar fi preț pentru el :) Dar toate acestea pot fi finalizate cu propriile mâini dacă este necesar. Nu tocmai a ta design standard alertele și panourile sunt de asemenea de interes. Notele sunt adăugate standard folosind clasa.alert; cu toate acestea, pentru a clarifica tipul de notificare, se adaugă o altă dintre cele patru clase posibile: Tip de notificare „Succes” (fond verde) Tip de notificare „Informații” (fond albastru) Tip de notificare „Avertisment” (fond galben) Notificare tip pericol (fond roșu) În ceea ce privește panourile, există și mai multă varietate aici! În mod implicit, un panou este adăugat cu clasa .panel, cu toate acestea, după cum s-a menționat, necesită o clasă după el care specifică tipul de panou (de obicei .panel-default ). Dar asta nu este tot! Cel puțin, panoul nostru trebuie să aibă un bloc imbricat cu clasa .panel-body pentru a găzdui conținutul principal și, la maximum, poate avea propriul antet (.panel-heading cu o clasă opțională .panel-title în interior ) și subsol (.panel-footer ): Titlu cu clasă specială.panel-title Conținutul principal al panoului Subsolul panoului
În plus, panourile din Bootstrap pot fi nestandard și diferă în design vizual în funcție de contextul utilizării lor. Contextele coincid practic cu contextele de alertă, dar au și o a cincea opțiune în tonuri de albastru strălucitor - .panel-primary. În plus, similar cu comentariile, există clasele .panel-success, .panel-info, .panel-warning și .panel-danger:
Până acum am luat în considerare doar relativ șabloane simple Cod bootstrap. Cu toate acestea, are soluții gata făcute pentru a crea elemente de interfață destul de complexe. De obicei, necesită utilizarea pluginurilor JavaScript, care pot fi obținute prin construirea propriei dvs. compilații Bootstrap. Și acum ne vom uita la un element destul de popular, care se numește de obicei un carusel sau un glisor. Îți permite să faci buclă în interiorul tău continut variat sub formă de imagini cu legende explicative sau blocuri de text. În ceea ce privește plasarea în cod Carusel bootstrap seamănă cu un jumbotron - ocupă toată lățimea containerului în care este imbricat sau pagina dacă este folosit în afara containerelor. Să aruncăm o privire la codul carusel ușor modificat și tradus de pe site-ul oficial: Slide 1 Slide 2 Slide 3 Înapoi Redirecţiona Cred că din comentarii înțelegi ce, unde și cum se anunță (singura nuanță este că trebuie să schimbi adresele pozelor cu ale tale, deoarece ale mele sunt goale). Dacă copiați codul de mai sus, veți obține acest carusel frumos, pe care apoi îl puteți personaliza la aspectul dorit cu clase de design suplimentare:
Puteți controla comportamentul caruselului folosind jQuery (dacă sunteți familiarizat cu sintaxa acestuia) sau prin atribute de date care sunt aplicate blocului în care este inițiat caruselul nostru. În exemplul de mai sus, avem un atribut care setează viteza de schimbare a diapozitivelor la 5000 de milisecunde (5 secunde) - data-interval . În plus, puteți modifica și alte opțiuni:
O sarcină comună în dezvoltare este, de asemenea, crearea de ferestre modale. În execuția web, acestea sunt blocuri care sunt afișate deasupra conținutului principal al paginii cu fundalul întunecat. Bootstrap vă permite să creați astfel de pseudo-ferestre destul de rapid și ușor. Iată un exemplu de fereastră modală simplă, complet funcțională: Afișează fereastra × Titlul ferestrei modal Un text :) Închide Salvați
Pentru a apela o fereastră modală, aveți nevoie de un buton, link sau alt element pe care se poate face clic, care trebuie să aibă două atribute de date obligatorii: data-toggle cu valoarea „modal” (indică comportamentul butonului pentru apelarea modalului) și data-target , a cărui valoare trebuie să fie identificatorul blocului care conține marcarea ferestrei modale (pentru linkuri, puteți folosi un href standard în acest rol). Blocul de ferestre modal în sine trebuie să aibă:
În general, structura este destul de logică și simplă. Principalul lucru este să-l respectați și să nu uitați de atributele necesare. concluziiÎntr-un articol, din păcate, este imposibil să atingem toate aspectele lucrului cu Bootstrap. Acest cadru se dezvoltă și se îmbunătățește constant, dobândind din ce în ce mai multe capacități noi. De aceea, în ultimii ani a devenit unul dintre cele mai populare în construirea site-urilor web. Când am scris acest articol, în primul rând, am vrut să arăt principiile de bază ale lucrului cu Bootstrap și să explic cele mai frecvent utilizate entități din acesta într-un limbaj mai ușor de înțeles. Cu toate acestea, dacă nu înțelegeți ceva, vă recomand să încercați să utilizați unul dintre editorii vizuali Bootstrap. Ele vă vor demonstra în mod clar toate elementele posibile și vă vor permite să obțineți rapid propriul ansamblu personalizat. Desigur, Bootstrap nu are tot ce are nevoie un dezvoltator web în munca de zi cu zi. Cu toate acestea, cadrul poate fi personalizat și modificat pentru a se potrivi nevoilor dvs., precum și completat cu pluginuri terțe, care sunt de obicei integrate în proiect fără probleme. Prin urmare, vă doresc dezvoltarea cu succes a Bootstrap pentru a vă economisi timp prețios! P.S. Se acordă permisiunea de a copia și cita în mod liber acest articol, cu condiția ca un link activ deschis către sursă să fie indicat și paternitatea lui Ruslan Tertyshny să fie păstrată. Înainte de a descărca, asigurați-vă că aveți un editor de cod (recomandăm Sublime Text 3) și anumite cunoștințe de HTML și CSS. Aici nu vom atinge fișiere sursă, dar puteți oricând să le descărcați și să le studiați singur. Ne vom concentra atenția asupra începerii cu fișierele Bootstrap compilate. Se încarcă fișiere compilateCel mai cale rapidăÎncepeți: obțineți versiuni compilate și reduse ale CSS, JS și imaginilor noastre. Fără documente sau fișiere sursă. 2. Structura fișieruluiÎn fișierele descărcate veți găsi următoarea structură și conținut, grupate logic după proprietăți comune și care conțin atât versiuni minimizate, cât și versiuni compilate. După descărcare, dezarhivați folder comprimat pentru a vedea structura (compilată) Bootstrap. Ar trebui sa fie cam asa: bootstrap / +-- css / ¦ +-- bootstrap . css ¦ +-- bootstrap . min. css +-- js / ¦ +-- bootstrap . js ¦ +-- bootstrap . min. js +-- img / ¦ +-- glificonuri - halflings . png ¦ +-- glificonuri - halflings - alb . png L-- README . mdAceasta este forma de bază a Bootstrap: fișiere compilate pentru utilizare rapidă și ușoară în aproape orice proiect Web. Vă oferim CSS și JS compilat (bootstrap.*) și, de asemenea, CSS și JS compilat și miniat (bootstrap.min.*). Fișierele imagine sunt comprimate folosind ImageOptim, o aplicație Mac pentru comprimarea imaginilor în PNG. Vă rugăm să rețineți că toate pluginurile JavaScript necesită jQuery. 3. Ce este inclusBootstrap este echipat cu HTML, CSS și JS pentru tot felul de lucrări, toate sunt listate în categorii pe care le găsiți în partea de sus a paginii. Secțiuni de document Elemente acceptateStiluri generale de corp pentru a reseta tipul și fundalul, stilurile de link, grila șablon și două elemente simple marcajele. Stiluri CSSStiluri pentru general elemente HTML: design, cod, tabele, formulare și butoane. Include, de asemenea, Glyphicons, un set grozav de pictograme. ComponenteStiluri de bază pentru componente simple interfață: file și butoane, bare de navigare, mesaje, anteturi de pagină etc. Pluginuri JavascriptCa și componentele, acestea Pluginuri Javascript sunt componente interactive pentru tooltips, blocuri de informații, componente modale etc. Lista componentelorToate împreună, componentele și pluginurile Javascript conțin următoarele elemente interfata:
După o scurtă introducere, ne vom concentra asupra folosind Bootstrap. Pentru a face acest lucru, vom folosi un șablon HTML de bază care include toate elementele enumerate în . Așa arată fișier tipic HTML: Pentru a face una ca asta Șablon bootstrap, trebuie doar să atașați fișierele CSS și JS corespunzătoare: Și totul este pus la punct! Adăugând aceste două fișiere, puteți dezvolta un site web sau o aplicație folosind Bootstrap. Bootstrap este un cadru special (adică un set de instrumente) care include HTML, CSS și Soluții JavaScript. Ideea principală a acestui cadru este creație convenabilă proiecte web care au adaptativ proprietate. Adaptabilitateîn acest caz, înseamnă că aspectul unui document web trebuie ajustat la dispozitivul care îl afișează - PC, tabletă, smartphone etc. Design vizual elementele individuale de aspect al paginii web sunt de asemenea incluse în cadru. Conexiune. Pentru a conecta cadrul, trebuie fie să descărcați un pachet de fișiere și să le conectați în etichetă , sau conectați-le de la distanță - în același loc. De exemplu, Pentru a afișa conținutul paginii în cadru, așa-numitul. sistem grilă ( sistem grilă), care vă permite să creați (în mod implicit) până la 12 coloane (și rândurile corespunzătoare) pe pagină, iar acest design poate depinde de dispozitivul pe care este vizualizată pagina. De exemplu, pentru dispozitivele de dimensiuni medii ( dispozitive medii), este posibil să se definească coloane astfel: Ceea ce ar însemna două coloane, dintre care prima are o lungime condiționată de 8, iar a doua - 4 din 12. În concluzie, aceste valori dau evident și 12. De fapt, lățimea coloanei este setată proporțional. Alt exemplu: Înseamnă că vor fi 3 coloane aceeasi latime. Sau Înseamnă 1 coloană întinsă pe toată lățimea ecranului. Evident, un aspect conceput pentru un desktop nu se va potrivi pe un dispozitiv mobil. Aspectele descrise mai sus pe un dispozitiv mobil nu vor fi afișate ca coloane, ci una sub alta - pentru că nu vor avea suficient spațiu orizontal. Cadrul a fost dezvoltat clase speciale pentru lucrul cu dispozitive mobile. Aceste clase pot fi specificate pentru un aspect alternativ în cazul unui dispozitiv mobil ( xs - dispozitive mobile, sm - dispozitive mici). De exemplu, Înseamnă că există două celule în aspect, dar proporția lățimii lor va fi diferită atunci când este afișată pe un PC sau pe un dispozitiv mobil: 8 și 4 pe un computer pe un rând sau 2 și 10 pe un dispozitiv mobil. În total, ambele perechi de valori dau 12, deci vor fi plasate pe aceeași linie. Crearea unui meniu. Pentru a crea un meniu folosiți clasa nav(butoanele sau linkurile sunt plasate în blocul acestei clase) și clasa bara de navigareîn care este plasată navigaţia terminată. De exemplu,
Bara de navigare- o componentă adaptivă care este folosită ca bloc cu navigarea pe site. Adaptabilitatea în acest caz este că aceste componente „se prăbușesc” atunci când sunt afișate pe dispozitive mobile dacă elementele de navigare nu se potrivesc pe orizontală. 19.05.2016 Salutare tuturor! Pasul 1. Descărcați „bootstrap 3” Sau descărcați de pe site-ul oficial: Dacă ați ales să descărcați de pe site-ul oficial, atunci când ajungeți acolo, faceți clic pe link-ul „Download Bootstrap” și indicați locația de pe computer unde doriți să descărcați arhiva cu „bootstrap 3”:
Pasul 2. Pregătire (despachetarea, îndepărtarea excesului) Acum creați un folder pe computerul dvs. în care veți efectua diverse experimente cu fișierele „bootstrap 3”, acesta va fi terenul dvs. personal de testare pentru a învăța elementele de bază ale „bootstrap 3”.
Să ne uităm acum la fiecare folder din „bootstrap 3” și să aflăm ce fișiere sunt prezente acolo și pentru ce sunt necesare. Standard structura fișierului„Bootstrap”: │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css │ ├── bootstrap.js │ └── bootstrap.min.js └── fonturi/ Atenție: dacă ați descărcat „Bootstrap 3” de pe site-ul oficial, este posibil să existe deja mai multe fișiere.
bootstrap.css - acest fișier CSS conține toate stilurile gata făcute. Vom conecta acest fișier la pagina web. Șterg toate celelalte fișiere: bootstrap.min.css este exact același fișier cu „bootstrap.css”, doar o versiune comprimată. Ștergeți fișierul „bootstrap.min.css”. bootstrap-theme.css este un fișier CSS pentru o temă Bootstrap gata făcută. Ștergeți fișierul „bootstrap-theme.css”. bootstrap-theme.min.css - exact același fișier ca „bootstrap-theme.css”, doar o versiune comprimată. Ștergeți fișierul „bootstrap-theme.min.css”. "dosarul fonturilor" Dosarul fonturi stochează fișiere cu aceleași fonturi, dar cu extensii diferite. „dosarul js” Există 2 fișiere în folderul js: „bootstrap.js” și „bootstrap.min.js”. Acestea sunt două fișiere identice cu un set de script-uri js gata făcute. Singura diferență este că „bootstrap.js” este versiunea completa, „bootstrap.min.js” este o versiune comprimată. Ștergeți fișierul „bootstrap.min.js”. După operația de îndepărtare fișiere inutile veți avea deja această structură de fișiere „Bootstrap”: │ └── bootstrap.css │ └── bootstrap.js └── fonturi/ ├── glificonuri-înjumătățiți-regulate.eot ├── gliphicons-halflings-regular.svg ├── glificonuri-înjumătățiți-regulate.ttf └── glificonuri-înjumătățiți-obișnuiți.woff Adică în foldere: CSS – se află fișierul „bootstrap.css”. Pasul 3. Creați fișierul „index.html” și conectați fișierele În rădăcina folderului „Poligon pentru bootstrap 3”, creați un fișier „index.html” cu următorul cod și cu: Bootstrap 3 la Hello, world! În rândul nr. 10 – includ fișierul „bootstrap.css”:
În rândul nr. 25, includ fișierul „bootstrap.js”:
Aceasta este imaginea generală pe care ar trebui să o aveți în folderul „Poligon pentru bootstrap 3”:
Asta este toată pregătirea și conectarea „bootstrap 3” la fișierul „index.html”. Dacă deschideți fișierul „index.html” prin orice browser (de exemplu, OPERA, EI, Mozilla Firefox, Google Chrome, browser Yandex etc.), atunci veți vedea această pagină pe ecran:
Nu pare nimic special, nu trebuie să folosiți „bootstrap 3”, dar aceasta este doar o conexiune și doar a doua lecție. Veți vedea și ce avantaje are Bootstrap 3 Framework. Postarea anterioară Ultimele note
|
