„Bootstrap 2.3.2“: darbo pradžios vadovas

Bootstrap yra a CSS sistema kuri tapo labai populiari visame tinkle. Jų stiliai reaguojantis yra matomi socialiniuose tinkluose Tuenti y Twitter. Tai naudodami sutaupome daug laiko kurdami žiniatinklio programą, nes sutaupome viso darbo ir pastangų, reikalingų kuriant švarų, visiems įrenginiams tinkantį puslapio stilių. Peržiūrėdami šioje sistemoje naudojamus stilius suprasime, kad jie mums yra žinomi, nes šiandien daugelis svetainių tai įdiegė.

Struktūra

Kad mūsų svetainė būtų pasiekiama iš mobiliųjų telefonų ir planšetinių kompiuterių, turėsime naudoti „Bootstrap“ mums siūlomą skystą struktūrą. Šios struktūros naudojimas yra labai paprastas, viskas remiasi elementais trukmė tai mums padės išdėstymas mūsų interneto dizainas. Vėliau, kai prieisime prie šio dizaino iš a smartfon o tabletė, tai automatiškai prisitaikys prie to įrenginio, žymiai pagerindama navigacijos kokybę. Mes naudosime trukmė su klasėmis loginiais padalijimais skysčio struktūroje, t. y .:

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

Kur skaičius 2 reiškia intervalo dydį. Kiekvienoje eilutėje yra pakankamai vietos 12 1 arba 2 dydžio 6 dydžio tarpams, tai galima paskirstyti taip, kaip jums patinka. Kai viršijamas eilutės tarpas, ji automatiškai nusileis į kitą, leisdama mums naudoti a trukmė dydis 12, kad būtų sukurta linijos pertrauka. Jei norėtume kai kuriuos praleisti trukmė kurdami vieną, tai yra, pradėkite nuo 4 trukmėir pritaikysime 3 dydį, mes naudosime šį kodą:

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

Tai leidžia divizijai peršokti keturis tarpai prieš rodant turinį. Mes galime tai naudoti savo noru, praleisdami tai, ko norime, naudodamiesi savo kodu.

Skirtingas kiekvieno įrenginio dizainas

Norėdami pritaikyti skirtingą kiekvieno tipo įrenginio dizainą, mes pasakysime kiekvienam loginiam padalijimui, kuriam įrenginiui jis yra orientuotas, naudodami šias klases:

Tokiu būdu galime parodyti visiškai skirtingą kiekvieno įrenginio, turinčio tą patį URL, dizainą.

mygtukai

„Bootstrap“ siūlo mums švarų spalvotų mygtukų repertuarą, jį naudoti labai paprasta:

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

Kur btn btn-success nurodo mygtuko spalvą, norėdami ją pakeisti, turėsime ją pakeisti tik klasėmis, parodytomis ankstesniame paveikslėlyje.

„Bootstrap“ diegimas

Norėdami įdiegti šią CSS sistemą, atsisiųsime pašto adresą iš nuorodos, kurią paliksiu įrašo pabaigoje, ir parašysime šį kodą HTML failo galvutėje.

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

Įsitikinę, kad CSS ir JS failai yra tame pačiame aplanke kaip ir mūsų HTML failas, galime pradėti kurti savo reaguojančią svetainę.

Daugiau informacijos - Formos patvirtinimas

Parsisiųsti - „Bootstrap“: CSS sistema