Folosind bootstrap. Se încarcă fișiere compilate. Grilă imbricată Bootstrap

Înainte de a descărca, asigurați-vă că aveți un editor de cod (recomandăm Sublime Text 3) și anumite cunoștințe de HTML și CSS. Aici nu vom atinge fișiere sursă, dar puteți oricând să le descărcați și să le studiați singur. Ne vom concentra atenția asupra începerii cu fișierele Bootstrap compilate.

Se încarcă fișiere compilate

Cel mai cale rapidăÎncepeți: obțineți versiuni compilate și reduse ale CSS, JS și imaginilor noastre. Fără documente sau fișiere sursă.

2. Structura fișierului

În fișierele descărcate veți găsi următoarea structură și conținut, grupate logic după proprietăți comune și care conțin atât versiuni minimizate, cât și versiuni compilate.

După descărcare, dezarhivați folder comprimat pentru a vedea structura (compilată) Bootstrap. Ar trebui sa fie cam asa:

bootstrap / +-- css / ¦ +-- bootstrap . css ¦ +-- bootstrap . min. css +-- js / ¦ +-- bootstrap . js ¦ +-- bootstrap . min. js +-- img / ¦ +-- glificonuri - halflings . png ¦ +-- glificonuri - halflings - alb . png L-- README . md

Aceasta este forma de bază a Bootstrap: fișiere compilate pentru utilizare rapidă și ușoară în aproape orice proiect Web. Vă oferim CSS și JS compilat (bootstrap.*) și, de asemenea, CSS și JS compilat și miniat (bootstrap.min.*). Fișierele imagine sunt comprimate folosind ImageOptim, aplicații Mac pentru a comprima imaginile în PNG.

Vă rugăm să rețineți că toate pluginurile JavaScript necesită jQuery.

3. Ce este inclus

Bootstrap 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 acceptate

Stiluri generale de corp pentru a reseta tipul și fundalul, stilurile de link, grila șablon și două elemente simple marcajele.

Stiluri CSS

Stiluri pentru general elemente HTML: design, cod, tabele, formulare și butoane. Include, de asemenea, Glyphicons, un set grozav de pictograme.

Componente

Stiluri de bază pentru componente simple interfață: file și butoane, bare de navigare, mesaje, anteturi de pagină etc.

Pluginuri Javascript

Ca și componentele, acestea Pluginuri Javascript sunt componente interactive pentru tooltips, blocuri de informații, componente modale etc.

Lista componentelor

Toate împreună, componentele și pluginurile Javascript conțin următoarele elemente interfata:

Grupuri de butoane
Liste de butoane derulante
File de navigare, butoane și liste
Bară de navigare
Comenzi rapide
Ecusoane
Antetele paginii și elementul erou
Miniaturi
Mesaje
Indicatori de proces
Elemente modale
Liste derulante
Sfaturi instrumente
Blocuri de informații
Elementul „acordeon”
Element carusel
Introducerea de la tastatură înainte

4. De bază șablon HTML

După o scurtă introducere, ne vom concentra asupra folosind Bootstrap. Pentru a face acest lucru, vom folosi un șablon HTML de bază care include toate elementele enumerate în .

Iată cum arată un fișier HTML tipic:

Șablon Bootstrap 101

Salut Lume!

Pentru a crea un șablon Bootstrap ca acesta, atașați pur și simplu fișierele CSS și JS corespunzătoare:

Șablon Bootstrap 101

Salut Lume!

Ș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.

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 o listă completă 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 istorie

Cred 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 socializare Rețele Twitter. 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 la cerere pe acest moment este Bootstrap 3. A fost primul care a folosit conceptul mobilprimul. În plus, au fost introduse multe amendamente și îmbunătățiri.

Care sunt beneficiile utilizării Bootstrap?

De fapt, ca și în cazul tuturor tehnologiilor, utilizarea Bootstrap vine cu 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:

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

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

Datorită acestui instrument, Bootstrap este foarte des folosit pentru a scrie site-uri web. Pentru că acesta este un mecanism cu adevărat competent și puternic pentru aspectul blocului. Creatorii cadrului au 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 link-ul, puteți descărca versiunile actuale de 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 versiune mai mică de JavaScript, atunci 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 Bootstrap

Setul minim de instrumente (programe) pentru crearea de proiecte web folosind cadrul Bootstrap:

editor de text pentru lucrul cu codul (Notepad, Brackets, Notepad++, etc.);
browser ( Google Chrome, Mozilla Firefox, Opera, Safari, Internet Explorer sau altele).

Descărcarea cadrului 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 site-ul getbootstrap.com sau folosind managerul de pachete npm, Composer, Bower sau altele.Cum să faceți acest lucru depinde de experiența dvs. sau de situația specifică.

Cum se instalează cadrul Bootstrap folosind managerii 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 fișiere CSS și JavaScript gata de utilizare. 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.1

Al doilea link conține cadrul în codul sursă. Această versiune este mai convenabilă pentru dezvoltarea site-ului web, deoarece... face foarte ușor să schimbați stilurile, culorile componentelor, să le configurați etc. Dar aceste fișiere sursă, înainte de a fi utilizate pe pagină, vor trebui compilate și minificate. Acest proces de obicei automatizat, de exemplu, folosind Gulp.

Codurile sursă Bootstrap 3.4.0 Codurile sursă Bootstrap 4.2.1 Despachetarea arhivei Bootstrap

După 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țiile bibliotecii jQuery. Prin urmare, înainte de Bootstrap JS trebuie să includeți biblioteca jQuery.

După cum puteți vedea, arhiva conține 2 versiuni de fișiere CSS și JavaScript, adică. 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 dimensiuni mai mici și, prin urmare, asigură o încărcare mai rapidă a paginilor site-ului.

Versiunile neminificate sunt mai convenabile de utilizat în timpul dezvoltării, precum și pentru studiu.

Pe lângă aceste fișiere, această arhivă include și fontul pictogramei „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, î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 etc. Dacă nu doriți să utilizați font gata, și creați-vă propria, care va consta numai din pictogramele necesare, apoi utilizați aceste informații.

Î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ă HTML

Procesul de instalare a cadrului Bootstrap 3 constă în conectarea următoarelor fișiere la pagina HTML 5:

Bootstrap CSS (bootstrap.min.css);

Cea mai recentă versiune a bibliotecii jQuery (necesară pentru ca pluginurile Bootstrap JS să funcționeze);

Bootstrap JavaScript (bootstrap.min.js).

Notă: este mai bine să includeți fișiere JavaScript înainte de eticheta body() de închidere, 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")); ));

Avantajul utilizării cadrelor CSS este că designerul de layout nu trebuie să se gândească la multe nuanțe de aspect pe care creatorii cadrelor le-au gândit deja pentru el. Astfel de nuanțe includ compatibilitatea între browsere, suport pentru diferite rezoluții de ecran și multe altele. Designerul de layout indică doar ce, cum și când să arate, restul este făcut de cadrul însuși. Această abordare poate accelera foarte mult aspectul site-ului. Avantajele Bootstrap includ popularitatea sa. Aceasta înseamnă că va fi mai ușor pentru un alt designer de cod să vă mențină codul.

Dezavantajul utilizării cadrelor este că pagina va trebui să aibă stilurile suplimentare ale întregului framework, chiar dacă folosește doar o mică parte din ele. Cadrul este un instrument excelent pentru prototiparea și crearea de pagini pentru care designul este secundar, cum ar fi paginile de administrare. Dacă aveți un design foarte specific, atunci aranjarea acestuia folosind un cadru poate fi mai dificilă decât utilizarea instrumentelor native. Cu toate acestea, acest lucru este posibil.

Despre utilizarea Bootstrap În prezent, există mai multe moduri de a lucra cu stilurile Bootstrap.Fără a folosi LESS Pentru începători, Bootstrap însuși recomandă următoarea abordare: trebuie să descărcați Bootstrap compilat de pe site și să-l puneți în proiect fără a schimba nimic. Apoi trebuie să-ți creezi propriul gol fișier CSSși conectați-l după bootstrap.css.

După aceasta, pentru a se schimba Stiluri bootstrap trebuie să le înfășurați în styles.css ceva de genul acesta:

A (culoare: #beceda; )
Un dezavantaj evident această abordare este că va trebui să căutați manual stilurile necesare pe care doriți să le întrerupeți și acest lucru nu va fi întotdeauna banal, deoarece Unele opțiuni Bootstrap se aplică multor selectoare în formă modificată, cum ar fi prin formule. Puțin ajutor Instrumentul Personalizare vă poate ajuta aici, vă va ajuta la compilarea corectă a modificărilor, dar o singură dată. Dacă în viitor doriți să modificați un parametru, va trebui să reintroduceți valorile modificate pentru toate câmpurile pentru a vă compila stilurile.

Utilizarea LESS Această metodă presupune că toate variabilele Bootstrap sunt stocate în fișiere .less. Dezvoltatorul lucrează cu aceste variabile și, dacă este necesar, le compilează manual sau automat în fișiere CSS, iar HTML-ul în sine include doar fișierele CSS compilate. Această opțiune va fi considerată în articol ca fiind cea mai flexibilă.

Există un număr mare de moduri de a compila LESS fișiere, iar Bootstrap lasă acest lucru la latitudinea dezvoltatorului. Bootstrap în sine folosește Grunt pentru compilare, este posibil să preferați un plugin pentru produsele JetBrains, iar noi, deoarece articolul se adresează începătorilor, vom căuta mai multe solutii simple. Astfel de soluții sunt WinLess pentru Windows, SimplLESS pentru Mac sau Koala pentru Linux. Toate aceste programe fac aproximativ același lucru: primesc un folder cu MĂRINE fișiere ca intrare și ascultă modificările din ele. De îndată ce faceți modificări la orice fișier, acesta este imediat compilat în fișierul CSS specificat. În acest fel, nu trebuie să rulați compilarea manuală după fiecare modificare. Schimbați fișierul LESS, îl salvați și vedeți imediat modificările de pe site într-o formă deja compilată, comprimată.

Crearea unui proiect Primul pas este crearea unei structuri simple de fișiere pentru proiectul nostru.

Inspecție preliminară După crearea structurii fișierului, deschideți fisier PSDîn Photoshop. Este important să examinați cu atenție șablonul și să-l evaluați. Trebuie să înțelegem următoarele lucruri:

Cum vor fi tăiate imaginile?
Ce componente vor fi folosite?
Care vor fi principalele stiluri?
Ce aspect de pagină vom obține?

Numai după ce răspundeți mental la aceste întrebări pentru dvs., puteți trece la aspect. Să ne uităm la aceste întrebări în ordine Imagini generale În această etapă, trebuie să tăiați și să salvați doar imaginile generale care vor fi pe toate paginile site-ului și nu au legătură cu conținutul. În cazul nostru, acesta va fi un fundal de pagină gri deschis, un fundal antet, o imagine de hartă, două sigle și butoane retele sociale.

Salvați imaginea hărții:

Să salvăm siglele după cum urmează:

Imagini/logo.png
imagini/footer-logo.png

Imaginile de fundal care se repetă trebuie decupate într-o bucată mică suficientă pentru a forma o imagine completă prin repetarea verticală și orizontală.

/images/bg.png
/images/h1-bg.png

Pictograme de rețele sociale cu aceleasi marimi convenabil de a salva într-un singur fișier și de a utiliza ca sprite pentru mai multe încărcare rapidă. Mai multe detalii despre lipirea imaginilor sunt descrise în prima parte. Rezultatul vor fi două fișiere:

/images/social.png
/images/social-small.png

Componente Principala diferență între aspectul folosind Bootstrap și aspectul folosind mijloace native este că Bootstrap introduce conceptul de componente. Componentele sunt utilizate frecvent blocuri HTML gata făcute cu stiluri predefinite. Uneori componentele folosesc JavaScript. Designerul de layout poate folosi fie o componentă gata făcută, fie își poate defini propriul aspect. Pentru a face acest lucru, de multe ori trebuie doar să schimbați valoarea variabilelor în Bootstrap. Dacă sunt necesare modificări mai flexibile, designerul de aspect poate schimba oricând HTML și CSS la discreția sa.

Dacă aruncați o privire la șablonul nostru, puteți vedea că vom avea nevoie de următoarele componente:

Pentru aspect cu coloane - sistem grilă (rând, col)

Pentru căutare – formular inline (form-inline), controale grupate (input-group), buton (btn)

Pentru navigare - bara de navigare (navbar) și navigarea în sine (nav)

Pentru a afișa submeniuri – listă grupată (listă-grup)

Pentru un bloc de hartă - panoul vizual(panou)

Pentru a afișa un bloc central mare - jumbotron

Pentru a afișa rame foto - miniaturi

Ne vom uita la fiecare componentă mai detaliat atunci când o vom întâlni în layout.Stiluri de bază În Bootstrap, toate stilurile implicite sunt deja setate, trebuie să le personalizăm doar dacă diferă de designul nostru. Să facem asta în fișierul src/less/variables.css.

În primul rând, trebuie să adăugați variabile care nu sunt în setările Bootstrap, astfel încât să le puteți utiliza în viitor. Pentru noi, acesta este doar un font de design specific.

@brand-font: „Oswald”,sans-serif;
Dacă doriți să utilizați un șablon pentru site-urile rusești, atunci puteți încerca să înlocuiți fontul Oswald cu cel mai apropiat Cuprum, care acceptă chirilic.

Acum să înlocuim setările Bootstrap cu ale noastre:

Acum că am terminat cu variabilele, să începem să ne stilăm designul în fișierul styles.less. Mai întâi, să conectăm Bootstrap în sine și variabilele noastre:

@import "bootstrap/bootstrap.less"; @import "variables.less";
Nu toate stilurile implicite ale Bootstrap pot fi modificate folosind variabile, așa că haideți să o facem manual:

P ( margine: 20px 0; ) .form-control (box-shadow: none; ) .btn ( font-family: @brand-font; )
Aici am eliminat umbra din elementele formularului și am dat textului din butoane un anumit font de pagină.

Apoi descriem fundalul paginii și bara de sus:

Corp (chenar-sus: 5px solid #7e7e7e; imagine de fundal: url(../images/bg.png); )
Mai departe în text nu se va indica în ce fișier sunt scrise stilurile. Nu uitați că salvăm toate variabilele în fișierul variables.less, iar stilurile CSS vor fi stocate în styles.less.

Cadru HTML În mod tradițional, începem aspectul site-ului web cu un cadru HTML. Lipim codul celui mai simplu șablon din pagina Noțiuni de bază în fișierul index.html, după ce am eliminat anterior toate lucrurile inutile:

Whitesquare
Acest bloc creează o structură de document HTML5. În titlu indicăm numele paginii noastre – Whitesquare. Cu metaeticheta viewport indicăm că lățimea paginii este dispozitive mobile va fi egală cu lățimea ecranului, iar scara inițială va fi 100%. Apoi fișierul de stiluri este inclus. Și pentru versiunile de Internet Explorer mai mici decât a noua, includem scripturi care ne permit să ne afișam corect aspectul.

Aspect În acest caz, vedem că site-ul este format din două părți: containerul principal cu conținut, care este centrat pe ecran și un subsol extensibil. Containerul principal este format din două coloane: conținut principal și bară laterală. Deasupra lor se află antetul, navigarea (nav) și titlul paginii (.heading).

Să adăugăm următorul cod în body:

Aici întâlnim prima componentă Bootstrap - coloane. Elementului părinte al coloanelor i se atribuie clasa „rând”, iar clasele de coloane încep cu prefixul „col-”, apoi dimensiunea ecranului (xs, sm, md, lg) și se termină cu lățimea relativă a coloanei. .

O coloană poate fi atribuită simultan diferite clase cu valori pentru ecrane, de exemplu class="col-xs-12 col-md-8". Aceste clase stabilesc pur și simplu lățimea coloanei ca procent pentru o anumită dimensiune a ecranului. Dacă coloanei nu i se atribuie o anumită clasă de ecran, atunci se va aplica clasa pentru ecranul specific minim, iar dacă nu este specificată, atunci nu se va aplica lățimea și blocul va ocupa lățimea maximă posibilă.

Clasele noastre „col-md-7” și „col-md-17” indică faptul că blocurile sunt coloane cu o lățime de 7 și 17 în raport cu containerul părinte. În mod implicit, suma lățimilor coloanelor din Bootstrap este 12, dar am dublat acest număr pentru a obține flexibilitatea de care aveam nevoie.

Corp ( … .wrapper ( umplutură: 0 0 50px 0; ) antet ( umplutură: 20px 0; ) )
Am plasat această structură în interiorul corpului. Sintaxa LESS vă permite să imbricați reguli unul în celălalt, care sunt apoi compilate în următoarele constructe:

Body .wrapper (…) body header (…)
Această abordare vă permite să vedeți Structura HTML chiar în interiorul CSS și dă un „domeniu” regulilor.

Siglă

Introduceți sigla în eticheta antetului:

Nu sunt necesare stiluri suplimentare.

Căutare

Pentru a crea o căutare, avem nevoie de următoarele Componentele bootstrap: formular inline, controale grupate și buton.
În eticheta antet creăm un formular inline, aliniat la dreapta. Câmpurile unui astfel de formular trebuie să aibă o clasă „form-control” și o etichetă.

Am plasat componenta „controale grupate” în formular. Comenzile de grupare vă permit să eliminați spațiul dintre introducerea textului și buton și, așa cum ar fi, să le îmbinați într-un singur element.
Este un div cu clasa și câmpurile „input-group”, iar butonul unei astfel de componente este plasat într-un bloc cu clasa „input-group-btn”.

Deoarece nu trebuie să arătăm eticheta pentru câmpul de căutare, o vom ascunde cu clasa „sr-only”. Acest lucru este necesar pentru cititoarele de ecran dedicate.

Clasa „btn-primary” este adăugată la buton, ceea ce înseamnă că acesta este butonul principal al acestui formular.

…Căutați GO
Tot ce ne rămâne este să setăm lățimea formularului de căutare în stiluri.

Corp ( … .wrapper ( … antet ( … .form-search ( lățime: 200px; ) ) ) )

Meniul

Pentru a afișa meniul, luați componenta „panoul de navigare” și plasați în ea componenta „navigație”, care este o listă cu link-uri. Pentru navigare, se adaugă o clasă „navbar-nav”, care aplică stiluri speciale de navigare în cadrul navbar.

Pentru a aduce acest meniu în designul nostru, vom seta următoarele valori pentru variabile:

/*navbar height*/ @navbar-height: 37px; /*setează mai mult padding orizontal*/ @nav-link-padding: 10px 30px; /*fond pentru elementele de meniu*/ @navbar-default-bg: @panel-bg; /*culoarea textului în elementele de meniu*/ @navbar-default-link-color: #b2b2b2; /*și când treceți mouse-ul - același*/ @navbar-default-link-hover-color: @navbar-default-link-color; /*fondul elementului de meniu activ este culoarea albastră specifică*/ @navbar-default-link-active-bg: @brand-primary; /*culoarea textului elementului de meniu activ*/ @navbar-default-link-active-color: #fff;
Pe lângă parametrii personalizabili, vom descrie alții suplimentari în stiluri - acesta este textul cu majuscule și fontul nostru specific:

Corp ( … .wrapper ( … .navbar a ( text-transform: majuscule; font: 14px @brand-font; ) ) )

Titlul paginii

Titlul paginii este plasat într-un div cu clasa „heading”.

Despre noi
Și are următoarele stiluri:

Corp ( … .wrapper ( … .heading (înălțime: 40px; fundal: URL transparent(../images/h1-bg.png); margine: 30px 0; padding-left: 20px; h1) (afișare: bloc inline; culoare: #7e7e7e; font: normal 40px/40px „Oswald”, sans-serif; fundal: url(../images/bg.png); margine: 0; umplutură: 0 10px; text-transform: majuscule; ) ) ) )
Aici desenăm dungă gri fundal pe div și puneți un inline h1 în el cu în fontul necesarși o culoare de fundal a paginii pentru a da impresia unui fundal transparent pentru h1.

Submeniu

La crearea unui submeniu, nu vom folosi componenta „navigație”, deoarece nu este foarte potrivită pentru noi în stil; componenta „listă grupată” este mult mai potrivită pentru noi. Fiecare element al unei astfel de componente are o clasă „list-grup-element”.

Submeniul trebuie plasat în eticheta deoparte. Creăm o listă de link-uri în același mod ca și meniul principal.

În setările componentei, indicăm că toate listele grupate ar trebui să fie afișate cu fundalul și cadrul componentei „panou”:

@list-group-bg: @panel-bg; @list-group-border: @panel-inner-border;
Și aplicați următoarele stiluri în submeniu:

Corp ( … .wrapper ( … .submeniu ( margin-bottom: 30px; li ( afișare: list-item; font: 300 14px @brand-font; list-style-position: interior; list-style-type: pătrat; padding) : 10px; text-transform: majuscule; &.active ( culoare: @brand-primary; ) a (culoare: @text-color; text-decoration: none; &:hover (culoare: @text-color; ) ) ) ) ) )
În primul rând, întoarcem stilurile standard la elementele listei, deoarece Bootstrap le-a înlocuit cu propriile sale. Adăugați o căptușeală în partea de jos. Submeniurile folosesc fonturi mai subțiri și marcatori pătrați. Iar pentru link-uri setăm culori, majuscule și eliminăm sublinierea. Ampersand din codul „&.active” va fi înlocuit de selectorul părinte în momentul compilării folosind sintaxa LESS: „.submenu li.active”.

Conținutul barei laterale Pe lângă submeniu, conținutul barei laterale conține și o imagine cu locația birourilor.

Pentru a-l afișa, vom folosi componenta „panou”, sau mai degrabă variația sa „panel-primar” pentru colorarea titlului. Această componentă conține un bloc de antet (panel-heading) și un bloc de conținut panou (panel-body). Adăugăm clasa „img-responsive” la imaginea hărții, ceea ce va permite ca imaginea să se micșoreze atunci când lățimea ecranului este mică.

… Birourile noastre
În variabilele Bootstrap am setat deja culoarea pentru fundalul panoului (panel-bg), iar acum vom indica că panoul „primar” va avea chenarul gri al panoului implicit, mai degrabă decât cel albastru implicit:

@panel-primary-border: @panel-inner-border;
Acum trebuie să schimbați stilurile site-ului setări standard panouri care nu sunt modificate prin variabile:

Panou (box-shadow: none; .panel-heading ( font: 14px @brand-font; text-transform: majuscule; padding: 10px; ) .panel-body (padding: 10px; ) )
Aici am eliminat umbra de pe panouri, am adăugat propriile noastre indentări și am stabilit propriul font de titlu.

Citat Să începem să prezentăm conținutul adăugând un citat.

Acest element de pagină este cel mai asemănător cu componenta Jumbotron. Să-l adăugăm la coloana de conținut:

„Quisque in enim velit, at dignissim est.” nulla ul corper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat.”

John Doe, Lorem Ipsum
Prin variabile pentru componenta jumbotron vom seta culoare alba text și fundal albastru marcat:

@jumbotron-bg: @brand-primary; @jumbotron-color: #fff;
Și să descriem stilurile noastre:

Corp ( … .wrapper ( … .jumbotron ( chenar-rază: 0; umplutură: 0; margine: 0; blockquote ( chenar-stânga: niciunul; p ( font: 300 italic 33px @brand-font; text-transform: majuscule); margin-bottom: 0; ) mic ( text-align: right; culoare: #1D8EA6; font: 300 20px @brand-font; &:before (conținut: ""; ) ) ) ) )
În ele, eliminăm rotunjirea colțurilor, umplutura componentelor și decorațiunile citate care sunt setate de Bootstrap în mod implicit. Vom adăuga, de asemenea, stiluri pentru fonturile noastre.

Conţinut

Lorem ipsum dolor sit amet…

Donec vel nisl nibh…

Următorul pas este să adăugați două imagini care se află la sfârșitul textului de conținut. Acest lucru se face folosind două coloane:

Clasa „miniatură” transformă imaginile într-o componentă „miniatură”. El va face toată munca de stilizare a imaginilor pentru noi. Singurul lucru care ne mai rămâne este să setăm culoarea căptușelii și a chenarului în variabilele pentru această componentă:

@thumbnail-padding: 1px; @thumbnail-border: #c9c9c9;

Blocați „Echipa noastră”

Când așezați acest bloc, să adăugăm mai întâi un titlu:

Echipa noastră
cu stil:

Corp ( … .wrapper ( … h2 ( fundal: nici unul repeta derulare 0 0 #29C5E6; culoare: #fff; font: 300 30px @brand-font; umplutură: 0 10px; text-transform: majuscule; ) ) )
Și apoi vom adăuga un bloc cu clasa „echipă”, care constă din două linii care conțin carduri de angajați. Fiecare card este o coloană. Cardul are o lățime egală cu patru coloane ale grilei noastre. Toate cărțile, cu excepția primei cărți din linie, au o liniuță din stânga, care este creată de clasa „col-md-offset-1”. Conținutul cardului constă dintr-o imagine și o descriere (.caption)

John Doe Saundra Pittsley

lider de echipă

…

Ericka Nobriga

art Director

Cody Rousselle

designer senior ui

…
După crearea markupului, să dăm acestor elemente următoarele stiluri:

Corp ( … .wrapper ( … .team ( .row ( margin-sus: 20px; .col ( spatiu alb: nowrap; .thumbnail ( margin-bottom: 5px; ) ) ) .col-md-offset-1 ( margin- stânga: 3,7%; ) .caption ( h3 ( font: 300 16px @brand-font; margine: 0; ) p ( font: 300 14px @brand-font; culoare: @brand-primary; margine: 0; ) ) ) ) )
Pe lângă indentările și stilurile de font care sunt setate aici, am schimbat clasa „col-md-offset-1”. A trebuit să stabilească indentarea la 3,7% pentru că... indentarea standard era prea mare.

Subsol Subsolul este format din patru blocuri mari: feed Twitter, harta site-ului, linkuri sociale și logo cu drepturi de autor.

Mai întâi, să creăm un container de subsol cu aceste blocuri:

Și aplicați-i designul:

Subsol ( fundal: #7e7e7e; culoare: #dbdbdb; dimensiunea fontului: 11px; .container (înălțime: 110px; umplutură: 10px 0; ) )
Eticheta subsol definește o zonă gri pe toată lățimea ecranului, iar containerul din interiorul său afișează o zonă centrată pe ecrane mai mari și specifică înălțimea și umplutura subsolului. Folosim coloane pentru a alinia blocurile în interiorul subsolului.

Flux Twitter Așezați conținutul fluxului Twitter:

Feed Twitter 23 oct

In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug

Stiluri:

Corp ( ... subsol ( ... .container ( ... h3 ( chenar-jos: 1px solid #919191; culoare: #ffffff; dimensiunea fontului: 14px; înălțimea liniei: 21px; familia fonturilor: @brand) -font; margine: 0 0 10px; text-transform: majuscule; ) p ( margine: 5px 0; ) .twitter ( p ( padding-right: 15px; ) time a ( culoare: #b4aeae; text-decor: subliniere; ) ) ) )
Pentru toate titlurile de subsol, setăm fonturi și indentări și, de asemenea, creăm o subliniere în cadrul de jos. Pentru paragrafe, indicați indentarea. Pentru linkul care afișează data, setați culoarea și subliniați.

Harta site-ului Harta site-ului constă din două coloane egale cu link-uri:

Harta site-ului Acasă Despre Servicii Parteneri A sustine a lua legatura
Setăm linkurile la culoare, font și spațiu între ele.

Corp ( ... subsol ( ... .container ( ... a ( culoare: #dbdbdb; ) .sitemap a ( afișare: bloc; dimensiunea fontului: 12px; marginea jos: 5px; ) ) ) )

Legături sociale

Inserăm un set de link-uri într-un bloc cu clasa „social”.

Retele sociale
Și să le modelăm:

Corp ( … subsol ( … .container ( … .social ( .social-icoana ( lățime: 30px; înălțime: 30px; fundal: url(../images/social.png)) fără repetare; afișare: bloc inline; margine -right: 10px; ) .social-icon-small ( lățime: 16px; înălțime: 16px; fundal: url(../images/social-small.png) no-repeat; afișare: inline-block; margine: 5px 6px 0 0; ) .twitter ( background-position: 0 0; ) .facebook ( background-position: -30px 0; ) .google-plus ( background-position: -60px 0; ) .vimeo ( background-position: 0 0 ; ) .youtube ( poziția de fundal: -16px 0; ) .flickr ( poziția de fundal: -32px 0; ) .instagram ( poziția de fundal: -48px 0; ) .rss ( poziția de fundal: -64px 0; ) ) ) ) )
Aici am folosit tehnica sprite - atunci când un fișier imagine este folosit pentru imagini diferite. Toate linkurile sunt împărțite în pictograme mari(.social-icoana) și mici (.social-icoana-mic). Am setat aceste clase să fie afișate ca un bloc inline cu dimensiuni fixe și același fundal. Și apoi cu folosind CSS Am mutat acest fundal astfel încât imaginea corespunzătoare să fie afișată pe fiecare link.

Drepturi de autor Un bloc cu drepturi de autor și logo este o imagine cu un link și un paragraf cu text dedesubt.

Stilurile sunt realizate în mod similar cu blocurile anterioare, singura diferență fiind că blocul este bătut în cuie pe marginea dreaptă, iar alinierea în interiorul acestuia este tot la dreapta:

Corp ( … .footer ( … .container ( … .footer-logo ( float: dreapta; margin-sus: 20px; font-size: 10px; text-align: right; a ( text-decor: subline; ) ) ) ) )

Aceasta completează aspectul. Proiectul finalizat poate fi descărcat

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 Bootstrap

Dacă 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:

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

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

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

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

Documentația rusă Bootstrap

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

Grilă de bootstrap

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

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

Cum se lucrează cu o rețea?

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

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

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

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

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

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

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, iar calea către aspectul rapid adaptiv vă va fi deschisă.

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

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

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

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

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

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

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

Un capac

Conţinut
Coloana laterală

Subsol

Este destul de ușor de înțeles. În primul rând, creăm un antet; nu trebuie să fie plasat deloc în grilă, deoarece î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, pe dispozitivele mobile, site-urile apar într-o singură 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ă...

Cuibărit Grilă de bootstrap

Faptul este că acum am împărțit șablonul doar în blocuri principale, dar în interior ele pot fi împărțite și în coloane. De exemplu, conținutul poate afișa produse în mai multe coloane. Ce ar trebuii să fac? Este foarte simplu - creăm exact aceeași grilă în interior. Acesta va fi imbricat, dar conține și 12 coloane. Dacă rezumăm toate acestea, ajungem la această concluzie:
În orice bloc poate exista un număr nelimitat de grile. De exemplu, într-un bloc cu produse există o grilă pentru separarea produselor; în 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 ratat încă unul punct important Pentru ca imaginile să se adapteze la blocurile în care sunt amplasate, fiecăruia dintre ele trebuie să i se atribuie clasa img-responsive. Dacă, ca mine, credeți că a face acest lucru este incomod, atunci scrieți în propriul stil.css astfel:

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

Gata, 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 receptive

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

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

Subsol

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

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

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

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

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

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

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

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

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

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

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

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

Grozav, acum al treilea produs trebuie să 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.

Mișcă-mă tot drumul

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

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

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

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

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

Componente bootstrap și exemple de utilizare a acestora

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

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

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

Bootstrap: Meniu receptiv orizontal (mobil).

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

De fapt, cu Bootstrap poți face foarte ușor nu doar un meniu adaptiv, ci și unul așa-zis mobil, care este complet restrâns pe ecrane mici și ascuns sub un singur buton. Această tehnică poate fi văzută în multe șabloane adaptiveși de fapt este foarte ușor de implementat. 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 un logo în meniu, două element simplu, element derulant, formular de căutare. Adică au fost multe elemente. Puteți personaliza cu ușurință meniul pentru dvs., adăugând propriile clase la acesta. Dar deocamdată scopul meu este pur și simplu să vă arăt această componentă.

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

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

Meniu derulant

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

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

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

Adăugarea de breadcrumbs (breadcrumbs) folosind Bootstrap

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

Acasă

Catalog

Bunuri

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

H2( text-align: center; )

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

Pesmet( fundal: transparent; )

Așa arată site-ul acum:

Mesele Bootstrap

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

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

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

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

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

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

Concluzie

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