Buna ziua! În acest articol vă voi spune cum să instalați și să conectați cadrul Bootstrap. Puteți citi despre ce este Bootstrap.

DESPRE instalare standard Am spus deja destul de multe în articolele anterioare. Totul este simplu aici. Mergem pe site-ul oficial getbootstrap.com, facem clic pe elementul Noțiuni introductive și selectăm prima opțiune. Astfel, descarcăm versiunea completă a bootstrap cu toate componentele js și css.

Bootstrap CDN este o oportunitate de a conecta cadrul de la o stocare CDN fără a descărca fișierele acestuia pe computer. Desigur, în acest caz nu se poate vorbi de vreo personalizare.

Dar adevărul este că bootstrap conține multe componente în mod implicit, 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, proiectați un magazin online. Este posibil să nu aveți nevoie de modal și sfaturi cu instrumente și este posibil să 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 acolo, așa că puteți lăsa doar plasa și câteva dintre cele mai importante componente.

A alege doar ceea ce ai nevoie este abordare profesională la crearea de site-uri web și utilizarea Bootstrap. În mod implicit, versiunea necomprimată a stilurilor CSS ale cadrului din cea mai recentă versiune cântărește 143 kiloocteți. Și scripturile au mai mult de 60 de kiloocteți. Da, dacă comprimați codul, puteți reduce greutatea cu 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-ului va fi de numai 15-20 kiloocteți, iar în formă comprimată cu încă doi kiloocteți mai puțin. Astfel vei atinge viteza maxima si optimizarea proiectului tau.

Bine, asta a fost doar o teorie. Pentru a personaliza cadrul, vizitați același site oficial și accesați Personalizare.

Primul pas aici este să configurați ce componente doriți să includeți în versiunea dvs. de Bootstrap. Să începem cu CSS:

Print Media Styles – interogări media pentru imprimare. Dacă nu intenționați să imprimați pagini de site, îl puteți dezactiva.

Tipografia, codul, tabelele, formularele și butoanele sunt toate lucruri pe care le 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.

Grid System este de fapt o grilă. Nu văd niciun rost să-l dezactivez vreodată, deoarece aceasta este puterea principală a cadrului. Datorită grilei, puteți adapta cu ușurință șabloanele la orice dispozitiv, iar astăzi, în era traficului mobil, acest lucru este extrem de important. Nu o oprim sub nicio formă.

Utilități responsive – utilitare adaptive, de asemenea, recomand să nu le dezactivați niciodată. Despre utilitățile adaptive vom vorbi în articolul următor, unde vom analiza în detaliu sistemul 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 comod si util.

Acestea sunt, de exemplu, lucruri precum grupuri de liste, bare de butoane, pictograme, panouri, alerte, paginare, breadcrumbs etc. De asemenea, puteți dezactiva fontul pictogramei. Acest lucru merită 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 fiecare site are un design și o funcționalitate diferită.

Acestea sunt meniuri derulante, sfaturi cu instrumente, ferestre modale și glisante. Dacă nu aveți nevoie de nimic din toate acestea, opriți-l. În unele cazuri, toate componentele pot fi foarte utile atunci când aveți atât un meniu derulant, cât și un glisor pe site. pagina principala, și ferestre modale. În unele cazuri, cel mult 1-2 componente pot fi utile, atunci nu este nevoie să prelungiți codul, să dezactivați componentele inutile.

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 niciodată pe site-urile obișnuite. Și așa mai departe. Uită-te bine la ceea ce ai nevoie și la ce nu.

Î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ă, indentări 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ă de pe site. Ei bine, variabila @font-size-base setează 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 în care dimensiunea implicită a fontului este de 20 de pixeli. În consecință, puteți ajusta imediat dimensiunea titlurilor etc.

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. Variabila 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 restrângerea. De asemenea, puteți elimina această variabilă și puteți scrie valoarea în pixeli. De exemplu, 520 pixeli. Apoi, restrângerea 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 această metodă de personalizare (folosind pagina Personalizare de pe site-ul oficial) nu este cea 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 modificări cadrului sau pur și simplu dezactivați componentele necesare. Dacă intenționați să modificați mai multe valori, trebuie să utilizați o metodă diferită.

De fapt, când vă configurați versiunea cadrului, faceți clic pe buton mare chiar în partea de jos a paginii. Acesta va compila o versiune de Bootstrap pentru tine și o va descărca pe computer. Apoi, tot ce trebuie să faceți este să vă conectați și să utilizați. Am vorbit deja despre conexiune în articolele anterioare (inclusiv cum se face pe WordPress).

După cum am spus deja, dacă trebuie să faceți o mulțime de modifică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 în detaliu asupra personalizării prin mai puține surse, dar aceasta este cea mai bună metodă, deoarece nu va trebui să accesați pagina Personalizare de 100 de ori și să compilați din ce în ce mai multe versiuni noi ale cadrului.

În mod implicit, în versiunea completă a cadrului, puteți găsi și fișierul bootstrap-theme.css în folderul css. Nu este necesar să-l conectați la site. Ce funcții îndeplinește? Fișierul este necesar numai pentru, dacă este necesar, pentru a schimba stilurile pentru elementele de care aveți nevoie.

Același rol poate fi îndeplinit de propriul tău style.css, în care poți, de asemenea, să înlocuiești stiluri. Bootstrap-theme nu este un fișier obligatoriu, este folosit mai degrabă 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;

style.css – scrieți stiluri pentru elementele dvs. în acest fișier.

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 - style.css și să nu folosiți deloc fișierul 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 cu codul cadru, astfel încât stilurile să fie suprascrise cu succes.

După cum am spus deja, în mod implicit Bootstrap include un fișier cu 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șierul cu tema bootstrap și puteți obține propriile stiluri pentru butoane. Dar vă puteți întreba, de ce să nu faceți aceste modificări direct în bootstrap.css? Ei bine, adevărul este că noi versiuni ale cadrului sunt lansate în mod constant și, dacă decideți să faceți upgrade, va fi dificil să implementați modificările în noua versiune. Este considerată o bună practică 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.

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 web conceput folosind Bootstrap ca șablon și o temă ca un set de reguli CSS care suprascriu vedere standard elemente.

Astfel de teme pot fi descărcate, de exemplu, de pe bootswatch.com/, iar folosind un motor de căutare puteți găsi alte zeci.

Principiul general al instalării unor astfel de teme depinde de site-ul de unde le descarci. Dacă îl puteți descărca în format bootstrap-theme, grozav, descărcați-l și conectați-l. Pe bootswatch, de exemplu, trebuie să descărcați bootstrap.css și să înlocuiți fișierul de stil cadru standard cu acesta. Există și o opțiune cu mai puține surse.

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

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

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

Odată descărcat, dezarhivați folderul comprimat pentru a vedea structura Bootstrap (compilată). Ar trebui sa fie cam asa:

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.

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.

Stiluri de corpuri comune pentru a reseta tipul și fundalul, stilurile de link, grila șablonului și două elemente simple de marcare.

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

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

La fel ca și componentele, aceste plugin-uri Javascript sunt componente interactive pentru sfaturi cu instrumente, blocuri de informații, componente modale și multe altele.

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

• Grupuri de butoane
• Liste derulante de butoane
• 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
• Introducere de la tastatură înainte

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

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

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

Și totul este pus la punct! Adăugând aceste două fișiere, puteți dezvolta un site web sau o aplicație folosind Bootstrap.

În această lecție veți învăța cum să conectați platforma Twitter Bootstrap 3 la site și, de asemenea, în ce fișiere constă.

Pentru a învăța platforma Twitter Bootstrap trebuie să aveți:

O versiune compilată și redusă a cadrului Twitter Bootstrap 3 este forma principală de livrare a acestui cadru pe care o aleg majoritatea dezvoltatorilor web. Acest formular de livrare se distinge prin ușurința de conectare la site-ul dvs., deoarece conține fișiere CSS și JavaScript pre-preparate și reduse, precum și pictograme în format de font.

Versiunea platformei cu coduri sursă include, pe lângă fișierele CSS și JavaScript precompilate, și codurile sursă ale acestei platforme (fișiere Less și JavaScript), documentație pt. Limba engleză, diverse exemple, informații despre licență și multe altele.

În această lecție ne vom uita la conectarea unei versiuni pre-compilate și miniate, care poate fi descărcată din linkul de mai sus. În această formă de livrare a platformei Twitter Bootstrap 3, ne interesează cel mai mult versiunile minimizate (comprimate) ale fișierelor compilate, deoarece acestea au dimensiuni mai mici și, prin urmare, măresc viteza de încărcare a paginilor web ale site-ului.

Dar înainte de a trece la conectarea platformei Twitter Bootstrap la o pagină web, trebuie să luăm în considerare structura acesteia la nivel de fișier.

După ce ați descărcat versiunea precompilată și redusă de Bootstrap 3 pe computer, trebuie să o despachetați folosind orice arhivator în directorul proiectului dvs. web.

Dacă ne uităm la acest folder, vom vedea că framework-ul Twitter Bootstrap este format din 3 directoare ("CSS", "FONTS" și "JS") și fișiere.

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

Fișierele platformei sunt prezentate în 2 tipuri:

• Primul tip este fișierele CSS și JavaScript precompilate (bootstrap.css, bootstrap-theme.css, bootstrap.js)
• Al doilea tip - acestea sunt fișiere CSS și JavaScript pre-compilate și miniate (comprimate) (bootstrap.min.css, bootstrap-theme.min.css, bootstrap.min.js)

Fișierele de tip 2 sunt mai de preferat să fie folosite pentru un site web, deoarece conțin exact același cod ca fișierele de tip 1, dar în stare comprimată. În consecință, site-urile care folosesc fișiere de tip 2 ale platformei Twitter Bootstrap 3 se încarcă mai repede.

Pe lângă aceste fișiere, acest pachet include încă 4 fișiere cu fonturi „Glyphicons” (glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf, glyphicons-halflings-regular.woff), care diferă între ele numai prin formatul în care este stocat fontul. Fontul „Glyphicons” este format din 200 de pictograme din setul „Glyphicon Halflings”.

Atenție: pentru ca scripturile platformei Twitter Bootstrap 3 (bootstrap.js și bootstrap.min.js) să funcționeze, trebuie să aveți conectată cea mai recentă versiune a bibliotecii jQuery.

Așadar, am analizat structura și scopul fișierelor platformei Twitter Bootstrap 3. Acum este timpul să conectăm această platformă folosind fișiere compilate și reduse la o pagină web. Să ne uităm la acest proces pas cu pas. Ca urmare a acțiunilor noastre, dorim să obținem o pagină web în HTML 5, la care este conectată platforma Twitter Bootstrap 3 Pentru a demonstra că platforma funcționează, vom crea un buton în această pagină web, atunci când facem clic, un pop va fi afișat panoul de sus cu un mesaj.

Pasul 1. Creați o pagină HTML

Deschideți editorul de cod preferat și creați un fișier numit index și extensia html. Tastați sau inserați într-un editor de text următorul cod:

DOCTYPE html > Șablon Bootstrap de bază Faceți clic pe butonul

Pasul 2: Conectarea cadrului Bootstrap 3 la pagina web

Pentru a conecta cadrul Twitter Bootstrap 3 la o pagină web, trebuie să faceți următoarele:

Notă: cel mai bine este să includeți fișiere JavaScript înainte de eticheta body de închidere (adică înainte de ), deoarece acest lucru va îmbunătăți viteza de încărcare a conținutului principal al paginii web.

Pasul 3: Salvați pagina web și verificați dacă componenta Bootstrap funcționează

După crearea unei pagini web la care este conectată platforma Twitter Bootstrap 3, aceasta trebuie salvată într-un fișier cu extensie html (De exemplu: „index.html”). După aceasta, trebuie să deschideți pagina web creată într-un browser web și să verificați funcționarea componentei Bootstrap „Popovers”.

Notă: Când salvați un fișier de pagină web într-un editor de text, acordați atenție extensiei acestuia, care ar trebui să fie „html”. Deoarece unele editoare de text, cum ar fi bloc-notes, salvează automat fișierele cu extensia „txt”.

Structura de fișiere a proiectului, care se bazează pe platforma Twitter Bootstrap 3:

Demonstrarea componentei Bootstrap „Popovers”:

Faceți clic pe butonul

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 diverse rezoluții ecrane ș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 amenajarea acestuia folosind un cadru poate fi mai dificilă decât înseamnă nativ. Cu toate acestea, acest lucru este posibil.

După aceea, pentru a schimba stilurile Bootstrap, trebuie să le schimbaț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 cerute, care trebuie întrerupte și nu va fi întotdeauna banal, pentru că Unele opțiuni Bootstrap se aplică multor selectoare în formă modificată, cum ar fi prin formule. Instrumentul Personalizare poate fi de ajutor 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.

Există un numar mare de modalități de a compila LESS fișiere și 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ă.

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

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

Este convenabil să salvați pictogramele rețelelor sociale cu aceleași dimensiuni într-un singur fișier și să le folosiți 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

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

Î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 specificat fontul specific al paginii pentru textul din butoane.

Apoi vom descrie 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.

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.

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

Coloana poate fi setată simultan diverse 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 oferă un anumit „domeniu” regulilor.

Introduceți sigla în eticheta antetului:

Nu sunt necesare stiluri suplimentare.

Pentru a crea o căutare, vom avea nevoie de următoarele componente 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 dispozitive speciale cititoare de ecran.

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

…Căutare 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; ) ) ) )

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.

• Acasă
• Despre noi
• Servicii
• Parteneri
• Clienți
• Proiecte
• Cariere
• a lua legatura

/*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 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, sans-serif: url(../images/bg.png);
Aici desenăm o dungă gri ca fundal pe div și punem un h1 în linie în ea în fontul necesarși o culoare de fundal a paginii pentru a da impresia unui fundal transparent pentru h1.

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.

• Lorem ipsum
• Donec tincidunt laoreet
• Vestibul de elită
• Etiam pharetra
• Phasellus placerat
• Cras et nisi vitae odio

@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; ) )
Î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”.

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, în stilurile site-ului, trebuie să modificați setările standard ale panoului, 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.

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

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

Lorem ipsum dolor sit amet…

Donec vel nisl nibh…

Donec vel nisl nibh…

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;

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ă

art Director

designer senior ui

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.

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 de subsol definește o zonă gri pe toată lățimea ecranului, iar containerul din interiorul său afișează zona centrată pe ecrane mariși setează înălțimea și indentarea subsolului. Folosim coloane pentru a alinia blocurile din subsol.

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

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; ) ) )
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 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; ) ) ) )

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 -dreapta: 10px; .social-icon-small ( lățime: 16px; înălțime: 16px; fundal: url(../images/social-small.png) no-repeat; afișare: bloc inline; 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-icon) și mici (.social-icon-small). Am setat aceste clase să fie afișate ca un bloc inline cu dimensiuni fixe și același fundal. Și apoi folosind CSS am mutat acest fundal, astfel încât imaginea corespunzătoare să fie afișată pe fiecare link.

Copyright 2012 Whitesquare. O creație pcklab

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

Aceasta completează aspectul. Proiect gata poate fi descărcat

Există mai multe moduri de a începe cu Bootstrap, fiecare dintre ele interesantă în funcție de nivelul dvs. de experiență și de nevoile specifice de utilizare. Vezi ce funcționează cel mai bine pentru tine.

Versiunea actuală este v3.3.2.

$ bower install bootstrap

Bootstrap este disponibil în două versiuni. Una dintre ele conține o versiune compilată, iar cealaltă o versiune minimizată (redusă în volum). În ambele cazuri, directoarele și fișierele sunt grupate logic.

După descărcare, dezarhivați fișierele. Veți vedea ceva asemănător cu asta:

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

Aceasta este forma de bază a Bootstrap: fișierele compilate sunt gata pentru utilizare rapidăîn orice proiect web. Sunt furnizate ansambluri CSS și JS (bootstrap.*) și o versiune redusă (bootstrap.min.*). Fonturile Glyphicons sunt incluse ca o opțiune suplimentară pentru Bootstrap.

Codul sursă Bootstrap include CSS, JavaScript și fonturi precompilate, împreună cu Less, JavaScript și documentația originală. Pentru claritate, consultați exemplul de mai jos.

Bootstrap/ ├── mai puțin/ ├── js/ ├── fonturi/ ├── dist/ │ ├── css/ │ ├── js/ ────── font └── exemple/

less/ , js/ , fonts/ cu pictograme. Dosarul dist/ include toate fișierele compilate enumerate menționate în secțiunea de mai sus. Dosarul documente/ conține documentație și exemple/ de utilizare a Bootstrap. În plus, există informații despre licențe și dezvoltarea versiunilor anterioare.

Rămâneți la curent cu evoluțiile Bootstrap. Adresați-vă comunității pentru informații utile.

Veți avea nevoie de Respond.js pentru IE8 (deoarece interogările media există și trebuie gestionate). Aceasta va bloca proprietatea „mobilitatea site-ului” a Bootstrap.

Am folosit acești pași ca exemplu. Vizualizați codul sursă pentru a vedea diferențele.

Vedeți documentația despre migrarea de la o versiune mai veche de Bootstrap la v3.x? Consultați ghidul de tranziție.

Bootstrap este proiectat să funcționeze cel mai bine în browsere noi, ceea ce înseamnă că browserele mai vechi pot să nu redea întotdeauna stilurile corect, în ciuda faptului că sunt complet funcționale în randarea anumitor componente.

În special, sprijinim ultimele versiuni din următoarele browsereși platforme. Pe platforma Windows, acceptăm Internet Explorer 8-11. Informații de asistență mai specifice sunt furnizate mai jos.

Bootstrap ar trebui să arate și să se comporte destul de bine în Chromium și Chrome pentru Linux, Firefox pentru Linux și Internet Explorer 7, deși nu sunt acceptate oficial.

Internet Explorer 8 și 9 sunt, de asemenea, acceptate, dar rețineți că unele proprietăți CSS3 și elemente HTML5 nu sunt pe deplin acceptate în aceste browsere. În plus, Internet Explorer 8 necesită utilizarea Respond.js pentru a activa suportul pentru interogări media.

Pentru a vă atrage atenția, le-am inclus ca exemple în documentația Bootstrap.

În Safari v6.1 pentru OS X și Safari pentru iOS v7.0.1, atunci când utilizați clasa de marcare .col-*-1, motorul Safari are unele probleme cu numărul de zecimale. Adică, dacă aveți 12 coloane separate de aspect, veți observa că acestea vor fi mai scurte în comparație cu alte rânduri de coloane. Puteți schimba puțin () aici, dar aveți câteva opțiuni:

• Adăugați .pull-right la ultima coloană din aspect pentru a obține o aliniere tare la dreapta.
• Schimbați procentele manual pentru a obține rotunjirea perfectă pentru Safari (mai dificil decât prima opțiune)

Vom fi cu ochii pe această problemă și dacă există o soluție mai simplă ne vom actualiza codul.

Suport pentru overflow: ascuns pe un element este destul de limitat pe iOS și Android. În browserul acestor dispozitive, când derulați dincolo de modal de sus sau de jos, conținutul în .

Vă rugăm să rețineți - dacă utilizați un formular de introducere într-o fereastră modală sau navigare, iOS are o eroare de afișare prin care poziția elementelor fixe nu este actualizată atunci când sunt apelate tastatura virtuala. Există câteva soluții pentru aceasta, inclusiv transformarea elementelor în poziție: absolute sau apelarea unui temporizator când elementul are focalizare și încercarea de a-l remedia manual. Bootstrap nu se ocupă de astfel de erori, așa că va trebui să vă dați seama singur.

Elementul .dropdown-backdrop nu este utilizat în navigare pe iOS din cauza dificultăților z-index. Astfel, pentru a închide meniurile drop-down, trebuie pur și simplu să faceți clic pe elementul drop-down (sau orice alt element care va genera un eveniment de clic în iOS).

La modificarea dimensiunii paginii, unele elemente inevitabil se afișează incorect: acest lucru este valabil pentru Bootstrap și pentru restul documentului web. În funcție de cazul specific, putem remedia acest lucru (dacă este necesar, puteți deschide cererea corespunzătoare, dar mai întâi trebuie să căutați cereri similare). Cu toate acestea, în general, le ignorăm, deoarece adesea nu au nicio soluție directă, în afară de crearea de soluții hacker.

Chiar și în unele browsere moderne, imprimarea poate fi dusă. Mai exact, începând cu Chrome v32 și indiferent de setările de margine, Chrome folosește în mod semnificativ lățimea ferestrei de vizualizare mai îngustă decât dimensiunea fizică a hârtiei atunci când rezolvă interogările media în timpul imprimării unei pagini web. Acest lucru poate face ca marcajul Bootstrap foarte mic să se activeze în mod neașteptat la imprimare. Soluții sugerate:

• Aplicați un marcaj foarte mic și asigurați-vă că pagina dvs. arată bine.
• Setarea valorii @screen-* Mai puține variabile, astfel încât hârtia de imprimantă să fie considerată mai mult decât foarte mică.
• Adăugați interogări personalizate pentru a redimensiona marcajul punctului de întrerupere numai pentru suporturile de imprimare.

Ieșit din cutie, Android 4.1 (și chiar și unele versiuni mai noi aparent) sunt livrate cu aplicația Browser ca browser web implicit ales (spre deosebire de Chrome). Din păcate, aplicația Browser are o mulțime de erori și inconsecvențe cu CSS în general.

Pe elemente, browserul stoc Android nu va afișa controalele laterale dacă există o rază de chenar și/sau o chenar aplicată. Utilizați fragmentul de cod de mai jos pentru a elimina CSS-ul ofensator și pentru a reda ca element fără stil în browserul de stoc Android. Agentul de utilizator sniffing evită interferența cu browserele Chrome, Safari și Mozilla.

var nua = navigator . userAgent var isAndroid = (nua . indexOf ( „Mozilla/5.0”) > - 1 && nua . indexOf ( „Android „ ) > - 1 && nua . indexOf ( „AppleWebKit”) > - 1 && nua . indexOf ( „Chrome” ) === - 1 ) if (este Android ) ( $ ( "select.form-control"). removeClass ( "form-control"). css ( "lățime", "100%")

Deși nu acceptăm oficial pluginuri sau suplimente terțe, oferim mai multe sfaturi utile asta te va ajuta sa eviti posibile problemeîn proiectele tale.

În funcție de context, puteți modifica dimensiunea casetei numai acolo unde este necesar (Opțiunea 1) sau o puteți reseta pentru zone întregi (Opțiunea 2).

/* Resetări pentru dimensiunea casetei * * Resetați elementele individuale sau suprascrieți regiunile pentru a evita conflictele din cauza * setărilor globale ale modelului de casetă din Bootstrap. Două opțiuni, suprascrieri individuale și *resetări ale regiunii, sunt disponibile ca CSS simplu și formate Less necompilate. */ /* Opțiunea 1A: suprascrieți modelul cutiei unui singur element prin CSS */ .element ( -webkit-box-sizing : conținut - casetă ; -moz-box-sizing : conținut - casetă ; box-sizing : conținut - caseta ; ) /* Opțiunea 1B: suprascrieți modelul cutiei unui singur element folosind un mixin Bootstrap Less */ .element ( .box-sizing (content-box); ) /* Opțiunea 2A: resetați o regiune întreagă prin CSS * / .reset-box-sizing , .reset-box-sizing *, .reset-box-sizing * :înainte , .reset-box-sizing * :după ( -webkit-box-sizing : conținut - casetă ; -moz- box-sizing : content - box-sizing : content - box ) /* Opțiunea 2B: Resetați o regiune întreagă cu un mixin personalizat Mai puțin */ .reset-box-sizing ( & , *, * :before , * : after ( .box-sizing (content-box ); ) .element ( .reset-box-sizing (); )

Bootstrap urmează standardele web comune și, cu un efort suplimentar minim, poate fi folosit pentru a crea site-uri accesibile AT.

Dacă meniul dvs. de navigare are multe legături și se află înaintea conținutului principal din DOM, adăugați un link Accesați conținutul principal direct după etichetă.

Treci la conținutul principal Conținutul paginii principale.

La imbricarea anteturilor (- ), titlul propriu-zis al documentului trebuie să fie . Următoarele anteturi trebuie specificate logic folosind - astfel încât programul care citește anteturile să poată construi conținutul paginii.

• Includeți codul sursă Bootstrap în sine, sau a oricăror modificări pe care le-ați fi făcut acestuia, în orice redistribuire pe care o puteți asambla și care îl include
• Trimiteți modificările pe care le-ați făcut la Bootstrap pentru demonstrații în proiectul Bootstrap (deși feedbackul este binevenit)

Versiunea completă a licenței Bootstrap este postată în proiectul de depozit mai detaliat.

Bootstrap este mai bun mențineți atunci când vă aflați într-un mediu de dezvoltare, împărțiți fiecare dependență de el în versiuni separate. Urmând această regulă, actualizarea la o nouă versiune de Bootstrap în viitor va fi ușoară.

După ce ați descărcat și inclus stilurile și scripturile Bootstrap, puteți personaliza componentele acestora. Pentru a face acest lucru, pur și simplu creați o nouă foaie de stil (LESS dacă preferați sau doar CSS).

Și, în viitor, includeți orice componente Bootstrap și HTML pentru a crea șabloane de pagină pentru site-ul dvs.

Puteți personaliza componentele în diferite grade, dar majoritatea se încadrează în două categorii: configurare ușoară Și restructurare completa. Există multe exemple diferite de la terți care vă permit să implementați ambele categorii.

Noi definim configurare ușoară cum ar fi modificări superficiale, cum ar fi modificările de culoare și font pentru componentele Bootstrap existente. Un exemplu de configurare ușoară este