Bootstrap 2.3.2: Alustusjuhend

Twitteri Bootstrapi logo

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

Bootstrapi struktuuri pilt

Bootstrapi vedeliku 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.

Vahemike vahelejätmine koos nihkeklassiga

Vahemike vahelejätmine koos nihkeklassiga

Iga seadme jaoks erinev disain

Bootstrapi seadmete eksklusiivsusklassidega pilt

CSS-klassid iga seadme eristamiseks

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

Värvilised nupud

Bootstrapi pakutavate nuppude loend

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


Artikli sisu järgib meie põhimõtteid toimetuse eetika. Veast teatamiseks klõpsake nuppu siin.

Kommentaar, jätke oma

Jäta oma kommentaar

Sinu e-postiaadressi ei avaldata.

*

*

  1. Andmete eest vastutab: Miguel Ángel Gatón
  2. Andmete eesmärk: Rämpsposti kontrollimine, kommentaaride haldamine.
  3. Seadustamine: teie nõusolek
  4. Andmete edastamine: andmeid ei edastata kolmandatele isikutele, välja arvatud juriidilise kohustuse alusel.
  5. Andmete salvestamine: andmebaas, mida haldab Occentus Networks (EL)
  6. Õigused: igal ajal saate oma teavet piirata, taastada ja kustutada.

  1.   Alejandra DIJO

    Teil pole selle raamistiku kohta rohkem õpetusi ???