Bootstrap 2.3.2: Darba sākšanas rokasgrāmata

Bootstrap ir a CSS ietvars kas ir kļuvis ļoti populārs visā tīklā. Viņu stili atsaucīgs ir redzami sociālajos tīklos Tuenti y Twitter. Tā izmantošana ietaupa mūs daudz laika, izstrādājot tīmekļa lietojumprogrammu, jo tas ietaupa visu darbu un pūles, kas saistītas ar visām ierīcēm piemērota tīra lapas stila izveidi. Iepazīstoties ar šajā sistēmā izmantotajiem stiliem, mēs sapratīsim, ka tie mums ir pazīstami, jo šodien daudzas vietnes to ir ieviesušas.

Struktūra

Lai mūsu vietne būtu pieejama no mobilajiem tālruņiem un planšetdatoriem, mums būs jāizmanto šķidruma struktūra, ko mums piedāvā Bootstrap. Šīs struktūras izmantošana ir ļoti vienkārša, viss ir balstīts uz elementiem sprīdis tas mums palīdzēs izkārtojums mūsu tīmekļa dizains. Vēlāk, kad mēs piekļūsim šim dizainam no a viedtālrunis o tablete, tas automātiski pielāgosies minētajai ierīcei, ievērojami uzlabojot navigācijas kvalitāti. Mēs izmantosim sprīdis ar klasēm loģiskās dalījumos šķidruma struktūrā, t.i .:

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

Kur skaitlis 2 apzīmē laiduma lielumu. Katrā rindā ir pietiekami daudz vietas 12 laidumiem ar 1. vai 2. izmēru no 6. izmēra. To var sadalīt, kā vēlaties. Kad rindas atstarpe ir pārsniegta, tā automātiski iet uz nākamo, ļaujot mums izmantot a sprīdis izmērs 12, lai izveidotu līnijas pārtraukumu. Ja mēs gribētu dažus izlaist sprīdis izveidojot vienu, tas ir, sāciet no 4 sprīdisun izmantosim lielumu 3, mēs izmantosim šo kodu:

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

Tas ļauj divīzijai pāriet četratā laidumi pirms satura parādīšanas. Mēs to varam izmantot pēc savas izvēles, izlaižot to, ko vēlamies ar savu kodu.

Katrai ierīcei atšķirīgs dizains

Lai katram ierīces tipam piemērotu atšķirīgu dizainu, mēs katram loģiskajam sadalījumam pateiksim, kurai ierīcei tas ir orientēts, izmantojot šādas klases:

Tādā veidā mēs varam parādīt pilnīgi atšķirīgu dizainu katrai ierīcei ar vienu un to pašu URL.

pogas

Bootstrap piedāvā mums tīru krāsainu pogu repertuāru, tā lietošana ir ļoti vienkārša:

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

Kur btn btn-success attiecas uz pogas krāsu, lai to mainītu, mums tā būs jāaizstāj tikai ar klasēm, kas parādītas iepriekšējā attēlā.

Bootstrap instalēšana

Šīs CSS ietvara instalēšanai mēs lejupielādēsim zip no saites, kuru es atstāšu ziņas beigās, un mēs uzrakstīsim šādu kodu mūsu HTML faila galvā.

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

Kad esam pārliecinājušies, ka CSS un JS faili atrodas vienā mapē ar mūsu HTML failu, mēs varam sākt veidot mūsu atsaucīgo vietni.

Vairāk informācijas - Veidlapas apstiprināšana

Lejupielādēt - Bootstrap: CSS ietvars