Bootstrap 2.3.2: Handbók handbókar

Twitter Bootstrap merki

Bootstrap er a CSS ramma það hefur orðið mjög vinsælt um allt netið. Stílar þeirra móttækilegur sést á samfélagsnetum Tuenti y twitter. Notkun þessa sparar okkur mikinn tíma við þróun vefforrits þar sem það sparar okkur alla þá vinnu og fyrirhöfn sem fylgir því að búa til hreint blaðsnið sem hentar öllum tækjum. Þegar við ráðfærum okkur við stíla sem notaðir eru í þessum ramma munum við átta okkur á því að þeir þekkja okkur, þar sem í dag hafa margar vefsíður innleitt hann.

Uppbyggingin

Uppbygging mynd Bootstrap

Uppbygging vökvabúnaðar

Til að vefsíðan okkar verði aðgengileg úr farsímum og spjaldtölvum verðum við að nota vökvabygginguna sem Bootstrap býður okkur. Notkun þessarar uppbyggingar er mjög einföld, allt byggist á þætti span það mun hjálpa okkur skipulag vefhönnun okkar. Seinna þegar við fáum aðgang að þessari hönnun frá a snjallsíminn o tafla, þetta mun aðlagast sjálfkrafa að umræddu tæki og verulega bæta gæði siglinga. Við munum nota span með flokkum í rökréttum deildum innan vökvabyggingarinnar, þ.e .:

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

Þar sem talan 2 táknar stærð sviðsins. Hver röð inniheldur nóg pláss fyrir 12 svið af stærð 1 eða 2 af stærð 6, þessu er hægt að dreifa að vild. Þegar farið er yfir bilröðina fer það sjálfkrafa niður í það næsta og gerir okkur kleift að nota a span stærð 12 til að búa til línuskil. Ef við vildum sleppa einhverjum span þegar þú býrð til einn, það er að byrja frá 4 spanog notum stærðina 3, við myndum nota þennan kóða:

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

Þetta gerir deildinni kleift að stökkva fjórum spannar áður en efnið er sýnt. Við getum notað þetta að vild, sleppt því sem við viljum með kóðanum okkar.

Sleppi spann með móti bekknum

Sleppi spann með móti bekknum

Mismunandi hönnun fyrir hvert tæki

Mynd með einkaréttartímum fyrir Bootstrap tæki

CSS bekkir til að aðgreina hvert tæki

Til að beita mismunandi hönnun fyrir hverja tegund tækja munum við segja hverri rökréttri skiptingu fyrir hvaða tæki það er stillt, með eftirfarandi flokkum:

Með þessum hætti getum við sýnt allt aðra hönnun fyrir hvert tæki með sömu vefslóð.

Hnappar

Litahnappar

Listi yfir hnappa í boði Bootstrap

Bootstrap býður okkur upp á hreina efnisskrá litaðra hnappa, notkun þess er mjög einföld:

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

Hvar btn btn-success vísar til litar hnappsins, til að breyta honum, verðum við aðeins að skipta honum út fyrir flokkana sem sýndir voru í fyrri mynd.

Setja upp Bootstrap

Til að setja upp þennan CSS ramma munum við hlaða niður zip frá hlekknum sem ég læt eftir í lok færslunnar og við munum skrifa eftirfarandi kóða í hausnum á HTML skránni okkar.

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

Þegar við höfum gengið úr skugga um að CSS og JS skrárnar séu í sömu möppu og HTML skjalið okkar, getum við byrjað að hanna móttækilegu vefsíðuna okkar.

Meiri upplýsingar - Staðfesting á formi

Niðurhal - Bootstrap: CSS Framework


Innihald greinarinnar fylgir meginreglum okkar um siðareglur ritstjórnar. Til að tilkynna um villu smelltu hér.

Athugasemd, láttu þitt eftir

Skildu eftir athugasemd þína

Netfangið þitt verður ekki birt. Nauðsynlegir reitir eru merktir með *

*

*

  1. Ábyrgðarmaður gagna: Miguel Ángel Gatón
  2. Tilgangur gagnanna: Control SPAM, umsögn stjórnun.
  3. Lögmæti: Samþykki þitt
  4. Samskipti gagna: Gögnunum verður ekki miðlað til þriðja aðila nema með lagalegri skyldu.
  5. Gagnageymsla: Gagnagrunnur sem Occentus Networks (ESB) hýsir
  6. Réttindi: Hvenær sem er getur þú takmarkað, endurheimt og eytt upplýsingum þínum.

  1.   Alejandra sagði

    Þú hefur ekki fleiri námskeið um þennan ramma ???