Bootstrap 2.3.2: Komme i gang-guide

Bootstrap er en CSS-rammeverk som har blitt veldig populært i hele nettverket. Deres stiler responsive blir sett på sosiale nettverk Tuenti y Twitter. Bruken av dette sparer oss mye tid når vi utvikler en webapplikasjon, siden det sparer oss alt arbeidet og krefter som er involvert i å lage en ren sidestil som passer for alle enheter. Ved å konsultere stilene som brukes i dette rammeverket, vil vi innse at de er kjent for oss, siden det i dag er mange nettsteder som har implementert det.

Strukturen

For at nettstedet vårt skal være tilgjengelig fra mobiltelefoner og nettbrett, må vi bruke den flytende strukturen som Bootstrap tilbyr oss. Bruken av denne strukturen er veldig enkel, alt er basert på elementer span som vil hjelpe oss oppsett vårt webdesign. Senere, når vi får tilgang til dette designet fra en smarttelefon o tablett, vil dette automatisk tilpasse seg nevnte enhet og forbedre navigasjonskvaliteten betydelig. Vi vil bruke span med klasser i logiske inndelinger i væskestrukturen, det vil si:

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

Hvor tallet 2 representerer størrelsen på spennet. Hver rad inneholder nok plass til 12 spenn i størrelse 1 eller 2 i størrelse 6, dette kan fordeles slik du vil. Når plassen på en rad er overskredet, vil den automatisk gå ned til neste, slik at vi kan bruke en span størrelse 12 for å lage et linjeskift. Hvis vi ønsket å hoppe over noen span når du oppretter en, det vil si fra 4 spanog bruker størrelse 3, vil vi bruke denne koden:

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

Dette gjør at divisjonen kan hoppe fire spenn før du viser innholdet. Vi kan bruke dette etter vår frie vilje og hoppe over det vi ønsker med koden vår.

Ulike design for hver enhet

For å bruke et annet design for hver type enhet, vil vi fortelle hver logiske inndeling for hvilken enhet den er orientert, ved hjelp av følgende klasser:

På denne måten kan vi vise et helt annet design for hver enhet med samme URL.

knapper

Bootstrap tilbyr oss et rent repertoar av fargede knapper, bruken er veldig enkel:

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

Hvor btn btn-success refererer til fargen på knappen, for å endre den, trenger vi bare å erstatte den med klassene vist i forrige bilde.

Installere Bootstrap

For installasjonen av dette CSS-rammeverket, vil vi laste ned zip fra lenken som jeg vil legge igjen på slutten av innlegget, og vi vil skrive følgende kode i hodet på HTML-filen vår.

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

Når vi har sørget for at CSS- og JS-filene er i samme mappe som HTML-filen, kan vi begynne å designe vårt responsive nettsted.

Mer informasjon - Formvalidering

Nedlasting - Bootstrap: CSS Framework