Bootstrap és un framework basat en HTML i CSS, va ser creat per Twitter i el va alliberar el 2012, des de llavors ha guanyat molts adeptes, fins al nivell que compta amb la major comunitat de Github del món.
Bootstrap és per descarregar i utilitzar completament gratis!
Aquest framework ens ajuda a agilitzar la creació de la interfície de la nostra pàgina web . Amb la particularitat, que usant Bootstrap, el nostre lloc estarà adaptat a la pantalla dels dispositius amb el qual accedim, ja sigui un ordinador, tablet, smartphone, televisió .... Això vol dir que tindrem una web responsive o adaptativa, i des de fa pocs mesos, és fonamental de cara al posicionament a Google.
A més d'agilitzar la creació de la nostra web, amb Bootstap aconseguirem crear un disseny net, intuïtiu, usable i de poc pes, de manera que la càrrega de la nostra web serà molt ràpida. És molt còmode, perquè moltes de les funcionalitats que ens caldrà ja estan desenvolupades, i si no, tens accés a una gran quantitat de documentació en diversos idiomes i una comunitat que donarà respostes a tots els dubtes.
Així doncs:
- Bootstrap és un framework lliure per al desenvolupament web més ràpid i més fàcil
- Bootstrap inclou plantilles de disseny basades en HTML i CSS per tipografia, formes, botons, taules de navegació, modals, carrusels d'imatges i moltes altres, així com complements opcionals de JavaScript
- Bootstrap també dóna la possibilitat de crear fàcilment dissenys responsive
Per usar bootstrap no cal tenir grans coneixements en programació, amb unes notícies bàsiques d'HTML5 i CSS3, aconseguirem crear la nostra primera web estàtica o dinàmica compatible amb tots els navegadors moderns.
Per què utilitzar Bootstrap?
- Tindrem una web responsive, es veurà bé en tots els dispositius i ajudarà al posicionament de la nostre web en cercadors.
- Còmode, tindrem gran quantitat de funcionalitats creades.
- La velocitat de càrrega de la web és rapida i tamb'e ajuda al posicionament.
- Compatibilitat amb la majoria de navegadors.
- En constant desenvolupament, té una gran comunitat darrere i el framework va millorant cada vegada mes.
Com instal·lar Bootstrap
Per poder instal·lar anirem al web oficial http://getbootstrap.com i li donem a Download, hi tindrem tres opcions de descàrrega.
Si no voleu descarregar i allotjar Bootstrap en el vostre servidor, pot incloure des d'un CDN (Content Delivery Network).
MaxCDN proporcionar suport CDN per CSS i JavaScript d'Bootstrap. També es pot incloure jQuery
Crear la primera pàgina web amb Bootstrap
1. Afegir el tipus de document HTML 5
Bootstrap utilitza elements HTML i propietats CSS que requereixen el tipus de document HTML 5.
Sempre inclogui el tipus de document HTML 5 al començament de la pàgina, juntament amb l'atribut lang i el joc de caràcters correcte:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
Bootstrap 3 està dissenyat per a ser sensible als dispositius mòbils. Per tant els estils per mòbils són part del framework.
<meta name="viewport" content="width=device-width, initial-scale=1">
Per garantir la prestació adequada i una funció de zoom tàctil, afegiu el següent <meta> etiqueta dins de la secció <head> element
Bootstrap requereix també un element contenidor per posar els continguts del lloc.
Hi ha dues classes de contenidors per triar:
- El .container classe proporciona una sensible contenidor d'amplada fixa
- El .container-fluid classe proporciona un contenidor d'ample total , que abasta tota l'amplada de la finestra gràfica
Exemples:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
