Bootstrap este un set de grafică, stilistică, layout și Javascript gata de utilizare,
născut în Twitter de dezvoltatorii Mark Otto și Jacob Thornton.
Astăzi Bootstrap este un proiect independent și a fost pus la dispoziția dezvoltatorilor din întreaga lume, care sunt liberi să utilizeze acest cadru ca bază pentru proiectele lor web. Astăzi, Bootstrap se poate bucura de un succes cu adevărat global: datorită unei audiențe a utilizatorilor care se extind rapid, Bootstrap reprezintă astăzi una dintre cele mai utilizate soluții pentru proiectarea de șabloane pentru web, în special într-o perspectivă responsive.
Ce ne putem aștepta de la Bootstrap?
Răspunsul este simplu: acest cadru ne oferă componentele constructive cu care să construim pagini web HTML5, pe deplin responsive, consistente și funcționale. Utilitatea lui Bootstrap este imediat evidentă, mai ales în situația actuală în care paginile web pot fi utilizate pe o multitudine de dispozitive cu caracteristici diferite. Bootstrap va avea grijă să vă ofere elemente de stil care să permită paginii să se adapteze la dispozitiv folosind în același timp elemente de interfață comune site-urilor moderne, cele pe care utilizatorul le așteaptă și despre care știe comportamentul și sensul.
Introduceți Bootstrap în proiectele dvs.
Structura paginii
Integrare Bootstrap
în propriile proiecte de web este foarte simplu: este vorba de chiamarea componentelor cadrului în paginile HTML.
Obțineți framework Bootstrap 4:
Descărcați pachetul pe care le preferați și despachetați. Dosarul "dist" care la rândul său conține tot ceea ce avem nevoie. În scopul acestui ghid, fișierele compilate sunt absolut suficiente și sunt cele pe care trebuie să le folosim. Să examinăm un exemplu de structură HTML în care sunt evidențiate elementele decisive pentru utilizarea acestui cadru. În HEAD a documentului am inclus fișierul CSS de bază al cadrului nostru. La sfârșitul documentului includerea fișierelor Javascript.
Structura de bază, trebuie să fie ca în imagine.
Bootstrap 4 CDN
În cele din urmă, aveți și opțiunea de a le include pe paginile dvs. apelând-le de la o rețea CDN (Content Delivery Network), adică de la un server care face aceste fișiere accesibile publicului. Pentru a apela Bootstrap de la CND puteți folosi următoarele rânduri de cod:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
Structura de bază, trebuie să fie ca în imagine.
Ce conține și când se utilizează Bootstrap?
Merită să utilizați Bootstrap atunci când doriți să creați un nou site fără a fi nevoie să scrieți totul de la zero. Bootstrap a fost lansat de Twitter ca un cadru gratuit, nu există nicio taxă pentru descărcarea sau utilizarea acestuia.
Pentru inceput
Pentru obținerea cadrului Bootstrap trebuie doar să vizitați site-ul getbootstrap.com și faceți clic pe butonul de descărcare.
Grid system
Această zonă conține toate elementele CSS care permit definirea structurii paginii, adică aspectul acesteia.
CSS baza
Conține stiluri predefinite pentru elemente de pagină, cum ar fi titluri (H1, H2, ...), tabele, butoane, elemente de formă, imagini ...
Componente
Elemente mai complexe ale butoanelor sau tabelelor, foarte frecvente pe site-uri web. De asemenea, inclusiv un set de icoane, puse la dispoziție de Glyphicons.
Javascript
Această ultimă zonă conține mai multe plug-in-uri jQuery pentru a crea efecte foarte frecvente, cum ar fi tranziții, ferestre modale, ferestre pop-up, caruseluri, acordeoane, tab-uri.
100% compatibilitate
Bootstrap este compatibil cu toate browserele moderne (Chrome, Firefox, Internet Explorer, Safari și Opera). Internet Explorer este întotdeauna un "caz special".
Ușor de utilizat
Oricine are cunoștințe de bază despre HTML și CSS poate începe să utilizeze Bootstrap.
Info Componente
Componente și șabloane care vă ajută să începeți să lucrați cu Bootstrap și demonstratii practice
-
Grilă
De baza, grila este formată din 12 coloane structurale. Suma totală a coloanelor grilajului pe care se extind elementele de dispunere în lățime nu poate depăși numărul de 12. Dacă coloanele ocupate de aspect sunt mai mici de 12, spațiul gol este lăsat. Aceasta înseamnă că, dacă aș dori să creez, de exemplu, un aspect compus din trei coloane identice și să ocupe tot spațiul disponibil în lățime, fiecare dintre coloanele layout-ului meu va trebui să se extindă pe 4 coloane ale grilei (4x3 = 12). Dar dacă doriți o coloană centrală mai largă, puteți extinde prima și a treia coloană a dispunerii pe două coloane ale grilajului, iar cea centrală pe opt coloane (2 + 8 + 2 = 12).
Următorul exemplu arată cum să obțineți trei coloane de aceeași lățime de la tablete și să redimensionați pe desktop-uri mari. Pe telefoanele mobile sau pe ecrane mai mici de 768 pixeli, coloanele sunt stivuite automat
Redimensionați fereastra browserului pentru a vedea efectul.
.col-sm-4.col-sm-4.col-sm-4Copiați și inseriți codul în pagina dvs.:
.............- Immagini responsive
Să luăm un exemplu care continuă cu aspectul de mai sus, însă înlocuiți textul celei de-a doua coloane a primului rând cu o imagine cu lățimea de 500 px. Pentru a face imaginea responsive; de fapt, este suficient să se atribuie clasei img-responsive însăși: această clasă atribuie imaginii proprietățile CSS max-width: 100%; și înălțimea: auto; astfel încât imaginea să fie redimensionată automat în funcție de elementul părinte.
Clasa .img-fluid face imaginea plăcută elementului părinte (redimensionează fereastra browserului pentru a vedea efectul):
classe .rounded
classe .rounded-circleclasse .img-fluidCopiați și inseriți codul în pagina dvs.:
........- Navbar
Bootstrap oferă diferite navbar-uri și oferă posibilitatea introducerii mai multor elemente în plus față de linkurile către alte pagini: este posibil să introduceți un câmp de căutare, o listă derulantă și multe alte elemente .... Barele de navigare Bootstrap sunt receptive în mod implicit: atunci când fereastra browserului devine mică, elementele barei sunt ascunse și în locul lor este afișat un buton care vă permite să le afișați din nou pe teanc, astfel încât să nu mai fie orizontal .
Dacă nu vă place stilul prestabilit al barei de navigare, Bootstrap oferă o bară de navigare alternativă neagră:
Collapsible Navbar
O bară de navigare inversată este neagră în loc de gri.
Copiați și inseriți codul în pagina dvs.:
.........- Titlurile paginilor cu Bootstrap: page-header e jumbotron
Pentru a crea antetul paginii (destinat ca zonă de antet vizibilă de utilizator), Bootstrap are o clasă specială, antet de pagină, care creează o zonă în care să se introducă titlul H1 și orice text suplimentar. Cu toate acestea, dacă doriți un antet de pagină mai "evident", ar putea fi util să utilizați componenta Jumbotron, care creează o zonă dreptunghiulară cu muchii rotunjite prelungite pentru întreaga zonă orizontală disponibilă.
Sfat: în cadrul unui jumbotron puteți introduce aproape orice cod HTML valid, inclusiv alte elemente / clase Bootstrap.
Bootstrap Tutorial
Bootstrap este cel mai popular cadru HTML, CSS și JS pentru dezvoltarea de proiecte reactive și mobile pe web.
Acesta este un text.
Acesta este un alt text.
Copiați și inseriți codul în pagina dvs.:
......- Butoane
Pentru a crea un buton, trebuie să utilizați un buton sau un element de intrare și să îl atribuiți clasei btn. Aceasta este clasa "esențială" care califică un element ca un buton, însă prin atribuirea de clase suplimentare se poate acționa asupra aspectului, dimensiunii și comportamentului butonului.
Bootstrap oferă diferite stiluri de butoane:
Copiați și inseriți codul în pagina dvs.:
......- I Badges
I badges sunt elemente mici care pot fi plasate alături de alte elemente pentru a evidenția prezența unui "nou", cum ar fi, de exemplu, numărul de mesaje necitite într-un sistem ipotetic de mesagerie online.
Badge în cadrul unui buton
Copiați și inseriți codul în pagina dvs.:
......- Schede Dinamice (Tabs)
Clasa nav aplicată listei le identifică ca un set de linkuri care vă permit să "răsfoiți" conținutul. În mod specific, vom vedea cum să folosim această clasă pentru a crea sisteme de afișare și afișare pentru conținut în spații mici.
HOME
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Copiați și inseriți codul în pagina dvs.:
......- Tabele de bază
O tabela de bază are o căptușeală ușoară și numai divizoare orizontale.
Clase contextuale
Clasele contextuale pot fi folosite pentru a colora rândurile de tabele de celule. Clasele care pot fi utilizate sunt: .active, .success, .info, .warning e .danger.
Firstname Lastname Email Default Defaultson def@somemail.com Success Doe john@example.com Danger Moe mary@example.com Copiați și inseriți codul în pagina dvs.:
......- Bootstrap Formulare
Comenzile de formular primesc automat stiluri globale cu Bootstrap:
Toate elementele de intrare, textarea și selectarea textului cu clasa .form-control au o lățime de 100%.
---------------------------------------------------------------------------Vertical (basic) form
Următorul exemplu creează o formă verticală cu două câmpuri de introducere, o casetă de selectare și un buton de trimitere:
Inline form
Faceți viewport-ul de vizualizare mai mare de 768 px pentru a vedea că toate elementele formularului sunt aliniate, aliniate la stânga și etichetele sunt alăturate.
Copiați și inseriți codul în pagina dvs.:
......- Bara de progres
Elementul ușor de realizat cu Bootstrap este bara de progres. În cele din urmă, este posibil să inseriți în interiorul unui element un text care să indice procentul de finalizare.
Copiați și inseriți codul în pagina dvs.:
......- Carousel
Efectuarea unui carusel necesită elemente diferite. Mai întâi, un <div> care acționează ca un container pentru toate elementele caruselului și care trebuie să aibă clasele de carusel și alunecare. În div, se creează trei blocuri.
Următorul exemplu arată modul de creare a unui carusel de bază:
Copiați și inseriți codul în pagina dvs.:
......- Lista completă a componentelor
Secțiunea Componente (http://getbootstrap.com/components) include toate componentele care depășesc elementele HTML primare. Iată lista completă:
Component &descriere Glyphicons instrucțiuni și exemple pentru a utiliza fontul implicit pentru pictograma Bootstrap și pentru a asocia pictogramele cu alte componente. Dropdowns meniuri pop-up contextuale pentru liste de linkuri care trebuie asociate cu bara de navigare și alte butoane de activare; interactivitatea este gestionată prin intermediul pluginului Javascript Button groups o extensie a componentei primare Buttonpentru a crea grupuri și bare de butoane. Button dropdowns menu dropdown asociate cu butoanele. Input groups câmpurile de introducere in formulare asociate și grupate cu text și / sau butoane. Navs meniuri de navigare create din listele de link-uri în diferite configurații (tab sau pills, orizontale sau verticale, etc.). Navbar o componentă complexă pentru a crea o bară principală de navigare a site-ului interactiv și responsive. Breadcrumbs navigarea prin navigație pentru a raporta poziția curentă în structura site-ului. Pagination link pentru navigarea pe site-urile cu mai multe pagini. Componentă &Descriere Labels etichete generice pentru evidențierea textului. Badges Pune inevidența elemente noi sau elemente necitite în conformitate cu convențiile interfeței OS. Jumbotron o cutie generică și flexibilă pentru a găzdui conținutul evidențiat al paginii. Page header de asemenea, în acest caz, o casetă generică pentru găzduirea anteturilor secțiunii unui document. Thumbnails o componentă flexibilă care se asociază cu grila pentru a crea galerii responsive de imagini, videoclipuri și casete de text. Alerts fereastră de avertizare pop-up; interactivitatea este gestionată prin intermediul pluginului. Progress bars statice și animate bare de progres. Media objects listele de obiecte compuse din text și imagini plutind la dreapta sau la stânga sub formă de comentarii. List group componente flexibile pentru afișarea elementelor listate grupate într-o cutie. Panels o structură generică pentru crearea panourilor și cutiilor. Wells o cutie generică cu efect încorporat pentru evidențierea conținutului. Contactați-mă pentru orice motiv!
Formularul dinamic poate fi utilizat în scopuri și interese diferite. Doar acordați atenție finalizării (dacă aveți probleme, citiți ghidul), adaptand astfel mesajul la nevoile dvs.
Bootstrap: site-urile de consultat
Pe scurt, vă prezint site-urile de consultat dacă intenționați să dezvoltați un proiect cu acest framework.
getbootstrap.com Site-ul oficial cu cea mai populară bibliotecă de componente front-end din lume. Stați la curent cu dezvoltarea Bootstrap.
w3schools.com este un site popular pentru învățarea online a tehnologiilor web. Conținutul include tutoriale și referințe referitoare la HTML, CSS, JavaScript, JSON, PHP, Python, AngularJS, SQL, Bootstrap, Node.js, jQuery, XQuery, AJAX și XML. El primește în fiecare lună peste 10 milioane de vizitatori. Creat în 1998, numele său provine de pe World Wide Web, dar nu este afiliat cu W3C (World Wide Web Consortium). Acesta este gestionat de Refsnes Data în Norvegia. W3Schools prezintă mii de exemple de cod. Folosind editorul TryIt, cititorii pot edita exemplele și pot executa codul într-o sandbox..
codepen este o comunitate on-line pentru testarea și afișarea de fragmente generate de utilizatori HTML, CSS și JavaScript. Acesta funcționează ca un editor de coduri online și un mediu de învățare open source, unde dezvoltatorii pot crea fragmente de cod, denumite în mod creativ "pixuri", și le pot testa. A fost fondată în 2012 de dezvoltatorii full-stack Alex Vazquez, Tim Sabat și designerul de front-end Chris Coyier. Angajații săi lucrează într-un mediu îndepărtat și îndepărtat, rareori se întâlnesc în persoană. CodePen este una dintre cele mai mari comunități pentru web designeri și dezvoltatori pentru a-și prezenta abilitățile de codificare.
- Immagini responsive
