Bootstrap 2.3.2: Komma igång-guide

Bootstrap är en CSS-ramverk som har blivit mycket populärt i hela nätverket. Deras stilar mottaglig ses på sociala nätverk Tuenti y Twitter. Användningen av detta sparar oss mycket tid när vi utvecklar en webbapplikation eftersom det sparar oss allt arbete och ansträngningar för att skapa en ren sidstil som passar alla enheter. När vi konsulterar de stilar som används i denna ram kommer vi att inse att de är bekanta för oss, eftersom många webbplatser idag har implementerat den.

Strukturen

För att vår webbplats ska vara tillgänglig från mobiler och surfplattor måste vi använda den flytande struktur som Bootstrap erbjuder oss. Användningen av denna struktur är mycket enkel, allt är baserat på element span det kommer att hjälpa oss layout vår webbdesign. Senare, när vi kommer åt denna design från en smartphone o tablettdetta kommer automatiskt att anpassas till nämnda anordning, vilket avsevärt förbättrar navigeringskvaliteten. Vi kommer att använda span med klasser i logiska indelningar inom den flytande strukturen, det vill säga:

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

Där siffran 2 representerar storleken på intervallet. Varje rad innehåller tillräckligt med utrymme för 12 spänn av storlek 1 eller 2 av storlek 6, detta kan fördelas som du vill. När utrymmet i en rad har överskridits går det automatiskt ner till nästa, så att vi kan använda en span storlek 12 för att skapa en radbrytning. Om vi ​​ville hoppa över några span när du skapar en, det vill säga börja från 4 span, och tillämpa storleken 3, skulle vi använda den här koden:

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

Detta gör att divisionen kan hoppa fyra spann innan innehållet visas. Vi kan använda detta efter vår fria vilja och hoppa över vad vi vill med vår kod.

Olika design för varje enhet

För att tillämpa en annan design för varje typ av enhet kommer vi att berätta för varje logisk uppdelning för vilken enhet den är orienterad med följande klasser:

På detta sätt kan vi visa en helt annan design för varje enhet med samma URL.

knappar

Bootstrap erbjuder oss en ren repertoar av färgade knappar, dess användning är väldigt enkel:

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

var btn btn-success hänvisar till knappens färg, för att ändra den behöver vi bara ersätta den med de klasser som visas i föregående bild.

Installerar Bootstrap

För installationen av detta CSS-ramverk laddar vi ner zip från länken som jag lämnar i slutet av inlägget och vi kommer att skriva följande kod i huvudet på vår 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 väl har försäkrat oss om att CSS- och JS-filerna finns i samma mapp som vår HTML-fil kan vi börja designa vår responsiva webbplats.

Mer information - Formvalidering

Ladda ner - Bootstrap: CSS Framework