Egyik eszköz, amely az MVC webes projektem megvalósítása során használatba lett véve a Bootstrap nevezetű keretrendszer lett. A Bootstrap egy igen hasznos kis keretrendszer, melynek segítségével dinamikusabban, és egyszerűbben mehet a weboldal fejlesztése, ugyanis kínál egy alap felhasználói felületet, amit később a fejlesztők személyre tudnak szabni. Ez egy jó dolog az olyan fejlesztőknek, akik nem kifejezetten vannak megáldva a weblap design tehetségével, vagy időt akarnak vele spórolni.
A Bootstrap alapvetően egy HTML/CSS/JavaScript weboldalt valósít meg, amelyhez hozzá kell adni még JQuery -t is, hogy a JavaScript elemek megfelelően működjenek. A JavaScript -t az oldal simább animációi, és egyéb funkciók miatt, amelyek javítják a felhasználói élményt, alkalmazták benne. Előnyös a használata, ugyanis Bootstrap 3 erősen koncentrál a mobilos területekre is, kifejezetten reszponzív a különböző eszközökre, és felbontásokra.
A Bootstrap css használatára két módszer van. Egyik, hogy letöltjük a szerverre, vagy számítógépünkre, és a lokális fájlokból include -olunk, a másik pedig, amikor CDN, vagy más néven Content Delivery Network -ot használunk. Ekkor nem töltünk le semmit, hanem magában a fájlban adunk meg CSS, és JavaScript linkeket, ahonnét ezeket be tudja tölteni. Az első módszer esetében a letöltött bootstrap fájlokat a weblapunk mellé helyezve, majd belinkelve a <HEAD> szekcióban alkalmazhatjuk a következő képpen:
<link rel="stylesheet" href="bootstrap-3.3.6/css/bootstrap.min.css">
Amikor csak a CDN-t használjuk hasonlóan a <HEAD> részben megadjuk, hogy:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
A szükséges JQuery elemeket ugyan ezekkel a módszerekkel használhatjuk, csak ezt a záró </BODY> tag előtt:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
Ha ezek megvannak neki is állhatunk a fontosabb részeknek, mint a navigációs panel, tartalom konténerek, gombok, táblák, formok, heading, vagy message box -ok, amelyek egy mindennapi oldalon megtalálhatók. A navigációs panel egy hasznos része az oldalnak, mert itt megadhatjuk a fő oldalakat, amelyeket valószínűleg gyakrabban fognak látogatni a felhasználók. Ezen belül a <button> -al adhatjuk meg a menüpontokat.
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"> Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://google.com/" title="Your choice, your world!">Home</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">All</a>
</li>
<li>
<a href="#">Demo</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
A konténerek használata azért előnyös, mert amennyiben a különböző adatainkat egy adott konténerhez rendeljük, azok nem fognak elmászkálni mondjuk egy nagyobb felbontással rendelkező eszközön.
<div clas=”container”></div> -el adható meg.
A heading oldalinformáció közlésére szolgál, hogy éppen az oldalnak, amelyen vagyunk mi a funkciója:
<div class="page-header"> …
A bootsrap táblák hasonlóan adhatók meg, mintha csak sima HTML táblát hoznánk létre, azonban a nyitó <TABLE> tag -et ki kell egészíteni egy class attribútummal:
<table class='table table-hover table-responsive table-bordered'> …
Amennyiben form -ot szeretnénk táblában, akkor az egész táblát a <form action=”…”></form> közé kell helyeznünk. A message boksz -ok segítségével pedig kis stílusos üzeneteket tudunk hagyni a felhasználónak:
<div class="alert alert-info">
<strong>Heads up!</strong> This is a bootstrap example page <a href="http://codeofaninja.com/">codeofaninja.com</a>!
</div>