Bootstrap este un cadru popular pentru front-end pentru dezvoltarea web. Conține componente pre-construite și elemente de design pentru a stiliza conținutul HTML. Browserele moderne precum Chrome, Firefox, Opera, Safari și Internet Explorer acceptă Bootstrap.
Bootstrap include un sistem de grilă receptiv pentru diferite planuri. Este un punct de plecare excelent pentru construirea unui site web pentru dispozitive mobile. De asemenea, include funcționalități JavaScript opționale, cum ar fi conținut pliabil, carusele și modale.
Conţinut
- 1 Noțiuni introductive despre tutorialul Bootstrap
- 2 Șabloane
- 2.1 Bară de navigare
- 2.1.0.1 Cum se folosește
- 2.1.0.2 Exemplu de cod
- 2.1.0.3 Stiluri Navbar
- 2.1.0.4 Adăugarea meniurilor drop-down la bara de navigație
- 2.1.0.5 Adăugarea butoanelor la bara de navigație
- 2.1.0.6 Adăugarea formularelor în bara de navigație
- 2.1.0.7 Alinierea elementelor la dreapta pe bara de navigare
- 2.1.0.8 Afișarea barei de navă independent de derulare
- 2.1.0.9 Prăbușirea barei de navigație
- 2.1.0.10 Exemple de bare
Versiunea istorică
Twitter a dezvoltat inițial cadrul Bootstrap ca un instrument intern. L-au lansat ca proiect open source în august 2011.
Bootstrap 2 a fost lansat în ianuarie 2012. Una dintre caracteristicile principale a fost introducerea sistemului de rețea cu 12 coloane responsive. Bootstrap 3 a apărut în august 2013, trecând la un design plat și la o abordare mobilă. Bootstrap 4 este disponibil în versiune beta începând din august 2017 și include acum Sass și Flexbox.
Bootstrap 4 a fost în curs de dezvoltare timp de doi ani înainte de a lansa unele versiuni beta în 2017, în timp ce prima versiune stabilă a fost lansată în ianuarie 2018. Unele modificări notabile includ:
- Mutat de la Mai puțin la Sass;
- Mutat pe Flexbox și sistem de rețea îmbunătățit;
- Carduri adăugate (înlocuirea puțurilor, miniaturilor și panourilor);
- Și mult mai mult!
La momentul scrierii, cea mai recentă versiune a Bootstrap este 4.1.3. Dacă doriți să țineți pasul cu orice noutăți despre anunțuri, urmați-le Aici.
Instalare
Există două opțiuni principale pentru a adăuga Bootstrap la proiectul dvs. web. Puteți face link către surse disponibile public sau puteți descărca direct cadrul.
Conectarea la o altă sursă
Puteți adăuga Bootstrap CSS utilizând un <link>
element din interiorul <head>
a paginii dvs. web care face trimitere la o rețea de livrare a conținutului (CDN):
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
Adăugarea elementelor JavaScript din Bootstrap este similară cu <script>
elemente plasate de obicei în partea de jos a etichetei „”. Este posibil să fie necesar să includeți mai întâi unele dependențe. Acordați o atenție specială comenzii enumerate:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Notă: Acestea sunt doar exemple și se pot modifica fără notificare prealabilă. Vă rugăm să consultați un CDN pentru linkurile actuale pe care să le includeți în proiectul dvs.
Descărcați / instalați
Puteți descărca și instala fișierele sursă Bootstrap cu Bower, Composer, Meteor sau npm. Acest lucru permite un control mai mare și opțiunea de a include sau exclude module după cum este necesar.
npm install bootstrap
gem 'bootstrap', '~> 4.1.3'
Notă: Acestea sunt doar exemple și se pot modifica fără notificare prealabilă. Vă rugăm să consultați
În plus, le puteți găsi pe amândouă liber și plătit teme care se bazează pe cadrul Bootstrap pentru a oferi un aspect mai personalizat și mai elegant.
Resurse Bootstrap:
Inspirația site-ului Bootstrap
Prezentare a site-urilor construite folosind Bootstrap
Liner HTML pentru proiecte care utilizează Bootstrap
Elemente de design și fragmente de cod pentru Bootstrap
Cod, temă și resurse suplimentare pentru Bootstrap
Noțiuni introductive despre tutorialul Bootstrap
Utilizarea Bootstrap facilitează proiectarea unui site web complet receptiv și este un cadru care merită învățat.
Ce este un site web receptiv?
Un site web receptiv este un site web care redimensionează și rearanjează elementele de pe pagină în funcție de dimensiunea browserului dvs. Cu un site web receptiv, dacă redimensionați browserul, puteți vedea modificările apar în timp real. Bootstrap face site-ul web receptiv pentru dvs.
Cum să adăugați Bootstrap la pagina dvs.
Adăugarea bootstrap la pagina dvs. este un proces rapid, trebuie doar să adăugați următoarele la <head>
etichete în codul dvs.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
De asemenea, va trebui să adăugați următoarele elemente între body
etichete în codul dvs. Cu bootstrap veți folosi <div>
Etichete. Atunci când utilizați multe dintre caracteristicile Bootstrap, fiecare etichetă va avea propriul său set unic de clase aplicate care permite etichetei să își îndeplinească sarcina. Alte secțiuni ale acestui ghid Bootstrap vor afișa mai multe exemple de utilizare a Bootstrap <div>
Etichete. (<div>
etichetele nu sunt exclusive pentru Bootstrap, însă Bootstrap le folosește.).
Mai jos este codul care s-ar adăuga la body
etichete din codul dvs. pentru a termina de început. Rețineți că, în timp ce acest lucru creează containerul, pagina va rămâne necompletată până când adăugați conținut în container.
<div class="alert alert-success" role="alert">
<strong>Congratulations!</strong>
<p>Bootstrap is now working on this page</p>
</div>
Șabloane
Șabloanele sunt seturi de instrumente pre-construite care fac ca învârtirea unei noi pagini web să fie o briză. Dacă aveți o idee generală despre aspectul dorit sau dacă doriți să răsfoiți o bibliotecă de șabloane de aspect obișnuite pentru idei, șabloanele Bootstrap iau mare parte din plictiseala și frustrările din procesul inițial de construire. Această asistență vă ajută să vă concentrați asupra detaliilor mai fine ale proiectului, în loc să vă întrebați de ce CSS nu cooperează.
Noțiuni de bază
- Pagina oficială a Bootstrap oferă „Teme” în loc de șabloane. Temele sunt doar proiecte inițiale complet construite, în timp ce un șablon descrie doar un cadru HTML predefinit. Temele costă bani și poate ajută dezvoltatorul începător, în timp ce multe șabloane sunt open source și furnizează doar elementele preliminare de aspect necesare.
- Mai jos este o listă de șabloane de aspect, realizate special pentru Bootstrap. A se distra!
Linkuri șablon
Cadrul Bootstrap vă oferă o caracteristică bare de navigare a apelurilor. Pe scurt, o bară de navigare (denumită și bare de navă) este un antet în partea de sus a paginii pentru a afișa informații de navigare.
Cum se folosește
Pentru a utiliza Bootstrap Navigation Bars, adăugați un <nav>
element în partea de sus din interiorul <body>
element al paginii dvs. web. Există diverse stiluri pe care le puteți adăuga pentru a personaliza afișarea navelor dvs.
Exemplu de cod
Acesta este codul necesar pentru a crea o navbar de bază.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/#">Site Name</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/#">Home</a></li>
<li><a href="https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/#">Page 1</a></li>
<li><a href="https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/#">Page 2</a></li>
<li><a href="https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/#">Page 3</a></li>
</ul>
</div>
</nav>
Bootstrap oferă un set de clase în cadrul Bootstrap pentru a vă stiliza barele navale. Aceste clase sunt după cum urmează:
-
navbar navbar-default
Acesta este stilul implicit pentru barele dvs. navale. -
navbar navbar-inverse
Acest lucru este similar cu stilul implicit, cu excepția culorilor inversate.
Puteți include un meniu derulant într-o navbar. Această caracteristică necesită includerea fișierului javascript Bootstrap pentru ca acesta să funcționeze.
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/#">Drop down
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/#">Item 1</a></li>
<li><a href="https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/#">Item 2</a></li>
<li><a href="https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/#">Item 3</a></li>
</ul>
</li>
Puteți adăuga butoane pe bara de navigare. Clasele Bootstrap Button existente funcționează, totuși va trebui să includeți clasa navbar-btn
până la sfârșitul listei de clase.
<button class="btn navbar-btn">Button</button>
De asemenea, puteți adăuga formulare în bara de navigație. Aceasta ar putea fi utilizată pentru sarcini precum un câmp de căutare, un câmp de conectare rapidă etc.
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
În unele cazuri, poate doriți să aliniați elementele dintr-o navbar la dreapta (de exemplu, un buton de conectare sau de înscriere). Pentru a face acest lucru, va trebui să utilizați navbar-right
clasă.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/#">Site Name</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/#">Home</a></li>
<li><a href="https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/#">Page 1</a></li>
<li><a href="https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/#">Page 2</a></li>
<li><a href="https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/#">Action Link #1</a></li>
<li><a href="https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/#">Action Link #2</a></li>
</ul>
</div>
</nav>
În unele cazuri, vă recomandăm să păstrați bara de navigare în partea de sus sau de jos a ecranului, indiferent de derulare. Va trebui să adăugați fie fișierul navbar-fixed-top
sau navbar-fixed-bottom
clasa la <nav>
element.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/#">Site Name</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/#">Home</a></li>
<li><a href="https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/#">Page 1</a></li>
<li><a href="https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/#">Page 2</a></li>
<li><a href="https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/#">Page 3</a></li>
</ul>
</div>
</nav>
Pe un ecran mic (cum ar fi un telefon sau o tabletă) bara de navigare va ocupa prea mult spațiu. Din fericire există opțiunea de a restrânge bara de navigație. Puteți realiza acest lucru folosind următorul exemplu.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/#">Site Name</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/#">Home</a></li>
<li><a href="https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/#">Page 1</a></li>
<li><a href="https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/#">Page 2</a></li>
<li><a href="https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/#">Page 3</a></li>
</ul>
</div>
</nav>