Bootstrap 2.3.2: Aloitusopas

Bootstrap on a CSS-kehys josta on tullut erittäin suosittu koko verkossa. Heidän tyylinsä herkkä nähdään sosiaalisissa verkostoissa Tuenti y Twitter. Tämän käyttö säästää paljon aikaa verkkosovelluksen kehittämisessä, koska se säästää kaiken työn ja vaivan, joka liittyy puhtaan sivutyylin luomiseen kaikille laitteille. Tutkimalla tässä yhteydessä käytettyjä tyylejä huomaamme, että ne ovat meille tuttuja, koska nykyään monet verkkosivustot ovat ottaneet sen käyttöön.

Rakenne

Jotta verkkosivustomme olisi käytettävissä matkapuhelimista ja tableteista, joudumme käyttämään Bootstrapin meille tarjoamaa nestemäistä rakennetta. Tämän rakenteen käyttö on hyvin yksinkertaista, kaikki perustuu elementteihin jänneväli se auttaa meitä layout web-suunnittelumme. Myöhemmin, kun käytämme tätä mallia a älypuhelin o tabletti, tämä sopeutuu automaattisesti mainittuun laitteeseen, mikä parantaa huomattavasti navigoinnin laatua. Käytämme jänneväli luokkien kanssa loogisissa jakoissa fluidirakenteessa, ts.

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

Jos numero 2 edustaa jännevälin kokoa. Jokaisella rivillä on tarpeeksi tilaa 12 alueelle, joiden koko on 1 tai 2, koko 6, tämä voidaan jakaa mieleisekseen. Kun rivin väli on ylitetty, se siirtyy automaattisesti seuraavaan, jolloin voimme käyttää a jänneväli koko 12 rivinvaihdon luomiseksi. Jos haluaisimme ohittaa joitain jänneväli kun luot sellaisen, eli aloita 4: stä jännevälija käytämme kokoa 3, käytämme tätä koodia:

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

Tämän avulla jako voi hypätä neljä jännevälien ennen sisällön näyttämistä. Voimme käyttää tätä vapaalla tahdollamme, ohittaen mitä haluamme koodillamme.

Eri suunnittelu jokaiselle laitteelle

Jos haluat soveltaa erilaista mallia kullekin laitetyypille, kerromme jokaiselle loogiselle jaolle, mille laitteelle se on suunnattu, seuraavien luokkien avulla:

Tällä tavalla voimme näyttää täysin erilaisen suunnittelun jokaiselle laitteelle, jolla on sama URL-osoite.

painikkeet

Bootstrap tarjoaa meille puhtaan valikoiman värillisiä painikkeita, sen käyttö on hyvin yksinkertaista:

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

jossa btn btn-success viittaa painikkeen väriin, sen muuttamiseksi meidän on vain korvattava se edellisessä kuvassa esitetyillä luokilla.

Bootstrapin asentaminen

Tämän CSS-kehyksen asentamista varten lataamme zip-linkin, jonka jätän viestin loppuun, ja kirjoitamme seuraavan koodin HTML-tiedostomme päässä.

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

Kun olemme varmistaneet, että CSS- ja JS-tiedostot ovat samassa kansiossa kuin HTML-tiedostomme, voimme aloittaa reagoivan verkkosivustomme suunnittelun.

Lisää tietoa - Lomakkeen vahvistus

Ladata - Bootstrap: CSS-kehys