Bootstrap 2.3.2: Pagsisimula ng Gabay

Ang Bootstrap ay isang Balangkas ng CSS na naging tanyag sa buong network. Ang kanilang mga istilo nakikiramay ay nakikita sa mga social network Tuenti y kaba. Ang paggamit ng ito ay nakakatipid sa amin ng maraming oras kapag bumubuo ng isang web application dahil nai-save ito sa amin ng lahat ng trabaho at pagsisikap na kasangkot sa paglikha ng isang malinis na estilo ng pahina na angkop para sa lahat ng mga aparato. Ang pagkonsulta sa mga istilong ginamit sa balangkas na ito, mapagtanto namin na pamilyar sila sa amin, dahil ngayon maraming mga website ang nagpatupad nito.

Ang istraktura

Para ma-access ang aming website mula sa mga mobiles at tablet kakailanganin naming gamitin ang likidong istraktura na inaalok sa amin ng Bootstrap. Ang paggamit ng istrakturang ito ay napaka-simple, ang lahat ay batay sa mga elemento maikling panahon makakatulong yan sa atin layout ang aming disenyo ng web. Mamaya, kapag na-access natin ang disenyo na ito mula sa a smartphone o tablet, awtomatiko itong umaangkop sa nasabing aparato na malaki ang pagpapabuti ng kalidad ng pag-navigate. Gagamitin namin ang maikling panahon na may mga klase sa lohikal na paghati sa loob ng likidong istraktura, ibig sabihin:

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

Kung saan ang bilang 2 ay kumakatawan sa laki ng span. Naglalaman ang bawat hilera ng sapat na puwang para sa 12 spans ng laki 1, o 2 ng laki 6, maaari itong ipamahagi ayon sa gusto mo. Sa sandaling lumampas ang puwang ng isang hilera, bababa ito sa susunod na awtomatiko, na nagpapahintulot sa amin na gumamit ng a maikling panahon laki 12 upang lumikha ng isang linya ng linya. Kung nais naming laktawan ang ilan maikling panahon kapag lumilikha ng isa, iyon ay, magsimula sa 4 maikling panahon, at maglapat ng laki ng 3, gagamitin namin ang code na ito:

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

Pinapayagan nito ang paghati na tumalon sa apat sumasaklaw bago ipakita ang nilalaman. Maaari naming gamitin ito sa aming libreng kalooban, laktawan kung ano ang gusto namin sa aming code.

Iba't ibang disenyo para sa bawat aparato

Upang mag-apply ng iba't ibang disenyo para sa bawat uri ng aparato, sasabihin namin sa bawat lohikal na dibisyon para sa aling aparato ang na-orient, gamit ang mga sumusunod na klase:

Sa ganitong paraan, maaari naming ipakita ang isang ganap na magkakaibang disenyo para sa bawat aparato na may parehong URL.

mga pindutan

Nag-aalok sa amin ang Bootstrap ng isang malinis na repertoire ng mga may kulay na mga pindutan, ang paggamit nito ay napaka-simple:

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

Saan btn btn-success tumutukoy sa kulay ng pindutan, upang baguhin ito, papalitan lamang namin ito ng mga klase na ipinakita sa nakaraang imahe.

Pag-install ng Bootstrap

Para sa pag-install ng CSS framework na ito, mai-download namin ang zip mula sa link na maiiwan ko sa dulo ng post, at isusulat namin ang sumusunod na code sa ulo ng aming HTML file.

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

Kapag nasiguro na namin na ang mga file ng CSS at JS ay nasa parehong folder tulad ng aming HTML file, maaari naming simulan ang pagdidisenyo ng aming tumutugon na website.

Karagdagang informasiyon - Pagpapatunay ng Form

Mag-download - Bootstrap: CSS Framework