Dozenaka osagai berrerabilgarri daude Bootstrap-en nabigazioa, alertak, popovers eta askoz gehiago eskaintzeko.
Rdio-n inspiratu den orrigintza ultra sinplista eta gutxieneko estiloa, bikaina aplikazioetarako eta bilaketa-emaitzetan. Bloke handia galtzen zaila da, erraz eskala daiteke eta klik eremu handiak eskaintzen ditu.
Estekak pertsonalizagarriak dira eta hainbat egoeratan funtzionatzen dute klase egokiarekin. .disabled
Klikatu ezin diren esteketarako eta .active
uneko orrialderako.
Gehitu aukerako bi klaseetako bat orrialderatze-esteken lerrokadura aldatzeko: .pagination-centered
eta .pagination-right
.
Orrialde-osagai lehenetsia malgua da eta hainbat aldaeratan funtzionatzen du.
Bat batean bilduta, <div>
orria bat besterik ez da <ul>
.
- <div class = "paginazioa" >
- <ul>
- <li><a href = "#" > Aurrekoa </a></li>
- <li class = "aktiboa" >
- <a href = "#" > 1 </a>
- </li>
- <li><a href = "#" > 2 </a></li>
- <li><a href = "#" > 3 </a></li>
- <li><a href = "#" > 4 </a></li>
- <li><a href = "#" > Hurrengoa </a></li>
- </ul>
- </div>
Orrialdearen osagaia orri-markaketa arinarekin eta are estilo arinagoak dituzten orrialde-inplementazio soiletarako esteka multzo bat da. Oso ona da blogak edo aldizkariak bezalako gune sinpleetarako.
Lehenespenez, orrialdeak estekak ditu zentroak.
- <ul class = "orria" >
- <li>
- <a href = "#" > Aurrekoa </a>
- </li>
- <li>
- <a href = "#" > Hurrengoa </a>
- </li>
- </ul>
Bestela, esteka bakoitza alboetara lerrokatu dezakezu:
- <ul class = "orria" >
- <li class = "aurrekoa" >
- <a href = "#" > ← Zaharragoak </a>
- </li>
- <li class = "hurrengo" >
- <a href = "#" > Berriagoa → </a>
- </li>
- </ul>
Etiketak | Markatzea |
---|---|
Lehenetsia | <span class="label">Default</span> |
Arrakasta | <span class="label label-success">Success</span> |
Abisua | <span class="label label-warning">Warning</span> |
Garrantzitsua | <span class="label label-important">Important</span> |
Info | <span class="label label-info">Info</span> |
Bootstrap-ek heroi-unitatea izeneko osagai arin eta malgu bat eskaintzen du zure webguneko edukia erakusteko. Ondo funtzionatzen du marketin eta eduki handiko guneetan.
Bilatu zure edukia div
honela:
- <div class = "heroi-unitatea" >
- <h1> Goiburua </h1>
- <p> Lema </p>
- <p>
- <a class = "btn btn-primary btn-handi" >
- Gehiago ikasi
- </a>
- </p>
- </div>
Heroi-unitate sinple bat da, eduki edo informazioari arreta gehiago deitzeko jumbotron estiloko osagai soil bat.
h1
Orrialde bateko edukien atalak behar bezala zuritzeko eta zatitzeko shell sinple bat. h1
Elementu lehenetsia erabil dezake small
, baita beste osagai gehienak ere (estilo gehigarriekin).
- <div class = "page-haeder" >
- <h1> Orriaren goiburuaren adibidea </h1>
- </div>
Lehenespenez, Bootstrap-en koadro txikiak estekatutako irudiak behar den marka minimoarekin erakusteko diseinatuta daude.
Markatze gehigarri batekin, edozein motatako HTML edukia gehi daiteke koadro txikietan, adibidez, goiburuak, paragrafoak edo botoiak.
Miniaturak (lehen .media-grid
v1.4 arte) bikainak dira argazki edo bideoen sareta, irudien bilaketa-emaitzak, txikizkako produktuak, zorroak eta askoz gehiago egiteko. Estekak edo eduki estatikoak izan daitezke.
Miniaturak markatzea erraza da ul
: edozein li
elementu dituena da beharrezkoa dena. Gainera, oso malgua da, zure edukiak biltzeko marka apur bat gehiago duen edozein eduki mota ahalbidetzen du.
Azkenik, miniaturak osagaiak lehendik dauden sareta-sistemako klaseak erabiltzen ditu, .span2
edo antzekoak .span3
, irudi txikien dimentsioak kontrolatzeko.
Aurretik esan bezala, miniaturak egiteko beharrezkoa den marka arina eta zuzena da. Hona hemen estekatutako irudien konfigurazio lehenetsia :
- <ul class = "miniaturak" >
- <li class = "span3" >
- <a href = "#" class = "miniatura" >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
Irudi txikietako HTML eduki pertsonalizaturako, markaketa zertxobait aldatzen da. Bloke-mailako edukia edonon baimentzeko, honela aldatzen <a>
dugu <div>
:
- <ul class = "miniaturak" >
- <li class = "span3" >
- <div class = "miniatura" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> Irudi txikiaren etiketa </h5>
- <p> Miniatura-oina hementxe... </p>
- </div>
- </li>
- ...
- </ul>
Bootstrap 2-rekin, oinarrizko klasea sinplifikatu dugu: .alert
ordez .alert-message
. Beharrezko gutxieneko marka ere murriztu dugu <p>
; lehenespenez ez da beharrezkoa, kanpokoa bakarrik <div>
.
Kode gutxiago duen osagai iraunkorragoa lortzeko, blokeen abisuei, betegarri gehiagorekin eta normalean testu gehiagorekin datozen mezuei itxura bereizgarria kendu diegu. Klasea ere aldatu egin da .alert-block
.
Bootstrap-ek alerta-mezuak onartzen dituen jQuery plugin bikain batekin dator, horiek baztertzea azkar eta erraz eginez.
Itzulbiratu zure mezua eta aukerako ixteko ikono bat div batean klase sinple batekin.
- <div class = "alerta" >
- <a class = "close" data-dismiss = "alerta" > × </a>
- <strong> Kontuz! </strong> Egiaztatu zure burua, ez zara itxura onegia.
- </div>
Hedatu erraz alerta-mezu estandarra aukerako bi klaserekin: .alert-block
betegarri eta testu-kontrol gehiago .alert-heading
lortzeko eta bat datorren izenburua lortzeko.
Hobe egiazta ezazu zeure burua, ez zaude itxura ona. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <div class = "alerta alerta-blokeoa" >
- <a class = "close" data-dismiss = "alerta" > × </a>
- <h4 class = "alert-heading" > Kontuz! </h4>
- Egiaztatu zure burua, ez zara...
- </div>
- <div class = "alerta alerta-errorea" >
- ...
- </div>
- <div class = "alerta alerta-arrakasta" >
- ...
- </div>
- <div class = "alerta alerta-informazioa" >
- ...
- </div>
Aurrerapen-barra lehenetsia gradiente bertikal batekin.
- <div class = "aurrerapena" >
- <div class = "barra"
- style = " zabalera : % 60 ; " ></div>
- </div>
Gradiente bat erabiltzen du marra-efektua sortzeko.
- <div class = "aurrerapena aurrerapen-informazioa
- aurrerapen marradun" >
- <div class = "barra"
- style = " zabalera : % 20 ; " ></div>
- </div>
Marradun adibidea hartu eta animatzen du.
- <div class = "aurrerapena aurrerapena-arriskua
- aurrerapen marradun aktibo" >
- <div class = "barra"
- style = " zabalera : % 40 ; " ></div>
- </div>
Aurrerapen-barrek klase-izen berberak erabiltzen dituzte botoi eta alertak bezalako estilorako.
.progress-info
.progress-success
.progress-danger
Bestela, LESS fitxategiak pertsonaliza ditzakezu eta zure koloreak eta tamainak jaurti ditzakezu.
Aurrerapen-barrek CSS3 trantsizioak erabiltzen dituzte, beraz, zabalera dinamikoki doitzen baduzu javascript bidez, erraz aldatuko da tamaina.
.active
Klasea erabiltzen baduzu , zure .progress-striped
aurrerapen-barrak ezkerretik eskuinera marrak animatuko ditu.
Aurrerapen-barrek CSS3 gradienteak, trantsizioak eta animazioak erabiltzen dituzte efektu guztiak lortzeko. Ezaugarri hauek ez dira onartzen IE7-8 edo Firefox-en bertsio zaharretan.
Operak ez du animaziorik onartzen momentu honetan.
Erabili putzua elementu baten efektu sinple gisa txertatze-efektua emateko.
- <div class = "ondo" >
- ...
- </div>
Erabili itxi ikono generikoa moduak eta alertak bezalako edukia baztertzeko.
- <a class = "itxi" > × </a>