Grupet e butonave

Përdorni grupet e butonave për të bashkuar shumë butona së bashku si një komponent i përbërë. Ndërtoni ato me një seri <a>ose <button>elemente.

Praktikat më të mira

Ne rekomandojmë udhëzimet e mëposhtme për përdorimin e grupeve të butonave dhe shiritave të veglave:

• Përdorni gjithmonë të njëjtin element në një grup butonash të vetëm, <a>ose <button>.
• Mos përzieni butona me ngjyra të ndryshme në të njëjtin grup butonash.
• Përdorni ikona si shtesë ose në vend të tekstit, por sigurohuni që të përfshini tekstin alt dhe titullin aty ku është e përshtatshme.

Grupet e butonave të ndërlidhur me zbritje (shih më poshtë) duhet të thirren veçmas dhe të përfshijnë gjithmonë një skedë me rënie për të treguar sjelljen e synuar.

Shembulli i parazgjedhur

Ja se si duket HTML për një grup butonash standard të ndërtuar me butona të etiketave të ankorimit:

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

Shembull i shiritit të veglave

Kombinoni grupe <div class="btn-group">në një <div class="btn-toolbar">për komponentë më komplekse.

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

Kutia e kontrollit dhe shijet e radios

Grupet e butonave mund të funksionojnë gjithashtu si radio, ku vetëm një buton mund të jetë aktiv, ose kuti zgjedhjeje, ku çdo numër butonash mund të jetë aktiv. Shikoni dokumentet Javascript për këtë.

Merr javascript »

Dropdowns në grupet e butonave

Kokat lart! Butonat me zbritje duhet të mbështillen në mënyrë individuale .btn-groupbrenda një .btn-toolbarpër interpretim të duhur.

Vështrim i përgjithshëm dhe shembuj

Përdorni çdo buton për të aktivizuar një menu dropdown duke e vendosur atë brenda një .btn-groupdhe duke siguruar shënimin e duhur të menusë.

Shembull shënjimi

Ngjashëm me grupin e butonave, shënimi ynë përdor shënjimin e rregullt të butonave, por me një sërë shtesash për të përmirësuar stilin dhe për të mbështetur shtojcën jQuery me rënie të Bootstrap.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Veprimi
    <span class = "caret" ></span> 
  </a>
  <ul class = "meny-dropdown" > 
    <!-- lidhjet e menusë rënëse -->
  </ul>
</div>

Punon me të gjitha madhësitë e butonave

Zbritja e butonave funksionon në çdo madhësi. madhësitë e butonave tuaj në .btn-large, .btn-small, ose .btn-mini.

Kërkon javascript

Zbritja e butonave kërkon që të funksionojë shtojca e lëshimit Bootstrap .

Në disa raste - si celulari - menytë rënëse do të shtrihen jashtë portit të shikimit. Ju duhet ta zgjidhni shtrirjen me dorë ose me javascript të personalizuar.

Vështrim i përgjithshëm dhe shembuj

Duke u bazuar në stilet dhe shënjimin e grupit të butonave, ne mund të krijojmë lehtësisht një buton ndarjeje. Butonat e ndarjes paraqesin një veprim standard në të majtë dhe një ndryshim në rënie në të djathtë me lidhje kontekstuale.

Përmasat

Përdorni klasat shtesë të butonave .btn-mini, .btn-smallose .btn-largepër madhësinë.

<div class = "btn-group" > 
  ...
  <ul class = "menyja rënëse tërhiqe-djathtas" > 
    <!-- lidhjet e menusë rënëse -->
  </ul>
</div>

Shembull shënjimi

Ne zgjerojmë në zbritjet normale të butonit për të siguruar një veprim të dytë të butonit që funksionon si një shkas i veçantë me rënie.

<div class = "btn-group" > 
  <button class = "btn" > Veprimi </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "meny-dropdown" > 
    <!-- lidhjet e menusë rënëse -->
  </ul>
</div>

Menytë rënëse

Menytë rënëse mund të ndërrohen gjithashtu nga poshtë lart duke shtuar një klasë të vetme në prindin e menjëhershëm të .dropdown-menu. Do të kthejë drejtimin e .caretmenusë dhe do të ripozicionojë vetë menunë për të lëvizur nga poshtë lart në vend të lart poshtë.

<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 = "meny-dropdown" > 
    <!-- lidhjet e menusë rënëse -->
  </ul>
</div>

Klasa bazë e fuqishme

Të gjithë komponentët e navigimit këtu - skedat, pilulat dhe listat - ndajnë të njëjtin shënim bazë dhe stile përmes .navklasës.

Kur të përdoret

Skedat dhe pilulat janë të shkëlqyera për seksione të përmbajtjes ose për lundrimin midis faqeve të përmbajtjes përkatëse.

Rreshtimi i komponentëve

Për të lidhur lidhjet e navigimit, përdorni klasat e shërbimeve .pull-leftose . .pull-rightTë dyja klasat do të shtojnë një float CSS në drejtimin e specifikuar.

Skedat bazë

Merrni një <ul>lidhje të rregullt dhe shtoni .nav-tabs:

• Shtëpi
• Profili
• Mesazhet

<ul class = "nav nav-tabs" > 
  <li class = "aktiv" > 
    <a href = "#" > Faqja kryesore </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Pilulat bazë

Merrni të njëjtin HTML, por përdorni .nav-pillsnë vend të kësaj:

• Shtëpi
• Profili
• Mesazhet

<ul class = "nav nav-pills" > 
  <li class = "aktiv" > 
    <a href = "#" > Faqja kryesore </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Si t'i grumbulloni ato

Meqenëse skedat dhe pilulat janë horizontale si parazgjedhje, thjesht shtoni një klasë të dytë, .nav-stacked, për t'i bërë ato të duken të grumbulluara vertikalisht.

Skeda të grumbulluara

• Shtëpi
• Profili
• Mesazhet

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

Pilula të grumbulluara

• Shtëpi
• Profili
• Mesazhet

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

Menutë e pasura janë bërë të lehta

Menytë me zbritje në skedat dhe pilulat e Bootstrap janë shumë të lehta dhe kërkojnë vetëm pak HTML shtesë dhe një shtojcë të lehtë jQuery.

Shkoni te faqja Javascript për të lexuar dokumentet për inicializimin e zbritjeve në Bootstrap.

Skedat me zbritje

• Shtëpi
• Ndihmë
• 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 = "meny-dropdown" > 
      <!-- lidhje -->
    </ul>
  </li>
</ul>

Pilula me pika

• Shtëpi
• Ndihmë
• 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 = "meny-dropdown" > 
      <!-- lidhje -->
    </ul>
  </li>
</ul>

Navigimi në stilin e aplikacionit

Listat naviguese ofrojnë një mënyrë të thjeshtë dhe të lehtë për të krijuar grupe lidhjesh navigimi me tituj opsionalë. Ato përdoren më së miri në shiritat anësor si Finder në OS X.

Strukturisht, ato janë ndërtuar në të njëjtat stile navigimi thelbësor si skedat dhe pilulat, kështu që përdorimi dhe personalizimi janë të drejtpërdrejta.

Me ikona

Listat naviguese janë gjithashtu të lehta për t'u pajisur me ikona. Shtoni <i>etiketën e duhur me klasën dhe jeni gati.

Ndarëse horizontale

Shtoni një ndarës horizontal duke krijuar një artikull bosh të listës me klasën .divider, si kjo:

<ul class = "nav nav-list" > 
  ...
  <li class = "ndarës" ></li> 
  ...
</ul>

Shembull i listës së navigimeve

Merrni një listë lidhjesh dhe shtoni class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Kreu i listës
  </li>
  <li class = "aktiv" > 
    <a href = "#" > Faqja kryesore </a> 
  </li>
  <li>
    <a href = "#" > Biblioteka </a> 
  </li>
  ...
</ul>

Shembull me ikona

I njëjti shembull, por me <i>etiketa për ikonat.

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

Çfarë përfshihet

Jepni skedat tuaja në jetë me një shtesë të thjeshtë për të ndërruar përmbajtjen përmes skedave. Bootstrap integron skedat e tabelave në katër stile: sipër (parazgjedhur), djathtas, poshtë dhe majtas.

Ndryshimi mes tyre është i lehtë dhe kërkon vetëm ndryshim shumë të vogël të shënimit.

Zbehet në skeda

Për të zbehur skedat, shtoni .fadenë secilën .tab-pane.

Kërkon shtojcën jQuery

Të gjitha skedat me tabela mundësohen nga shtojca jonë e lehtë jQuery. Lexoni më shumë se si t'i jepni jetë skedave me tabela në faqen e dokumenteve të javascript .

Merrni Javascript →

Shembull me tabela

Për t'i bërë skedat me skeda, krijoni një .tab-paneID unike për çdo skedë dhe mbështillini ato në .tab-content.

Për skedat e rreshtuara djathtas ose majtas, mbështillni .nav-tabsdhe .tab-contentnë .tabbable.

Shënim i drejtpërdrejtë

Përdorimi i skedave me tabela kërkon një div mbështjellëse, një grup skedash dhe një grup të paneleve me tabela të përmbajtjes.

<div class = "tabable" > <!-- Kërkohet vetëm për skedat majtas/djathtas -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Seksioni 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Seksioni 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane aktive" id = "tab1" >  
      <p> Unë jam në seksionin 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Mirë, jam në seksionin 2. </p>
    </div>
  </div>
</div>

Skedat në fund

Kthejeni rendin e HTML dhe shtoni një klasë për të vendosur skedat në fund.

<div class = "tabable tabs-polow" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Skedat në të majtë

Ndërroni klasën për të vendosur skeda në të majtë.

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

Skedat në të djathtë

Ndërroni klasën për të vendosur skeda në të djathtë.

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

Skela Navbar

Shiriti navigues kërkon vetëm disa div për ta strukturuar mirë për shfaqje statike ose fikse.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "enë" > 
      ...
    </div>
  </div>
</div>

Shiriti navigues i fiksuar

Fiksoni shiritin e navigimit në krye ose në fund të portës së pamjes me një klasë shtesë në ndarjen më të jashtme, .navbar.

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

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

Kur vendosni shiritin e navigimit, mos harroni të llogarisni zonën e fshehur poshtë. Shtoni 40 px ose më shumë mbushje në <body>. Sigurohuni që ta shtoni këtë pas CSS-së kryesore të Bootstrap dhe përpara CSS-së opsionale të përgjegjshme.

Emri i markës

Një lidhje e thjeshtë për të treguar emrin e markës ose projektit tuaj kërkon vetëm një etiketë ankorimi.

<a class = "brand" href = "#" >  
  Emri i Projektit
</a>

Format në navbar

Për të stiluar dhe pozicionuar siç duhet një formë brenda shiritit të navigimit, shtoni klasat e duhura siç tregohet më poshtë. Për një formë të paracaktuar, përfshini .navbar-formose .pull-leftose .pull-rightpër ta rreshtuar siç duhet.

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

Për një formë kërkimi më të personalizuar, shtoni .navbar-searchnë formdhe .search-querynë hyrjen për stile të specializuara në shiritin e navigimit.

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

Variacion i përgjegjshëm opsional

Në varësi të sasisë së përmbajtjes në shiritin tuaj të sipërm, mund të dëshironi të zbatoni opsionet e përgjegjshme. Për ta bërë këtë, mbështillni përmbajtjen tuaj të navigimit në një div që përmban, .nav-collapse.collapsedhe shtoni butonin e ndërrimit të shiritit të navigimit, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "enë" > 
 
      <!-- .btn-navbar përdoret si çelës për përmbajtjen e shiritit të palosur -->
      <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>
 
      <!-- Sigurohuni që ta lini markën atje nëse dëshironi që ajo të shfaqet -->
      <a class = "brand" href = "#" > Emri i projektit </a>  
 
      <!-- Gjithçka që dëshironi të fshihet në 940 px ose më pak, vendoseni këtu -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etj -->
      </div>
 
    </div>
  </div>
</div>

Lidhjet e navigimit

Artikujt navigues janë të thjeshtë për t'u shtuar nëpërmjet listave të pa renditura.

<ul class = "nav" > 
  <li class = "aktiv" > 
    <a href = "#" > Faqja kryesore </a> 
  </li>
  <li><a href = "#" > Lidhja </a></li> 
  <li><a href = "#" > Lidhja </a></li> 
</ul>

Mund të shtoni lehtësisht ndarës në lidhjet tuaja naviguese me një artikull bosh të listës dhe një klasë të thjeshtë. Thjesht shtoni këtë midis lidhjeve:

<ul class = "nav" > 
  ...
  <li class = "ndarës-vertikal" </li> 
  ...
</ul>

Rreshtimi i komponentëve

Për të lidhur një navigim, formular kërkimi ose tekst, përdorni klasat e shërbimeve .pull-leftose . .pull-rightTë dyja klasat do të shtojnë një float CSS në drejtimin e specifikuar.

Shtimi i menyve rënëse

Shtimi i pikave me zbritje dhe lëshimi në navigacion është jashtëzakonisht i thjeshtë, por kërkon përdorimin e shtojcës sonë javascript .

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

Merrni Javascript →

Teksti në shiritin e navigimit

Mbështillni vargjet e tekstit në një <.navbar-text>, zakonisht në një <p>etiketë për drejtimin dhe ngjyrën e duhur.

Pse t'i përdorni ato

Navigimi Breadcrumb përdoret si një mënyrë për t'u treguar përdoruesve se ku janë brenda një aplikacioni ose një sajti, por jo për navigimin parësor. Mbajeni përdorimin e tyre të rrallë dhe të përmbledhur për të qenë më efektiv.

Shembuj

Një shembull i vetëm i treguar pasi mund të shfaqet në shumë faqe.

• Shtëpi

• Faqja kryesore /
• Librari

• Faqja kryesore /
• Biblioteka /
• Të dhënat

Markup

HTML është lista juaj standarde e pa renditur me lidhje.

<ul class = "thërrim buke" > 
  <li>
    <a href = "#" > Faqja kryesore </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Biblioteka </a> <span class = "divider" > / </span>   
  </li>
  <li class = "active" > Të dhënat </li> 
</ul>

Kur të përdoret

Faqezim jashtëzakonisht i thjeshtë dhe me stil minimal i frymëzuar nga Rdio, i shkëlqyeshëm për aplikacionet dhe rezultatet e kërkimit. Blloku i madh është i vështirë për t'u humbur, lehtësisht i shkallëzueshëm dhe ofron zona të mëdha klikimesh.

Lidhje të faqeve shtetërore

Lidhjet janë të personalizueshme dhe funksionojnë në një sërë rrethanash me klasën e duhur. .disabledpër lidhjet e paklikueshme dhe .activepër faqen aktuale.

Rreshtimi fleksibël

Shtoni njërën nga dy klasat opsionale për të ndryshuar shtrirjen e lidhjeve të faqes: .pagination-centereddhe .pagination-right.

Shembuj

Komponenti i parazgjedhur i faqezimit është fleksibël dhe funksionon në një sërë variacionesh.

Markup

I mbështjellë në një <div>, faqezim është vetëm një <ul>.

<div class = "faqezim" > 
  <ul>
    <li><a href = "#" > E mëparshme </a></li> 
    <li class = "aktiv" > 
      <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 = "#" > Tjetra </a></li> 
  </ul>
</div>

Rreth pager-it

Komponenti i pager-it është një grup lidhjesh për implementime të thjeshta faqeshimi me shënime të lehta dhe stile edhe më të lehta. Është i shkëlqyeshëm për sajte të thjeshta si blogje ose revista.

Gjendja e çaktivizuar opsionale

Lidhjet e Pager gjithashtu përdorin .disabledklasën e përgjithshme nga pagination.

Shembulli i parazgjedhur

Si parazgjedhje, lidhjet përqendrojnë pager-in.

• E mëparshme
• Tjetra

<ul class = "pager" > 
  <li>
    <a href = "#" > E mëparshme </a> 
  </li>
  <li>
    <a href = "#" > Tjetra </a> 
  </li>
</ul>

Lidhjet e rreshtuara

Përndryshe, ju mund të rreshtoni secilën lidhje në anët:

• ← Më i vjetër
• Më të reja →

<ul class = "pager" > 
  <li class = "e mëparshme" > 
    <a href = "#" > ← Më i vjetër </a> 
  </li>
  <li class = "tjetër" > 
    <a href = "#" > Më të reja → </a> 
  </li>
</ul>

Rreth

Distinktivët janë komponentë të vegjël dhe të thjeshtë për të shfaqur një lloj treguesi ose numërimi. Ato zakonisht gjenden në klientët e postës elektronike si Mail.app ose në aplikacionet celulare për njoftime shtytëse.

Klasat e disponueshme

Bootstrap ofron një komponent të lehtë dhe fleksibël të quajtur njësi heroike për të shfaqur përmbajtjen në faqen tuaj. Ajo funksionon mirë në faqet e marketingut dhe përmbajtjes së rëndë.

Markup

Mbështilleni përmbajtjen tuaj në një divmënyrë të ngjashme:

<div class = "hero-njësi" > 
  <h1> Titulli </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primare btn-large" > 
      Mëso më shumë
    </a>
  </p>
</div>

Një predhë e thjeshtë për h1të ndarë dhe segmentuar në mënyrë të përshtatshme seksionet e përmbajtjes në një faqe. Mund të përdorë elementin h1e paracaktuar small, si dhe shumicën e komponentëve të tjerë (me stile shtesë).

<div class = "page-header" > 
  <h1> Shembull i kokës së faqes </h1>
</div>

Miniaturat e parazgjedhura

Si parazgjedhje, miniaturat e Bootstrap janë krijuar për të shfaqur imazhe të lidhura me shënjimin minimal të kërkuar.

Shumë i personalizueshëm

Me pak shënim shtesë, është e mundur të shtoni çdo lloj përmbajtjeje HTML si tituj, paragrafë ose butona në miniaturë.

• 

  Etiketa e miniaturës

  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.

  Veprimi Veprimi

• 

  Etiketa e miniaturës

  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.

  Veprimi Veprimi

Pse të përdorni miniaturë

Miniaturat (më parë .media-gridderi në versionin 1.4) janë të shkëlqyera për rrjetet e fotografive ose videove, rezultatet e kërkimit të imazheve, produktet me pakicë, portofolet dhe shumë më tepër. Ato mund të jenë lidhje ose përmbajtje statike.

Shënim i thjeshtë, fleksibël

Shënimi i miniaturës është i thjeshtë - ulme çdo numër lielementësh është gjithçka që kërkohet. Është gjithashtu super fleksibël, duke lejuar çdo lloj përmbajtjeje me vetëm pak më shumë shënime për të mbështjellë përmbajtjen tuaj.

Përdor madhësitë e kolonave të rrjetit

Së fundi, komponenti i miniaturave përdor klasat ekzistuese të sistemit të rrjetit - si .span2ose .span3- për kontrollin e dimensioneve të miniaturave.

Shënimi

Siç u përmend më parë, shënimi i kërkuar për miniaturat është i lehtë dhe i drejtpërdrejtë. Ja një vështrim në konfigurimin e paracaktuar për imazhet e lidhura :

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

Për përmbajtjen e personalizuar HTML në miniaturë, shënimi ndryshon pak. Për të lejuar përmbajtjen e nivelit të bllokut kudo, ne e ndërrojmë atë <a>me një <div>si më poshtë:

<ul class = "miniaturë" > 
  <li class = "span3" > 
    <div class = "miniaturë" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Etiketa e miniaturës </h5>
      <p> Titulli i miniaturës pikërisht këtu... </p>
    </div>
  </li>
  ...
</ul>

Më shumë shembuj

Eksploroni të gjitha opsionet tuaja me klasat e ndryshme të rrjetit të disponueshme për ju. Ju gjithashtu mund të përzieni dhe përshtatni madhësi të ndryshme.

Klasa bazë e rishkruar

Me Bootstrap 2, ne kemi thjeshtuar klasën bazë: .alertnë vend të .alert-message. Ne kemi ulur gjithashtu shënjimin minimal të kërkuar—jo <p>kërkohet si parazgjedhje, vetëm e jashtme <div>.

Mesazh i vetëm alarmues

Për një komponent më të qëndrueshëm me më pak kod, ne kemi hequr pamjen diferencuese për sinjalizimet e bllokut, mesazhet që vijnë me më shumë mbushje dhe zakonisht më shumë tekst. Klasa gjithashtu ka ndryshuar në .alert-block.

Shkon shkëlqyeshëm me Javascript

Bootstrap vjen me një shtesë të shkëlqyeshme jQuery që mbështet mesazhet alarmuese, duke e bërë heqjen e tyre të shpejtë dhe të lehtë.

Merr shtojcën »

Shembuj sinjalizimesh

Mbështillni mesazhin tuaj dhe një ikonë opsionale të mbylljes në një div me klasë të thjeshtë.

<div class = "alarm" > 
  <button class = "close" data-dismiss = "alert" > × </button>  
  <strong> Paralajmërim! </strong> Kontrolloni më mirë veten, nuk po dukeni shumë mirë.
</div>

Kokat lart! Pajisjet iOS kërkojnë një href="#"për heqjen e sinjalizimeve. Sigurohuni që ta përfshini atë dhe atributin e të dhënave për ikonat e mbylljes së ankorimit. Përndryshe, mund të përdorni një <button>element me atributin e të dhënave, të cilin ne kemi zgjedhur ta bëjmë për dokumentet tona. Kur përdorni <button>, ju duhet të përfshini type="button"ose formularët tuaj mund të mos dorëzohen.

Zgjate lehtësisht mesazhin standard të alarmit me dy klasa opsionale: .alert-blockpër më shumë kontrolle mbushjeje dhe teksti dhe .alert-headingpër një titull që përputhet.

<div class = "alert-block" > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </a>   
  <h4 class = "alert-heading" > Paralajmërim! </h4> 
  Kontrolloni më mirë veten, nuk jeni...
</div>

Gabim apo rrezik

<div class = "gabim alarmi i alarmit" > 
  ...
</div>

Sukses

<div class = "suksesi i alarmit" > 
  ...
</div>

Informacion

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

bazë

Shiriti i parazgjedhur i përparimit me një gradient vertikal.

<div class = "progres" > 
  <div class = "bar" 
       style = " gjerësia : 60 %; " ></div> 
</div>

Me vija

Përdor një gradient për të krijuar një efekt me shirita (pa IE).

<div class = "progres progres-striped" > 
  <div class = "bar" 
       style = " gjerësia : 20 %; " ></div> 
</div>

I animuar

Merr shembullin me vija dhe e animon atë (pa IE).

<div class = "progres progres-shirita 
     aktive" >
  <div class = "bar" 
       style = " gjerësi : 40 %; " ></div> 
</div>

Ngjyra shtesë

Shiritat e progresit përdorin disa nga të njëjtin buton dhe klasa alarmi për stile të qëndrueshme.

Shufra me vija

Ngjashëm me ngjyrat e forta, ne kemi shirita të ndryshëm të përparimit me vija.

Sjellje

Shiritat e progresit përdorin tranzicione CSS3, kështu që nëse rregulloni në mënyrë dinamike gjerësinë përmes javascript, ajo do të ndryshojë pa probleme.

Nëse përdorni .activeklasën, .progress-stripedshiritat e përparimit tuaj do të animojnë shiritat nga e majta në të djathtë.

Mbështetja e shfletuesit

Shiritat e progresit përdorin gradientët, tranzicionet dhe animacionet CSS3 për të arritur të gjitha efektet e tyre. Këto veçori nuk mbështeten në IE7-9 ose në versionet më të vjetra të Firefox-it.

Opera dhe IE nuk mbështesin animacione në këtë moment.

Puset

Përdorni pusin si një efekt të thjeshtë në një element për t'i dhënë atij një efekt të futur.

<div class = "mirë" > 
  ...
</div>

Ikona e mbylljes

Përdorni ikonën e përgjithshme të mbylljes për të hequr përmbajtjen si modalet dhe sinjalizimet.

×

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

Pajisjet iOS kërkojnë një href="#" për ngjarjet e klikimeve nëse më mirë përdorni një spirancë.

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