Bootstrap bemutatas

A következő bejegyzésemben a Bootstrap keretrendszert mutatom be, mivel a későbbiekben biztos, hogy sorra fog kerülni. Ha front-end fejlesztéssel foglalkozol vagy fogsz foglalkozni, akkor ezt biztosan fogod használni. Az elméleti hátterével nem foglalkoznék most. Rengeteg anyag lelhető fel az interneten róla. Pár egyszerűbb példát mutatnék be inkább. Elsőként egy üres html (index.html) fájlt hozunk létre és utána head részben elhelyezzük a Bootstrap használatához szükséges sorokat.
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>Demo 1.</title>/div>
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!-- Téma -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<!-- Bootstrap js -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
< </head>
<body>
</body>
</html>
A következő lépés csinálunk egy menüsort, ami mobilon is megfelelően jelenik meg.
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Demo 1.</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="home.html">Kezdőlap</a></li>
<li><a href="images.html">Képek</a></li>
<li><a href="contact.html">Kapcsolat</a></li>
</ul>
</div>
</nav>
< div="">
Hozzunk létre egy images.html fájlt (a váza ugyanaz legyen, mint az index.html). Rakjunk be pár képet természetesen ez is legyen mobilbarát :). Előtte a  html fájlokkal azonos könyvtárban csináljunk egy mappát a képeknek (pl.: images).
A head részt még annyival módosítjuk, hogy rakunk bele egy kis CSS-et, hogy a képek annyira ne legyenek egymáson.
<style>
img{
padding-top:30px;
}
</style>
És a képek megjelenítése:
<div class="container">
<div class="row">
<img src="images/1.jpg" class="img-responsive">
<img src="images/2.jpg" class="img-responsive">
<img src="images/3.jpg" class="img-responsive">
<img src="images/4.jpg" class="img-responsive">
<img src="images/5.jpg" class="img-responsive">
<img src="images/6.jpg" class="img-responsive">
</div>
</div>
A container class nem engedi ki az oldal tartalmát teljesen a képernyő széléig bármilyen felbontás esetén. Az img-responsive pedig a képet "nyomja" mindig össze az akutális kijelző méretnek megfelelően.

Végül pedig csináljunk egy kapcsolat oldalt. Ehhez csináljunk az index és az images oldalak alapján egy contact.html oldalt.
<div class="container">
<h1>Lépjen kapcsolatba velünk!</h1>
<br/>
<form>
<div class="form-group">
<label for="name"><i class="glyphicon glyphicon-user"></i> Név</label>
<input type="text" class="form-control" name="name" required placeholder="Név">
</div>
<div class="form-group">
<label for="phone"><i class="glyphicon glyphicon-phone"></i> Telefonszám</label>
<input type="tel" class="form-control" name="phone" required placeholder="Telefonszám">
</div>

<div class="form-group">
<label for="subject"><i class="glyphicon glyphicon-send"></i> Tárgy</label>
<input type="text" class="form-control" name="subject" required placeholder="Tárgy">
</div>

<div class=form-group>
<label for="message"><i class="glyphicon glyphicon-pencil"></i> Üzenet</label>
<textarea class="form-control" rows="6" placeholder="Üzenet"></textarea>
</div>

<!--
default, basic, primary, success, info, warning, danger, link
-->
<button class="btn btn-primary">Küldés</button><br/>

</form>

</div>
Az egyes mezőknek "csoportokat" hozzunk létre így egy mező egy sorban lesz felette pedig a hozzá tartozó felirat lesz ikonokkal (ezekből az ikonokból van még rengeteg a Bootstrap oldlaán megtalálható). Végén pedig egy küldés gombot helyezünk el. ennek a típusai kódban zöld kommenttel látszanak. Házi feladat az üres index.html oldalra valami szép Bootstrap-es dolgot varázsolni (táblázat, lista stb.) :). A teljes kódot innen le tudod tölteni. Köszönöm a figyelmet.