Piu C7 2

BOOTSTRAP
http://ctrl-d.ro/tutoriale/ce-este-bootstrap-si-cum-te-poate-ajuta-in-dezvoltarea-de-site-uri-web-moderne/
1.INTRODUCERE
Bootstrap este un mod ordonat de a utiliza elemente CSS, HTML şi Java Script pentru a crea structuri pe care le
poţi refolosi cu un simplu copy-paste. Dacă este utilizat se poate economisi până la 70% din timpul de dezvoltare
pe front-end pentru majoritatea proiectelor, de la landing-page-uri, la site-uri de prezentare şi magazine online.
Denumit iniţial Twitter Blueprint, framework-ul a fost dezvoltat de Mark Otto şi Jacob Thornton ca o soluţie
internă pentru Twitter. După câteva luni de la implementare, mai mulţi dezvoltatori au început să contribuie la el
în timpul Hack Week = săptămâna în care angajaţii dezvoltau diverse proiecte, iar în august 2011 a fost lansat
open-source sub denumirea de Bootstrap.
Dacă eşti web designer sau web developer şi realizezi site-uri web, de cele mai multe ori vei dezvolta site-uri care
repetă structuri de cod simple: butoane, formulare, sau ceva mai complexe: meniuri de navigare, carousel şi altele.
Bootstrap te poate ajuta să devii mai eficient şi să salvezi din timpul de dezvoltare necesar pentru un site web,
oferind structuri predefinite necesare în majoritatea proiectelor tale: meniu de navigare, carousel, formulare şi cel
mai important grid-urile responsive.
Versiunea curentă este 3.37 şi o poţi descărca de aici: http://getbootstrap.com

2.ȘASE MOTIVE SĂ UTILIZEZI BOOTSTRAP
#1. Compilarea şi personalizarea

Este unul din motivele pentru care poate fi utilizat inclusiv atunci când îţi doreşti performanţă de la site-ul
tău. Bootstrap îţi pune la dispoziţie opţiunea de compilare: selectezi şi descarci doar ceea ce foloseşti în proiect.
Poţi reduce astfel de la 120KB cât are fişierul CSS comprimat la doar 40 KB, dacă utilizezi de exemplu doar
structurile responsive. La fel şi în cazul Java Script, pe care îl poţi compila sau exclude din proiect, dacă nu ai
nevoie.
Pagina de compilare o găseşti aici: http://getbootstrap.com/customize/

#2. Sistemul de 12 griduri responsive
Bootstrap împarte pagina web în 12 coloane cu valori procentual-egale. Unind aceste coloane poţi obţine
box-urile dorite pentru a adăuga conţinutul tău. Majoritatea site-urilor moderne utilizează aceaste structuri,
Bootstrap fiind de altfel acuzat că duce la realizarea de site-uri mult prea asemănătoare.
(http://www.zingdesign.com/5-reasons-not-to-use-twitter-bootstrap/).
Este însă extrem de flexibil, iar clasele responsive pot fi controlate în funcţie de lăţimea dispozitivului. Iată mai jos
un exemplu, a cărui structură o poţi recunoaşte uşor:
#3. Componentele HTML şi JavaScript
Bootstrap pune la dispoziţie o serie de componente şi elemente pe care le vei folosi în majoritatea
proiectelor: meniul de navigare cu dropdown, carouselul, breadcrumbs şi multe altele.

# 4. Stiluri CSS de bază pentru majoritatea elementelor.
Pe lângă sistemul de griduri care îţi poate uşura semnificativ munca, Bootstrap vine şi cu o serie de stiluri
pentru elementele de bază: butoane, formulare, tabele, imagini şi altele. Poate fi inclus foarte uşor în proiecte.
#5. Suport, documentare şi răspunsuri
Bootstrap vine cu o documentare foarte bună din care poţi învăţa uşor. Ce se întâmplă dacă clientul tău
doreşte să dea swipe, iar carouselul Bootstrap nu are inclus asta? Poţi începe dezvoltarea noilor opţiuni sau poţi
face o căutare pe Google unde cel mai probabil vei găsi soluţii testate şi funcţionale.

#6. Cererea proiectelor dezvoltate pe Bootstrap este în creştere
Majoritatea template-urilor şi site-urilor noi utilizează Bootstrap în structura lor. Timpul de dezvoltare mai
mic dar şi modificările care pot fi realizate cu uşurinţă îl fac să fie cerut. De aceea vei avea nevoie să cunoşti
clasele şi să poţi realiza modificări uşor. Iată de exemplu template-uri pe Themeforest.net

3. CUM ÎNCEPI SĂ LUCREZI CU BOOTSTRAP
#1: Descărcarea
Accesează http://getbootstrap.com/getting-started/ şi apasă butonul de Download Bootstrap. Poţi utiliza de
asemenea şi CDN-urile dacă nu doreşti să descarci fişierele.
#2: Includerea fişierelor în directorul root al site-ului

După descărcare şi dezarhivare vei găsi 3 directoare: css, fonts si js. Fişierul bootstrap.min.css din folderul css, îl
vei muta în directorul tău CSS, iar bootstrap.min.js în JS.
Vei include fisierul bootstrap.min.css, iar sub el stilul tău css. În acesta vei suprascrie clasele Bootstrap atunci
când este cazul şi vei adăuga stilurile tale.
Pentru o încărcare mai rapidă a site-ului, fişierele js se includ la sfârşitul paginii. Bootstrap.min.js are nevoie de
librăria jQuery, pe care o poţi downloada şi insera înainte.

Primele linii de cod cu Bootstrap
De acum poţi insera coduri Bootstrap în pagina ta. Vom începe cu meniul de navigare, un element
complex, dar de efect. Accesezi rubrica Components > Navbar , copiezi codul pentru meniul de navigare şi îl
lipeşti în pagina ta web. Salvezi şi testezi în browser. Ceea ce trebuie să obţii este meniul Bootstrap, aşa cum apare
în exemplul următor:
Toate aceste lucruri le poţi obţine în 5 minute, de aici însă trebuie să personalizezi în funcţie de ceea ce doreşti să
obţii.
Clasele Bootstrap
Pentru a lucra rapid, trebuie să cunoşti clasele predefinite, iar cel mai simplu mod de a le învăţa este chiar
navigarea pe site-ului lor.
Vei găsi categoria de CSS, componentele şi structurile Java Script. Cu puţină răbdare şi timp dedicat
învăţării, vei începe să dezvolţi proiecte în scurt timp.
Lista completă clase din BOOTSTRAP

https://www.w3schools.com/bootstrap/bootstrap_ref_all_classes.asp
4. CONCLUZIE
Fie că eşti web designer sau web developer, Bootstrap îţi poate salva un timp considerabil în dezvoltarea
proiectelor. În plus este redat foarte bine în majoritatea dispozitivelor şi browserelor. Poate fi utilizat în proiectele
de zi cu zi, de la landing page-uri şi site-uri de prezentare până la magazine online.
http://www.invata-programare.ro/article/introducere-despre-bootstrap-si-configurarea-mediului-de-lucru
Introducere: Despre bootstrap si configurarea mediului de lucru

postat acum un an de Stefanescu Mihai in categorie Bootstrap
De ce să folosesc Bootstrap?
 este Mobile First
 este suportat de toate browser-ele populare
 ușor de învățat
 este responsive
Cu ce vine Bootstrap?
 Scaffolding - Bootstrap vine cu o sistem de grile (grids), stiluri pentru link-uri, background-uri, butoane și
multe altele
 CSS - Bootstrap vine cu setari ce pot fi modificate din CSS și elemente prestabilite
 Componente - Bootstrap conține o mulțime de elemente refolosibile precum icon-uri, dropdown-uri,
meniuri, alerte, pop-overs si multe altele
 Plugin-uri JavaScript - Bootstrap conține o mulțime de plugin-uri jQuery pe care le puteți include în
funcție de necesități, fie pe toate
A.Setarea mediului de lucru

Putem începe să folosim Bootstrap foarte ușor, iar mai jos am să vă explic cum puteți descărca Bootstrap, structura
de fișiere si cum ar trebui să arate prima voastră pagină HTML scrisă cu ajutorul Bootstrap.
B.Download
Puteți descărca ultima versiune de bootstrap de pe http://www.getbootstrap.com. După ce ai apăsat pe butonul

Download Bootstrap esti trimis pe o pagina cu 3 opțiuni de download:
· Download Bootstrap – aceasta este versiunea precompilata si minified. In această versiune nu este inclusă
documentația
· Download Source – Aceasta este versiunea LESS descărcată direct de pe GitHub.
· Download Sass – Versiunea SASS.
Pentru a înțelege mai bine Bootstrap în această serie de articole folosim versiunea precompilată de Bootstrap.
C.Structura de fisiere
Versiunea precompilata – după descărcare versiune precompilată și dezarhivare fișier veți avea aceste fișiere
aranjate în această structura:
Se poate observa că avem atât versiunile normale cât și versiunile min ale fișierelor împreună cu fonturile.
Versiunea Source Code
Fișierele se găsesc în folder-ele less, js, fonts, iar în folderul dist găsiți versiunea precompilată.
D.Primul Template
<!DOCTYPE html>
<html>
<head>
<title>Invata-programare : Bootstrap</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

<link href = "css/bootstrap.min.css" rel = "stylesheet">
</head>

<body>
<h1>Salut Invata-Programare!</h1>


<script src = "https://code.jquery.com/jquery.js"></script>

<script src = "js/bootstrap.min.js"></script>
</body>
</html>
?
E.Grid system - Ce este acest grid de fapt?
Grid-ul Bootstrap ne permite să construim rapid layout-ul unui website responsive. Spre deosebire de grid-ul din
Bootstrap 2, grid-ul din Bootstrap 3 este mobile first și vine cu 12 coloane ce se modifică în funcție de mărimea
viewport-ului.
Bootstrap vine cu clase predefinite pentru grid ce corespund anumitor tipuri de dispozitive (telefoane, tablete,
desktop-uri). De exemplu, putem folosim clasele de genul “col-xs-“ pentru dispozitive xtra small pentru a crea o
grilă pentru telefoane, folosim clasele de genul “col-sm-” pentru dispozitivele cu ecrane medii precum tabletele,
folosim clasele de genul “col-md” pentru dispozitive cu ecrane mai mari ca tabletele (desktop-uri cu monitoare nu
foarte mari) și clasele de genul “col-lg-” pentru dispozitive cu display-uri foarte mari (monitoare foarte mari).
Codul sursă pentru o structura standard de Bootstrap cu grid-uri:
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
</div>
<div class="row">
...
</div>
Prima dată se crează un rând (<div class="row">), adăugând apoi numărul dorit de coloane (tag-uri cu clase .col-
*-* ). Pentru fiecare rând suma numerelor numerele inserate în .col-*-* trebuie sa fie 12.
Layout pe 2 coloane
În acest exemplu am să vă arăt cum puteți face un layout pe 2 coloane pentru toate tipurile de dispozitive, iar pe
mobil coloanele se vor așeza una sub alta.
?
<div class="container">
<div class="row">
<div class="col-sm-6">.col-sm-4</div>
<div class="col-sm-6">.col-sm-8</div>
</div>
</div>
Layout pe 3 coloane
La fel ca și în cazul layout-ului pe 2 coloane, vom face un layout pe 3 coloane de această dată ce va fi afișat așa pe
desktop și pe tablete în modul landscape (de fapt pe orice ecran cu o rezoluție mai mare sau egală cu 992px).
<div class=”container”>
<div class="row">
<div class="col-md-4"><!—Coloana stanga--></div>
<div class="col-md-4"></div>
<div class="col-md-4"><!—Coloana dreapta--></div>
</div>
</div>
Layout flexibil în functie de viewport

Acum vom face un layout ceva mai flexibil, ce își va schimba numărul de coloane în functie de viewport. În
următorul exemplu facem un layout pe 3 coloane pe dispozitivele medii (laptop-uri/desktop-uri/tablete) iar pe
mobil sau pe tablete în mod portrait vor fi 2 coloane, iar a 3-a coloană se va muta sub ele.
Offset
În Bootstrap putem seta ca o coloană să aibă un offset pentru a alinia o coloana. Pentru offset putem folosi clase de
genul “col-md—offset-” sau “col-sm-offset-”. Aceste clase de tip offset day un margin left coloanei pe care sunt
setate de dimensiunea unei coloane de numarul setat. De exemplu, daca folosim “col-md-offset-4” pe o coloana de
tip “col-md-8” va muta aceasta coloana mai in dreapta cu dimensiunea unei coloane de “col-md-4”.
<div class=”container”>
<div class="row">
<div class="col-md-8 col-md-offset-4"></div>
</div>
</div>
?
Diverse clase
Bootstrap ne pune la dispoziție următoarele clase pentru a ascunde anumite elemente pe diverse rezoluții.
Începând cu Bootstrap 3.2 putem folosi clasa “.visible-xx-xx” pentru a afișa sau nu un element pe un anumit
viewport:
 .visible-xs-* vizibil pe rezolutii mai mici de 768px

 .visible-sm-* vizibil pe rezolutii intre 768px si 992px
 .visible-md-* vizibil pe rezolutii intre 992px si 1200px
 .visible-lg-* vizibil pe rezolutii mai mari de 1200px
În același mod putem folosi și clasele “.hidden-xx-xx”

 .hidden-xs-* ascuns pe rezolutii mai mici de 768px
 .hidden-sm-* ascuns pe rezolutii intre 768px si 992px
 .hidden-md-* ascuns pe rezolutii intre 992px si 1200px
 .hidden-lg-* ascuns pe rezolutii mai mari de 1200px
F. Layout Fixed si Layout Fluid

În Bootstrap putem folosi fie clasa .container fie clasa .container-fluid pentru a afișa un site full-width sau pentru
a-l afișa numai pe o porțiune din mijlocul ecranului.
Layout Fixed
Pentru a face un layout cu o lățime fixă începem prin a pune conținutul într-un div cu clasa “container”, după care
facem div-uri cu clasa “row”, iar în interiorul lor punem div-uri cu clasele “col-md-*” sau “col-sm-*” sau “col-xs-
*” sau “col-lg-*”.
<div class="container">
<div class="row">
<div class="col-md-4"></div>
</div>
</div>
Layout Fluid
În Bootstrap 3 putem folosi clasa container-fluid pentru a crea un layout full-width, pentru a folosi 100% din
viewport.
<div class="container-fluid">
<div class="row">
</div>
</div>

Tabelul de mai jos rezuma utilizarea sistemului de grid-uri în Bootstrap

G.Tipografie în Bootstrap
Heading-uri
Tag-urile de la <h1> la <h6> în Bootstrap le putem folosi ca in orice alt cod HTML astfel:
<h1>h1. Bootstrap heading</h1>

Iată și rezultatul:
Putem folosi și tag-ul <small> sau un <span class=”small”> pentru a obține acest rezultat:
Paragrafe
Bootstrap ne pune la dispoziție 2 tipuri de paragrafe, paragraf normal și paragraf lead care este puțin mai mare și
iese în evidență.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate placerat
pellentesque. </p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
vulputate placerat pellentesque.
</p>
?
Aliniere
În Bootstrap putem alinia textul folosind următoarele clase:
<p class="text-left">Text aliniat la stanga.</p>

<p class="text-center">Text aliniat la centru.</p>
<p class="text-right">Text aliniat la dreapta.</p>
<p class="text-justify">Text justified.</p>
?
Transformare
Putem transforma textul folosind următoarele clase:
<p class="text-lowercase">The quick brown fox jumps over the lazy dog.</p>
<p class="text-uppercase">The quick brown fox jumps over the lazy dog.</p>
<p class="text-capitalize">The quick brown fox jumps over the lazy dog.</p>
?
Culori text
Bootstrap ne pune la dispoziție și o serie de clase ce ne ajută la colorarea textului:
<p class="text-muted">Muted: This text is grayed out.</p>

<p class="text-primary">Important: Please read the instructions carefully before
proceeding.</p>
<p class="text-success">Success: Your message has been sent successfully.</p>
<p class="text-info">Note: You must agree with the terms and conditions to complete the sign
up process.</p>
<p class="text-warning">Warning: There was a problem with your network connection.</p>
<p class="text-danger">Error: An error has been occurred while submitting your data.</p>
Blockquote
Bootstrap vine și cu un stil mai special pentru tag-ul <blockquote>
<blockquote>
<p>The world is a dangerous place to live; not because of the people who are evil, but
because of
the people who don't do anything about it.</p>
<small>by <cite>Albert Einstein</cite></small>
</blockquote>
?
H.Tabele
Bootstrap ne pune la dispoziție o serie de clase ce ne pot schimba modul în care arată un tabel în HTML.
Un tabel simplu
Putem crea un tabel normal și îi dăm clasa “table” care îi va da un aspect ceva mai îngrijit.
<table class="table">
<thead>
<tr>
<th>Rand</th>
<th>Nume</th>
<th>Prenume</th>
<th>Limbaj</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Stefanescu</td>
<td>Mihai</td>
<td>PHP</td>
</tr>
<tr>
<td>2</td>
<td>Ionescu</td>
<td>George</td>
<td>C#</td>
</tr>
<tr>
<td>3</td>
<td>Popescu</td>
<td>Ion</td>
<td>Java</td>
</tr>
</tbody>
</table>
Tabel cu rânduri colorate

În Bootstrap putem face un tabel cu rânduri de culori diferite foarte simplu - trebuie numai să punem clasa table-
striped la table.
<table class="table table-striped">
<thead>
<tr>
<th>Rand</th>
<th>Nume</th>
<th>Prenume</th>
<th>Limbaj</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Stefanescu</td>
<td>Mihai</td>
<td>PHP</td>
</tr>
<tr>
<td>2</td>
<td>Ionescu</td>
<td>George</td>
<td>C#</td>
</tr>
<tr>
<td>3</td>
<td>Popescu</td>
<td>Ion</td>
<td>Java</td>
</tr>
</tbody>
</table>
Tabel cu border pe margini

Pur și simplu adăugăm și clasa table-bordered la table.
<table class="table table-bordered">

<thead>
<tr>
<th>Rand</th>
<th>Nume</th>
<th>Prenume</th>
<th>Limbaj</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Stefanescu</td>
<td>Mihai</td>
<td>PHP</td>
</tr>
<tr>
<td>2</td>
<td>Ionescu</td>
<td>George</td>
<td>C#</td>
</tr>
<tr>
<td>3</td>
<td>Popescu</td>
<td>Ion</td>
<td>Java</td>
</tr>
</tbody>
</table>
?
Tabel condensat
Acest tip de tabel nu este altceva decat un tabel cu mai putin padding.
? <table class="table table-condensed">

<thead>
<tr>
<th>Rand</th>
<th>Nume</th>
<th>Prenume</th>
<th>Limbaj</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Stefanescu</td>
<td>Mihai</td>
<td>PHP</td>
</tr>
<tr>
<td>2</td>
<td>Ionescu</td>
<td>George</td>
<td>C#</td>
</tr>
<tr>
<td>3</td>
<td>Popescu</td>
<td>Ion</td>
<td>Java</td>
</tr>
</tbody>
</table>
I.Liste in Bootstrap
După cum deja știați (din HTML) putem defini 3 tipuri de liste:
 liste neordonate (ul) ce sunt marcate cu buline
 liste ordonate (ol) ce sunt marcate cu numere.
 liste de definire (dl) ce contin termeni si definitiile acestora
Lista neordonata unstyled

Probabil ați întâlnit momente în care trebuia să limitați stilul default al unei liste neordonate din CSS. Bootstrap ne
pune la dispoziție o clasă ce face exact acest lucru.
<ul class="list-unstyled">
<li>Acasa</li>
<li>Tutoriale
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Bootstrap</li>
</ul>
</li>
<li>Despre Mine</li>
<li>Contact</li>
</ul>
Lista Inline
Probabil ați fost nevoiți să faceți un ul sa fie afișat inline (pentru un meniu probabil). Bootstrap ne pune la
dispoziție o clasa ce face acest lucru pentru noi.
<ul class="list-inline">
<li>Home</li>
<li>Despre mine</li>
<li>Categorii</li>
<li>Servicii</li>
<li>Contact</li>
</ul>
?
Home Despre mine Categorii Servicii Contact
Liste de definire
Iată cum putem crea o listă de definire orizontala în Bootstrap:
<dl class="dl-horizontal">
<dt>User Agent</dt>
<dd>An HTML user agent is any device that interprets HTML documents.</dd>
<dt>Client-side Scripting</dt>
<dd>Client-side scripting generally refers to the category of computer programs on the
web that are
executed client-side i.e. by the user's web browser.</dd>
<dt>Document Tree</dt>
<dd>The tree of elements encoded in the source document.</dd>
</dl>
J.List Groups
Aceste List Groups sunt foarte folositoare atunci când dorim să afișăm o lista de elemente într-un mod mai
ordonat. In cel mai banal exemplu putem spune că un list group seamană cu o listă neordonată cu clasa .list-group,
iar elementele acesteia au clasa .list-group-item.
List Groups cu item-uri link-uri
Putem face această listă să arate ceva mai bine, dar va trebui să înlocuim <li>-urile cu <a>-uri, iar <ul>-ul cu
<div>. Bineînțeles că putem adăuga și simboluri grafice/icons sau badge-uri.
<div class="list-group">
<a href="#" class="list-group-item active">
<span class="glyphicon glyphicon-camera"></span> Imagini <span
class="badge">13</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-file"></span> Documente <span
</a>
<span class="glyphicon glyphicon-music"></span> Muzica <span
</a>
<span class="glyphicon glyphicon-film"></span> Filme <span class="badge">3</span>
</a>
</div>
K.Imagini în Bootstrap
Colțuri rotunjite / Rounded Corners

Se poate utiliza clasa .img-rounded pentru a adăuga colțuri rotunjite unei imagini (IE8 nu suportă colțuri
rotunjite).
Exemplu
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236">
Try it Yourself »
Cerc/Circle
Se utilizează clasa .img-circle pentru a insera imaginea într-o zonă circulară (IE8 nu suportă circle).
Exemplu
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236">
Try it Yourself »
Thumbnail
Folosim clasa .img-thumbnail pentru a crea imagini de tip thumbnail.
Exemplu
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304"
height="236">
Try it Yourself »
Imagini responsive
Imaginile responsive se ajustează automat pentru a încăpea pe ecran. Se pot realiza imagini responsive prin
adăugarea clasei .img-responsive tag-ului <img>. Imaginea se va scala în cadrul eleemntului părinte.
Clasa .img-responsive aplică imaginii următoarele setări display: block; și max-width: 100%; și height:
auto;
Exemplu
<img class="img-responsive" src="img_chania.jpg" alt="Chania">
Try it Yourself »
Galerie de imagini/ Image Gallery
Se poate utiliza sistemul de griduri de la Bootstrap combinat cu clasa .thumbnail pentru a crea o galerie de
imagini.
Exemplu
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/lights.jpg">
<img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
<a href="/w3images/nature.jpg">
<img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
</div>
</a>
</div>
</div>
<a href="/w3images/fjords.jpg">
<img src="/w3images/fjords.jpg" alt="Fjords" style="width:100%">
</div>
</a>
</div>
</div>
</div>
Try it Yourself »
Dacă se dorește ca elementele video sau slideshow-urile sa fie scalate și să arate bine pe orice dispozitiv putem
realiza aplicarea claselor responsive direct elementelor <iframe>, <embed>, <video> si <object> .
În exemplul de mai jos se crează un video prin adăugarea unei clase .embed-responsive-item tag-ului <iframe>
(astfel elementul video se va scala în elementul părinte). Codul din <div> definește aspectul/aspect ratio
elementului video.
Exemplu
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Aspectul /aspect ratio unei imagini se referă la relatia proportională dintre latimea si inaltimea unei imagini. De
obicei se utilizeaza aspectul de 4:3 pentru formatul video universal si 16:9 pentru televiziunea HD. Se poate alege
una dintre cele 2 clase anterior menționate.
Exemplu


</div>


</div>
M. Implementare carusel în Bootstrap http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
In Bootstrap plug-in-urile pot fi incluse individual folosind fisierul "carousel.js" sau toate odată folosind
"bootstrap.js" sau "bootstrap.min.js". Elementele de tip carusel nu sunt suportate de Internet Explorer 9 deoarece
utilizează tranziții și animații CSS3.
Exemplu de creare a unui carusel
<div id="myCarousel" class="carousel slide" data-ride="carousel">


<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>


<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
</div>
<div class="item">

<img src="img_chania2.jpg" alt="Chania">
</div>
<div class="item">

<img src="img_flower.jpg" alt="Flower">
</div>
<div class="item">

<img src="img_flower2.jpg" alt="Flower">
</div>
</div>


<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Pentru ca elementele de control ale unui carusel sa funcționeze corect e necesar ca fiecare carusel să foloseasca un
id (în exemplul de mai sus id="myCarousel").
Clasa class="carousel" specifică faptul că acest <div> conține un carusel. Clasa .slide adaugă o tranziție și un efect
de animație care glisează imaginea realizând tranziția spre o imagine nouă. Atributul data-ride="carousel" este
utilizat pentru a specifica Bootstrap să înceapă animația la carusel imediat ce pagina se încarcă.
Indicatorii sunt prezenți sub fiecare slide și indică câte slide-uri sunt în carusel și care este cel curent pe care îl
vizualizăm.
Indicatorii sunt specificați folosind o listă ordonată cu clasa .carousel-indicators. Atributul data-target pointează
spre id-ul caruselului. Atributul data-slide-to specifică la care slide din carusel să se îndrepte în momentul
selecției unui indicator.
Slide-urile sunt specificate printr-un <div> cu clasa .carousel-inner. Coținutul fiecărui slide e definit într-un <div>
cu clasa .item și poate fi text sau imagine. Clasa .active trebuie adăugată unuia dintre slide-uri altfel caruselul nu
va fi vizibil.
În cod sunt implementate și butoanele "left" și "right" care asigură deplasarea manuală între slide-uri. Atributul
data-slide acceptă cuvintele cheie "prev" și "next" care modifică slide-ul curent pornind de la poziția curentă.
Adăugați <div class="carousel-caption"> în fiecare <div class="item"> pentru a crea un caption pentru fiecare
slide.
Exemplu
<div id="myCarousel" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
</ol>


<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">

<img src="img_chania2.jpg" alt="Chania">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">

<img src="img_flower.jpg" alt="Flower">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">

<img src="img_flower2.jpg" alt="Flower">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>


<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Try it Yourself »

Piu C7 2

Încărcat de

Informații document

Titlu original

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

Piu C7 2

Încărcat de

Drepturi de autor:

Formate disponibile

BOOTSTRAP

Versiunea curentă este 3.37 şi o poţi descărca de aici: http://getbootstrap.com

#1. Compilarea şi personalizarea

Pagina de compilare o găseşti aici: http://getbootstrap.com/customize/

#2: Includerea fişierelor în directorul root al site-ului

Lista completă clase din BOOTSTRAP

Introducere: Despre bootstrap si configurarea mediului de lucru

A.Setarea mediului de lucru

Puteți descărca ultima versiune de bootstrap de pe http://www.getbootstrap.com. După ce ai apăsat pe butonul

Versiunea Source Code

E.Grid system - Ce este acest grid de fapt?

Codul sursă pentru o structura standard de Bootstrap cu grid-uri:

Layout flexibil în functie de viewport

 .visible-xs-* vizibil pe rezolutii mai mici de 768px

În același mod putem folosi și clasele “.hidden-xx-xx”

F. Layout Fixed si Layout Fluid

Tabelul de mai jos rezuma utilizarea sistemului de grid-uri în Bootstrap

<h1>h1. Bootstrap heading</h1>

<p class="text-left">Text aliniat la stanga.</p>

<p class="text-muted">Muted: This text is grayed out.</p>

Tabel cu rânduri colorate

Tabel cu border pe margini

<table class="table table-bordered">

? <table class="table table-condensed">

Lista neordonata unstyled

Home Despre mine Categorii Servicii Contact

Colțuri rotunjite / Rounded Corners

M. Implementare carusel în Bootstrap http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

Exemplu de creare a unui carusel

<div id="myCarousel" class="carousel slide" data-ride="carousel">

<div class="item">

<div class="item">

<div class="item">

<div class="item">

<div class="item">

<div class="item">

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