Ce înseamnă bootstrap? Care sunt beneficiile utilizării Bootstrap? Suport pentru bootstrap în rusă
Profitând de oportunități Cadru bootstrap Puteți proiecta rapid și independent un site web modern.
Aspectul unui site web nu este o sarcină foarte dificilă, ci mai degrabă plictisitoare. Pe lângă faptul că site-ul trebuie să fie echipat cu funcționalitatea necesară, trebuie să fie și frumos! O astfel de frumusețe este de obicei creată de un designer în Photoshop. Și sarcina designerului de layout este să facă la fel ca în imagine. Și pentru asta trebuie deja să transpiri...
Acum aproximativ un an, am lucrat într-o echipă cu un designer pentru a crea un site web. Și el după ce a privit aspectul terminat mi-a pus o întrebare: „Nu folosești o grilă?” În Photoshop, se pare, el a desenat totul de-a lungul ghidurilor, astfel încât să fie drept, dar în HTML obișnuit nu există astfel de instrumente de aliniere.
Și atunci am decis să fac cunoștință cu o tehnologie care a fost pe buzele multor oameni de câțiva ani încoace - Bootstrap.
De ce ai nevoie de Bootstrap?Pentru a înțelege dacă aveți nevoie de Bootstrap, trebuie mai întâi să înțelegeți ce este și de ce. Răspunzând pe scurt la întrebare, voi spune că Bootstrap este un set de stiluri, script-uri (și în a 3-a versiune, fonturi de simbol gata făcute) care pot fi folosite pentru a dispune rapid diverse blocuri de site-uri web. Mai mult, majoritatea acestor blocuri acceptă inițial adaptabilitate și arată decent pe ecranele dispozitivelor mobile fără niciuna acțiuni suplimentare din partea ta.
Pentru a înțelege mai bine ce poate face Bootstrap și la ce anume poate fi folosit, vă sugerez să aruncați o privire la următoarea diagramă:
Merită să spunem imediat că, în ciuda funcționalității destul de bune, Bootstrap nu are adesea unele instrumente populare. De exemplu, nu conține:
- plasă pentru aliniere verticală blocuri (dar există proprietăți pentru alinierea elementelor de text);
- proprietăți pentru scalarea adaptivă a textului (trebuie să utilizați biblioteci terțe sau propriile mecanisme);
- instrumente pentru proiectarea paginilor de destinație pe ecran complet;
- unele plugin-uri populare (glisor normal, file verticale, defilare ecran cu ecran etc.);
- o serie de proprietăți pentru poziționare.
Pentru a fi corect, trebuie spus că Bootstrap 4 a fost lansat recent, care este destul de diferit ca implementare și funcționalitate față de versiunea mai comună a Bootstrap 3. Cu toate acestea, în scopurile acestui articol vom lua în considerare a treia versiune testată în timp și stabilă. versiunea (cea mai recentă acest moment - 3.3.7).
Instalarea BootstrapPentru a începe să utilizați Bootstrap, trebuie să îl conectați corect la documentul HTML. Există mai multe moduri de a face acest lucru.
Conexiune externă prin Bootstrap CDNAșa cum a fost cândva cazul cu populara bibliotecă jQuery (apropo, prezența sa este necesară), Bootstrap are astăzi și propriul sistem de livrare a conținutului (CDN). Aceasta înseamnă că nu trebuie să descărcați nimic pentru a-l instala - trebuie doar să adăugați link-uri către componentele de care aveți nevoie în documentul HTML.
Minim set necesar Componentele pentru ca Bootstrap să funcționeze sunt foaia de stil și fișierul script (bootstrap.css și, respectiv, bootstrap.js). Stilurile bootstrap trebuie incluse în secțiuni înainte de a vă declara stilurile (style.css), iar scripturile pot fi trimise la „subsolul” site-ului pentru a accelera încărcarea paginii. Apropo, în același scop, este mai bine să folosiți versiuni reduse ale fișierelor, link-urile către care arată astfel:
De asemenea, este recomandat să includeți un fișier CSS temă, care conține stilurile de design unice ale versiunii dvs. de Bootstrap (vom discuta mai jos despre cum să faceți acest lucru). De asemenea, ar trebui să fie plasat înainte de declarația principală a foii de stil, dar după stiluri comune Bootstrap. Linkul pentru conectarea temei arată astfel:
Ca rezultat, fișierul dvs. index.html cu Bootstrap 3 conectat poate arăta cam așa (îl puteți copia și începe să lucrați imediat):
Șablon bootstrap
Salut Lume! Sunt un antet Bootstrap!
Instalare folosind manageri de pacheteDacă sunteți familiarizat cu un lucru atât de util ca o consolă, atunci, cu siguranță, ați auzit cel puțin că există manageri speciali de pachete care vă permit să instalați automat pe site-ul dvs. diverse scripturiși chiar întregi CMS-uri. Bootstrap a fost acum adăugat la majoritatea depozitelor managerului de pachete, așa că pentru a-l instala va trebui să rulați o singură comandă:
| 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 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). Din folderul js ștergem totul, 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 faptului că nu toate pluginurile pot fi incluse în pachetul standard Bootstrap și este folosit doar stilul standard. Dacă nu creați doar o pagină de testare, ci un site web real, atunci probabil că va trebui să schimbați mult în șablonul de design standard.
Deci, 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 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 Conexiuni bootstrap pentru proiectul tău și câteva șabloane pe care le poți folosi 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 design, 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 necesare, puteți utiliza bara lateralăîn bara laterală din dreapta. Din păcate, căutarea prin documentație nu este furnizată aici...
Una dintre cele mai Puncte importante O parte a stăpânirii 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 -
| ).
Algoritmul general pentru 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: 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 adăugare 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. În noul Bootstrap 4 nu există încă un font de pictogramă (poate că va fi înlocuit cu FontAwesome, mai popular), dar în versiunea noastră a treia 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
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 marimea 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, totuși, 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, cel mult, 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 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ă atingeți 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 crearea de site-uri 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 speciale. 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 deschis link activ la sursa și păstrarea paternului lui Ruslan Tertyshny. 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 V în acest caz,înseamnă că aspectul unui document web ar trebui să se adapteze dispozitivului care îl afișează - PC, tabletă, smartphone etc. Designul vizual al elementelor individuale ale aspectului paginii web este, de asemenea, inclus î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 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 computer 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ă. Salutări tuturor oaspeților de pe blogul meu și pasionaților de dezvoltare web. Publicația de astăzi va fi dedicată introducerii unui cadru atât de popular precum Bootstrap. După ce ați citit articolul curent, veți afla de ce a fost creat, cum să lucrați cu bootstrap și cum să îl instalați, ce instrumente oferă acest cadru și unde este cel mai des folosit. Ei bine, acum mergeți mai departe și alegeți noul material! Ce este Bootstrap?Bootstrap este un cadru conceput special pentru dezvoltarea interfeței (interfeței externe) a serviciilor și aplicațiilor web. Include șabloane standard constând din tipografie, butoane, formulare, diverse meniuri, inclusiv meniuri derulante, tabele, ferestre modale, navigare, glisoare (obișnuite și sub formă de carusel) și alte instrumente, precum și tot felul de pluginuri pe . Cele mai populare dintre ele sunt Tooltip, care este responsabil pentru ferestrele pop-up, Dropdown, care este responsabil pentru listele drop-down, Carousel, care organizează un glisor care poate fi derulat și altele. CU lista plina plugin-uri existente, șabloanele și componentele pot fi găsite pe site-ul oficial http://getbootstrap.com/getting-started/. De asemenea, cu ajutorul acestuia, începând cu cea de-a doua versiune, puteți crea un layout responsive. Câteva cuvinte despre istorieCred că trebuie să cunoașteți puțină istorie a creării instrumentului care este descris pentru a înțelege ce este. Bootstrap a fost creat de Mark Otto și Jacob Thornton special pentru rețea socială Stare de nervozitate. A acționat ca o bibliotecă internă. Acesta este motivul pentru care vedeți uneori numele Twitter Bootstrap. Biblioteca se numea inițial Twitter Blueprint. Cu toate acestea, în momentul în care produsul a fost lansat publicului larg (și acest lucru s-a întâmplat pe 19 august 2011), numele său a fost schimbat în Bootstrap. Astăzi există patru versiuni ale cadrului. Cel mai vizibil și solicitat în acest moment este Bootstrap 3. A fost primul care a folosit conceptul mobilprimul. În plus, au fost introduse multe amendamente și îmbunătățiri. Care sunt avantajele folosind Bootstrap?De fapt, ca și în cazul tuturor tehnologiilor, utilizarea Bootstrap vine cu atât aspecte pozitive, cât și negative. Prin urmare, nu utilizați niciodată acest cadru fără gânduri. Într-unul dintre articole, am descris în detaliu avantajele și dezavantajele lucrului cu Bootstrap. Și acum vreau să vă atrag atenția asupra soluțiilor convenabile gata făcute pe care le oferă Bootstrap și aspectele pozitive ale acestora. Deci, atunci când conectați cadrul descris, vi se oferă posibilitatea de a utiliza astfel de elemente gata făcute precum:
Merită să acordați o atenție deosebită grilelor sau, așa cum sunt numite și machetelor. Acum va fi un mic spoiler, iartă-mă, pentru că am decis să dedic un articol separat acestui subiect, dar nu este nimic de făcut!
Datorită acestui instrument, Bootstrap este foarte des folosit pentru a scrie site-uri web. Pentru că acesta este un mecanism cu adevărat competent și puternic pentru aspectul blocurilor. Creatorii cadrului au furnizat un număr maxim de coloane - 12. Acest lucru este mai mult decât suficient pentru a instala „cadru”. În plus, în unele situații, utilizarea Bootstrap nu numai că simplifică codul, ci și economisește semnificativ timpul. În același timp, nu trebuie să vă faceți griji că unele elemente nu vor funcționa în browserele problematice (da, fac aluzie la IE), deoarece Bootstrap este pe deplin compatibil cu . Cum se conectează cadrul?Există mai multe opțiuni de conectare a acestui instrument. Bănuiesc că voi începe prin a instala fișierul de boot. Deci, pe site-ul oficial, folosind linkul, puteți descărca versiunile actuale Bootstrap. Totul este foarte simplu. Pur și simplu selectați pachetul de instalare care vi se potrivește și faceți clic pe butonul „Descărcare”. Pe același site puteți descărca versiunea alfa a Bootstrap 4.
A doua modalitate este, desigur, utilizarea unui CDN. Deci, pentru a conecta cele mai recente versiuni ale cadrului, trebuie să inserați următorul link: Dacă trebuie să conectați o reducere Versiunea JavaScript, apoi copiați această linie: Ei bine, subiectele sunt legate după cum urmează: Pe site-ul Russified puteți viziona un videoclip de instruire despre conectarea acestui cadru (http://mybootstrap.ru/video-obuchenie-twitter-bootstrap/). Atât, prieteni, e timpul să ne luăm rămas bun. Nu uitați să distribuiți postări interesante colegilor și, de asemenea, să vă abonați la actualizările blogului meu. Pa! Pa! Cu stima, Roman Chueshov Citește: de 213 ori Î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. Puteți descărca cadrul Bootstrap căi diferite. 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ă. Puteți citi cum să instalați cadrul Bootstrap folosind manageri de pachete, precum și cum să-l construiți folosind Grunt. 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 utilizat î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 fișiere CSS și JavaScript gata de utilizare), trebuie să o despachetați în directorul proiectului dvs. web. Dacă te uiți la arhivă, vei observa că are următorul conținut (on Exemplu de bootstrap 3.4.0): Bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ │ ─me bootstrap.───p s/ │ ├ ── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-halflings-regular r.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ă inca inclus font pictogramă „Glyphicons”. 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 acestea Acest articol. Arhiva cadrului Bootstrap 4 nu este practic diferită de Bootstrap 3. Principala sa diferență 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: Font Awesome, Octicons, Glyphicons, IcoMoon etc. Dacă nu doriți să utilizați font gata, și creați-vă propriul, care va consta numai din pictogramele necesare, apoi 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 Grilă de bootstrap, iar al doilea (bootstrap-reboot.css) este un normalizator care setează stiluri de bază, astfel încât acestea 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")); )); Ultimele note
|
