Osagaiak

Dozenaka osagai berrerabilgarri daude Bootstrap-en nabigazioa, alertak, popovers eta askoz gehiago eskaintzeko.

Botoi-taldeak

Erabili botoi-taldeak hainbat botoi osagai konposatu gisa elkartzeko. Eraiki itzazu elementu <a>edo serie batekin .<button>

Praktika egokiak

Botoien taldeak eta tresna-barrak erabiltzeko jarraibide hauek gomendatzen ditugu:

  • Erabili beti elementu bera botoi talde bakarrean, <a>edo <button>.
  • Ez nahastu kolore ezberdineko botoiak botoi talde berean.
  • Erabili ikonoak testuaz gain edo horren ordez, baina ziurtatu alt eta izenburuaren testua sartu behar denean.

Goitibeherako botoiekin erlazionatutako taldeei (ikus behean) bereizita deitu behar zaie eta beti ere goitibeherako ikurra sartu nahi den portaera adierazteko.

Lehenetsitako adibidea

Hona hemen HTML-ak aingura etiketa-botoiekin eraikitako botoi-talde estandar baten bila:

  1. <div class = "btn-group" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </div>

Tresna-barraren adibidea

Konbinatu multzoak <div class="btn-group">osagai <div class="btn-toolbar">konplexuagoetarako.

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

Checkbox eta irrati zaporeak

Botoi-taldeek irrati gisa ere funtziona dezakete, non botoi bakarra aktibo egon daitekeen, edo kontrol-laukiak, edozein botoi aktibo egon daitezkeenetan. Ikusi horretarako Javascript dokumentuak .

Lortu javascript-a »

Goitibeherak botoi-taldeetan

Buruak gora! Goitibeherako botoiak banan-banan bilduta egon behar dira .btn-grouperrendatze .btn-toolbaregokia izateko.

Botoien goitibeherakoak

Adibide markaketa

Botoien talde baten antzera, gure markaketak ohiko botoien marka erabiltzen du, baina estiloa fintzeko eta Bootstrap-en goitibeherako jQuery plugina onartzeko gehigarri batzuk ditu.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Ekintza
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "menua goitibeherako" >
  7. <!-- goitibeherako menuaren estekak -->
  8. </ul>
  9. </div>

Botoien tamaina guztiekin funtzionatzen du

Botoien goitibeharrek edozein tamainatan funtzionatzen dute. zure botoien tamainak .btn-large, .btn-small, edo .btn-mini.

Javascript behar du

Botoien goitibeharrek Bootstrap goitibeherako plugina behar dute funtzionatzeko.

Zenbait kasutan, mugikorrak bezala, goitibeherako menuak bistatik kanpo zabalduko dira. Lerrokatzea eskuz edo javascript pertsonalizatuarekin konpondu behar duzu.


Zatitu botoien goitibehurrak

Ikuspegi orokorra eta adibideak

Botoien taldeen estiloak eta markaketa oinarri hartuta, zatitutako botoi bat erraz sor dezakegu. Zatitutako botoiek ekintza estandar bat dute ezkerrean eta goitibeherako hautagailua eskuinaldean, testuinguruko estekekin.

Tamainak

Erabili botoien klase gehigarriak .btn-mini, .btn-small, edo .btn-largetamainarako.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "menua goitibeherako tira-eskuinera" >
  4. <!-- goitibeherako menuaren estekak -->
  5. </ul>
  6. </div>

Adibide markaketa

Botoien goitibehitz arruntak zabaltzen ditugu goitibeherako abiarazle gisa funtzionatzen duen bigarren botoiaren ekintza bat eskaintzeko.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Ekintza </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "menua goitibeherako" >
  7. <!-- goitibeherako menuaren estekak -->
  8. </ul>
  9. </div>

Goitibeherako menuak

Goitibeherako menuak behetik gora ere alda daitezke klase bakar bat gehituz berehalako gurasoari .dropdown-menu. Norantza irauli .careteta menua bera aldatuko du goitik behera egin beharrean behetik gora mugitzeko.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Jaregin </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "menua goitibeherako" >
  7. <!-- goitibeherako menuaren estekak -->
  8. </ul>
  9. </div>

Orrialde anitzeko orrialdea

Noiz erabili

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.

Orrialdearen estekak

Estekak pertsonalizagarriak dira eta hainbat egoeratan funtzionatzen dute klase egokiarekin. .disabledKlikatu ezin diren esteketarako eta .activeuneko orrialderako.

Lerrokadura malgua

Gehitu aukerako bi klaseetako bat orrialderatze-esteken lerrokadura aldatzeko: .pagination-centeredeta .pagination-right.

Adibideak

Orrialde-osagai lehenetsia malgua da eta hainbat aldaeratan funtzionatzen du.

Markatzea

Bat batean bilduta, <div>orria bat besterik ez da <ul>.

  1. <div class = "paginazioa" >
  2. <ul>
  3. <li><a href = "#" > Aurrekoa </a></li>
  4. <li class = "aktiboa" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Hurrengoa </a></li>
  11. </ul>
  12. </div>

Pager Aurreko eta hurrengo esteka bizkoretarako

orrialdeari buruz

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.

Aukerako desgaitu egoera

Pager-en estekek .disabledorrialdeko klase orokorra ere erabiltzen dute.

Lehenetsitako adibidea

Lehenespenez, orrialdeak estekak ditu zentroak.

  1. <ul class = "orria" >
  2. <li>
  3. <a href = "#" > Aurrekoa </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Hurrengoa </a>
  7. </li>
  8. </ul>

Lerrokaturiko estekak

Bestela, esteka bakoitza alboetara lerrokatu dezakezu:

  1. <ul class = "orria" >
  2. <li class = "aurrekoa" >
  3. <a href = "#" > Zaharragoak </a>
  4. </li>
  5. <li class = "hurrengo" >
  6. <a href = "#" > Berriagoa → </a>
  7. </li>
  8. </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>
Alderantzizkoa <span class="label label-inverse">Inverse</span>

Buruz

Insigniak osagai txiki eta sinpleak dira nolabaiteko adierazle edo zenbaketa bat bistaratzeko. Mail.app bezalako posta elektronikoko bezeroetan edo push jakinarazpenetarako aplikazio mugikorretan aurkitu ohi dira.

Klase eskuragarriak

Izena Adibidea Markatzea
Lehenetsia 1 <span class="badge">1</span>
Arrakasta 2 <span class="badge badge-success">2</span>
Abisua 4 <span class="badge badge-warning">4</span>
Garrantzitsua 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Alderantzizkoa 10 <span class="badge badge-inverse">10</span>

Hero unitatea

Bootstrap-ek heroi-unitate izeneko osagai arin eta malgu bat eskaintzen du zure webguneko edukia erakusteko. Ondo funtzionatzen du marketin eta eduki handiko guneetan.

Markatzea

Bilatu zure edukia divhonela:

  1. <div class = "heroi-unitatea" >
  2. <h1> Goiburua </h1>
  3. <p> Lema </p>
  4. <p>
  5. <a class = "btn btn-primary btn-handi" >
  6. Gehiago ikasi
  7. </a>
  8. </p>
  9. </div>

Kaixo Mundua!

Heroi-unitate sinple bat da, eduki edo informazioari arreta gehiago deitzeko jumbotron estiloko osagai soil bat.

Gehiago ikasi

Orriaren goiburua

h1Orrialde bateko edukiaren atalak behar bezala zuritu eta segmentatzeko shell sinple bat. h1Elementu lehenetsia erabil dezake small, baita beste osagai gehienak ere (estilo gehigarriekin).

  1. <div class = "orriaren goiburua" >
  2. <h1> Orriaren goiburuaren adibidea </h1>
  3. </div>

Miniatura lehenetsiak

Lehenespenez, Bootstrap-en koadro txikiak estekatutako irudiak behar den marka minimoarekin erakusteko diseinatuta daude.

Oso pertsonalizagarria

Markatze gehigarri batekin, edozein motatako HTML edukia gehi daiteke koadro txikietan, adibidez, goiburuak, paragrafoak edo botoiak.

  • Irudi txikiaren etiketa

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Ekintza Ekintza

  • Irudi txikiaren etiketa

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Ekintza Ekintza

Zergatik erabili miniaturak

Miniaturak (lehen .media-gridv1.4 arte) bikainak dira argazki edo bideoen sareta, irudien bilaketa-emaitzak, txikizkako produktuak, zorroak eta askoz gehiago egiteko. Estekak edo eduki estatikoak izan daitezke.

Markaketa sinplea eta malgua

Irudi txikien markaketa erraza da ul: edozein lielementu dituena da beharrezkoa dena. Gainera, oso malgua da, zure edukiak biltzeko marka apur bat gehiago duen edozein eduki mota ahalbidetzen du.

Sare-zutabeen tamainak erabiltzen ditu

Azkenik, miniaturak osagaiak lehendik dauden sareta-sistemako klaseak erabiltzen ditu, .span2edo antzekoak .span3, irudi txikien dimentsioak kontrolatzeko.

Markaketa

Aurretik esan bezala, miniaturak egiteko beharrezkoa den marka arina eta zuzena da. Hona hemen estekatutako irudien konfigurazio lehenetsia :

  1. <ul class = "miniaturak" >
  2. <li class = "span3" >
  3. <a href = "#" class = "miniatura" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Irudi txikietako HTML eduki pertsonalizaturako, markaketa zertxobait aldatzen da. Bloke-mailako edukia edonon baimentzeko, honela aldatzen <a>dugu <div>:

  1. <ul class = "miniaturak" >
  2. <li class = "span3" >
  3. <div class = "miniatura" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Irudi txikiaren etiketa </h5>
  6. <p> Miniatura-oina hementxe... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Adibide gehiago

Arakatu zure aukera guztiak eskuragarri dituzun sareko klase ezberdinekin. Tamaina desberdinak ere nahastu eta lotu ditzakezu.

Lehenetsi arinak

Oinarrizko klase berridatzia

Bootstrap 2-rekin, oinarrizko klasea sinplifikatu dugu: .alertordez .alert-message. Beharrezko gutxieneko marka ere murriztu dugu <p>; lehenespenez ez da beharrezkoa, kanpokoa bakarrik <div>.

Alerta-mezu bakarra

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.


Oso ondo doa javascript-ekin

Bootstrap-ek alerta-mezuak onartzen dituen jQuery plugin bikain batekin dator, horiek baztertzea azkar eta erraz eginez.

Lortu plugina »

Adibide alertak

Itzulbiratu zure mezua eta aukerako ixteko ikono bat div batean klase sinple batekin.

Kontuz! Hobe egiazta ezazu zeure burua, ez zaude itxura ona.
  1. <div class = "alerta" >
  2. <button class = "close" data-dismiss = "alerta" > × </button>
  3. <strong> Kontuz! </strong> Egiaztatu zure burua, ez zara itxura onegia.
  4. </div>

Buruak gora! iOS gailuek href="#"alertak ezabatzeko eskatzen dute. Ziurtatu hura eta aingura ixteko ikonoen datu-atributua sartzen dituzula. Bestela, datu-atributua duen elementu bat erabil dezakezu <button>, gure dokumentuetarako egitea aukeratu duguna. Erabiltzean <button>, sartu behar duzu type="button"edo baliteke zure inprimakiak ez bidali.

Hedatu erraz alerta-mezu estandarra aukerako bi klaserekin: .alert-blockbetegarri eta testu-kontrol gehiago .alert-headinglortzeko eta bat datorren izenburua lortzeko.

Kontuz!

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.

  1. <div class = "alerta alerta-blokeoa" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Kontuz! </h4>
  4. Egiaztatu zure burua, ez zara...
  5. </div>

Testuinguruko alternatibak Gehitu aukerako klaseak alerta baten konnotazioa aldatzeko

Akatsa edo arriskua

Ai txorrota! Aldatu gauza batzuk eta saiatu berriro bidaltzen.
  1. <div class = "alerta alerta-errorea" >
  2. ...
  3. </div>

Arrakasta

Ongi egina! Irakurri duzu alerta-mezu garrantzitsu hau.
  1. <div class = "alerta alerta-arrakasta" >
  2. ...
  3. </div>

Informazioa

Buruak gora! Alerta honek zure arreta behar du, baina ez da oso garrantzitsua.
  1. <div class = "alerta alerta-informazioa" >
  2. ...
  3. </div>

Adibideak eta markaketa

Oinarrizkoa

Aurrerapen-barra lehenetsia gradiente bertikal batekin.

  1. <div class = "aurrerapena" >
  2. <div class = "barra"
  3. style = " zabalera : % 60 ; " ></div>
  4. </div>

Marraduna

Gradiente bat erabiltzen du marra-efektua sortzeko (IE ez).

  1. <div class = "aurrerapen-aurrerapen marradun" >
  2. <div class = "barra"
  3. style = " zabalera : % 20 ; " ></div>
  4. </div>

Animatua

Marradun adibidea hartu eta animatzen du (IE ez).

  1. <div class = "aurrerapena aurrerapen marradun
  2. aktibo" >
  3. <div class = "barra"
  4. style = " zabalera : % 40 ; " ></div>
  5. </div>

Aukerak eta arakatzailearen laguntza

Kolore gehigarriak

Aurrerapen-barrek botoi eta alerta-klase bereko batzuk erabiltzen dituzte estilo koherenteetarako.

Barra marradunak

Kolore solidoen antzera, marradun aurrerapen-barra desberdinak ditugu.

Portaera

Aurrerapen-barrek CSS3 trantsizioak erabiltzen dituzte, beraz, zabalera dinamikoki doitzen baduzu javascript bidez, erraz aldatuko da tamaina.

.activeKlasea erabiltzen baduzu , zure .progress-stripedaurrerapen-barrak ezkerretik eskuinera marrak animatuko ditu.

Arakatzailearen laguntza

Aurrerapen-barrek CSS3 gradienteak, trantsizioak eta animazioak erabiltzen dituzte efektu guztiak lortzeko. Ezaugarri hauek ez dira onartzen IE7-9 edo Firefox-en bertsio zaharretan.

Operak eta IE-k ez dute animaziorik onartzen momentu honetan.

Putzuak

Erabili putzua elementu baten efektu sinple gisa txertatze-efektua emateko.

Begira, putzu batean nago!
  1. <div class = "ondo" >
  2. ...
  3. </div>

Itxi ikonoa

Erabili itxi ikono generikoa moduak eta alertak bezalako edukia baztertzeko.

  1. <button class = "itxi" > × </button>

iOS gailuek href="#" bat behar dute klik-gertaeretarako aingura bat erabili nahi baduzu.

  1. <a class = "close" href = "#" > × </a>