Knäppchen Gruppen

Benotzt Knäpperchergruppen fir verschidde Knäppercher zesummen als ee Kompositkomponent ze verbannen. Build hinnen mat enger Serie vun <a>oder <button>Elementer.

Beschte Praktiken

Mir recommandéieren déi folgend Richtlinnen fir Knäppchengruppen an Toolbaren ze benotzen:

• Benotzt ëmmer datselwecht Element an enger eenzeger Knäppchengrupp, <a>oder <button>.
• Mëschung net Knäppercher vu verschiddene Faarwen an der selwechter Knäpperchergrupp.
• Benotzt Ikonen zousätzlech zu oder amplaz vum Text, awer gitt sécher datt den Alt- an den Titeltext wou entsprécht.

Zesummenhang Knäppercher mat Dropdowns (kuckt hei ënnendrënner) sollen separat opgeruff ginn an ëmmer en Dropdown-Caret enthalen fir virgesinnt Verhalen unzeweisen.

Standard Beispill

Hei ass wéi den HTML fir eng Standardknäppchengrupp ausgesäit, déi mat Ankertagknäppchen gebaut ass:

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

Toolbar Beispill

Kombinéiert Sätze vun <div class="btn-group">an eng <div class="btn-toolbar">fir méi komplex Komponenten.

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

Checkbox a Radio Goûten

Knäppercher kënnen och als Radios funktionnéieren, wou nëmmen ee Knäppchen aktiv ka sinn, oder Checkboxen, wou all Zuel vu Knäpper aktiv ka sinn. Kuckt d'Javascript-Dokumenter fir dat.

Kritt de Javascript »

Kapp erop

CSS fir Knäppchen Gruppen ass an enger separater Datei, button-groups.less.

Knäppchen dropdowns

Benotzt all Knäppchen fir e Dropdown-Menü auszeléisen andeems Dir en an engem plazéiert .btn-groupan déi richteg Menümarkéierung ubitt.

Kapp erop! Button Dropdowns erfuerderen de Bootstrap Dropdown Plugin fir ze funktionéieren.

Beispill Markup

Ähnlech wéi eng Knäpperchergrupp benotzt eis Markup regelméisseg Knäppercher, awer mat enger Handvoll Ergänzunge fir de Stil ze verfeineren an dem Bootstrap's Dropdown jQuery Plugin z'ënnerstëtzen.

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Aktioun
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- Dropdown-Menü Linken -->
  </ul>
</div>

Split Knäppchen Dropdowns

Bauen op de Knäppchen Grupp Stiler a Markup, kënne mir einfach e Split Knäppchen erstellen. Split Knäppercher hunn eng Standardaktioun op der lénker Säit an e Dropdown-Knäppchen op der rietser mat kontextuellen Linken.

Beispill Markup

Mir erweideren op déi normal Knäppchen Dropdowns fir eng zweet Knäppchen Aktioun ze bidden déi als separat Dropdown Ausléiser funktionnéiert.

<div class="btn-group">
  <a class="btn" href="#">Aktioun</a>
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- Dropdown-Menü Linken -->
  </ul>
</div>

Mächteg Basis Klass

All nav Komponente hei-Tabs, Pëllen, a Lëschte- deelen déi selwecht Basis Markup a Stiler duerch d' .navKlass.

Wéini ze benotzen

Tabs a Pëllen si super fir Sektiounen vum Inhalt oder fir tëscht Säiten vum verwandten Inhalt ze navigéieren.

Komponent Ausrichtung

Fir nav Linken auszegläichen, benotzt d' .pull-leftoder .pull-rightUtility Klassen. Béid Klassen addéieren e CSS Float an der spezifizéierter Richtung.

Basis Tabs

Huelt regelméisseg <ul>Linken a füügt .nav-tabs:

• Doheem
• Profil
• Messagen

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

Basis Pëllen

Huelt datselwecht HTML, awer benotzt .nav-pillsamplaz:

• Doheem
• Profil
• Messagen

<ul class="nav nav-pills">
  <li class="active">
    <a href="#">Doheem</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Wéi stackelen ech se

Als Tabs a Pëllen sinn par défaut horizontal, füügt just eng zweet Klass, .nav-stacked, fir datt se vertikal gestapelt schéngen.

Gestapelt Tabs

• Doheem
• Profil
• Messagen

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

Stack Pëllen

• Doheem
• Profil
• Messagen

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

Räich Menue einfach gemaach

Dropdown-Menüen an Bootstrap Tabs a Pillen si super einfach a erfuerderen nëmmen e bëssen extra HTML an e liichte jQuery Plugin.

Gitt op d'Javascript Säit fir d'Dokumenter ze liesen iwwer d' Initialiséierung vun Dropdowns am Bootstrap.

Tabs mat Dropdowns

• Doheem
• Profil
• Fale loossen
  • Aktioun
  • Eng aner Aktioun
  • Soss eppes hei
  • Getrennt Link

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

Pillen mat Dropdowns

• Doheem
• Profil
• Fale loossen
  • Aktioun
  • Eng aner Aktioun
  • Soss eppes hei
  • Getrennt Link

<ul class="nav nav-pills">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        Fale loossen
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- Linken -->
    </ul>
  </li>
</ul>

Applikatioun-Stil Navigatioun

Nav Lëschte bidden en einfachen an einfache Wee fir Gruppe vu Nav Links mat optionalen Header ze bauen. Si sinn am beschten an Sidebars wéi de Finder am OS X benotzt.

Strukturell si se op deeselwechte Kärnav-Stiler gebaut wéi Tabs a Pëllen, sou datt d'Benotzung an d'Personaliséierung einfach sinn.

Mat Ikonen

Nav Lëschte sinn och einfach mat Ikonen ze equipéieren. Füügt de passenden <i>Tag mat der Klass an Dir sidd ageriicht.

Beispill nav Lëscht

Huelt eng Lëscht vu Linken a füügt class="nav nav-list":

<ul class="nav nav-list">
  <li class="nav-header">
    Lëscht Header
  </li>
  <li class="active">
    <a href="#">Doheem</a>
  </li>
  <li>
    <a href="#">Bibliothéik</a>
  </li>
  ...
</ul>

Beispill mat Ikonen

Selwecht Beispill, awer mat <i>Tags fir Ikonen.

<ul class="nav nav-list">
  ...
  <li>
    <a href="#">
      <i class="icon-book"></i>
      Bibliothéik
    </a>
  </li>
  ...
</ul>

Wat ass mat abegraff

Bréngt Är Tabs zum Liewen mat engem einfache Plugin fir tëscht Inhalt iwwer Tabs ze wiesselen. Bootstrap integréiert Tabs Tabs a véier Stiler: uewen (Standard), riets, ënnen a lénks.

Zwëschen hinnen z'änneren ass einfach a brauch nëmme ganz wéineg Markup z'änneren.

Tabable Beispill

Fir Tabs Tabbar ze maachen, wéckelt déi .nav-tabsan enger anerer Div mat Klass .tabbable.

Benotzerdefinéiert jQuery Plugin

All tabbar Tabs ginn ugedriwwen vun eisem liichte jQuery Plugin. Liest méi iwwer wéi Dir Tabbar Tabs zum Liewen op der Javascript Dokumenter Säit bréngt.

Gitt d'Javascript →

Tabs um ënnen

Flip d'Uerdnung vum HTML a füügt eng Klass un fir Tabs um Buedem ze setzen.

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

Tabs op der lénker Säit

Tauscht d'Klass fir Tabs op der lénker Säit ze setzen.

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

Tabs op der rietser Säit

Tauscht d'Klass fir Tabs op der rietser Säit ze setzen.

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

Navbar Steier

D'Navbar erfuerdert nëmmen e puer Divs fir se gutt fir statesch oder fix Display ze strukturéieren.

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

Fixéiert Navbar

Fir d'Navbar un der Spëtzt vum Viewport ze fixéieren, füügt .navbar-fixed-topop déi äusserst Div .navbar,.

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

An Ärem CSS musst Dir och d'Iwwerlappung berücksichtegen, déi et verursaacht andeems Dir 40px oder méi Polsterung op Är <body>. Gitt sécher dëst no der Core Bootstrap CSS a virun der optionaler reaktiounsfäeger CSS ze addéieren.

Markennumm

En einfache Link fir Är Mark oder Projet Numm ze weisen erfuerdert nëmmen en Ankertag.

<a class="brand" href="#">
  Projet Numm
</a>

Sich Form

Sich Formen kréien personaliséiert Stiler an der Navbar mat der .navbar-searchKlass. Inkludéieren .pull-leftoder .pull-rightop der formfir et ze alignéieren.

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

Optional reaktiounsfäeger Variatioun

Ofhängeg vum Betrag vum Inhalt an Ärer Topbar, wëllt Dir vläicht déi reaktiounsfäeg Optiounen ëmsetzen. Fir dat ze maachen, wéckelt Ären nav Inhalt an engem enthalen div, .nav-collapse.collapse, a füügt den navbar Toggle Knäppchen .btn-navbar,.

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
 
      <!-- .btn-navbar gëtt als Toggle fir zesummegeklappt Navbar Inhalt benotzt -->
      <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>
 
      <!-- Vergewëssert Iech d'Mark dobaussen ze loossen wann Dir se wëllt weisen -->
      <a class="brand" href="#">Projetnumm</a>
 
      <!-- Alles wat Dir wëllt verstoppt op 940px oder manner, plazéiert hei bannen -->
      <div class="nav-collapse">
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Nav Linken

Nav Elementer sinn einfach ze addéieren iwwer ongeuerdnete Lëschten.

<ul class="nav">
  <li class="active">
    <a href="#">Doheem</a>
  </li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>

Dir kënnt einfach Dividere fir Är nav Linken mat engem eidele Lëscht Element an enger einfacher Klass addéieren. Füügt just dëst tëscht Linken derbäi:

<ul class="nav">
  ...
  <li class="divider-vertical"></li>
  ...
</ul>

Komponent Ausrichtung

Fir eng Navigatioun, Sichform oder Text auszegläichen, benotzt d' .pull-leftUtility .pull-rightKlassen. Béid Klassen addéieren e CSS Float an der spezifizéierter Richtung.

Dropdowns addéieren

D'Dropdowns op den Nav bäidroen ass super einfach, awer erfuerdert d'Benotzung vun eisem Javascript Plugin .

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

Gitt d'Javascript →

Firwat se benotzen

Breadcrumb Navigatioun gëtt als Wee benotzt fir Benotzer ze weisen wou se an enger App oder op engem Site sinn, awer net fir primär Navigatioun. Halt hir Benotzung sparsam a succinct fir am effektivsten ze sinn.

Beispiller

Een eenzegt Beispill gewisen wéi et op verschidde Säiten ugewise ka ginn.

• Doheem

• Home /
• Bibliothéik

• Home /
• Bibliothéik /
• Daten

Markup

HTML ass Är Standard onordéiert Lëscht mat Linken.

<ul class="breadcrumb">
  <li>
    <a href="#">Home</a> <span class="divider">/</span>
  </li>
  <li>
    <a href="#">Bibliothéik</a> <span class="divider">/</span>
  </li>
  <li class="active">
    <a href="#">Daten</a>
  </li>
</ul>

Wéini ze benotzen

Ultra simplistesch a minimal stylesch Paginatioun inspiréiert vu Rdio, super fir Apps a Sichresultater. De grousse Block ass schwéier ze verpassen, liicht skalierbar a bitt grouss Klickflächen.

Staatlech Säit Linken

Links sinn personaliséierbar a funktionnéieren an enger Rei vun Ëmstänn mat der richteger Klass. .disabledfir onklickbar Linken a .activefir déi aktuell Säit.

Flexibel Ausrichtung

Füügt entweder vun zwou fakultativ Klassen fir d'Ausrichtung vun de Paginéierungslinks z'änneren: .pagination-centeredan .pagination-right.

Beispiller

De Standardpaginatiounskomponent ass flexibel a funktionnéiert an enger Rei vu Variatiounen.

Markup

Agewéckelt an engem <div>, Pagination ass just eng <ul>.

<div class="pagetion">
  <ul>
    <li><a href="#">Viru</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="#">Nächst</a></li>
  </ul>
</div>

Iwwer pager

De Pager Komponent ass eng Rei vu Linken fir einfach Paginéierungsimplementatiounen mat liicht Markup an nach méi hell Stiler. Et ass super fir einfache Site wéi Blogs oder Zäitschrëften.

Standard Beispill

Par défaut zentréiert de Pager Links.

• Virdrun
• Nächst

<ul class="pager">
  <li>
    <a href="#">Viru</a>
  </li>
  <li>
    <a href="#">Nächst</a>
  </li>
</ul>

Ausgeriicht Linken

Alternativ kënnt Dir all Link op d'Säiten ausriichten:

• ← Eeler
• Neier →

<ul class="pager">
  <li class="virdrun">
    <a href="#">← Eeler</a>
  </li>
  <li class="nächst">
    <a href="#">Neier →</a>
  </li>
</ul>

Bootstrap bitt e liichte, flexibele Komponent genannt Heldenheet fir Inhalt op Ärem Site ze weisen. Et funktionnéiert gutt op Marketing an Inhalt-schwéier Siten.

Markup

Wickelt Ären Inhalt an engem divLike sou:

<div class="hero-unit">
  <h1>Rubrik</h1>
  <p>Tagline</p>
  <p>
    <a class="btn btn-primary btn-large">
      Léier méi
    </a>
  </p>
</div>

Eng einfach Schuel fir eng h1passend Plaz aus a segmentéiert Sektiounen vum Inhalt op enger Säit. Et kann d' h1Standard small, Element wéi och déi meescht aner Komponenten (mat zousätzlech Stiler) benotzen.

<div class="page-haeder">
  <h1>Beispill Säit Header</h1>
</div>

Standard Miniatur

Par défaut sinn d'Bootstrap Thumbnails entwéckelt fir verlinkte Biller mat minimaler erfuerderlecher Markup ze weisen.

Héich personaliséierbar

Mat e bëssen extra Markup ass et méiglech all Zort HTML Inhalt wéi Rubriken, Abschnitter oder Knäppercher a Miniatur ze addéieren.

• 

  Thumbnail Label

  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.

  Aktioun Aktioun

• 

  Thumbnail Label

  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.

  Aktioun Aktioun

Firwat Thumbnails benotzen

Thumbnails (virdrun .media-gridbis v1.4) si super fir Gitter vu Fotoen oder Videoen, Bild Sichresultater, Retail Produkter, Portfolioen, a vill méi. Si kënne Linken oder statesche Inhalter sinn.

Einfach, flexibel Markup

Thumbnail Markup ass einfach - e ulmat all Zuel vun liElementer ass alles wat néideg ass. Et ass och super flexibel, et erlaabt all Typ vun Inhalt mat just e bësse méi Markup fir Ären Inhalt ze wéckelen.

Benotzt Gitterkolonnegréissten

Schlussendlech benotzt d'Miniaturkomponenten existent Gittersystemklassen - wéi .span2oder .span3- fir d'Kontroll vun de Miniatur Dimensiounen.

D'Markup

Wéi virdru scho gesot, ass déi erfuerderlech Markup fir Thumbnails liicht an einfach. Hei ass e Bléck op d'Default-Setup fir verlinkte Biller :

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

Fir personaliséiert HTML Inhalt an Miniaturbiller ännert d'Markup liicht. Fir Blockniveau Inhalt iwwerall z'erméiglechen, tausche mir de <a>fir e <div>Like:

<ul class="thumbnails">
  <li class="span3">
    <div class="thumbnail">
      <img src="https://placehold.it/260x180" alt="">
      <h5>Thumbnail Label</h5>
      <p>Miniaturbild hei...</p>
    </div>
  </li>
  ...
</ul>

Méi Beispiller

Entdeckt all Är Optiounen mat de verschiddene Gitterklassen déi Iech verfügbar sinn. Dir kënnt och verschidde Gréissten kombinéieren a passen.

Ëmgeschriwwen Basis Klass

Mat Bootstrap 2 hu mir d'Basisklass vereinfacht: .alertamplaz .alert-message. Mir hunn och de Minimum erfuerderleche Markup reduzéiert - nee <p>ass Standard erfuerderlech, just déi baussenzeg <div>.

Single Alarm Message

Fir eng méi haltbar Komponent mat manner Code, hu mir den differenzéierten Look fir Blockalarmer ewechgeholl, Messagen déi mat méi Polsterung an typesch méi Text kommen. D'Klass ass och geännert ginn .alert-block.

Gitt super mat Javascript

Bootstrap kënnt mat engem super jQuery Plugin deen Alarmmeldungen ënnerstëtzt, sou datt se séier an einfach entlooss ginn.

Kritt de Plugin »

Beispill Alarmer

Wickelt Äre Message an eng optional Zoumaache Ikon an enger Div mat einfacher Klass.

<div class="alert">
  <a class="close" data-dismiss="alert">×</a>
  <strong>Opgepasst!</strong> Am beschten kontrolléiert Iech selwer, Dir gesitt net ze gutt aus.
</div>

Verlängert einfach de Standard Alarmmeldung mat zwou fakultativ Klassen: .alert-blockfir méi Polsterung an Textkontrolle a .alert-headingfir eng passende Rubrik.

<div class="alert alert-block">
  <a class="close" data-dismiss="alert">×</a>
  <h4 class="alert-heading">Opgepasst!</h4>
  Beschte kontrolléiert Iech selwer, Dir sidd net ...
</div>

Feeler oder Gefor

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

Erfolleg

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

Informatiounen

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

Basis

Standard Fortschrëtt Bar mat engem vertikalen Gradient.

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

Gestreift

Benotzt e Gradient fir e gesträifte Effekt ze kreéieren.

<div class="progress progress-info
     Fortschrëtt gestreift">
  <div class="bar"
       style="width: 20%;"></div>
</div>

Animéiert

Huelt dat gesträifte Beispill an animéiert et.

<div class="progress progress-danger
     Fortschrëtt gestreift aktiv">
  <div class="bar"
       style="width: 40%;"></div>
</div>

Zousätzlech Faarwen

Fortschrëtter Baren benotzen e puer vun de selwechte Klass Nimm als Knäppercher an Alarmer fir ähnlechen Styling.

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

Alternativ kënnt Dir d'MANNER Dateien personaliséieren an Är eege Faarwen a Gréissten rullen.

Verhalen

Fortschrëtt Baren benotzen CSS3 Transitioune, also wann Dir dynamesch d'Breet via Javascript ajustéieren, wäert et glat änneren.

Wann Dir d' .activeKlass benotzt, .progress-stripedwäerten Är Fortschrëtter Baren d'Sträifen vu lénks op riets animéieren.

Browser Ënnerstëtzung

Fortschrëtter Baren benotzen CSS3 Gradienten, Iwwergäng an Animatiounen fir all hir Effekter z'erreechen. Dës Funktiounen ginn net an IE7-8 oder méi al Versioune vu Firefox ënnerstëtzt.

Opera ënnerstëtzt keng Animatiounen zu dëser Zäit.

Wells

Benotzt d'Wuel als einfachen Effekt op en Element fir en inset Effekt ze ginn.

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

Schëlder

Benotzt e Badge op engem Element fir eng ongelies Zuel oder als einfachen Indikator.

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

Zoumaachen Ikon

Benotzt déi generesch Zoumaache Ikon fir Inhalter wéi Modalen an Alarmer ze entloossen.

×

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