Bootcamp - bootstrap 2016
19
-
Upload
vera-cires -
Category
Design
-
view
138 -
download
0
Transcript of Bootcamp - bootstrap 2016
BootstrapTrainer: Vera Cireş
Calarași, 2016
Cuprins1. Recapitulare HTML&CSS
2. Ce este Bootstrap?
3. Componente Bootstrap
4. Responsive web design
5. Sistemul de griduri
Recapitulare HTML&CSSHTML - hypertext markup language
<html></html>
<head></head>
<body></body>
<img>
<p></p>
<h1></h1>
<h2></h2>
<h3></h3>
<input>
<span></span>
<div></div>
<iframe></iframe>
...
CSS - Cascading style sheets
background-color: red;
color: green;
height: 240px;
width: 100%;
font-size: 14px;
font-family: Arial;
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
General despre BootstrapDenumirea: 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.
Componente Bootstrap
Bootstrap oferă un set vast de componente reutilizabile: icons, buttons, forme, navigare, alerts și multe altele.
Doar HTML
HTML + Bootstrap
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>
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>
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>
Labels
<span class="label label-default">Default</span>
<h3>Example heading <span class="label label-default">New</span></h3>
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>
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>
Responsive web designUn 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.
Sistemul de griduriGridul Bootstrap este format din 12 coloane.
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.
Let’s code it!
