Bootstrap 2.3.2: Aan die slag

Twitter Bootstrap-logo

Bootstrap is 'n CSS-raamwerk wat deur die hele netwerk baie gewild geword het. Hul style reageer word op sosiale netwerke gesien Tuenti y Twitter. Die gebruik hiervan bespaar ons baie tyd by die ontwikkeling van 'n webtoepassing, want dit bespaar ons al die werk en moeite om 'n skoon bladsystyl te skep wat geskik is vir alle toestelle. As ons die style wat in hierdie raamwerk gebruik word, raadpleeg, sal ons besef dat dit vir ons bekend is, aangesien baie webwerwe dit vandag implementeer.

Die struktuur

Bootstrap struktuur beeld

Bootstrap-vloeistofstruktuur

Om ons webwerf toeganklik te maak vanaf gsm's en tablette, moet ons die vloeistofstruktuur gebruik wat Bootstrap ons bied. Die gebruik van hierdie struktuur is baie eenvoudig, alles is gebaseer op elemente span dit sal ons help uitleg ons webontwerp. Later, wanneer ons toegang tot hierdie ontwerp verkry vanaf a slimfoon o tablet, sal dit outomaties aanpas by die toestel, wat die kwaliteit van die navigasie aansienlik verbeter. Ons sal die span met klasse in logiese indelings binne die vloeistofstruktuur, dit wil sê:

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

Waar die getal 2 die grootte van die span voorstel. Elke ry bevat genoeg ruimte vir 12 spanwydte van grootte 1 of 2 van grootte 6, dit kan versprei word soos u wil. Sodra die spasie van 'n ry oorskry word, sal dit outomaties na die volgende afneem, sodat ons a kan gebruik span grootte 12 om 'n lynbreuk te skep. As ons 'n paar wou oorslaan span begin by 4 as u een skep span, en pas 'n grootte van 3 toe, sal ons hierdie kode gebruik:

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

Dit stel die afdeling in staat om vier te spring strek voordat die inhoud vertoon word. Ons kan dit op ons vrye wil gebruik en oorslaan wat ons met ons kode wil hê.

Spring oorspannings met die verrekenklas oor

Spring oorspannings met die verrekenklas oor

Verskillende ontwerp vir elke toestel

Beeld met eksklusiwiteitsklasse vir Bootstrap-toestelle

CSS-klasse om elke toestel te onderskei

Om 'n ander ontwerp vir elke tipe toestel toe te pas, vertel ons elke logiese verdeling vir watter toestel dit gerig is, deur die volgende klasse te gebruik:

Op hierdie manier kan ons 'n heel ander ontwerp vir elke toestel met dieselfde URL vertoon.

knoppies

Kleurknoppies

Lys van knoppies wat deur Bootstrap aangebied word

Bootstrap bied ons 'n skoon repertoire van gekleurde knoppies, die gebruik daarvan is baie eenvoudig:

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

Waar btn btn-success verwys na die kleur van die knoppie, om dit te verander, hoef ons dit slegs te vervang deur die klasse wat in die vorige prentjie getoon is.

Installeer Bootstrap

Vir die installering van hierdie CSS-raamwerk, laai ons die zip af van die skakel wat ek aan die einde van die boodskap sal laat, en ons sal die volgende kode skryf in die kop van ons HTML-lêer.

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

Nadat ons seker gemaak het dat die CSS- en JS-lêers in dieselfde vouer as ons HTML-lêer is, kan ons ons responsiewe webwerf begin ontwerp.

Meer inligting - Validasie van vorm

Aflaai - Bootstrap: CSS Framework


'N Opmerking, los joune

Laat u kommentaar

Jou e-posadres sal nie gepubliseer word nie. Verpligte velde gemerk met *

*

*

  1. Verantwoordelik vir die data: Miguel Ángel Gatón
  2. Doel van die data: Beheer SPAM, bestuur van kommentaar.
  3. Wettiging: U toestemming
  4. Kommunikasie van die data: Die data sal nie aan derde partye oorgedra word nie, behalwe deur wettige verpligtinge.
  5. Datastoor: databasis aangebied deur Occentus Networks (EU)
  6. Regte: U kan u inligting te alle tye beperk, herstel en verwyder.

  1.   alejandra dijo

    U het nie meer tutoriale oor hierdie raamwerk nie ???