Bootstrap 2.3.2: Udhëzuesi për Fillimin

Bootstrap është një Kuadri CSS që është bërë shumë popullor në të gjithë rrjetin. Stilet e tyre responsiv shihen në rrjetet sociale Tuenti y Twitter. Përdorimi i kësaj na kursen shumë kohë kur zhvillojmë një aplikacion në internet pasi na kursen të gjithë punën dhe përpjekjet e përfshira në krijimin e një stili të faqes së pastër të përshtatshme për të gjitha pajisjet. Duke konsultuar stilet e përdorura në këtë kuadër, do të kuptojmë se ato janë të njohura për ne, pasi që sot shumë faqe në internet e kanë zbatuar atë.

Struktura

Që faqja jonë e internetit të jetë e arritshme nga celularët dhe tabletat, do të duhet të përdorim strukturën e lëngjeve që na ofron Bootstrap. Përdorimi i kësaj strukture është shumë i thjeshtë, gjithçka bazohet në elemente hapësirë kjo do të na ndihmojë paraqitja dizenjimi ynë i uebit. Më vonë, kur kemi qasje në këtë dizajn nga a smartphone o tabletë, kjo automatikisht do t'i përshtatet pajisjes në fjalë duke përmirësuar ndjeshëm cilësinë e lundrimit. Ne do të përdorim hapësirë me klasa në ndarjet logjike brenda strukturës së lëngut, dmth:

<div class="row-fluid">
   <div class="span2">Contenido</div>
</div>

Ku numri 2 paraqet madhësinë e hapësirës. Çdo rresht përmban hapësirë ​​të mjaftueshme për 12 hapësira të madhësisë 1, ose 2 të madhësisë 6, kjo mund të shpërndahet ashtu si dëshironi. Sapo të tejkalohet hapësira e një rreshti, ajo do të zbresë në tjetrën automatikisht, duke na lejuar të përdorim një hapësirë madhësia 12 për të krijuar një ndërprerje të vijës. Nëse do të donim të anashkalonim disa hapësirë kur krijoni një, domethënë, filloni nga 4 hapësirë, dhe të aplikojmë një madhësi prej 3, ne do të përdorim këtë kod:

<div class="span2 offset4">Contenido</div>

Kjo lejon që divizioni të kërcejë katër shtrihet para se të shfaqet përmbajtja. Ne mund ta përdorim këtë me vullnetin tonë të lirë, duke anashkaluar atë që duam me kodin tonë.

Dizajn i ndryshëm për secilën pajisje

Për të aplikuar një dizajn të ndryshëm për secilin lloj të pajisjes, ne do t'i tregojmë secilës ndarje logjike për cilën pajisje është e orientuar, duke përdorur klasat e mëposhtme:

Në këtë mënyrë, ne mund të tregojmë një dizajn krejtësisht të ndryshëm për secilën pajisje me të njëjtën URL.

buttons

Bootstrap na ofron një repertor të pastër të butonave me ngjyra, përdorimi i tij është shumë i thjeshtë:

<a class="btn btn-success" href="URL">
   Nombre del Botón
</a>

ku btn btn-success i referohet ngjyrës së butonit, për ta ndryshuar, do të duhet ta zëvendësojmë atë vetëm me klasat e paraqitura në imazhin e mëparshëm.

Instalimi i bootstrap

Për instalimin e kësaj kornize CSS, ne do të shkarkojmë zip nga lidhja që do të lë në fund të postimit dhe do të shkruajmë kodin vijues në kokën e skedarit tonë HTML.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/bootstrap.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>

Pasi të jemi siguruar që skedarët CSS dhe JS janë në të njëjtën dosje me skedarin tonë HTML, ne mund të fillojmë të hartojmë faqen tonë të internetit të përgjegjshme.

Më shumë informacion - Vlerësimi i formularit

Shkarko - Bootstrap: Kuadri CSS