Pornire rapidă Bootstrap. Adăugarea de stiluri personalizate la Twitter Bootstrap. Bootstrap tematică sau schimbarea aspectului elementelor
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 fel, puteți edita codul sursă și personaliza cadrul în orice mod 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:
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ă 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 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 bootstrapOrice 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; 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. Regulile generale pentru lucrul cu o grilă sunt simple; 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 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 orice bloc poate exista un număr nelimitat de 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
Î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:
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 vă voi arăta un alt truc foarte bun - abilitatea 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ă î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ă 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ă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 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 receptive și este de fapt 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.
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 colțul din dreapta 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 o listă cu marcatori standard. Asta e, totul este destul de simplu, poți folosi acest cod pentru a implementa elementele derulante.
Adăugați cu folosind Bootstrap pesmet (pesmet)Î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; )
Dacă doriți să schimbați cumva aspectul pesmetului, 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:
Bower | $ bower install bootstrap |
npm | $ npm instalează bootstrap@3 |
Compozitor | $ compozitor necesită twbs/bootstrap |
Pentru experimentele cu Bootstrap, prima opțiune cu o conexiune externă este destul de potrivită. 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, înlocuind linkurile cu Componentele bootstrap de la extern la local:
Apropo, folderele implicite ale Bootstrap au mai multe fișiere suplimentare, care poate fi îndepărtat 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 foarte mult șablonul de design standard.
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, va trebui să cunoașteți engleza și să înțelegeți cel puțin principii de baza layout-uri folosind 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 a arhivei 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 - această secțiune 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 ei 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 dorite, puteți utiliza meniul lateral din 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, dacă pe scurt și mai clar, atunci Grilă de bootstrap poate fi comparat cu principiul odată folosit aspect tabelar. Aici trebuie să creați și un container (analog cu un tabel -
).
Algoritm general Lucrul cu grila 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 management mai bun adaptabilitate 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: cu cuib într-un container nou și cu cuib numai într-o 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 fonturile pentru pictogrameBootstrap 3 are un font de pictograme bun în pachetul său de bază - Glyphicons. Ideea unor astfel de fonturi este că, în loc de simboluri alfabetice, conțin diferite grafice vectoriale. 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 este recomandat să nu reatribuiți stilurile standard pentru clasa dorită cu un simbol, ci să adăugați la lista claselor SPAN care o inserează o altă clasă suplimentară cu parametrii necesari proiectați sau adăugați stiluri prin atribut de stil. De exemplu, așa: Myrub(dimensiunea fontului:10px; culoare:verde;) Cost - 999 Cost - 999 Diferite tipuri de blocuriDupă 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 marimea standard. Acest tip de bloc este uneori numit banner și este adesea folosit ca ecran de diapozitiv de titlu în paginile de destinație (site-uri populare de o 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 non-standard și pot varia 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: CaruselPâ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. Vă permite să parcurgeți diverse conținuturi sub formă de imagini cu subtitrări explicative sau blocuri de text. În ceea ce privește plasarea în cod, caruselul Bootstrap seamănă cu un jumbotron - ocupă întreaga lățime a 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 necesare: data-toggle cu valoarea „modal” (indică comportamentul butonului de apel modal) și data-target , a cărui valoare trebuie să fie identificatorul blocului care conține marcajul 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. Permisiune acordată pentru copiere și citare liberă. Acest articol sub rezerva indicarii deschise link activ la sursa și păstrarea paternului lui Ruslan Tertyshny. În această lecție vom învăța cum să descărcați și să conectați cadrul Bootstrap (versiunea 3 sau 4) la site. Setul de instrumente de învățare BootstrapSetul minim de instrumente (programe) pentru crearea de proiecte web folosind cadrul Bootstrap:
Crearea unui proiect web al cărui design se bazează pe cadrul Bootstrap începe întotdeauna cu descărcarea acestuia. Există diferite moduri de a descărca cadrul Bootstrap. De exemplu, printr-un link aflat pe getbootstrap.com sau folosind un lot managerul npm, Compozitor, Bower sau alții. Modul de a face acest lucru depinde de experiența dvs. sau de situația specifică. Cum să instalați cadrul Bootstrap folosind manageri de pachete, precum și cum să-l construiți folosind Grunt, pot fi citite în acest articol. Cel mai simplu mod de a descărca este să folosești linkul. Există 2 link-uri pe site-ul Bootstrap. Primul link conține gata de utilizare fișiere CSSși JavaScript. Acest ansamblu este folosit în principal pentru studierea cadrului sau pentru utilizarea în proiecte, al căror design poate fi realizat în stilurile implicite stabilite de autori. Descărcați Bootstrap 3.4.0 Descărcați Bootstrap 4.2.1Al doilea link conține cadrul în codurile sursă. Această versiune este mai convenabilă pentru dezvoltarea site-ului web, deoarece... face foarte ușor schimbarea stilurilor, schema de culori componente, configurați-le etc. Dar acestea fișiere sursă, va trebui să fie compilat și redus înainte de a fi folosit pe o pagină. Acest proces de obicei automatizat, de exemplu, folosind Gulp. Codurile sursă Bootstrap 3.4.0 Codurile sursă Bootstrap 4.2.1 Despachetarea arhivei BootstrapDupă descărcarea arhivei (cu gata de utilizare aplicarea CSSși fișiere JavaScript), trebuie să fie despachetat în directorul dvs. de proiect web. Dacă te uiți la arhivă, vei observa că are următorul conținut (folosind Bootstrap 3.4.0 ca exemplu): Bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ─me bootstrap───. / │ ├ ── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-halflings-regular├──glyphicons-halflings-regular. .ttf └ ── gliphicons-halflings-regular.woff Directorul css conține stilurile cadrului Bootstrap, iar directorul js conține pluginuri pentru a face unele componente să funcționeze. Pluginurile sunt scrise folosind funcții biblioteci jQuery. Prin urmare, înainte de Bootstrap JS trebuie să includeți biblioteca jQuery. După cum puteți vedea, sunt 2 în arhivă versiuni CSSși fișiere JavaScript, de ex. cu și fără sufixul min. Versiunea fișierului cu min nu diferă de cea fără min , este pur și simplu minimizată (comprimată). În producție (pe un site de producție), este mai bine să utilizați versiuni minimizate ale fișierelor. Aceste fișiere au dimensiune mai micăși, prin urmare, oferă mai mult încărcare rapidă paginile site-ului. Versiunile neminificate sunt mai convenabile de utilizat în timpul dezvoltării, precum și pentru studiu. Pe lângă aceste fișiere, în această arhivă Fontul pictogramei „Glyphicons” este de asemenea inclus. Fontul Glyphicons conține peste 250 de pictograme din setul Glyphicon Halflings. Fontul este prezentat folosind 4 fișiere: glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf, glyphicons-halflings-regular.woff). O astfel de varietate de formate pentru același font este necesară pentru a asigura afișarea acestuia în toate browserele. Puteți citi despre pictograme în format font, precum și ce avantaje și dezavantaje au, în acest articol. Arhiva cadrului Bootstrap 4 nu este practic diferită de Bootstrap 3. Diferența sa principală este că nu conține fontul „Glyphicons”. Dacă aveți nevoie de pictograme de font, va trebui să le conectați singur. De exemplu, folosind unul dintre următoarele seturi: FontAwesome, Octicons, Glyphicons, IcoMoon sau altele. Dacă nu doriți să utilizați un font gata făcut, ci să creați propriul font, care va consta numai din pictogramele necesare, atunci utilizați aceasta informatie. În plus, arhiva Bootstrap 4 conține și fișierele bootstrap-grid.css și bootstrap-reboot.css. Aceste fișiere sunt necesare doar pentru cei care nu au nevoie de întregul cadru, ci doar de o parte a acestuia. Primul fișier (bootstrap-grid.css) conține grila Bootstrap, iar al doilea (bootstrap-reboot.css) este un normalizator care setează stilurile de bază, astfel încât să fie aceleași pentru toate elementele HTML din toate browserele. Conectarea Bootstrap la o pagină HTMLProcesul de instalare a cadrului Bootstrap 3 constă în conectarea următoarelor fișiere la pagina HTML 5: Notă: Fișiere JavaScript este mai bun conectați înainte de închidere eticheta corporală() deoarece acest lucru va asigura că conținutul principal al paginii web se încarcă și se afișează mai rapid. ... Conectarea cadrului Bootstrap 4 se face astfel: ... De asemenea, puteți conecta Bootstrap 4 folosind un CDN (nu trebuie să descărcați Bootstrap în proiect): Copiat ... CDN Bootstrap 3.4.0: Copiat
Pentru a testa funcționalitatea cadrului, vom crea un buton care, atunci când este atins, va afișa un popover tooltip. Aduceți cursorul la mine $(funcție () ( $("").popover((trigger:"hover")); )); Î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șierele sursă, dar le puteți oricând descărca și studia 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. Odată descărcat, dezarhivați folderul comprimat pentru a vedea structura Bootstrap (compilată). 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 rapid și ușor de folositî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 de corpuri comune pentru a reseta tipul și fundalul, stilurile de link, grila șablonului și două elemente simple de marcare. Stiluri CSSStiluri pentru elemente HTML comune: 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 JavascriptLa fel ca și componentele, aceste plugin-uri Javascript sunt componente interactive pentru sfaturi cu instrumente, blocuri de informații, componente modale și multe altele. Lista componentelorToate împreună, componentele și pluginurile Javascript conțin următoarele elemente interfata:
După o scurtă introducere, ne vom concentra pe utilizarea 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 crea un șablon Bootstrap ca acesta, atașați pur și simplu 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. |