Recommended
Recommended
More Related Content
Featured
Featured (20)
Bootcamp - bootstrap 2016
- 3. Cuprins 1. Recapitulare HTML&CSS 2. Ce este Bootstrap? 3. Componente Bootstrap 4. Responsive web design 5. Sistemul de griduri
- 4. Recapitulare HTML&CSS HTML - hypertext markup language <html></html> <head></head> <body></body> <img> <p></p> <h1></h1> <h2></h2> <h3></h3> <input> CSS - Cascading style sheets background-color: red; color: green; height: 240px; width: 100%; font-size: 14px; font-family: Arial;
- 5. Ce este Bootstrap? Bootstrap este cel mai popular HTML, CSS, JS framework pentru crearea site- urilor responsive. Bootstrap face dezvoltarea paginilor web mai simple și rapide. Este creat pentru persoane cu nivele diferite de calificare, dispozitive de toate formele și proiectele de orice dimensiuni. www.getbootstrap.com
- 6. General despre Bootstrap Denumirea: Bootstrap Dezvoltat in cadrul Twitter, Inc. Creat de Mark Otto și Jacob Thornton Versiunile curente: v3.3.6 si v4.0.0-alpha.2 Inițial Bootstrap a fost dezvoltat ca un Framework pentru a unifica designul instrumentelor interne create de Twitter. Apoi acesta a devenit Open-Source.
- 7. Componente Bootstrap Bootstrap oferă un set vast de componente reutilizabile: icons, buttons, forme, navigare, alerts și multe altele.
- 8. Doar HTML
- 10. Stilizarea butoanelor <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-primary btn-lg">Large</button> <button type="button" class="btn btn-primary btn-md">Medium</button> <button type="button" class="btn btn-primary btn-sm">Small</button> <button type="button" class="btn btn-primary btn-xs">XSmall</button>
- 11. Glyphicons <span class="glyphicon glyphicon-search" aria-hidden="true"></span> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star </button>
- 12. Menu de navigare <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> <nav class="navbar navbar-default navbar-static-top"></nav> <nav class="navbar navbar-inverse"></nav>
- 13. Labels <span class="label label-default">Default</span> <h3>Example heading <span class="label label-default">New</span></h3>
- 14. Alerts <div class="alert alert-success" role="alert">...</div> <div class="alert alert-info" role="alert">...</div> <div class="alert alert-warning" role="alert">...</div> <div class="alert alert-danger" role="alert">...</div>
- 15. Bara de progres <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria- valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div> </div>
- 16. Responsive web design Un website este responsive dacă are capacitatea de a adapta layout-urile (designul) paginilor în funcție de mediul de vizionare (mai precis de rezoluția ecranului – desktop, laptop, tableta, telefon), fără a suferi degradări majore, pentru a le oferi utilizatorilor o experienta excelentă de navigare.
- 17. Sistemul de griduri Gridul Bootstrap este format din 12 coloane.
- 18. Clasa col-md-* Utilizind un singur set de clase .col-md-* poate fi creat gridul de bază pentru site-uri web afisate in browserul laptopului sau computer. Plasati coloanele gridului in clasa .row.
- 19. Let’s code it!