Botoi-taldeak

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

Era berean, multzoak konbina ditzakezu <div class="btn-group">proiektu <div class="btn-toolbar">konplexuagoetarako.

Adibide markaketa

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

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

Eta hainbat taldeentzako tresna-barra batekin:

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</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 »

Buruak gora

Botoien taldeentzako CSS fitxategi bereizi batean dago, button-groups.less.

Botoien goitibeherakoak

Erabili edozein botoi goitibeherako menu bat abiarazteko, a barruan kokatuz .btn-groupeta menu-marka egokia emanez.

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.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Ekintza
    <span class = "caret" ></span> 
  </a>
  <ul class = "menua goitibeherako" > 
    <!-- goitibeherako menuaren estekak -->
  </ul>
</div>

Zatitu botoien goitibehurrak

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.

Adibide markaketa

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

<div class = "btn-group" > 
  <a class = "btn" href = "#" > Ekintza </a>  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span class = "caret" ></span> 
  </a>
  <ul class = "menua goitibeherako" > 
    <!-- goitibeherako menuaren estekak -->
  </ul>
</div>

Oinarrizko klase indartsua

Hemen nabigazio-osagai guztiek (fitxak, pilulak eta zerrendak) oinarrizko marka eta estilo berdinak partekatzen dituzte klasean .nav.

Zergatik fitxak eta pilulak

Bootstrap-en fitxak eta pilulak <ul>oinarrizko HTML berberarekin eraikitzen dira, esteken zerrenda batean. Trukatu fitxak edo pilulak klase batekin soilik.

Bi aukerak bikainak dira edukiaren azpiataletarako edo erlazionatutako edukien orrien artean nabigatzeko.

Oinarrizko fitxak

Hartu <ul>esteka arruntak eta gehitu .nav-tabs:

• Hasiera
• Profila
• Mezuak

<ul class = "nav nav-tabs" > 
  <li class = "aktiboa" > 
    <a href = "#" > Hasiera </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Oinarrizko pilulak

Hartu HTML bera, baina erabili .nav-pillshorren ordez:

• Hasiera
• Profila
• Mezuak

<ul class = "nav nav-pilulak" > 
  <li class = "aktiboa" > 
    <a href = "#" > Hasiera </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Nola pilatu

Fitxak eta pilulak lehenespenez horizontalak direnez, gehitu bigarren klase bat, .nav-stacked, bertikalki pilatuta ager daitezen.

Fitxa pilatuak

• Hasiera
• Profila
• Mezuak

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

Pilulak pilatuta

• Hasiera
• Profila
• Mezuak

<ul class = "nav nav-pilulak nav-pilatuta" > 
  ...
</ul>

Menu aberatsak errazak dira

Bootstrap fitxetan eta piluletan goitibeherako menuak oso errazak dira eta HTML gehigarri apur bat eta jQuery plugin arina besterik ez dute behar.

Joan Javascript orrira Bootstrap-en goitibeherako hasierako dokumentuak irakurtzeko .

Goitibeherako fitxak

• Hasiera
• Profila
• Goitibehera
  • Ekintza
  • Beste ekintza bat
  • Hemen beste zerbait
  • Esteka bereizia

<ul class = "nav nav-tabs" > 
  <li class = "goiburua" > 
    <a class = "gotibehera-toggle" 
       data-toggle = "gotibehera"
       href = "#" >
        Goitibehera
        <b class = "caret" ></b> 
      </a>
    <ul class = "menua goitibeherako" > 
      <!-- estekak -->
    </ul>
  </li>
</ul>

Goitibeherako pilulak

• Hasiera
• Profila
• Goitibehera
  • Ekintza
  • Beste ekintza bat
  • Hemen beste zerbait
  • Esteka bereizia

<ul class = "nav nav-pilulak" > 
  <li class = "goiburua" > 
    <a class = "gotibehera-toggle" 
       data-toggle = "gotibehera"
       href = "#" >
        Goitibehera
        <b class = "caret" ></b> 
      </a>
    <ul class = "menua goitibeherako" > 
      <!-- estekak -->
    </ul>
  </li>
</ul>

Aplikazio estiloko nabigazioa

Nabigazio-zerrendek aukerako goiburuekin nabigazio-esteken taldeak sortzeko modu sinple eta erraz bat eskaintzen dute. OS X-ko Finder bezalako alboko barran erabiltzen dira onena.

Egitura aldetik, fitxen eta pilulen oinarrizko nabigazio estilo berdinetan eraikita daude, beraz, erabilera eta pertsonalizazioa errazak dira.

Ikonoekin

Nabigazio zerrendak ere errazak dira ikonoekin hornitzeko. Gehitu <i>etiketa egokia klasearekin eta listo.

Nabigazio-zerrenda adibidea

Hartu esteken zerrenda bat eta gehitu class="nav nav-list":

<ul class = "nabigazio-zerrenda" > 
  <li class = "nav-header" > 
    Zerrendaren goiburua
  </li>
  <li class = "aktiboa" > 
    <a href = "#" > Hasiera </a> 
  </li>
  <li>
    <a href = "#" > Liburutegia </a> 
  </li>
  ...
</ul>

Adibidea ikonoekin

Adibide bera, baina <i>ikonoetarako etiketarekin.

<ul class = "nabigazio-zerrenda" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "ikono-liburua" ></i> 
      Liburutegia
    </a>
  </li>
  ...
</ul>

Zer sartzen den

Eman zure fitxen bizia plugin sinple batekin fitxen bidez edukien artean aldatzeko. Bootstrap-ek lau estilotako fitxak integratzen ditu: goiko (lehenetsia), eskuinekoa, behekoa eta ezkerrekoa.

Horien artean aldatzea erraza da eta oso marka gutxi aldatzea eskatzen du.

Tabulatzeko adibidea

Fitxak tabulagarriak izan daitezen, bildu .nav-tabsbeste div batean class .tabbable.

jQuery plugin pertsonalizatua

Tabulatzeko fitxa guztiak gure jQuery plugin arinarekin elikatzen dira. Irakurri gehiago tabulazio-fitxak bizitzeari buruz javascript docs orrian.

Lortu javascript →

Fitxak behealdean

Biratu HTML-aren ordena eta gehitu klase bat fitxak behean jartzeko.

<div class = "tabbable fits-below" > 
  <div class = "tab-edukia" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Ezkerreko fitxak

Trukatu klasea ezkerreko fitxak jartzeko.

<div class = "tabbable fits-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-edukia" > 
    ...
  </div>
</div>

Eskuineko fitxak

Trukatu klasea eskuineko fitxak jartzeko.

<div class = "tabulatzeko fitxak-eskuinean" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-edukia" > 
    ...
  </div>
</div>

Navbar aldamioak

Nabigazio-barrak div batzuk baino ez ditu behar ondo egituratzeko pantaila estatiko edo finkorako.

<div class = "nabigazio barra" > 
  <div class = "navbar-inner" > 
    <div class = "edukiontzi" > 
      ...
    </div>
  </div>
</div>

Nabigazio-barra bistaren goiko aldean finkatu dadin, gehitu .navbar-fixed-topkanpoko div-era, .navbar. Zure CSS-n, eragiten duen gainjartzea ere kontuan hartu beharko duzu padding-top: 40px;zure <body>.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

Marka Izena

Zure marka edo proiektuaren izena erakusteko esteka sinple batek aingura-etiketa bat besterik ez du behar.

<a class = "marka" href = "#" >  
  Proiektuaren izena
</a>

Bilaketa formularioa

Bilaketa-inprimakiek estilo pertsonalizatuak jasotzen dituzte nabigazio-barran .navbar-searchklasearekin batera. Sartu .pull-leftedo .pull-rightlerrokatzeko form.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Bilatu" >   
</form>

Aukerako aldaera sentikorra

Goiko barrako eduki kopuruaren arabera, baliteke erantzuteko aukerak ezarri nahi izatea. Horretarako, bildu nabigazio-edukia div, .nav-collapse.collapse, eta gehitu nabigazio-barra aldatzeko botoia, .btn-navbar.

<div class = "nabigazio barra" > 
  <div class = "navbar-inner" > 
    <div class = "edukiontzi" > 
 
      <!-- .btn-navbar nabigazio-barren edukiaren etengailu gisa erabiltzen da -->
      <a class = "btn btn-navbar" data-toggle = "kolapsoa" data-target = ".nav-kolapsoa" >   
        <span class = "ikono-barra" ></span> 
        <span class = "ikono-barra" ></span> 
        <span class = "ikono-barra" ></span> 
      </a>
 
      <!-- Ziurtatu marka hor utzi duzula erakutsi nahi baduzu -->
      <a class = "brand" href = "#" > Proiektuaren izena </a>  
 
      <!-- 940 px edo gutxiagotan ezkutatu nahi duzun guztia, jarri hemen -->
      <div class = "nav-kolapsoa" > 
        <!-- .nav, .navbar-search, .navbar-form, etab -->
      </div>
 
    </div>
  </div>
</div>

Nabigazio estekak

Nabigazio-elementuak ordenatu gabeko zerrenden bidez gehitzeko errazak dira.

<ul class = "nav" > 
  <li class = "aktiboa" > 
    <a href = "#" > Hasiera </a> 
  </li>
  <li><a href = "#" > Esteka </a></li> 
  <li><a href = "#" > Esteka </a></li> 
</ul>

Goitibehurrak gehitzea

Nabigazioan goitibehurrak gehitzea oso erraza da, baina gure javascript plugina erabiltzea eskatzen du .

<ul class = "nav" > 
  <li class = "goiburua" > 
    <a href = "#" 
          klasea = "menu goitibeherako-toggle"
          data-toggle = "gotibehera" >
          Kontua
          <b class = "caret" ></b> 
    </a>
    <ul class = "menua goitibeherako" > 
      ...
    </ul>
  </li>
</ul>

Lortu javascript →

Zergatik erabili

Breadcrumb nabigazioa erabiltzaileei aplikazio edo gune batean non dauden erakusteko modu gisa erabiltzen da, baina ez nabigazio nagusirako. Mantendu haien erabilera eskasa eta laburra eraginkorrena izateko.

Adibideak

Adibide bakar bat orrialde askotan bistaratu daitekeenez.

• Hasiera

• Hasiera /
• Liburutegia

• Hasiera /
• Liburutegia /
• Datuak

Markatzea

HTML zure estekekin ordenatu gabeko zerrenda estandarra da.

<ul class = "ogi birrindua" > 
  <li>
    <a href = "#" > Hasiera </a> <span class = "banatzailea" > / </span>   
  </li>
  <li>
    <a href = "#" > Liburutegia </a> <span class = "divider" > / </span>   
  </li>
  <li class = "aktiboa" > 
    <a href = "#" > Datuak </a> 
  </li>
</ul>

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

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

orrialdeari buruz

Orrialdearen osagaia orri-markaketa arinekin eta are estilo arinagoak dituzten orrialde-inplementazio soiletarako esteka multzo bat da. Oso ona da blogak edo aldizkariak bezalako gune sinpleetarako.

Lehenetsitako adibidea

Lehenespenez, orrialdeak estekak ditu zentroak.

• Aurrekoa
• Hurrengoa

<ul class = "orria" > 
  <li>
    <a href = "#" > Aurrekoa </a> 
  </li>
  <li>
    <a href = "#" > Hurrengoa </a> 
  </li>
</ul>

Lerrokaturiko estekak

Bestela, esteka bakoitza alboetara lerrokatu dezakezu:

• ← Zaharragoa
• Berriagoa →

<ul class = "orria" > 
  <li class = "aurrekoa" > 
    <a href = "#" > ← Zaharragoak </a> 
  </li>
  <li class = "hurrengo" > 
    <a href = "#" > Berriagoa → </a> 
  </li>
</ul>

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

Miniaturak markatzea 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 :

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

Adibide gehiago

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

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 besterik ez <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.

<div class = "alerta" > 
  <a class = "itxi" > × </a> 
  <strong> Kontuz! </strong> Egiaztatu zure burua, ez zara itxura onegia.
</div>

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

<div class = "alerta alerta-blokeoa" > 
  <a class = "itxi" > × </a> 
  <h4 class = "alert-heading" > Kontuz! </h4> 
  Egiaztatu zure burua, ez zara...
</div>

Akatsa edo arriskua

<div class = "alerta alerta-errorea" > 
  ...
</div>

Arrakasta

<div class = "alerta alerta-arrakasta" > 
  ...
</div>

Informazioa

<div class = "alerta alerta-informazioa" > 
  ...
</div>

Oinarrizkoa

Aurrerapen-barra lehenetsia gradiente bertikal batekin.

<div class = "aurrerapena" > 
  <div class = "barra" 
       style = " zabalera : % 60 ; " ></div> 
</div>

Marraduna

Gradiente bat erabiltzen du marra-efektua sortzeko.

<div class = "aurrerapena aurrerapen-informazioa 
     aurrerapen marradun" >
  <div class = "barra" 
       style = " zabalera : % 20 ; " ></div> 
</div>

Animatua

Marradun adibidea hartu eta animatzen du.

<div class = "aurrerapena aurrerapena-arriskua 
     aurrerapen marradun aktibo" >
  <div class = "barra" 
       style = " zabalera : % 40 ; " ></div> 
</div>

Kolore gehigarriak

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.

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-8 edo Firefox-en bertsio zaharretan.

Operak ez du animaziorik onartzen momentu honetan.

Putzuak

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

<div class = "ondo" > 
  ...
</div>

Txapak

Erabili bereizgarri bat elementu batean irakurri gabeko zenbaketa bat egiteko edo adierazle soil gisa.

<span class = "txapa" > 3 </div> 

Itxi ikonoa

Erabili itxi ikono generikoa moduak eta alertak bezalako edukia baztertzeko.

×

<a class = "itxi" > × </a>