Băieți, cred că Bootstrap este un lucru foarte tare. De ce așa, voi încerca să explic în acest articol. Ei bine, să mergem. Îmi cer imediat scuze pentru faptul că aproape toată prima jumătate a articolului a fost scrisă fără poze, există doar teorie, o explicație a modului în care funcționează grila. Dar acest lucru este foarte important! Cine dintre voi are nevoie, îl va lua în mâini, îl va citi și, sper, va înțelege. A doua jumătate a articolului este deja percepută mai simplă, există mai multe exemple cu capturi de ecran.
Bootstrap - ce este?
Deci, să începem cu o întrebare importantă. Bootstrap este un framework css și js, de fapt, un set de fișiere cu cod gata scris. 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 cum doriți să refaceți cadrul pentru dvs. Este perfect.
Instalarea Bootstrap
Dacă trebuie doar să conectați fișierele cadru la documentul 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ă includeți pe cele de care aveți nevoie. voi face scurtă recenzie aceste fisiere:
- bootstrap.css și bootstrap.min.css sunt versiuni necomprimate și comprimate ale codului cadru css. Se recomandă conectarea la proiectul de lucru fișier comprimat, astfel îmbunătățiți ușor viteza de descărcare. Dar dacă intenționați să vizualizați codul într-un fișier, includeți versiunea necomprimată.
- bootstrap.js și bootstrap.min.js - fișier script
- folderul cu fonturi și fișierele glificonuri din el sunt fontul pictogramei Bootstrap. Conține aproximativ 200 de pictograme. În cele mai multe cazuri, acestea vor fi suficiente pentru tine, uneori trebuie să-i conectezi pe alții. Vom vorbi mai multe despre fonturile pentru pictograme mai târziu.
Acesta este setul standard al cadrului. De fapt, îl puteți personaliza cu ușurință și îl puteți schimba pentru dvs. De exemplu, nu utilizați deloc scripturi sau conectați doar o singură rețea. În general, vom vorbi și despre asta.
Documentație rusă Bootstrap
Merge la getbootstrap Probabil ați observat că totul aici este în engleză. De asemenea, am avea nevoie de ajutor rusesc pentru cadru. Să o găsești este ușor. Pentru a face acest lucru, mergeți de la pagina principală la secțiune 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ă vei înțelege totul.
Plasă bootstrap
Vă place sau nu, 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 preia implementarea adaptabilității, trebuie doar să setați clasele corecte pentru blocuri.
Care sunt aceste clase? Mergem la documentare, ne va ajuta foarte mult. Accesați secțiunea CSS - Sistem grilă. Regulile generale pentru lucrul cu o grilă sunt simple, acum le voi enumera.
Cum se lucrează cu o rețea?
Gândiți-vă la asta ca la un tabel html. Dacă ați scris vreodată cod html pentru tabele, atunci știți că tot conținutul este plasat în eticheta tabel, un rând este plasat în eticheta tr și celulele sunt deja plasate în ea - td .
Deci, în rețea totul este la fel. Clasa container servește ca un container generic pentru grilă. Există 2 opțiuni pentru grila bootstrap - complet cauciuc și având încă o lățime maximă finită. Deci, când a fost întrebat bloc comun din 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 cu lățime de 1920 de pixeli, îl va vedea pe lățime completă.
În consecință, primul lucru atunci când dezvoltați un site, trebuie să decideți care va fi șablonul - complet cauciuc, sau lățimea acestuia trebuie încă limitată.
Grozav, în blocul container, ar trebui să plasați un rând de grilă. Trebuie să puneți toate blocurile care sunt pe aceeași linie în el. Adică, dacă luăm cel mai tipic șablon: antet, corp, coloană din dreapta și subsol, atunci sunt 3 coloane. Primul va avea doar un antet, al doilea va avea conținut și o bară laterală, iar ultimul va avea un subsol. Markupul pentru un astfel de site ar fi cam așa:
Dar deocamdată, acesta este un marcaj incorect, 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 setată nu în pixeli, ci în procente.
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 un aspect 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 cu clasa col- în Bootstrap, dar aceasta este o clasă compusă, deci doar col- nu este scris niciodată. 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, cu o lățime mai mică de 768 px.
Aici sunt 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.
Înțelegerea ei este destul de simplă. În primul rând, creăm un antet, acesta nu poate fi plasat deloc în grilă, deoarece oricum 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 doar col-, cu această clasă, de fapt, îi spunem 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 (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 nu și pentru cele mai mici. 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. Iată o caracteristică, rețineți-o.
Ei bine, dacă valoarea lățimii nu este salvată pe ecrane mai mici, atunci ce se întâmplă? Este aruncat. Iată cum merge treaba:
col-sm-4 - pe ecranele mici, blocul va ocupa 33% din lățime, va fi la fel și pe ecranele md și lg, dar pe xs, adică pe cele mai mici, lățimea va fi resetată la 100% . Deci, amintiți-vă încă o regulă simplă: dacă nu este setat nimic pentru ecrane mai mici, atunci blocul va fi afișat la 100% lățime pe ele.
Practic, î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%. Așa este, de obicei dispozitive mobile Site-urile merg exact într-o coloană.
Lăsați coloana laterală să fie o treime din lățimea rândului pe aceleași ecrane mici, medii și mari. Ei bine, pe cele mai mici, așa 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. Bine, principii de baza Am analizat funcționarea rețelei, dar mai trebuie să vedem cum funcționează...
Grilă imbricată Bootstrap
Cert este că acum am spart șablonul doar în blocurile principale, dar pot avea și o împărțire în coloane în interior. De exemplu, conținutul poate afișa produse în mai multe coloane. Cum să fii? 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 următoarea concluzie:
În cadrul oricărui bloc poate exista un număr nelimitat de grile. De exemplu, într-un bloc cu produse, o grilă pentru separarea mărfurilor, în blocul cu un singur produs, puteți crea o altă grilă, de exemplu, pentru a separa prețurile, informații despre disponibilitate și informații suplimentare. informație.
Acum vom incerca sa facem o alta grila in interiorul blocului cu continut pentru a aranja produsele in 3 coloane. Deci, luăm blocul în care avem conținut:
Și îi scriem:
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 și vor fi deja 3 blocuri cu produse pe rând. Doar copiați blocul col-sm-4 cu cardul produsului și lipiți-l de încă 2 ori, va arăta așa (puteți face orice poză a produsului, eu am făcut una grozavă):
Am omis un alt punct important, astfel încât imaginile să se adapteze blocurilor în care se află, fiecăreia dintre ele trebuie să primească clasa img-responsive. Eu, dacă tu, ca mine, cred că este incomod să faci asta, atunci scrie doar în stilul tău.css astfel:
Img( lățime maximă: 100%; înălțime: automat; afișare: bloc; )
Gata, salvați acest cod și includeți fișierul dvs. css în proiect. Acum imaginile vor răspunde implicit.
Ei bine, a ieșit destul de bine? Da, și 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 bara 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ă:
Ce va face clasa hidden-xs în acest caz? Acesta va ascunde subsolul pe dispozitivele 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 utilități 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 specifică pe ce ecrane să ascunde sau să afișeze blocul.
- Pentru vizibil, trebuie să adăugați și una dintre cele trei valori: block - afișați elementul ca bloc, inline-block - ca 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 prin spații.
- visible-xs-inline visible-md-block — elementul nu va fi afișat deloc pe ecrane mici și mari. Pe extra-mic va fi litere mici, iar pe mediu va fi un 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 nimic altceva. Sper ca întelegi. Să o punem în practică. Avem un șablon de testare, deși unul foarte primitiv.
O sarcină: faceți bara laterală să dispară pe ecranele mici și încă un produs pe cele mai mici ecrane. Și astfel încât pe dispozitivele xs, mărfurile erau deja în 2 coloane, și nu în 3.
Încercați să o faceți singur, editând doar codul html. Ce trebuie făcut? Mai întâi, să ne ocupăm de coloana, pentru a o ascunde pe ecranele sm, trebuie doar să adăugăm clasa hidden-sm la ea.
Grozav, acum trebuie să adăugăm clasa hidden-xs la al treilea produs ș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 de produse va dispărea la această lățime, ambele blocuri de produse se vor potrivi perfect pe 1 rând, astfel:
Excelent! Înțelegând 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ă complet
În continuare, voi arăta încă 1 truc foarte bun - 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ă 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:
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, deplasați caseta la stânga cu 33% din lățimea containerului părinte (1/3 umplutură stânga, 1/3 lățime casetă, ⅓ padding dreapta, se centra).
Clasa col-xs-offset-6: pe ecranele foarte mici și mici, deplasați la stânga cu 25% (capturare stânga ¼, lățime bloc ¼, umplutură dreapta ¼).
Sper că înțelegeți esența și, dacă este necesar, aplicați aceste clase.
Componente bootstrap și exemple de utilizare a acestora
Te felicit. Tocmai am trecut cel mai mult subiect important, asociat cu cadrul. Este importantă grila și lucrul cu ea. Lucrul cu componente constă deja în faptul că pur și simplu mergeți la documentație, copiați acolo codul componentei dorite și, dacă este necesar, îl schimbați singur. Dar voi da în continuare exemple suplimentare de utilizare a componentelor.
Plutește și curge rapid
Clasele pull-left și pull-right vă permit să faceți rapid orice bloc să plutească împingându-l la stânga sau la dreapta. Nu uitați să anulați încheierea. Puteți utiliza clasa clearfix pentru aceasta.
Bootstrap: Meniu de răspuns 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 pentru mine.
De fapt, pe Bootstrap este foarte ușor să faci nu doar un meniu adaptiv, ci și așa-zisul mobil, care este complet restrâns pe ecrane mici și se ascunde sub un singur buton. Această abordare poate fi văzută la mulți ș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.
Așadar, primul lucru pe care îl voi face este să elimin blocul de antet, deoarece meniul nostru va fi, de fapt, antetul în cazul șablonului meu. Codul meniului 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:
Faptul că există o mulțime de coduri, nu vă fie frică de acest lucru. Așa arată site-ul acum:
Dar dacă meniul dvs. nu va ocupa î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 limita pur și simplu lățimea și centrul. Fie înlocuiți inițial container-fluid cu container .
După cum puteți vedea, am adăugat un logo în meniu, două elemente simple, un element derulant și un formular de căutare. Adică sunt multe elemente. Puteți personaliza cu ușurință meniul pentru dvs., adăugând propriile clase la acesta. Dar pentru moment, scopul meu este doar să vă arăt această componentă.
Iată cum va arăta meniul pe dispozitivele cu o lățime a ecranului mai mică de 768 px:
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 realizat un element de meniu derulant în Bootstrap, vom scoate acest cod pentru o privire mai atentă:
Deci, containerul pentru elementul 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 scrii atribut de date, pe care îl vedeți în cod, nimic nu va funcționa fără el. De asemenea, trebuie să vă asigurați că fișierul bootstrap.js este inclus în 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 drop-down, dar 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 cu Bootstrap (pesmet)
În multe magazine puteți găsi așa-numitul bloc de pesmet, care conține calea plină la pagina curentă. Folosind cadrul, acest lucru este, de asemenea, ușor de făcut, vezi codul:
De fapt, este suficient să indicați clasa breadcrumb listei numerotate și să introduceți elementele obișnuite ale listei în ea. Apropo, voi centra titlurile de al doilea nivel în șablon (acesta trebuie scris în css):
H2( text-align: center; )
Dacă vrei să schimbi cumva aspect breadcrumb, este suficient să faceți referire la selectorul css.breadcrumb . De exemplu, puteți elimina culoarea de fundal astfel:
Pesmet( fundal: transparent; )
Așa arată site-ul acum:
Mesele Bootstrap
În mod implicit, tabelul se va întinde pentru a umple întreaga fereastră, așa că înfășurați-l într-o casetă cu lățime limitată pentru a limita dimensiunea. În mod implicit, arată groaznic, dar dacă adăugați clasa tabelului la eticheta tabelului, totul va fi mult mai frumos:
![](https://realbazar.ru/wp-content/uploads/2020/03/" alt=)
| (Data) | (Timp) | (Titlu) ((Numărul de accesări)) |
Pentru știri citite, specificați o clasă specială:
(titlu)
Pasul 3. Formular pentru trimiterea unui link către știri.
Din nou, totul este simplu, Bootstrap oferă mai multe stiluri prefabricate forme: o formă obișnuită, un formular cu o singură linie, un formular de căutare ... Avem nevoie de un al doilea, îl terminăm în containerul nostru în fața tabelului:class="span10"- Bootstrap presupune construirea unei interfețe bazată pe o grilă de 12 coloane, elementele noastre putând fi aliniate la aceasta. Prin încercări și erori științifice, am venit cu o lățime a câmpului de intrare de 10.
Pasul 4,5,6. Pălărie.
Ideea mea despre cum ar trebui să arate un site ușor de utilizat este minimalistă: tot ceea ce nu este necesar este ascuns, tot ceea ce nu ar putea fi ascuns este palid. Ascundem formularele din meniul derulant, facem link-uri către rss și extensia Chrome palid. Împachetăm toate acestea într-un antet, pe care îl lipim în partea de sus a site-ului (clasa = „navbar navbar-fix-top»):...
Formele în sine:
...
Un punct important. Pentru ca acesta să funcționeze, trebuie să conectați câteva scripturi:
Pasul 7. Subsol.
Adăugarea containerului principal:lansare 2012/02/19 23:49 *****
Rezultat
Epilog
Twitter Bootstrap a făcut posibil, fără prea mult efort și cunoștințe, fără a scrie o singură linie de css și fără a sparge prea mult codul html, obținerea unei interfețe prototip foarte drăguță pe care oamenii nu se rușinează să o arate. Dacă sunteți interesat, în următorul articol vă voi spune cum, fără cunoștințe profunde de PHP + MySQL (având doar abilități de programare de bază), să implementați funcționalitate care vă permite să vă arătați ideea de un milion de dolari nu doar pe hârtie, ci și în forma unui prototip de lucru.Vă mulțumim pentru atenție!
UPD: Nu vreau să elimin subiectul din „Sunt PR”, am eliminat toate linkurile inutile
Salut! În acest articol vă voi spune cum să instalați și să conectați cadrul Bootstrap. Puteți citi despre ce este Bootstrap.
Instalare cadru standard
Am spus deja multe despre instalarea standard în articolele trecute. Totul este simplu aici. Mergem pe site-ul oficial getbootstrap.com, faceți clic pe elementul Noțiuni introductive și selectați prima opțiune. Astfel, descarcăm versiunea completă a bootstrap-ului cu toate componentele js și css.
Bootstrap CDN- aceasta este capacitatea de a conecta cadrul de la stocarea CDN fără a descărca fișierele acestuia pe computer. Desigur, în acest caz, nu se poate vorbi de vreo personalizare.
Personalizarea cadrului
Dar adevărul este că bootstrap-ul implicit conține multe componente, iar unele dintre ele pur și simplu s-ar putea să nu vă fie utile atunci când dezvoltați un anumit site. De exemplu, construiți un magazin online. Poate că nu aveți nevoie de modal și sfaturi cu instrumente și nu aveți nevoie de multe dintre componentele css. În acest caz, ar fi înțelept să nu includeți aceste componente în cadru.
Sau creezi un blog simplu. Să presupunem că nu aveți nevoie de nimic, așa că puteți lăsa doar plasa și câteva dintre cele mai importante componente.
Alegerea doar a ceea ce aveți nevoie este o abordare profesională pentru construirea de site-uri web și utilizarea Bootstrap. În mod implicit, versiunea necomprimată a stilurilor CSS ale cadrului în ultima versiune cântărește 143 kiloocteți. Și scripturile au peste 60 de kiloocteți. Da, dacă comprimați codul, puteți obține o reducere a greutății de 20-40%, dar totuși fișierele nu vor fi cele mai ușoare.
Dacă, de exemplu, dezactivați toate componentele și lăsați doar grila (acest lucru se face foarte des), atunci greutatea css va fi de numai 15-20 kiloocteți, iar în formă comprimată va fi cu câțiva kiloocteți mai puțin. Deci vei realiza viteza maximași optimizarea proiectului dumneavoastră.
Bine, asta a fost doar o teorie. Pentru a personaliza cadrul, vizitați același site oficial și accesați Personalizați.
Selectarea componentelor necesare
În primul rând, aici puteți configura ce componente doriți să includeți în versiunea dvs. Bootstrap. Să începem cu CSS:
Stiluri media de imprimare– interogări media pentru tipărire. Dacă nu intenționați să imprimați pagini de site, îl puteți dezactiva.
Tipografia, codul, tabelele, formularele și butoanele sunt tot ceea ce puteți stila singur în css dacă doriți cu adevărat. Desigur, acest lucru va dura timp, dar dacă designul elementelor dvs. este foarte diferit de ceea ce oferă cadrul implicit, puteți dezactiva toate aceste stiluri CSS și le puteți scrie singur.
Sistem grilă De fapt, este o grilă. Nu văd niciun motiv să-l dezactivez vreodată, deoarece aceasta este puterea principală a cadrului. Datorită grilei, puteți adapta cu ușurință șabloane la orice dispozitiv, iar astăzi, în era traficului mobil, acest lucru este extrem de important. Sub nicio formă nu îl vom opri.
Utilități receptive- utilitare adaptive, recomand de asemenea să nu le dezactivați niciodată. Vom vorbi despre utilitățile adaptive în articolul următor, unde vom arunca o privire mai atentă asupra sistemului de rețea. Acestea sunt clase care vă permit să ascundeți un element sau să îl faceți vizibil la o anumită lățime a ecranului. Foarte convenabil și util.
Acestea sunt, de exemplu, lucruri precum grupuri de liste, bare de butoane, pictograme, panouri, alerte, paginare, firimituri de pâine etc. De asemenea, puteți dezactiva fontul pictogramei. Acest lucru ar trebui făcut în cazul în care nu aveți nevoie deloc de pictograme pe site sau când conectați un alt set. De fapt, ar trebui să stai și să te gândești la ce ai nevoie de la toate componentele prezentate și la ce nu. Fiecare site individual va avea propriul set, deoarece peste tot există un design și o funcționalitate diferită.
Componente Javascript
Acestea sunt meniuri derulante, sfaturi cu instrumente, modal, glisoare. Dacă nu aveți nevoie de nimic din toate acestea, dezactivați-l. În unele cazuri, toate componentele pot fi foarte utile atunci când aveți un meniu derulant pe site și un glisor pe pagina principala, și ferestre modale. În unele cazuri, doar 1-2 componente pot fi utile, atunci nu este nevoie să prelungiți codul, să dezactivați componentele inutile.
pluginuri jquery
Aici puteți dezactiva pluginurile bibliotecii jquery care ajută componentele javascript să funcționeze corect. În consecință, dacă nu utilizați un glisor pe site-ul dvs., atunci nu aveți nevoie de un plugin pentru crearea caruselelor, dacă nu aveți nevoie de sfaturi cu instrumente, atunci dezactivați tooltips.js etc.
Pluginul scrollspy monitorizează poziția textului și, în funcție de aceasta, evidențiază unul sau altul element de meniu. De obicei, o astfel de caracteristică este necesară pe paginile de destinație, practic nu am văzut-o pe site-urile obișnuite. Ei bine, și așa mai departe. Gândește-te bine la ceea ce ai nevoie și la ce nu.
Mai puține variabile
În continuare, se va deschide în fața ta un element uriaș, în care vor fi o mulțime de sub-articole cu setări pentru Mai puține variabile. Aici puteți schimba aproape totul: culori, dimensiuni de font, puncte de întrerupere, numărul de coloane din grilă, umplutură etc.
Desigur, pentru a face acest lucru, trebuie să cunoașteți cel puțin elementele de bază ale Less, sau cel puțin să navigați intuitiv în aceste formulare.
De exemplu, dacă vedeți variabila @font-family-base, atunci trebuie să înțelegeți cel puțin intuitiv că aceasta este responsabilă pentru numele fontului care este fontul de bază pe site. Ei bine, variabila @font-size-base stabilește dimensiunea fontului de bază. În mod implicit, în bootstrap este de 14 pixeli.
Puteți edita toate aceste câmpuri. Schimbați doar 14 la 20 și acum puteți descărca un cadru care are o dimensiune implicită a fontului de 20 de pixeli. În consecință, puteți ajusta imediat dimensiunea antetelor etc.
Configurarea rețelei
Setarile sistemului grid sunt si ele foarte interesante pentru noi, iata-le:
După cum puteți vedea, puteți modifica numărul de coloane și lățimea indentărilor dintre ele în câteva secunde. Variabil grid-float-breakpoint setează punctul în care meniul mobil se prăbușește într-o pictogramă.
Dacă modificați valoarea, de exemplu, la @screen-md-min, atunci la o lățime de 991 pixeli sau mai puțin, va avea loc plierea. De asemenea, puteți elimina această variabilă și puteți scrie valoarea în pixeli. De exemplu, 520 pixeli. Apoi plierea meniului va avea loc numai pe smartphone-uri și telefoane mobile.
De fapt, pagina de personalizare Bootstrap are o mulțime de setări, dar, în general, acest mod de personalizare (folosind pagina Customize de pe site-ul oficial) nu este cel mai rapid și mai convenabil. În continuare, vă voi arăta cea mai rapidă cale.
Utilizați pagina Personalizare atunci când trebuie să faceți 2-10 editări ale cadrului sau doar dezactivați componentele necesare. Dacă veți modifica mai multe valori, va trebui să utilizați o metodă diferită.
De fapt, când vă configurați versiunea framework-ului, faceți clic pe butonul mare din partea de jos a paginii. Acesta va compila versiunea Bootstrap pentru tine și o va descărca pe computer. Apoi trebuie doar să vă conectați și să utilizați. Am vorbit deja despre conexiune în articolele anterioare (inclusiv cum se face pe WordPress).
Descărcarea mai puține surse și editarea lor
După cum am spus, dacă trebuie să faceți multe editări la codul sursă al cadrului și doriți să vedeți modificările instantaneu, atunci veți avea nevoie de mai puține surse. Le puteți descărca în același loc cu versiunea completă a cadrului - în secțiunea Noțiuni introductive.
Pentru a lucra cu surse Less și pentru a le edita, aveți nevoie de:
Cel puțin unele cunoștințe despre css și mai puțin sau alt preprocesor
Mai puțin compilator (poate fi descărcat gratuit)
De fapt, nu mă voi opri asupra personalizării prin mai puține surse, dar aceasta este cea mai mare cea mai buna metoda, pentru că nu va trebui să vizitați pagina Personalizare de 100 de ori și să compilați din ce în ce mai multe versiuni ale cadrului.
Bootstrap tematică sau schimbarea aspectului elementelor
Implicit în versiunea completa framework în folderul css, puteți găsi și fișierul bootstrap-theme.css. Nu este necesar să vă conectați la site. Ce funcții îndeplinește? Fișierul este necesar numai pentru a modifica, dacă este necesar, stilurile pentru elementele de care aveți nevoie.
Același rol poate fi jucat de propriul tău style.css, în care poți, de asemenea, să înlocuiești stilurile. Bootstrap-theme nu este un fișier obligatoriu, este folosit mai mult pentru comandă. De exemplu, aveți 3 fișiere:
bootstrap.css- desigur, acesta este codul cadrului în sine;
bootstrap-theme.css- aici suprascrieți stilurile pentru elementele bootstrap-ului;
stil.css- și în acest fișier scrieți stiluri pentru elementele dvs.
Apoi veți avea ordine în cod și în structura proiectului. Dar nimeni nu vă interzice să efectuați toate operațiunile într-un singur fișier - stil.cssși nu folosiți deloc un fișier temă.
Cel mai important lucru este să includeți fișierul temă și propriul dvs. css în marcajul html mai târziu decât fișierul de cod cadru, astfel încât stilurile să fie suprascrise cu succes.
Exemplu de tematizare
După cum am spus, în mod implicit Bootstrap grupează fișierul tema bootstrap. Încercați să-l conectați. Observ, conectează-te după fișierul principal.
În mod implicit, butoanele din bootstrap arată astfel:
Și așa se schimbă aspectul lor după conectarea fișierului cu tema:
După cum puteți vedea, apare un ușor gradient. În consecință, puteți rescrie codul în fișier tema bootstrapși obțineți stilurile dvs. pentru nasturi. Dar poate vă întrebați de ce nu faceți aceste modificări direct în bootstrap.css? Ei bine, adevărul este că noile versiuni ale cadrului sunt lansate în mod constant și, dacă decideți să faceți upgrade, editările dvs. vor fi dificil de implementat în versiune noua. Este o formă bună ca un dezvoltator să nu atingă codul sursă atunci când este posibil să creeze dosar separatși descrieți schimbările de acolo. Este mult mai inteligent și mai convenabil.
Cum se instalează noi teme Bootstrap descărcate de pe internet?
Există destul de multe site-uri, majoritatea străine, de unde puteți descărca gratuit o grămadă de teme și șabloane. Pentru a evita confuzia, să considerăm un site realizat cu Bootstrap ca șablon și o temă ca un set de reguli CSS care suprascriu aspectul standard al elementelor.
Astfel de teme pot fi descărcate, de exemplu, la bootswatch.com/, iar folosind motorul de căutare puteți găsi alte zeci.
Principiul general al instalării unor astfel de teme depinde de site-ul pe care le descarci. Dacă puteți descărca în format tema bootstrap- grozav, descărcați și conectați-vă. Pe bootswatch, de exemplu, trebuie să descărcați bootstrap.css și să înlocuiți foaia de stil standard cu acesta. Există și o variantă cu mai puține surse.
» ne-am familiarizat cu cadrul, i-am analizat avantajele, i-am revizuit pe scurt așa-numita grilă, acum este timpul să exersăm cum să folosiți Bootstrap.
Puteți descărca Bootstrap de pe site-ul oficial getbootstrap.com. În pagina principală, faceți clic pe butonul Descărcați Bootstrap».
După ce facem clic, suntem transferați la o pagină care oferă mai multe tipuri de descărcări. În acest articol, vom lua în considerare descărcarea obișnuită a versiunii complete a cadrului.
După descărcarea și despachetarea arhivei, obținem trei foldere:
- css- folderul de stiluri
- JS- folder cu scripturi js
- FONTURI- folder cu fonturi de pictograme
Acesta este întregul cadru. Pentru munca in continuare cu Bootstrap, voi crea un folder cu același nume bootstrap , în folder voi crea un fișier index.html gol și voi completa folderul și fișierul împreună cu analiza cadrului din acest articol, iar la sfârșitul postarea voi da un link ca sa vedeti rezultatul. Dacă repeți după mine, vei înțelege că lucrul cu framework-ul este foarte ușor.
Din cadrul descărcat, avem nevoie de întregul folder de fonturi, un fișier de stil din folderul css numit bootstrap.css sau bootstrap.min.css și, în mod similar, un script din folderul js numit bootstrap.js sau bootstrap.min.js .
Diferența dintre fișierele cu „.min”. din cele obișnuite din acele fișiere cu „.min”. optimizat, adică codul este scris într-o singură linie, fără întreruperi de linie și spații, deci cântăresc mai puțin decât de obicei, iar conținutul fișierelor este exact același.
Acum voi crea un folder css în folderul meu bootstrap, voi pune fișierul bootstrap.min.css în el și voi crea un folder js în care voi pune bootstrap.min.js . În plus, în folderul css, voi crea deocamdată un fișier style.css gol pentru a adăuga propriile mele stiluri.
Fișierele cadru necesare au fost mutate, iar acum vom lucra doar cu fișierul index.html. Pentru a nu scrie singur codul, să trecem la documentație, pe pagina de descărcare a site-ului oficial de mai jos există un schelet HTML gata făcut al documentului, copiați-l și lipiți-l în fișierul nostru index.
Fișierul nostru de stil, script-ul js și biblioteca jQuery sunt deja incluse în schelet, dar dacă nu o faceți pe " bootstrap» șablon, dar pe unele dintre ele, aveți nevoie între etichete
conectați fișierul de stil bootstrap.min.css și după acesta stilul creat.
Apoi, înainte de eticheta de închidere
Mai întâi includem biblioteca jQuery.
Și după bibliotecă, conectăm scriptul js.
În general, scheletul HTML al documentului se dovedește astfel.
Procesul pregătitor s-a încheiat, Bootstrap este conectat, puteți continua și începe să umpleți pagina noastră WEB cu componente cadru.
Cum se utilizează documentația
Documentația cadrului este foarte bună, ceea ce îl face ușor de utilizat. Există mai multe secțiuni în meniul principal al site-ului oficial: Noțiuni de bază», « css», « Componente», « JavaScript" și " Personalizați”, pe pagina fiecărei secțiuni din coloana din dreapta sunt denumirile diferitelor componente, făcând clic pe care se arată descrierea și cazurile de utilizare ale acestora sub formă de cod gata făcut.
Dacă dificultăți cu Limba engleză, apoi există mai multe resurse cu documentație tradusă în rețea, iată adresa unuia dintre aceste site-uri www.oneskyapp.com/ru/docs/bootstrap. Puteți folosi și un traductor pentru browser, traducerea va fi, desigur, strâmbă, dar esența a ceea ce este scris va fi clară. În general, trebuie doar să citiți documentația, să luați mostre de cod și să exersați.
Lucrul cu Bootstrap Grid
După cum am spus în ultimul articol, grila funcționează ca un tabel, inclusiv rânduri .rândși coloane .col, pot exista maximum douăsprezece coloane. Prefixele (lg , md , sm , xs) sunt adăugate la clasa .col pentru a indica lățimea coloana dată la o anumită rezoluție a ecranului.
Înfășurați rândurile cu coloane într-un bloc cu o clasă .container sau clasa .container-fluid. Diferența dintre ele este că clasa .container are o lățime maximă de 1170 pixeli, în timp ce clasa .container-fluid are o lățime nelimitată, adică întreaga lățime a ecranului, chiar dacă rezoluția ecranului este foarte mare. Informații complete despre grila Bootstrap, consultați secțiunea de documentație " css».
Folosind grila cadrului, vom realiza aspectul clasic al paginii noastre (header, continut, coloana laterala si subsol), pentru aceasta vom crea trei randuri si patru coloane, obtinem acest cod.
ANTET
CONŢINUT
BARĂ LATERALĂ
SUBSOL
Pentru a separa blocurile, am scris două clase suplimentare: .block , .block2 și le-am adăugat câteva reguli în fișierul style.css creat.
Block( fundal: #eee; chenar: 1px solid #000; ) .block2( fundal: #ccc; chenar: 1px solid #000; )
Să adăugăm un font pictogramă la titlurile noastre. la capitolul " Componente» selectați pictogramele care vă plac, copiați textul de sub imagine, acest text este o clasă. Creați o etichetă în interiorul etichetei de titlu și lipiți clasa copiată.
ANTET
Acum nu a stricat să adăugați un fel de meniu. Pentru a face acest lucru, în secțiunea Componente" mergi la " Bara de navigare”, selectează meniul care îți place, copiază codul și după eticheta de deschidere
, introduceți.Rămâne de umplut conţinut t" și " bara laterală". Facem totul după aceeași schemă: selectați o componentă din documentație, citiți descrierea, copiați și lipiți-o în locul potrivit. Voi adăuga un formular și un buton, făcând clic pe care se va deschide o fereastră modală cu un tabel.
La fel, în doar 5 minute, am schițat cel mai simplu aspect al paginii, adaptabil pentru toate dispozitivele, în timp ce practic nu am scris codul singuri. Urmați linkul și vedeți rezultatul.
Pe asta voi încheia articolul. Am luat în considerare doar o mică parte din funcționalitatea cadrului, dar cred că înțelegeți cum să lucrați cu Bootstrap. Următorul pas este să schimbați stilurile cadrului pentru a se potrivi nevoilor dvs. și să descărcați numai acele componente de care aveți nevoie. Vom analiza toate acestea în articolul "
Se încarcă...