Bootstrap 2.3.2: Alustusjuhend

Bootstrap on a CSS-i raamistik mis on kogu võrgus väga populaarseks muutunud. Nende stiilid tundlik on näha sotsiaalvõrgustikes Tuenti y puperdama. Selle kasutamine säästab veebirakenduse väljatöötamisel palju aega, kuna see säästab kogu tööd ja vaeva, mis on seotud kõigile seadmetele sobiva puhta lehelaadi loomisega. Tutvudes selles raamistikus kasutatavate stiilidega, mõistame, et need on meile tuttavad, kuna tänapäeval on paljud veebisaidid seda rakendanud.

Struktuur

Selleks, et meie veebisait oleks mobiilseadmetest ja tahvelarvutitest juurdepääsetav, peame kasutama vedelat struktuuri, mida Bootstrap meile pakub. Selle struktuuri kasutamine on väga lihtne, kõik põhineb elementidel sille mis meid aitab paigutus meie veebidisain. Hiljem, kui sellele kujundusele juurde pääseme a nutikas telefon o tablett, kohandub see automaatselt nimetatud seadmega, parandades oluliselt navigeerimise kvaliteeti. Me kasutame sille klassidega voolava struktuuri loogilistes jaotustes, st:

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

Kui number 2 tähistab vahemiku suurust. Igas reas on piisavalt ruumi 12 suuruse 1 või 2 suuruse 6 jaoks. Seda saab jaotada nii, nagu soovite. Kui rea tühik on ületatud, läheb see automaatselt järgmisse, võimaldades meil kasutada a sille suurus 12 reavahetuse loomiseks. Kui me tahaksime mõned vahele jätta sille ühe loomisel, st alustage 4-st silleja rakendame suurust 3, kasutaksime seda koodi:

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

See võimaldab divisjonil hüpata neli ulatub enne sisu kuvamist. Saame seda kasutada oma vabast tahtest, jättes oma koodiga vahele selle, mida tahame.

Iga seadme jaoks erinev disain

Igat tüüpi seadme jaoks erineva kujunduse rakendamiseks ütleme igale loogilisele jaotusele, millisele seadmele see on suunatud, kasutades järgmisi klasse:

Sel moel saame näidata iga sama URL-iga seadme jaoks täiesti erinevat kujundust.

nupud

Bootstrap pakub meile värviliste nuppude puhast repertuaari, selle kasutamine on väga lihtne:

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

Kus btn btn-success viitab nupu värvile, selle muutmiseks peame selle asendama ainult eelmises pildis näidatud klassidega.

Bootstrapi installimine

Selle CSS-i raamistiku installimiseks laadime postituse lõpus olevalt lingilt alla ZIP-faili ja kirjutame järgmise koodi meie HTML-faili peas.

<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>

Kui oleme veendunud, et CSS- ja JS-failid asuvad meie HTML-failiga samas kaustas, võime hakata oma tundlikku veebisaiti kujundama.

Rohkem informatsiooni - Vormi kinnitamine

Lae alla - Bootstrap: CSS-i raamistik