Butongrupoj

Uzu butongrupojn por kunigi plurajn butonojn kune kiel unu kunmetitan komponanton. Konstruu ilin per serio de <a>aŭ <button>elementoj.

Vi ankaŭ povas kombini arojn <div class="btn-group">en a <div class="btn-toolbar">por pli kompleksaj projektoj.

Ekzempla markado

Jen kiel la HTML serĉas norman butongrupon konstruitan per ankraj etikedbutonoj:

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

Kaj kun ilobreto por pluraj grupoj:

<div class = "btn-ilbreto" > 
  <div class = "btn-grupo" > 
    ...
  </div>
</div>

Markobutono kaj radio-gustoj

Butongrupoj ankaŭ povas funkcii kiel radioj, kie nur unu butono povas esti aktiva, aŭ markobutonoj, kie ajna nombro da butonoj povas esti aktivaj. Rigardu la Javascript-dokumentojn por tio.

Akiru la Javaskripton »

Atentu

CSS por butongrupoj estas en aparta dosiero, button-groups.less.

Butonfalumoj

Uzu ajnan butonon por ekigi falmenuon metante ĝin ene de a .btn-groupkaj disponigante la taŭgan menuan markadon.

Ekzempla markado

Simile al butongrupo, nia markado uzas regulan butonmarkadon, sed kun manpleno da aldonoj por rafini la stilon kaj subteni la dropdown jQuery kromprogramon de Bootstrap.

<div class = "btn-grupo" > 
  <a class = "btn dropdown-toggle" data-toggle = "menumenumo" href = "#" >   
    Ago
    <span class = "karto" ></span> 
  </a>
  <ul class = "falmenuo" > 
    <!-- ligiloj al falmenuo -->
  </ul>
</div>

Dividi butonajn menuojn

Konstruante sur la butongrupoj stiloj kaj markado, ni povas facile krei dividitan butonon. Dividitaj butonoj prezentas norman agon maldekstre kaj falmenuklavon dekstre kun kontekstaj ligiloj.

Ekzempla markado

Ni plivastigas la normalajn butonajn falmenuojn por provizi duan butonan agon, kiu funkcias kiel aparta elŝutilo.

<div class = "btn-grupo" > 
  <a class = "btn" href = "#" > Ago </a>  
  <a class = "btn dropdown-toggle" data-toggle = "menumenumo" href = "#" >   
    <span class = "karto" ></span> 
  </a>
  <ul class = "falmenuo" > 
    <!-- ligiloj al falmenuo -->
  </ul>
</div>

Potenca bazklaso

Ĉiuj nav-komponentoj ĉi tie—langetoj, piloloj kaj listoj— dividas la saman bazan markadon kaj stilojn tra la .navklaso.

Kial langetoj kaj piloloj

Langetoj kaj piloloj en Bootstrap estas konstruitaj sur <ul>kun la sama kerno HTML, listo de ligiloj. Interŝanĝu inter langetoj aŭ piloloj kun nur klaso.

Ambaŭ opcioj estas bonegaj por subsekcioj de enhavo aŭ navigado inter paĝoj de rilata enhavo.

Bazaj langetoj

Prenu ordinaran <ul>ligilojn kaj aldonu .nav-tabs:

• Hejmo
• Profilo
• Mesaĝoj

<ul class = "nav nav-tabs" > 
  <li class = "aktiva" > 
    <a href = "#" > Hejmo </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Bazaj piloloj

Prenu tiun saman HTML, sed uzu .nav-pillsanstataŭe:

• Hejmo
• Profilo
• Mesaĝoj

<ul class = "nav nav-pills" > 
  <li class = "aktiva" > 
    <a href = "#" > Hejmo </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Kiel stakigi ilin

Ĉar langetoj kaj piloloj estas horizontalaj defaŭlte, simple aldonu duan klason, .nav-stacked, por ke ili aspektu vertikale stakigitaj.

Stakitaj langetoj

• Hejmo
• Profilo
• Mesaĝoj

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

Stakitaj piloloj

• Hejmo
• Profilo
• Mesaĝoj

<ul class = "nav nav-piloloj nav-stakitaj" > 
  ...
</ul>

Riĉaj menuoj faciligis

Falmenuoj en Bootstrap-langetoj kaj piloloj estas tre facilaj kaj postulas nur iomete kroman HTML kaj malpezan jQuery-kromaĵon.

Iru al la Javascript-paĝo por legi la dokumentojn pri pravalorigo de falmenuoj en Bootstrap.

Langetoj kun falmenuoj

• Hejmo
• Profilo
• Dropdown
  • Ago
  • Alia ago
  • Io alia ĉi tie
  • Apartigita ligilo

<ul class = "nav nav-tabs" > 
  <li class = "menuo" > 
    <a klaso = "falu-ŝaltilo" 
       data-toggle = "menuo"
       href = "#" >
        Dropdown
        <b klaso = "karto" ></b> 
      </a>
    <ul class = "falmenuo" > 
      <!-- ligiloj -->
    </ul>
  </li>
</ul>

Piloloj kun falmenuoj

• Hejmo
• Profilo
• Dropdown
  • Ago
  • Alia ago
  • Io alia ĉi tie
  • Apartigita ligilo

<ul class = "nav nav-pills" > 
  <li class = "menuo" > 
    <a klaso = "falu-ŝaltilo" 
       data-toggle = "menuo"
       href = "#" >
        Dropdown
        <b klaso = "karto" ></b> 
      </a>
    <ul class = "falmenuo" > 
      <!-- ligiloj -->
    </ul>
  </li>
</ul>

Aplikstila navigado

Nav-listoj disponigas simplan kaj facilan manieron konstrui grupojn de nav-ligiloj kun laŭvolaj kaplinioj. Ili estas plej bone uzataj en flankmenuoj kiel la Finder en OS X.

Strukture, ili estas konstruitaj sur la samaj kernaj navstiloj kiel langetoj kaj piloloj, do uzado kaj personigo estas simplaj.

Kun ikonoj

Nav-listoj ankaŭ estas facile ekipeblaj per ikonoj. Aldonu la taŭgan <i>etikedon kun klaso kaj vi estas preta.

Ekzempla navlisto

Prenu liston de ligiloj kaj aldonu class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-kapo" > 
    Listo kaplinio
  </li>
  <li class = "aktiva" > 
    <a href = "#" > Hejmo </a> 
  </li>
  <li>
    <a href = "#" > Biblioteko </a> 
  </li>
  ...
</ul>

Ekzemplo kun ikonoj

Sama ekzemplo, sed kun <i>etikedoj por ikonoj.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i klaso = "piktogramo" ></i> 
      Biblioteko
    </a>
  </li>
  ...
</ul>

Kio estas inkluzivita

Vivu viajn langetojn per simpla kromaĵo por ŝanĝi inter enhavo per langetoj. Bootstrap integras tabulajn langetojn en kvar stiloj: supre (defaŭlte), dekstre, malsupre kaj maldekstre.

Ŝanĝi inter ili estas facila kaj nur postulas ŝanĝi tre malmulte da markado.

Tabula ekzemplo

Por igi langetojn tabuleblaj, envolvu la .nav-tabsen alian div kun class .tabbable.

Propra jQuery kromaĵo

Ĉiuj tabulaj langetoj funkcias per nia malpeza jQuery kromaĵo. Legu pli pri kiel vivigi tabulajn langetojn sur la paĝo pri javascript-dokumentoj.

Akiru la Javaskripton →

Langetoj sur la fundo

Turnu la ordon de la HTML kaj aldonu klason por meti langetojn malsupre.

<div class = "tabeblaj langetoj-malsupre" > 
  <div class = "tab-enhavo" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Langetoj maldekstre

Interŝanĝu la klason por meti langetojn maldekstre.

<div class = "tabulaj langetoj-maldekstre" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-enhavo" > 
    ...
  </div>
</div>

Langetoj dekstre

Interŝanĝu la klason por meti langetojn dekstre.

<div class = "tabulaj langetoj-dekstra" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-enhavo" > 
    ...
  </div>
</div>

Navbar skafaldaro

La navbar postulas nur kelkajn div-ojn por bone strukturi ĝin por statika aŭ fiksa ekrano.

<div class = "navbaro" > 
  <div class = "navbar-interna" > 
    <div class = "ujo" > 
      ...
    </div>
  </div>
</div>

Por fari la navbaron fiksita al la supro de la vidfenestro, aldonu .navbar-fixed-topal la plej ekstera div, .navbar. En via CSS, vi ankaŭ devos kalkuli pri la interkovro, kiun ĝi kaŭzas aldonante padding-top: 40px;al via <body>.

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

Komerca nomo

Simpla ligo por montri vian markon aŭ projektan nomon nur postulas ankro-etikedon.

<a klaso = "marko" href = "#" >  
  Nomo de projekto
</a>

Serĉformularo

Serĉformularoj ricevas kutimajn stilojn en la navbar kun la .navbar-searchklaso. Inkluzivi .pull-leftaŭ .pull-rightsur la formpor vicigi ĝin.

<form class = "navbar-serĉo tiru-maldekstren" > 
  <input type = "text" class = "serĉo-demando" anstataŭilo = "Serĉo" >   
</form>

Laŭvola respondema variado

Depende de la kvanto de enhavo en via supra stango, vi eble volas efektivigi la respondemajn elektojn. Por fari tion, envolvu vian navigan enhavon en enhavanta div, .nav-collapse.collapse, kaj aldonu la navbaran baskulon butonon, .btn-navbar.

<div class = "navbaro" > 
  <div class = "navbar-interna" > 
    <div class = "ujo" > 
 
      <!-- .btn-navbar estas uzata kiel baskulo por kolapsita navbar enhavo -->
      <a class = "btn btn-navbar" data-toggle = "kolapsi" data-target = ".nav-kolapso" >   
        <span class = "piktogramo" ></span> 
        <span class = "piktogramo" ></span> 
        <span class = "piktogramo" ></span> 
      </a>
 
      <!-- Nepre lasu la markon tie, se vi volas ke ĝi montru -->
      <a class = "brand" href = "#" > Nomo de projekto </a>  
 
      <!-- Ĉion, kion vi volas kaŝita je 940 px aŭ malpli, metu ĉi tie -->
      <div class = "nav-kolapso" > 
        <!-- .nav, .navbar-search, .navbar-form, ktp -->
      </div>
 
    </div>
  </div>
</div>

Nav-ligiloj

Nav-eroj estas simple aldoni per neordigitaj listoj.

<ul class = "nav" > 
  <li class = "aktiva" > 
    <a href = "#" > Hejmo </a> 
  </li>
  <li><a href = "#" > Ligo </a></li> 
  <li><a href = "#" > Ligo </a></li> 
</ul>

Aldonante falmenuojn

Aldoni falmenuojn al la navigado estas tre simpla, sed postulas la uzon de nia Javaskripto-kromaĵo .

<ul class = "nav" > 
  <li class = "menuo" > 
    <a href = "#" 
          klaso = "falu-ŝaltilo"
          data-toggle = "menuo" >
          Konto
          <b klaso = "karto" ></b> 
    </a>
    <ul class = "falmenuo" > 
      ...
    </ul>
  </li>
</ul>

Akiru la Javaskripton →

Kial uzi ilin

Breadcrumb navigado estas uzata kiel maniero montri uzantojn kie ili estas ene de aplikaĵo aŭ retejo, sed ne por primara navigado. Konservu ilian uzon malabunda kaj konciza por esti plej efika.

Ekzemploj

Ununura ekzemplo montrita kiel ĝi povus esti montrata tra pluraj paĝoj.

• Hejmo

• Hejmo /
• Biblioteko

• Hejmo /
• Biblioteko /
• Datumoj

Markado

HTML estas via norma neordigita listo kun ligiloj.

<ul class = "panpeceto" > 
  <li>
    <a href = "#" > Hejmo </a> <span class = "dividilo" > / </span>   
  </li>
  <li>
    <a href = "#" > Biblioteko </a> <span class = "dividilo" > / </span>   
  </li>
  <li class = "aktiva" > 
    <a href = "#" > Datumoj </a> 
  </li>
</ul>

Kiam uzi

Ultra simplisma kaj minimume stilita paĝigo inspirita de Rdio, bonega por programoj kaj serĉrezultoj. La granda bloko estas malfacile maltrafi, facile skalebla kaj provizas grandajn klakajn areojn.

Ŝtataj paĝaj ligiloj

Ligiloj estas agordeblaj kaj funkcias en kelkaj cirkonstancoj kun la ĝusta klaso. .disabledpor neklakeblaj ligiloj kaj .activepor aktuala paĝo.

Fleksebla vicigo

Aldonu iun el du laŭvolaj klasoj por ŝanĝi la vicigon de paĝigaj ligiloj: .pagination-centeredkaj .pagination-right.

Ekzemploj

La defaŭlta paĝiga komponanto estas fleksebla kaj funkcias en kelkaj varioj.

Markado

Envolvita en <div>, paĝigo estas nur <ul>.

<div class = "paĝigo" > 
  <ul>
    <li><a href = "#" > Antaŭa </a></li> 
    <li class = "aktiva" > 
      <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 = "#" > Poste </a></li> 
  </ul>
</div>

Pri paĝilo

La paĝiga komponanto estas aro de ligiloj por simplaj paĝigaj efektivigoj kun malpeza markado kaj eĉ pli malpezaj stiloj. Ĝi estas bonega por simplaj retejoj kiel blogoj aŭ revuoj.

Defaŭlta ekzemplo

Defaŭlte, la paginador centras ligilojn.

• Antaŭa
• Poste

<ul class = "pagilo" > 
  <li>
    <a href = "#" > Antaŭa </a> 
  </li>
  <li>
    <a href = "#" > Sekva </a> 
  </li>
</ul>

Vicigitaj ligiloj

Alternative, vi povas vicigi ĉiun ligilon al la flankoj:

• ← Pli malnova
• Pli nova →

<ul class = "pagilo" > 
  <li class = "antaŭa" > 
    <a href = "#" > ← Pli malnova </a> 
  </li>
  <li klaso = "sekva" > 
    <a href = "#" > Pli nova → </a> 
  </li>
</ul>

Defaŭltaj bildetoj

Defaŭlte, la bildetoj de Bootstrap estas dizajnitaj por montri ligitajn bildojn kun minimuma postulata markado.

Tre agordebla

Kun iom da ekstra markado, eblas aldoni ajnan specon de HTML-enhavo kiel titoloj, alineoj aŭ butonoj en bildetojn.

• 

  Bildeto-etikedo

  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.

  Ago Ago

• 

  Bildeto-etikedo

  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.

  Ago Ago

Kial uzi bildetojn

Bildetoj (antaŭe .media-gridĝis v1.4) estas bonegaj por kradoj de fotoj aŭ filmetoj, bildaj serĉrezultoj, podetalaj produktoj, biletujoj kaj multe pli. Ili povas esti ligiloj aŭ statika enhavo.

Simpla, fleksebla markado

Bildeto-markado estas simpla—a ulkun ajna nombro da lielementoj estas ĉio, kio necesas. Ĝi ankaŭ estas tre fleksebla, ebligante ajnan tipon de enhavo kun nur iom pli da markado por envolvi vian enhavon.

Uzas kradkolumngrandecojn

Finfine, la komponanto de bildetoj uzas ekzistantajn krad-sistemklasojn—kiel .span2aŭ .span3—por kontrolo de bildetoj-dimensioj.

La markado

Kiel menciite antaŭe, la bezonata markado por bildetoj estas malpeza kaj simpla. Jen rigardo al la defaŭlta agordo por ligitaj bildoj :

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

Por kutima HTML-enhavo en bildetoj, la markado iomete ŝanĝiĝas. Por permesi bloknivelan enhavon ie ajn, ni interŝanĝas la <a>por <div>tia:

<ul class = "bildetoj" > 
  <li class = "span3" > 
    <div class = "bildeto" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Bildeto-etikedo </h5>
      <p> Bildetoteksto ĝuste ĉi tie... </p>
    </div>
  </li>
  ...
</ul>

Pli da ekzemploj

Esploru ĉiujn viajn eblojn kun la diversaj kradaj klasoj disponeblaj al vi. Vi ankaŭ povas miksi kaj kongrui malsamajn grandecojn.

Reskribita baza klaso

Kun Bootstrap 2, ni simpligis la bazan klason: .alertanstataŭ .alert-message. Ni ankaŭ reduktis la minimuman bezonatan markadon—ne <p>necesas defaŭlte, nur la ekstera <div>.

Ununura atentiga mesaĝo

Por pli daŭrema komponanto kun malpli da kodo, ni forigis la diferencigan aspekton de blokatentigoj, mesaĝojn kiuj venas kun pli da kompletigo kaj tipe pli da teksto. La klaso ankaŭ ŝanĝiĝis al .alert-block.

Bonas kun javaskripto

Bootstrap venas kun bonega jQuery-kromaĵo, kiu subtenas atentajn mesaĝojn, igante ilin forĵeti rapidan kaj facilan.

Akiru la kromprogramon »

Ekzemplaj atentigoj

Envolvu vian mesaĝon kaj laŭvolan fermikonon en div kun simpla klaso.

<div class = "atentigo" > 
  <a klaso = "fermi" > × </a> 
  <strong> Averto! </strong> Plej bone kontrolu vin mem, vi ne aspektas tro bona.
</div>

Facile etendi la norman atentigmesaĝon kun du laŭvolaj klasoj: .alert-blockpor pli da kompletigo kaj tekstaj kontroloj kaj .alert-headingpor kongrua titolo.

<div class = "alerto-atentigo-bloko" > 
  <a klaso = "fermi" > × </a> 
  <h4 class = "alert-heading" > Averto! </h4> 
  Plej bone kontrolu vin mem, vi ne estas...
</div>

Eraro aŭ danĝero

<div class = "alerto-eraro" > 
  ...
</div>

Sukceso

<div class = "alerto-atentigo-sukceso" > 
  ...
</div>

Informoj

<div class = "alerto-alerto-informoj" > 
  ...
</div>

Baza

Defaŭlta progresbreto kun vertikala gradiento.

<div class = "progreso" > 
  <div class = "drinkejo" 
       stilo = " larĝo : 60 %; " ></div> 
</div>

Striita

Uzas gradienton por krei strian efikon.

<div class = "progreso progreso-informo 
     progres-striita" >
  <div class = "drinkejo" 
       stilo = " larĝo : 20 %; " ></div> 
</div>

Vigla

Prenas la striitan ekzemplon kaj animas ĝin.

<div class = "progreso progreso-danĝero 
     progres-striita aktiva" >
  <div class = "drinkejo" 
       stilo = " larĝo : 40 %; " ></div> 
</div>

Pliaj koloroj

Progresdrinkejoj utiligas kelkajn el la samaj klasnomoj kiel butonojn kaj atentigojn por simila stilo.

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

Alternative, vi povas personecigi la MALPLAS dosierojn kaj ruli viajn proprajn kolorojn kaj grandecojn.

Konduto

Progresaj stangoj uzas CSS3-transirojn, do se vi dinamike ĝustigas la larĝon per Javaskripto, ĝi glate regrandigos.

Se vi uzas la .activeklason, viaj .progress-stripedprogreso-stangoj vigligos la striojn de maldekstre al dekstre.

Subteno de retumilo

Progresstangoj uzas CSS3-gradientojn, transirojn kaj kuraĝigojn por atingi ĉiujn siajn efikojn. Ĉi tiuj funkcioj ne estas subtenataj en IE7-8 aŭ pli malnovaj versioj de Firefox.

Opera ne subtenas animaciojn nuntempe.

Wells

Uzu la puton kiel simplan efikon al elemento por doni al ĝi enmetitan efikon.

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

Insignoj

Uzu insignon sur elemento por nelegita kalkulo aŭ kiel simpla indikilo.

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

Fermu ikonon

Uzu la ĝeneralan fermikonon por forĵeti enhavon kiel modalojn kaj atentigojn.

×

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