Gruppi tal-buttuni

Uża gruppi ta' buttuni biex tgħaqqad buttuni multipli flimkien bħala komponent wieħed kompost. Ibnihom b'serje ta' <a>jew <button>elementi.

L-aħjar prattiki

Nirrakkomandaw il-linji gwida li ġejjin għall-użu ta 'gruppi ta' buttuna u toolbars:

• Dejjem uża l-istess element fi grupp ta' buttuna waħda, <a>jew <button>.
• Tħallatx buttuni ta 'kuluri differenti fl-istess grupp ta' buttuni.
• Uża ikoni flimkien mat-test jew minfloku, imma kun żgur li tinkludi alt u test tat-titlu fejn xieraq.

Gruppi ta' Buttuni Relatati bi dropdowns (ara hawn taħt) għandhom jissejħu separatament u dejjem jinkludu dropdown caret biex tindika l-imġiba maħsuba.

Eżempju default

Hawn kif tfittex l-HTML għal grupp ta' buttuna standard mibni b'buttuni ta' tag ta' ankra:

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

Eżempju ta' Toolbar

Għaqqad settijiet ta ' <div class="btn-group">fi <div class="btn-toolbar">għal komponenti aktar kumplessi.

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

Checkbox u togħmiet tar-radju

Gruppi ta' buttuni jistgħu jaħdmu wkoll bħala radjijiet, fejn buttuna waħda biss tista' tkun attiva, jew kaxxi ta' kontroll, fejn kwalunkwe numru ta' buttuni jista' jkun attiv. Ara d-dokumenti Javascript għal dan.

Ikseb il-javascript »

Dropdowns fi gruppi ta 'buttuni

Irjus up! Buttuni bi dropdowns għandhom ikunu mgeżwra individwalment fihom stess .btn-groupfi ħdan a .btn-toolbargħal rendering xieraq.

Ħarsa ġenerali u eżempji

Uża kwalunkwe buttuna biex tiskatta menu dropdown billi tpoġġiha fi ħdan .btn-groupu tipprovdi l-markup xieraq tal-menu.

Eżempju ta 'markup

Simili għal grupp ta 'buttuni, il-markup tagħna juża markup ta' buttuna regolari, iżda b'numru żgħir ta 'żidiet biex jirfina l-istil u jappoġġja l-plugin dropdown jQuery ta' Bootstrap.

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

Jaħdem mad-daqsijiet kollha tal-buttuni

Il-dropdowns tal-buttuni jaħdmu fi kwalunkwe daqs. id-daqsijiet tal-buttuna tiegħek għal .btn-large, .btn-small, jew .btn-mini.

Jeħtieġ javascript

Id-dropdowns tal-buttuni jeħtieġu l- plugin dropdown Bootstrap biex jiffunzjona.

F'xi każijiet—bħall-mowbajl—menus dropdown se jestendu barra l-viewport. Għandek bżonn issolvi l-allinjament manwalment jew b'javascript personalizzat.

Ħarsa ġenerali u eżempji

Nibnu fuq l-istili tal-grupp tal-buttuni u l-markup, nistgħu faċilment noħolqu buttuna maqsuma. Buttuni maqsuma għandhom azzjoni standard fuq ix-xellug u dropdown toggle fuq il-lemin b'links kuntestwali.

Daqsijiet

Uża l-klassijiet tal-buttuni żejda .btn-mini, .btn-small, jew .btn-largegħad-daqs.

<div class = "btn-group" > 
  ...
  <ul class = "dropdown-menu pull-dritt" > 
    <!-- dropdown menu links -->
  </ul>
</div>

Eżempju ta 'markup

Aħna nespandu fuq il-dropdowns normali tal-buttuna biex nipprovdu t-tieni azzjoni tal-buttuna li topera bħala grillu tal-dropdown separat.

<div class = "btn-group" > 
  <button class = "btn" > Azzjoni </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "menu dropdown" > 
    <!-- dropdown menu links -->
  </ul>
</div>

Dropup menus

Il-menus dropdown jistgħu wkoll jinqalbu minn isfel għal fuq billi żżid klassi waħda mal-ġenitur immedjat ta' .dropdown-menu. Hija se taqleb id-direzzjoni tal- .caretu poġġi mill-ġdid il-menu innifsu biex jimxi minn isfel għal fuq minflok minn fuq għal isfel.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "menu dropdown" > 
    <!-- dropdown menu links -->
  </ul>
</div>

Klassi bażi qawwija

Il-komponenti kollha tan-nav hawn—tabs, pilloli, u listi— jaqsmu l-istess markup bażi u stili permezz tal- .navklassi.

Meta tuża

Tabs u pilloli huma tajbin għal sezzjonijiet tal-kontenut jew għan-navigazzjoni bejn paġni ta 'kontenut relatat.

Allinjament tal-komponenti

Biex tallinja l-links tan-nav, uża l -klassijiet .pull-leftjew utilità. .pull-rightIż-żewġ klassijiet se jżidu float CSS fid-direzzjoni speċifikata.

Tabs bażiċi

<ul>Ħu links regolari u żid .nav-tabs:

• Dar
• Profil
• Messaġġi

<ul class = "nav nav-tabs" > 
  <li class = "attiv" > 
    <a href = "#" > Dar </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Pilloli bażiċi

Ħu dak l-istess HTML, imma uża .nav-pillsminflok:

• Dar
• Profil
• Messaġġi

<ul class = "nav nav-pills" > 
  <li class = "attiv" > 
    <a href = "#" > Dar </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Kif munzell 'em

Peress li t-tabs u l-pilloli huma orizzontali b'mod awtomatiku, żid biss it-tieni klassi, .nav-stacked, biex tagħmilhom jidhru f'munzelli vertikalment.

Tabs f'munzelli

• Dar
• Profil
• Messaġġi

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

Pilloli f'munzelli

• Dar
• Profil
• Messaġġi

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

Menus sinjuri magħmula faċli

Il-menus dropdown fit-tabs u l-pilloli Bootstrap huma super faċli u jeħtieġu biss ftit HTML żejjed u plugin jQuery ħafif.

Mur fuq il-paġna Javascript biex taqra d-dokumenti dwar l -inizjalizzazzjoni tal-dropdowns f'Bootstrap.

Tabs bi dropdowns

• Dar
• Għajnuna
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

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

Pilloli bi dropdowns

• Dar
• Għajnuna
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

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

Navigazzjoni bl-istil ta' applikazzjoni

Il-listi tan-nav jipprovdu mod sempliċi u faċli biex jinbnew gruppi ta' links tan-nav b'headers fakultattivi. L-aħjar jintużaw fil-sidebars bħall-Finder f'OS X.

Strutturalment, huma mibnija fuq l-istess stili ewlenin ta 'nav bħal tabs u pilloli, għalhekk l-użu u l-adattament huma sempliċi.

Bl-ikoni

Il-listi tan-nav huma wkoll faċli biex jiġu mgħammra b'ikoni. Żid it- <i>tikketta xierqa mal-klassi u int issettjat.

Diviżuri orizzontali

Żid diviżur orizzontali billi toħloq oġġett tal-lista vojt bil-klassi .divider, bħal hekk:

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

Eżempju tal-lista tan-nav

Ħu lista ta' links u żid class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Intestatura tal-lista
  </li>
  <li class = "attiv" > 
    <a href = "#" > Dar </a> 
  </li>
  <li>
    <a href = "#" > Librerija </a> 
  </li>
  ...
</ul>

Eżempju bl-ikoni

L-istess eżempju, iżda <i>b'tikketti għall-ikoni.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i klassi = "icon-book" ></i> 
      Librerija
    </a>
  </li>
  ...
</ul>

X'inhu inkluż

Agħti t-tabs tiegħek għall-ħajja b'plugin sempliċi biex taqleb bejn il-kontenut permezz tat-tabs. Bootstrap jintegra tabs tabbable f'erba' stili: fuq (default), lemin, qiegħ u xellug.

Il-bidla bejniethom hija faċli u teħtieġ biss li tinbidel ftit li xejn markup.

Fade fit-tabs

Biex tagħmel it-tabs fade, żid .fadema 'kull .tab-pane.

Jeħtieġ plugin jQuery

It-tabs tabbable kollha huma mħaddma mill-plugin ħafif tagħna jQuery. Aqra aktar dwar kif tagħti l-ħajja lil tabs tabbable fuq il-paġna tad-dokumenti tal-javascript .

Ikseb il-javascript →

Eżempju tabbable

Biex tagħmel tabs tabbable, oħloq b'ID .tab-paneunika għal kull tab u wraphom fi .tab-content.

Għal tabs allinjati fuq il-lemin jew ix-xellug, wrap il- .nav-tabsu .tab-contentfi .tabbable.

Markup sempliċi

L-użu ta' tabs tabbable jeħtieġ div tat-tgeżwir, sett ta' tabs, u sett ta' panewijiet tabbable ta' kontenut.

<div class = "tabbable" > <!-- Meħtieġ biss għat-tabs tax-xellug/lemin -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Taqsima 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Taqsima 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane attiv" id = "tab1" >  
      <p> Jiena fit-Taqsima 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Hello, jiena fit-Taqsima 2. </p>
    </div>
  </div>
</div>

Tabs fuq il-qiegħ

Aqleb l-ordni tal-HTML u żid klassi biex tpoġġi tabs fil-qiegħ.

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

Tabs fuq ix-xellug

Ibdel il-klassi biex tpoġġi tabs fuq ix-xellug.

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

Tabs fuq il-lemin

Ibdel il-klassi biex tpoġġi tabs fuq il-lemin.

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

Armar Navbar

In-navbar teħtieġ biss ftit divs biex tistrutturaha sew għal wiri statiku jew fiss.

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

Navbar fiss

Waħħal in-navbar fin-naħa ta' fuq jew t'isfel tal-viewport bi klassi addizzjonali fuq id-div l-aktar 'il barra, .navbar.

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

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

Meta twaħħal in-navbar, ftakar li tagħti kont għaż-żona moħbija taħt. Żid 40px jew aktar ta 'ikkuttunar mal- <body>. Kun żgur li żżid dan wara l-qalba Bootstrap CSS u qabel is-CSS mhux obbligatorju li jirrispondu.

L-isem tad-ditta

Link sempliċi biex turi l-isem tad-ditta jew tal-proġett tiegħek teħtieġ biss tikketta tal-ankra.

<a class = "marka" href = "#" >  
  Isem tal-proġett
</a>

Formoli fin-navbar

Biex tfassal u tpoġġi formola sew fin-navbar, żid il-klassijiet xierqa kif muri hawn taħt. Għal formola awtomatika, inkludi .navbar-formu jew .pull-leftjew .pull-rightbiex tallinjaha sew.

<form class = "navbar-form pull-left" > 
  <input type = "test" class = "span2" >  
</form>

Għal formola ta' tfittxija aktar personalizzata, żid .navbar-searchmal- formu .search-querymal-input għal stili speċjalizzati fin-navbar.

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

Varjazzjoni reattiva mhux obbligatorja

Skont l-ammont ta 'kontenut fil-topbar tiegħek, tista' tkun trid timplimenta l-għażliet li jirrispondu. Biex tagħmel dan, wrap il-kontenut tan-nav tiegħek f'div li jkun fih, .nav-collapse.collapse, u żid il-buttuna ta' toggle tan-navbar, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "kontenitur" > 
 
      <!-- .btn-navbar huwa użat bħala l-toggle għal kontenut navbar imġarraf -->
      <a class = "btn btn-navbar" data-toggle = "kollass" data-target = ".nav-kollass" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Kun żgur li tħalli l-marka hemmhekk jekk trid li tintwera -->
      <a class = "brand" href = "#" > Isem tal-proġett </a>  
 
      <!-- Dak kollu li trid moħbi f'940px jew inqas, poġġi hawn -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-tfittxija, .navbar-form, eċċ -->
      </div>
 
    </div>
  </div>
</div>

Nav links

Oġġetti tan-nav huma sempliċi biex jiżdiedu permezz ta 'listi mhux ordnati.

<ul class = "nav" > 
  <li class = "attiv" > 
    <a href = "#" > Dar </a> 
  </li>
  <li><a href = "#" > Link </a></li> 
  <li><a href = "#" > Link </a></li> 
</ul>

Tista 'faċilment iżżid diviżuri mal-links tan-nav tiegħek b'oġġett tal-lista vojta u klassi sempliċi. Żid dan bejn links:

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

Allinjament tal-komponenti

Biex tallinja nav, formola ta' tfittxija, jew test, uża l -klassijiet ta' utilità .pull-leftjew . .pull-rightIż-żewġ klassijiet se jżidu float CSS fid-direzzjoni speċifikata.

Żieda dropdown menus

Iż-żieda ta' dropdowns u dropups man-nav hija sempliċi ħafna, iżda teħtieġ l-użu tal -plugin javascript tagħna .

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

Ikseb il-javascript →

Test fin-navbar

Kebbeb kordi tat-test f'forma ta' <.navbar-text>, normalment fuq <p>tikketta għal tmexxija u kulur xierqa.

Għaliex tużahom

In-navigazzjoni tal-breadcrumb tintuża bħala mod biex turi lill-utenti fejn qegħdin f'app jew f'sit, iżda mhux għan-navigazzjoni primarja. Żomm l-użu tagħhom skars u konċiż biex ikunu l-aktar effettivi.

Eżempji

Eżempju wieħed muri kif jista' jintwera fuq bosta paġni.

• Dar

• dar /
• Librerija

• dar /
• Librerija /
• Data

Markup

HTML hija l-lista standard mhux ordnata tiegħek b'links.

<ul class = "frak tal-ħobż" > 
  <li>
    <a href = "#" > Dar </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Librerija </a> <span class = "divider" > / </span>   
  </li>
  <li class = "active" > Data </li> 
</ul>

Meta tuża

Paġinazzjoni ultra simplistika u b'stil minimament ispirata minn Rdio, kbira għall-apps u r-riżultati tat-tiftix. Il-blokka l-kbira hija diffiċli biex titlifha, tista 'tiġi skalata faċilment, u tipprovdi żoni ta' klikkjar kbar.

Links ta' paġna bil-istat

Il-links huma customizable u jaħdmu f'numru ta 'ċirkostanzi mal-klassi t-tajba. .disabledgħal links li ma jistgħux jiġu kklikkjati u .activegħall-paġna kurrenti.

Allinjament flessibbli

Żid waħda minn żewġ klassijiet fakultattivi biex tbiddel l-allinjament tar-rabtiet tal-paġnar: .pagination-centeredu .pagination-right.

Eżempji

Il-komponent tal-pagination default huwa flessibbli u jaħdem f'numru ta 'varjazzjonijiet.

Markup

Imgeżwer fi <div>, paġnar huwa biss <ul>.

<div class = "paġinazzjoni" > 
  <ul>
    <li><a href = "#" > Prev </a></li> 
    <li class = "attiv" > 
      <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 = "#" > Li jmiss </a></li> 
  </ul>
</div>

Dwar pager

Il-komponent tal-pager huwa sett ta 'links għal implimentazzjonijiet ta' paginazzjoni sempliċi b'markup ħafif u stili saħansitra eħfef. Huwa tajjeb ħafna għal siti sempliċi bħal blogs jew rivisti.

Stat diżabbli mhux obbligatorju

Il-links tal-pager jużaw ukoll il- .disabledklassi ġenerali mill-paġnar.

Eżempju default

B'mod awtomatiku, il-pager jiffoka links.

• Preċedenti
• Li jmiss

<ul class = "pager" > 
  <li>
    <a href = "#" > Preċedenti </a> 
  </li>
  <li>
    <a href = "#" > Li jmiss </a> 
  </li>
</ul>

Links allinjati

Inkella, tista' tallinja kull link mal-ġnub:

• ← Anzjani
• Aktar ġodda →

<ul class = "pager" > 
  <li class = "preċedenti" > 
    <a href = "#" > ← Anzjani </a> 
  </li>
  <li class = "li jmiss" > 
    <a href = "#" > Aktar ġodda → </a> 
  </li>
</ul>

Dwar

Il-badges huma komponenti żgħar u sempliċi biex jintwerew indikatur jew għadd ta 'xi tip. Huma komunement jinstabu fil-klijenti tal-email bħal Mail.app jew fuq apps mobbli għal notifiki push.

Klassijiet disponibbli

Bootstrap jipprovdi komponent ħafif u flessibbli msejjaħ unità eroj biex juri l-kontenut fuq is-sit tiegħek. Taħdem tajjeb fuq siti ta' kummerċjalizzazzjoni u kontenut tqal.

Markup

Kebbeb il-kontenut tiegħek divb'tali hekk:

<div class = "eroj-unità" > 
  <h1> Intestatura </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primary btn-kbar" > 
      Itagħllem iżjed
    </a>
  </p>
</div>

Qoxra sempliċi biex tispazja b'mod h1xieraq u tissegmenta sezzjonijiet tal-kontenut fuq paġna. Jista 'jutilizza l- element h1default small, kif ukoll il-biċċa l-kbira tal-komponenti l-oħra (bi stili addizzjonali).

<div class = "paġna-header" > 
  <h1> Eżempju ta' header tal-paġna </h1>
</div>

Miniatures default

B'mod awtomatiku, il-minjaturi ta' Bootstrap huma ddisinjati biex juru immaġini konnessi b'markup minimu meħtieġ.

Personalizzabbli ħafna

B'daqsxejn ta 'markup żejjed, huwa possibbli li żżid kwalunkwe tip ta' kontenut HTML bħal intestaturi, paragrafi, jew buttuni fil-minijaturi.

• 

  Tikketta miniatura

  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.

  Azzjoni Azzjoni

• 

  Tikketta miniatura

  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.

  Azzjoni Azzjoni

Għaliex tuża thumbnails

Thumbnails (qabel .media-gridsa v1.4) huma tajbin għal grilji ta 'ritratti jew vidjows, riżultati ta' tfittxija ta 'immaġni, prodotti bl-imnut, portafolli, u ħafna aktar. Jistgħu jkunu links jew kontenut statiku.

Markup sempliċi u flessibbli

Il-markup tal-minjatura huwa sempliċi—a ulb'kull numru ta' lielementi huwa dak kollu li hu meħtieġ. Huwa wkoll super flessibbli, li jippermetti għal kull tip ta 'kontenut bi ftit aktar markup biex ikebbeb il-kontenut tiegħek.

Juża daqsijiet tal-kolonna tal-grilja

Fl-aħħar nett, il-komponent thumbnails juża klassijiet eżistenti tas-sistema tal-grilja—bħal .span2jew .span3—għall-kontroll tad-dimensjonijiet thumbnail.

Il-markup

Kif issemma qabel, il-markup meħtieġ għal thumbnails huwa ħafif u sempliċi. Hawn ħarsa lejn is-setup default għal immaġini konnessi :

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

Għal kontenut HTML personalizzat fil-minjaturi, il-markup jinbidel ftit. Biex nippermettu l-kontenut tal-livell tal-blokki kullimkien, niskambjaw <a>għal <div>bħal hekk:

<ul class = "minjieri" > 
  <li class = "span3" > 
    <div class = "minjatura" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Tikketta miniatura </h5>
      <p> Il-caption tal-minjatura eżatt hawn... </p>
    </div>
  </li>
  ...
</ul>

Aktar eżempji

Esplora l-għażliet kollha tiegħek bid-diversi klassijiet tal-grilja disponibbli għalik. Tista 'wkoll tħallat u tqabbel daqsijiet differenti.

Klassi bażi miktuba mill-ġdid

Bil Bootstrap 2, aħna ssimplifikajna l-klassi bażi: .alertminflok .alert-message. Naqqasna wkoll il-markup minimu meħtieġ—l-ebda <p>huwa meħtieġ b'mod awtomatiku, biss il-barra <div>.

Messaġġ wieħed ta' twissija

Għal komponent aktar durabbli b'inqas kodiċi, neħħejna l-ħarsa ta' differenzjazzjoni għal twissijiet ta 'blokki, messaġġi li jiġu b'aktar ikkuttunar u tipikament aktar test. Il-klassi nbidlet ukoll għal .alert-block.

Jmur tajjeb mal-javascript

Bootstrap jiġi ma 'plugin jQuery kbir li jappoġġa messaġġi ta' twissija, li jagħmel it-tkeċċija tagħhom malajr u faċli.

Ikseb il-plugin »

Eżempji ta' twissijiet

Kebbeb il-messaġġ tiegħek u ikona qrib fakultattiva f'div bi klassi sempliċi.

<div class = "twissija" > 
  <button class = "close" data-dismiss = "allert" > × </button>  
  <strong> Twissija! </strong> L-aħjar iċċekkja lilek innifsek, m'intix qed tfittex wisq tajjeb.
</div>

Irjus up! L-apparati tal-iOS jirrikjedu href="#"għat-tkeċċija tat-twissijiet. Kun żgur li tinkludiha u l-attribut tad-dejta għall-ikoni mill-qrib tal-ankra. Inkella, tista' tuża <button>element bl-attribut tad-dejta, li għażilna li nagħmlu għad-dokumenti tagħna. Meta tuża <button>, trid tinkludi type="button"jew il-formoli tiegħek ma jistgħux jissottomettu.

Estendi faċilment il-messaġġ ta' twissija standard b'żewġ klassijiet fakultattivi: .alert-blockgħal aktar ikkuttunar u kontrolli tat-test u .alert-headinggħal intestatura li tqabbel.

<div class = "blokk ta' twissija" > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </a>   
  <h4 class = "alert-heading" > Twissija! </h4> 
  L-aħjar iċċekkja lilek innifsek, m'intix...
</div>

Żball jew periklu

<div class = "twissija twissija-żball" > 
  ...
</div>

Suċċess

<div class = "twissija-suċċess" > 
  ...
</div>

Informazzjoni

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

Bażiku

Barra tal-progress default bi gradjent vertikali.

<div class = "progress" > 
  <div class = "bar" 
       stil = " wisa : 60 %; " ></div> 
</div>

Strixxat

Juża gradjent biex joħloq effett strixxat (l-ebda IE).

<div class = "progress progress-striped" > 
  <div class = "bar" 
       stil = " wisa : 20 %; " ></div> 
</div>

Animati

Jieħu l-eżempju strixxat u janimah (l-ebda IE).

<div class = "progress progress-striped 
     attiv" >
  <div class = "bar" 
       stil = " wisa : 40 %; " ></div> 
</div>

Kuluri addizzjonali

Il-vireg tal-progress jużaw xi wħud mill-istess buttuna u klassijiet ta 'twissija għal stili konsistenti.

Bars strixxati

Simili għall-kuluri solidi, għandna varjati strixxi progress bars.

Imġieba

Il-vireg tal-progress jużaw tranżizzjonijiet CSS3, għalhekk jekk taġġusta dinamikament il-wisa 'permezz ta' javascript, din terġa' tbiddel bla xkiel.

Jekk tuża l- .activeklassi, il- .progress-stripedvireg tal-progress tiegħek janimaw l-istrixxi mix-xellug għal-lemin.

Appoġġ għall-browser

Il-vireg tal-progress jużaw gradjenti, tranżizzjonijiet u animazzjonijiet CSS3 biex jiksbu l-effetti kollha tagħhom. Dawn il-karatteristiċi mhumiex appoġġjati f'IE7-9 jew verżjonijiet anzjani ta' Firefox.

Opera u IE ma jappoġġjawx animazzjonijiet f'dan iż-żmien.

Bjar

Uża l-bir bħala effett sempliċi fuq element biex tagħtih effett inset.

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

Agħlaq l-ikona

Uża l-ikona ġenerika tal-qrib biex tiċħad kontenut bħal modals u twissijiet.

×

<button class = "qrib" > × </button> 

L-apparati tal-iOS jeħtieġu href="#" għall-avvenimenti tal-ikklikkja jekk pjuttost tuża ankra.

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