Bootstrap ta je bootstrap Bootstrap je framework za
Bootstrap
Šta je bootstrap? • Bootstrap je framework za kreiranje responsive web stranica i aplikacija. • Skup HTML, CSS i Java. Script alata. • Kompatibilan je sa svim browserima. • Prilagođen mobilnim uređajima.
Istorija • • Kreiran u Tviteru 2011. godine. Bootstrap 2 verzija je objavljena 2012. godine. Bootstrap 3 verzija objavljena je 2013. godine. Verzija 4 je trenutno u fazi razvoja i ima dve objavljene beta verzije.
Instalacija • Da bi se koristio Bootstrap framework potrebno je skinuti fajlove sa sajta https: //getbootstrap. com/ • Preuzete fajlove je potrebno staviti u folder projekta na kome se radi.
Grid sistem • Bootstrap koristi grid sistem koji omogućava skaliranje sadržaja u zavisnosti od promene veličine ekrana. • Grid sistem ima 12 kolona koje se mogu prilagoditi zahtevima aplikacije. • Više kolona se može spojiti u jednu tako da naprave jednu kolonu veće širine.
Primer • Primer tri nejednake kolone: <div class="row"> <div class="col-md-6"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <p> </div> <div class="col-md-4"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. p> </div> <div class="col-md-2"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <p> </div>
Primer • Primer tri jednake kolone: <div class="row"> <div class="col-sm-4"> Kolona 1 </div> <div class="col-sm-4"> Kolona 2 </div> <div class="col-sm-4"> Kolona 3 </div>
Primer • Primer dve nejednake kolone: <div class="row"> <div class="col-sm-4"> Kolona 1 </div> <div class="col-sm-8"> Kolona 2 </div>
Jumbotron • Jumbotron služi za naslov stranica i prikazuje uveličan sadržaj kao i ivicu oko njega. <div class="jumbotron"> <h 1>Welcome</h 1> <p>Lorem ipsum</p> </div>
Tekst • Za naslove mogu se koristiti tagovi <h 1>, <h 2>, . . . <h 6>. Klasa page-header se može koristiti za naslov stranice. <div class="page-header"> • Klasa lead se koristi za glavni paragraf, odnosno za paragraf koji želimo da istaknemo. <p class="lead">
Poravnanje teksta • • • text-left text-right text-center text-justify text-nowrap
Blockquote <blockquote class="blockquote(-reverse)"> <p>Fusce sed varius leo, vitae gravida velit. </p> <footer>Quote by <cite title="Autor">John Doe</cite></footer> </blockquote>
Dodatni tagovi • • <mark> - podvlači tekst <u> - underline <del> - crta preko teksta <abbr> - skraćenica
Boje • • • text-primary text-success text-danger text-warning bg-info
Pozadine teksta • • • bg-primary bg-success bg-danger bg-warning bg-info
Buttons • Bootstrap pruža različite stilove za dugmad: <button type="button" class="btn">Basic</button> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button> • Može se koristiti i <a> tag: <a href=“#" class="btn btn-default">Link dugme</a>
Veličina dugmića • • btn-lg - large btn-md - medium btn-sm - small btn-xs – extra small
Forme <form> <div class="form-group"> <label>Ime</label> <input type="text" class="form-control"> </div> <div class="form-group"> <label>Email</label> <input type="email" class="form-control"> </div> <div class="form-group"> <label>Grad</label> <select class="form-control"> <option value="Beograd">Beograd</option> <option value="Beograd">Kragujevac</option> <option value="Beograd">London</option> </select> </div> <button type="submit" class="btn btn-default">Submit</button> </form>
Slike • thumbnail • img-rounded • img-circle
- Slides: 19