Bootstrap

Web Pre-Employment Training
Twitter Bootstrap
Copyright 2017 © Fortech. All rights reserved.

Ce este Bootstrap ?
• Bootstrap este o colecție de componente scrise cu ajutorul HTML , CSS, JS care ne ajută să
creăm website-uri sau aplicații web responsive, mobile first.
• În prezent exista în jur de 7 milioane de site-uri web făcute cu ajutorul framework-ului

bootstrap.
• Putem vedea câteva exemple de aplicații web bootstrap pe expo.getbootstrap.com
• De asemenea o serie de template-uri pe care le putem folosi la propriile noastre aplicații

putem găsii pe startbootstrap.com

Cum instalăm Bootstrap ?
• Există multe metode de a instala librăria bootstrap, fie prin download-ul direct al fișierelor, fie
prin folosirea unor package manageri cum ar fi BOWER sau NPM.
• În continuare vom folosi NPM pentru a instala local libraria bootstrap 4:

– Creăm un director pentru aplicația noastră în care creăm un fișier package.json cu ajutorul comenzii
npm init.
– npm install bootstrap@4.0.0-alpha.6 –save pentru a instala libraria bootstrap 4
– Pentru a ne folosi de versiunea SASS a lui bootstrap va trebui sa includem fișierele SASS ale librariei,
pentru aceasta vom crea două directoare , css și sass. În directorul sass vom crea un fișier style.scss
în care vom introduce instrucțiunea de import
• @import "../node_modules/bootstrap/scss/bootstrap.scss“;
– Vom folosi apoi instrucțiunile cunoscute de node-sass sau ruby pentru a compila conținutul sass din
directorul sass, în directorul css

Cum instalăm Bootstrap ?
– În continuare vom crea fișierul index.html în care vom include toate resursele necesare dupa forma:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/style.css">

</head>
<body>
<h1>Hello, world!</h1>
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/tether/dist/js/tether.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>

Grid System
• Bootstrap folosește un sistem de aranjare (sau layouting) în pagină bazată pe un set de

instrucțiuni CSS care pot ajuta la crearea ușoară a unui design fluid / responsive.
https://v4-alpha.getbootstrap.com/layout/overview/
• La bază, exista două clase:
– container – defineste un simplu container care este în general folosit la împachetarea întregului conținut al unei
pagini
– container-fluid – la fel ca și container doar ca acest tip de container se întinde pe toată lațimea paginii.
• Grid-ul se folosește de un system de 12 coloane aranjate în rows care la rândul lor sunt așezate în
containere.
• De asemenea exista un set de praguri de rezolutie a browserului în funcție de care se decide aranjamentul
dinamic (responsive) al elementelor în container, acestea în general fiind:
– Extra small < 576px
– Small >= 576px
– Medium >= 768px
– Large >= 992px
– Extra large >= 1200px

Grid System
• Tasks
– Creăm un grid care să aibă 3 coloane care se întind egal pe toată lațimea paginii.
– Creăm un grid care să aibă 2 coloane, care să se rearanjeze una sub cealaltă atunci când fereastra
browserului este sub 720px
Documentație și exemple: https://v4-alpha.getbootstrap.com/layout/grid/

Components - NavBar
• Navbar-ul este în general folosit la structurarea meniurilor unei aplicații, dar poate conține și
elemente de tip text-input, imagini , etc.
• Tasks:
– Copy-Paste la primul exemplu de la secțiunea NAVBAR
• https://v4-alpha.getbootstrap.com/components/navbar/
– Schimbăm culoarea nav-bar-ului în verde sau albastru fără a aplica still css (doar cu clasele existente
în bootstrap)
– Fixăm nav-bar-ul în capul paginii în așa fel încât să rămână fix atunci când scrolăm conținutul.

Components - Forms
• Cu ajutorul stilurilor bootstrap putem foarte ușor sa aranjăm diferite elemente într-un form.
• Tasks:
– Copy-Paste la primul exemplu din secțiunea de Forms de pe site-ul bootstrap

• https://v4-alpha.getbootstrap.com/components/forms/
– Simplificați exemplul de mai sus în așa fel încât să conțină doar două câmpuri, email și password, și
un buton de submit.

Components - Tables
• Bootstrap conține și clase pentru stilizarea tabelelor.
• Tasks:
– Pentru urmatorul tabel, stilizați folosind clasele bootstrap pentru a îl stiliza
• după exemplele de pe https://v4-alpha.getbootstrap.com/content/tables/
<table>
<thead>
<tr>
<th>Nume</th> <th>Prenume</th> <th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cova</td> <td>Alexandru</td> <td>alexandruco@fortech.ro</td>
</tr>
<tr>
<td>Tirnovan</td> <td>Raluca</td> <td>ralucat@fortech.ro</td>
</tr>
<tr>
<td>Terhes</td> <td>Ionut</td> <td>ionutt@fortech.ro</td>
</tr>
</tbody>
</table>

Components – Modals
• Ferestrele modale pot fi folosite pentru a arăta oricând conținut utilizatorului deasupra
restului de conținut web.
• Modalele pot fi folosite atât prin metoda atributelor de date, cât și prin intermediul javascript
– Tasks:
• Copy-Paste la codul din sectiunea Live Demo din pagina de modale
– https://v4-alpha.getbootstrap.com/components/modal/#live-demo
• Creați 3 butoane, iar pentru fiecare buton în parte modalul va fi deschis cu conținut text diferit:
– 3 butoane cu id-uri și texte diferite la apăsarea cărora se va executa funcția show() a
modalului.
– O funcționalitate javascript care ascultă pe eventul ‘shown.bs.modal’ al modalului.
– Pe callback-ul de shown al modalului, folosim argumentul event (primul argument al
functiei de callback) pentru a lua textul butonului apăsat și a-l plasa într-un container ,div
,paragraf, etc din interiorul modalului.

Other Components
• Bootstrap conține o multitudine de alte componente care pot fi utilizate la crearea unei
aplicații web, cum ar fi:
– Buttons https://v4-alpha.getbootstrap.com/components/buttons/
– Jumbotron https://v4-alpha.getbootstrap.com/components/jumbotron/
– Alerts https://v4-alpha.getbootstrap.com/components/alerts/
– Progress https://v4-alpha.getbootstrap.com/components/progress/
– Cards https://v4-alpha.getbootstrap.com/components/card/
……

Bootstrap

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Bootstrap

Încărcat de

Drepturi de autor:

Formate disponibile

Web Pre-Employment Training

Copyright 2017 © Fortech. All rights reserved.

• În prezent exista în jur de 7 milioane de site-uri web făcute cu ajutorul framework-ului

• Putem vedea câteva exemple de aplicații web bootstrap pe expo.getbootstrap.com

• De asemenea o serie de template-uri pe care le putem folosi la propriile noastre aplicații

Copyright 2017 © Fortech. All rights reserved.

• În continuare vom folosi NPM pentru a instala local libraria bootstrap 4:

Copyright 2017 © Fortech. All rights reserved.

<link rel="stylesheet" href="css/style.css">

Copyright 2017 © Fortech. All rights reserved.

• Bootstrap folosește un sistem de aranjare (sau layouting) în pagină bazată pe un set de

Copyright 2017 © Fortech. All rights reserved.

Documentație și exemple: https://v4-alpha.getbootstrap.com/layout/grid/

Copyright 2017 © Fortech. All rights reserved.

Copyright 2017 © Fortech. All rights reserved.

– Copy-Paste la primul exemplu din secțiunea de Forms de pe site-ul bootstrap

Copyright 2017 © Fortech. All rights reserved.

• Bootstrap conține și clase pentru stilizarea tabelelor.

Copyright 2017 © Fortech. All rights reserved.

Copyright 2017 © Fortech. All rights reserved.

Copyright 2017 © Fortech. All rights reserved.

S-ar putea să vă placă și