Bootstrap 2.3.2: Hasierako Gida

Twitter Bootstrap logotipoa

Bootstrap da CSS esparrua hori oso ezaguna bihurtu da sare osoan. Haien estiloak sentikorrena sare sozialetan ikusten dira Tuenti y Twitter. Horren erabilerak denbora asko aurrezten digu web aplikazio bat garatzerakoan, gailu guztietarako egokia den orrialde estilo garbia sortzeko lan eta ahalegin guztiak aurrezten baititugu. Esparru horretan erabilitako estiloak kontsultatuz, konturatuko gara ezagunak zaizkigula, gaur egun webgune askok inplementatu baitute.

Egitura

Bootstrap egituraren irudia

Bootstrap fluidoen egitura

Gure webgunea telefono mugikorretatik eta tabletetatik eskuragarria izan dadin, Bootstrap-ek eskaintzen digun egitura arina erabili beharko dugu. Egitura honen erabilera oso erraza da, dena elementuetan oinarrituta dago span horrek lagunduko digu maketazioa gure web diseinua. Geroago, diseinu honetara a Smartphone o tabletHau automatikoki egokituko da aipatutako gailura nabigazioaren kalitatea nabarmen hobetuz. Erabiliko dugu span egitura fluidoko zatiketa logikoetako klaseekin, hau da:

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

2 zenbakiak tartearen tamaina adierazten duen lekuan. Errenkada bakoitzak nahikoa leku du 12 tamainako 1 edo 2 tamainako 6 tarteetarako, hau zure gustura banatu daiteke. Lerro baten espazioa gainditu ondoren, hurrengoan automatikoki jaitsiko da, eta a erabiltzeko aukera emango digu span 12 tamaina lerro jauzia sortzeko. Batzuk saltatu nahi bagenitu span bat sortzerakoan, hau da, hasi 4tik span, eta 3 tamaina aplikatuz, kode hau erabiliko genuke:

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

Horri esker, zatiketak lau salto egin ditzake bao edukia erakutsi aurretik. Hau gure borondatez erabil dezakegu, gure kodearen bidez nahi duguna saltatuz.

Offset klasearekin tarteak saltatzen

Offset klasearekin tarteak saltatzen

Gailu bakoitzerako diseinu desberdina

Irudia Bootstrap gailuetarako esklusibitate klaseekin

Gailu bakoitza bereizteko CSS klaseak

Gailu mota bakoitzari diseinu desberdina aplikatzeko, zatiketa logiko bakoitzari zein gailutara bideratuta dagoen esango dugu, honako klase hauek erabiliz:

Modu honetan URL berdina duen gailu bakoitzarentzako diseinu guztiz desberdina erakuts dezakegu.

botoiak

Kolore botoiak

Bootstrap-ek eskaintzen dituen botoien zerrenda

Bootstrap-ek koloretako botoien errepertorio garbia eskaintzen digu, bere erabilera oso erraza da:

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

Non btn btn-success botoiaren kolorea aipatzen du, aldatzeko, aurreko irudian agertzen diren klaseekin soilik ordezkatu beharko dugu.

Bootstrap instalatzen

CSS esparru hau instalatzeko, postaren amaieran utziko dudan estekatik zip deskargatuko dugu eta ondorengo kodea idatziko dugu. gure HTML fitxategiaren buruan.

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

CSS eta JS fitxategiak gure HTML fitxategiaren karpeta berean daudela ziurtatu ondoren, gure webgune sentikorra diseinatzen has gaitezke.

Informazio gehiago - Inprimakiaren baliozkotzea

Deskargatu - Bootstrap: CSS Framework


Artikuluaren edukia gure printzipioekin bat dator etika editoriala. Akats baten berri emateko egin klik hemen.

Iruzkin bat, utzi zurea

Utzi zure iruzkina

Zure helbide elektronikoa ez da argitaratuko.

*

*

  1. Datuen arduraduna: Miguel Ángel Gatón
  2. Datuen xedea: SPAM kontrolatzea, iruzkinen kudeaketa.
  3. Legitimazioa: Zure baimena
  4. Datuen komunikazioa: datuak ez zaizkie hirugarrenei jakinaraziko legezko betebeharrez izan ezik.
  5. Datuak biltegiratzea: Occentus Networks-ek (EB) ostatatutako datu-basea
  6. Eskubideak: Edonoiz zure informazioa mugatu, berreskuratu eta ezabatu dezakezu.

  1.   alejandra esan zuen

    Ez al duzu marko honi buruzko tutorial gehiagorik ???