Knoppie groepe

Gebruik knoppiegroepe om verskeie knoppies saam te voeg as een saamgestelde komponent. Bou hulle met 'n reeks <a>of <button>elemente.

Jy kan ook stelle kombineer <div class="btn-group">in 'n <div class="btn-toolbar">vir meer komplekse projekte.

Voorbeeld opmaak

Hier is hoe die HTML lyk vir 'n standaard knoppie groep gebou met anker tag knoppies:

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

En met 'n nutsbalk vir verskeie groepe:

<div class="btn-toolbar">
  <div class="btn-group">
    ...
  </div>
</div>

Merkblokkie en radiogeure

Knoppiegroepe kan ook as radio's funksioneer, waar slegs een knoppie aktief mag wees, of merkblokkies, waar enige aantal knoppies aktief mag wees. Kyk na die Javascript-dokumente daarvoor.

Kry die javascript »

Kop op

CSS vir knoppiegroepe is in 'n aparte lêer, button-groups.less.

Knoppie aftrekkies

Gebruik enige knoppie om 'n aftreklys te aktiveer deur dit binne 'n te plaas .btn-groupen die regte spyskaartopmaak te verskaf.

Voorbeeld opmaak

Soortgelyk aan 'n knoppiegroep, gebruik ons ​​opmaak gereelde knoppie-opmaak, maar met 'n handvol toevoegings om die styl te verfyn en Bootstrap se aftreklys jQuery-inprop te ondersteun.

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Aksie
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- aftreklys skakels -->
  </ul>
</div>

Verdeel knoppie aftrekkies

Deur voort te bou op die knoppiegroepstyle en opmaak, kan ons maklik 'n verdeelknoppie skep. Verdeel-knoppies het 'n standaardaksie aan die linkerkant en 'n aftrek-skakelaar aan die regterkant met kontekstuele skakels.

Voorbeeld opmaak

Ons brei uit op die normale knoppie-aftrekkies om 'n tweede knoppie-aksie te verskaf wat as 'n afsonderlike dropdown-sneller werk.

<div class="btn-group">
  <a class="btn" href="#">Aksie</a>
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- aftreklys skakels -->
  </ul>
</div>

Kragtige basisklas

Alle nav-komponente hier—oortjies, pille en lyste— deel dieselfde basisopmerk en style deur die .navklas.

Hoekom oortjies en pille

Oortjies en pille in Bootstrap is gebou op 'n <ul>met dieselfde kern HTML, 'n lys van skakels. Wissel tussen oortjies of pille met slegs 'n klas.

Albei opsies is ideaal vir onderafdelings van inhoud of om tussen bladsye met verwante inhoud te navigeer.

Basiese oortjies

Neem gereelde <ul>skakels en voeg by .nav-tabs:

• Tuis
• Profiel
• Boodskappe

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#">Tuis</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Basiese pille

Neem dieselfde HTML, maar gebruik .nav-pillseerder:

• Tuis
• Profiel
• Boodskappe

<ul class="nav nav-pille">
  <li class="active">
    <a href="#">Tuis</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Hoe om hulle te stapel

Aangesien oortjies en pille by verstek horisontaal is, voeg net 'n tweede klas by, .nav-stacked, om hulle vertikaal gestapel te laat lyk.

Gestapelde oortjies

• Tuis
• Profiel
• Boodskappe

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

Gestapelde pille

• Tuis
• Profiel
• Boodskappe

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

Ryk spyskaarte maklik gemaak

Aftrekkieslyste in Bootstrap-oortjies en -pille is baie maklik en vereis net 'n bietjie ekstra HTML en 'n liggewig jQuery-inprop.

Gaan na die Javascript-bladsy om die dokumente oor die inisiasie van aftreklys in Bootstrap te lees.

Oortjies met aftreklys

• Tuis
• Profiel
• Aftreklys
  • Aksie
  • Nog 'n aksie
  • Iets anders hier
  • Geskeide skakel

<ul class="nav nav-tabs">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        Aftreklys
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- skakels -->
    </ul>
  </li>
</ul>

Pille met dropdowns

• Tuis
• Profiel
• Aftreklys
  • Aksie
  • Nog 'n aksie
  • Iets anders hier
  • Geskeide skakel

<ul class="nav nav-pille">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        Aftreklys
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- skakels -->
    </ul>
  </li>
</ul>

Toepassingstyl navigasie

Nav-lyste bied 'n eenvoudige en maklike manier om groepe nav-skakels met opsionele opskrifte te bou. Hulle word die beste gebruik in sidebars soos die Finder in OS X.

Struktureel is hulle gebou op dieselfde kern nav-style as oortjies en pille, so gebruik en aanpassing is eenvoudig.

Met ikone

Nav-lyste is ook maklik om met ikone toe te rus. Voeg die regte <i>etiket by klas en jy is gereed.

Voorbeeld nav lys

Neem 'n lys van skakels en voeg by class="nav nav-list":

<ul class="nav nav-lys">
  <li class="nav-header">
    Lys opskrif
  </li>
  <li class="active">
    <a href="#">Tuis</a>
  </li>
  <li>
    <a href="#">Biblioteek</a>
  </li>
  ...
</ul>

Voorbeeld met ikone

Dieselfde voorbeeld, maar met <i>etikette vir ikone.

<ul class="nav nav-lys">
  ...
  <li>
    <a href="#">
      <i class="icon-book"></i>
      Biblioteek
    </a>
  </li>
  ...
</ul>

Wat ingesluit is

Bring jou oortjies lewendig met 'n eenvoudige inprop om tussen inhoud via oortjies te wissel. Bootstrap integreer tabbare oortjies in vier style: bo (verstek), regs, onder en links.

Om tussen hulle te verander is maklik en vereis net dat baie min opmaak verander word.

Tabbare voorbeeld

Om oortjies tabbaar te maak, draai die .nav-tabsin 'n ander div met klas toe .tabbable.

Pasgemaakte jQuery-inprop

Alle tabbare oortjies word aangedryf deur ons liggewig jQuery-inprop. Lees meer oor hoe om oortjies met oortjies lewendig te maak op die javascript-dokumentebladsy.

Kry die javascript →

Oortjies aan die onderkant

Draai die volgorde van die HTML om en voeg 'n klas by om oortjies onderaan te plaas.

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

Oortjies aan die linkerkant

Ruil die klas om oortjies aan die linkerkant te plaas.

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

Oortjies aan die regterkant

Ruil die klas om oortjies aan die regterkant te plaas.

<div class="tabbable tabs-right">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

Navbar steierwerk

Die navigasiebalk benodig slegs 'n paar div's om dit goed te struktureer vir statiese of vaste vertoon.

<div class="navbar">
  <div class="navbar-inner">
    <div class="houer">
      ...
    </div>
  </div>
</div>

Om die navigasiebalk aan die bokant van die uitsigpoort vas te maak, voeg .navbar-fixed-topby die buitenste div, .navbar. In jou CSS moet jy ook rekening hou met die oorvleueling wat dit veroorsaak deur by padding-top: 40px;jou <body>.

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

Handelsnaam

'n Eenvoudige skakel om jou handelsmerk- of projeknaam te wys, benodig net 'n ankermerker.

<a class="brand" href="#">
  Projek Naam
</a>

Soek vorm

Soekvorms ontvang pasgemaakte style in die navigasiebalk saam met die .navbar-searchklas. Sluit in .pull-leftof .pull-rightop die formom dit in lyn te bring.

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

Opsionele responsiewe variasie

Afhangende van die hoeveelheid inhoud in jou boonste balk, wil jy dalk die responsiewe opsies implementeer. Om dit te doen, draai jou nav-inhoud in 'n div, .nav-collapse.collapse, en voeg die navbar-wisselknoppie, .btn-navbar.

<div class="navbar">
  <div class="navbar-inner">
    <div class="houer">

      <!-- .btn-navbar word gebruik as die skakelaar vir ingevoude navbar-inhoud -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Maak seker dat jy die handelsmerk daar buite laat as jy dit wil wys -->
      <a class="brand" href="#">Projeknaam</a>

      <!-- Alles wat jy wil versteek teen 940px of minder, plaas hier binne -->
      <div class="nav-collapse">
        <!-- .nav, .navbar-search, .navbar-form, ens -->
      </div>

    </div>
  </div>
</div>

Nav skakels

Nav-items is maklik om via ongeordende lyste by te voeg.

<ul class="nav">
  <li class="active">
    <a href="#">Tuis</a>
  </li>
  <li><a href="#">Skakel</a></li>
  <li><a href="#">Skakel</a></li>
</ul>

Voeg aftreklys by

Die byvoeging van dropdowns by die nav is baie eenvoudig, maar vereis wel die gebruik van ons javascript-inprop .

<ul class="nav">
  <li class="dropdown">
    <a href="#"
          class="dropdown-toggle"
          data-toggle="dropdown">
          Rekening
          <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

Kry die javascript →

Hoekom hulle gebruik

Broodkrummelnavigasie word gebruik as 'n manier om gebruikers te wys waar hulle binne 'n toepassing of 'n werf is, maar nie vir primêre navigasie nie. Hou hul gebruik yl en bondig om die doeltreffendste te wees.

Voorbeelde

'n Enkele voorbeeld word gewys soos dit op verskeie bladsye vertoon kan word.

• Tuis

• Tuis /
• Biblioteek

• Tuis /
• Biblioteek /
• Data

Opmerk

HTML is jou standaard ongeordende lys met skakels.

<ul class="broodkrummel">
  <li>
    <a href="#">Tuis</a> <span class="divider">/</span>
  </li>
  <li>
    <a href="#">Biblioteek</a> <span class="divider">/</span>
  </li>
  <li class="active">
    <a href="#">Data</a>
  </li>
</ul>

Wanneer om te gebruik

Ultra simplisties en minimaal gestileer paginering geïnspireer deur Rdio, ideaal vir toepassings en soekresultate. Die groot blok is moeilik om te mis, maklik skaalbaar en bied groot klikareas.

Statige bladsyskakels

Skakels is aanpasbaar en werk in 'n aantal omstandighede met die regte klas. .disabledvir onklikbare skakels en .activevir huidige bladsy.

Buigsame belyning

Voeg een van twee opsionele klasse by om die belyning van pagineringskakels te verander: .pagination-centereden .pagination-right.

Voorbeelde

Die verstekpaginering-komponent is buigsaam en werk in 'n aantal variasies.

Opmerk

Gewikkel in 'n <div>, paginering is net 'n <ul>.

<div class="pagination">
  <ul>
    <li><a href="#">Vorige</a></li>
    <li class="active">
      <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="#">Volgende</a></li>
  </ul>
</div>

Oor pager

Die pager-komponent is 'n stel skakels vir eenvoudige paginering-implementerings met ligte opmaak en selfs ligter style. Dit is ideaal vir eenvoudige werwe soos blogs of tydskrifte.

Standaard voorbeeld

By verstek sentreer die pager skakels.

• Vorige
• Volgende

<ul class="pager">
  <li>
    <a href="#">Vorige</a>
  </li>
  <li>
    <a href="#">Volgende</a>
  </li>
</ul>

Belynde skakels

Alternatiewelik kan jy elke skakel na die kante in lyn bring:

• ← Ouer
• Nuwer →

<ul class="pager">
  <li class="vorige">
    <a href="#">← Ouer</a>
  </li>
  <li class="volgende">
    <a href="#">Nuweer →</a>
  </li>
</ul>

Verstek-kleinkiekies

Bootstrap se duimnaels is by verstek ontwerp om gekoppelde beelde te vertoon met minimale vereiste opmaak.

Hoogs aanpasbaar

Met 'n bietjie ekstra opmaak is dit moontlik om enige soort HTML-inhoud soos opskrifte, paragrawe of knoppies by kleinkiekies by te voeg.

• 

  Kleinkiekie-etiket

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

  Aksie Aksie

• 

  Kleinkiekie-etiket

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

  Aksie Aksie

Hoekom gebruik duimnaels

Kleinkiekies (voorheen .media-gridtot v1.4) is ideaal vir roosters van foto's of video's, beeldsoekresultate, kleinhandelprodukte, portefeuljes, en nog baie meer. Dit kan skakels of statiese inhoud wees.

Eenvoudige, buigsame opmaak

Kleinkiekie-opmaak is eenvoudig - 'n ulmet enige aantal lielemente is al wat nodig is. Dit is ook baie buigsaam, wat voorsiening maak vir enige tipe inhoud met net 'n bietjie meer opmaak om jou inhoud toe te draai.

Gebruik roosterkolomgroottes

Laastens gebruik die duimnaels-komponent bestaande roosterstelselklasse—soos .span2of — .span3vir beheer van duimnael-afmetings.

Die opmaak

Soos voorheen genoem, is die vereiste opmaak vir duimnaels lig en eenvoudig. Hier is 'n blik op die verstekopstelling vir gekoppelde beelde :

<ul class="thumbnails">
  <li class="span3">
    <a href="#" class="thumbnail">
      <img src="https://placehold.it/260x180" alt="">
    </a>
  </li>
  ...
</ul>

Vir pasgemaakte HTML-inhoud in duimnaels, verander die opmaak effens. Om blokvlak-inhoud op enige plek toe te laat, ruil ons die <a>vir 'n <div>soortgelyke:

<ul class="thumbnails">
  <li class="span3">
    <div class="thumbnail">
      <img src="https://placehold.it/260x180" alt="">
      <h5>Kleinkiekie-etiket</h5>
      <p>Kleinkiekie-byskrif reg hier...</p>
    </div>
  </li>
  ...
</ul>

Meer voorbeelde

Verken al jou opsies met die verskillende roosterklasse wat tot jou beskikking is. Jy kan ook verskillende groottes meng en pas.

Herskryf basisklas

Met Bootstrap 2 het ons die basisklas vereenvoudig: .alertin plaas van .alert-message. Ons het ook die minimum vereiste opmaak verminder—nee <p>word by verstek vereis, net die buitenste <div>.

Enkele waarskuwingsboodskap

Vir 'n meer duursame komponent met minder kode, het ons die onderskeidende voorkoms vir blokwaarskuwings, boodskappe wat met meer opvulling en gewoonlik meer teks kom, verwyder. Die klas het ook verander na .alert-block.

Gaan goed saam met javascript

Bootstrap kom met 'n wonderlike jQuery-inprop wat waarskuwingsboodskappe ondersteun, wat dit vinnig en maklik maak om dit te ontslaan.

Kry die inprop »

Voorbeeld waarskuwings

Draai jou boodskap en 'n opsionele sluit-ikoon in 'n div toe met eenvoudige klas.

<div class="alert">
  <a class="close">×</a>
  <strong>Waarskuwing!</strong> Beste kyk self, jy lyk nie te goed nie.
</div>

Brei die standaardwaarskuwingsboodskap maklik uit met twee opsionele klasse: .alert-blockvir meer opvulling en tekskontroles en .alert-headingvir 'n bypassende opskrif.

<div class="alert alert-block">
  <a class="close">×</a>
  <h4 class="alert-heading">Waarskuwing!</h4>
  Beste check self, jy is nie...
</div>

Fout of gevaar

<div class="alert alert-error">
  ...
</div>

Sukses

<div class="alert alert-success">
  ...
</div>

Inligting

<div class="alert alert-info">
  ...
</div>

Basies

Verstek vorderingsbalk met 'n vertikale gradiënt.

<div class="progress">
  <div class="bar"
       style="width: 60%;"></div>
</div>

Gestreepte

Gebruik 'n gradiënt om 'n gestreepte effek te skep.

<div class="vordering vordering-inligting
     vordering-gestreep">
  <div class="bar"
       style="width: 20%;"></div>
</div>

Geanimeerde

Neem die gestreepte voorbeeld en animeer dit.

<div class="vordering vordering-gevaar
     vordering-gestreepte aktief">
  <div class="bar"
       style="width: 40%;"></div>
</div>

Bykomende kleure

Vorderingstawe gebruik sommige van dieselfde klasname as knoppies en waarskuwings vir soortgelyke stilering.

• .progress-info
• .progress-success
• .progress-danger

Alternatiewelik kan jy die MINDER lêers aanpas en jou eie kleure en groottes rol.

Gedrag

Vorderingstawe gebruik CSS3-oorgange, so as jy die breedte via JavaScript dinamies aanpas, sal dit glad verander.

As jy die .activeklas gebruik, jou.progress-striped sal jou vorderingstawe die strepe van links na regs animeer.

Blaaier ondersteuning

Vorderingstawe gebruik CSS3-gradiënte, oorgange en animasies om al hul effekte te bereik. Hierdie kenmerke word nie in IE7-8 of ouer weergawes van Firefox ondersteun nie.

Opera ondersteun tans nie animasies nie.

Wells

Gebruik die put as 'n eenvoudige effek op 'n element om dit 'n inset effek te gee.

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

Kentekens

Gebruik 'n kenteken op 'n element vir 'n ongeleesde telling of as 'n eenvoudige aanwyser.

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

Maak ikoon toe

Gebruik die generiese toemaakikoon om inhoud soos modale en waarskuwings af te wys.

×

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