Bootstrap 2.3.2: Kom godt i gang-guide

Bootstrap er en CSS-ramme der er blevet meget populært i hele netværket. Deres stilarter lydhør ses på sociale netværk Tuenti y Twitter. Brug af dette sparer os meget tid, når vi udvikler en webapplikation, da det sparer os alt det arbejde og kræfter, der er forbundet med at skabe en ren sidestil, der passer til alle enheder. Når vi konsulterer de stilarter, der anvendes i denne ramme, vil vi indse, at de er kendt for os, da mange websteder i dag har implementeret det.

Strukturen

For at vores websted skal være tilgængeligt fra mobiltelefoner og tablets, bliver vi nødt til at bruge den flydende struktur, som Bootstrap tilbyder os. Brugen af ​​denne struktur er meget enkel, alt er baseret på elementer span det vil hjælpe os layout vores webdesign. Senere, når vi får adgang til dette design fra en smartphone o tablet, dette vil automatisk tilpasse sig den nævnte enhed, hvilket forbedrer navigeringskvaliteten betydeligt. Vi bruger span med klasser i logiske opdelinger inden for væskestrukturen, dvs.

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

Hvor tallet 2 repræsenterer størrelsen på spændet. Hver række indeholder plads nok til 12 spænd i størrelse 1 eller 2 i størrelse 6, dette kan fordeles, som du vil. Når pladsens række er overskredet, går den automatisk ned til den næste, så vi kan bruge en span størrelse 12 for at skabe et linjeskift. Hvis vi ville springe nogle over span når du opretter en, dvs. start fra 4 spanog anvender størrelsen 3, vi bruger denne kode:

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

Dette gør det muligt for divisionen at springe fire spændvidder inden visning af indholdet. Vi kan bruge dette efter vores frie vilje og springe over det, vi ønsker med vores kode.

Forskelligt design for hver enhed

For at anvende et andet design for hver enhedstype fortæller vi hver logisk division for hvilken enhed den er orienteret ved hjælp af følgende klasser:

På denne måde kan vi vise et helt andet design for hver enhed med den samme URL.

knapper

Bootstrap tilbyder os et rent repertoire af farvede knapper, dets anvendelse er meget enkel:

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

hvor btn btn-success henviser til knappens farve for at ændre den, vi bliver kun nødt til at erstatte den med de klasser, der er vist i det forrige billede.

Installation af Bootstrap

Til installationen af ​​denne CSS-ramme downloader vi zip'en fra det link, jeg vil efterlade i slutningen af ​​indlægget, og vi skriver følgende kode i hovedet på vores HTML-fil.

<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-filerne er i samme mappe som vores HTML-fil, kan vi begynde at designe vores responsive hjemmeside.

Mere information - Formularvalidering

Hent - Bootstrap: CSS Framework