Mygtukų grupės

Naudokite mygtukų grupes, kad sujungtumėte kelis mygtukus kaip vieną sudėtinį komponentą. <a>Sukurkite juos naudodami keletą <button>elementų.

Geriausia praktika

Rekomenduojame laikytis šių mygtukų grupių ir įrankių juostų naudojimo gairių:

• Visada naudokite tą patį elementą vienoje mygtukų grupėje <a>arba <button>.
• Nemaišykite skirtingų spalvų mygtukų toje pačioje mygtukų grupėje.
• Naudokite piktogramas be teksto arba vietoj jo, bet būtinai įtraukite alternatyvųjį ir pavadinimo tekstą, jei reikia.

Susijusios mygtukų grupės su išskleidžiamaisiais meniu (žr. toliau) turėtų būti iškviečiamos atskirai ir visada turi turėti išskleidžiamąjį sąrašą, nurodantį numatomą elgesį.

Numatytasis pavyzdys

Štai kaip HTML ieško standartinės mygtukų grupės, sukurtos naudojant inkaro žymų mygtukus:

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

Įrankių juostos pavyzdys

Sujunkite rinkinius <div class="btn-group">į a <div class="btn-toolbar">, kad gautumėte sudėtingesnius komponentus.

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

Žymės langelis ir radijo skoniai

Mygtukų grupės taip pat gali veikti kaip radijo imtuvai, kuriuose gali būti aktyvus tik vienas mygtukas, arba žymės langeliai, kuriuose gali būti aktyvus bet koks mygtukų skaičius. Peržiūrėkite „Javascript“ dokumentus .

Gaukite javascript »

Išskleidžiamieji meniu mygtukų grupėse

Galvas aukštyn! Mygtukai su išskleidžiamaisiais meniu turi būti atskirai suvynioti į juos .btn-group, kad .btn-toolbarbūtų tinkamai atvaizduojami.

Apžvalga ir pavyzdžiai

Naudokite bet kurį mygtuką, kad suaktyvintumėte išskleidžiamąjį meniu, įtraukdami jį į a .btn-groupir nurodydami tinkamą meniu žymėjimą.

Žymėjimo pavyzdys

Panašiai kaip mygtukų grupėje, mūsų žymėjimas naudoja įprastą mygtukų žymėjimą, tačiau su keliais papildymais patobulina stilių ir palaiko „Bootstrap“ išskleidžiamąjį „jQuery“ papildinį.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "išskleidžiamasis sąrašas" href = "#" >   
    Veiksmas
    <span class = "caret" ></span> 
  </a>
  <ul class = "išskleidžiamasis meniu" > 
    <!-- išskleidžiamojo meniu nuorodos -->
  </ul>
</div>

Veikia su visų dydžių mygtukais

Išskleidžiamieji mygtukų meniu veikia bet kokio dydžio. mygtukų dydis yra .btn-large, .btn-small, arba .btn-mini.

Reikalingas javascript

Kad veiktų išskleidžiamieji mygtukų meniu, reikalingas Bootstrap išskleidžiamasis papildinys .

Kai kuriais atvejais, pvz., mobiliesiems, išskleidžiamieji meniu bus išplėsti už peržiūros srities. Lygiavimą turite išspręsti rankiniu būdu arba naudodami tinkintą JavaScript.

Apžvalga ir pavyzdžiai

Remdamiesi mygtukų grupių stiliais ir žymėjimu, galime lengvai sukurti padalijimo mygtuką. Split mygtukai turi standartinį veiksmą kairėje ir išskleidžiamąjį perjungiklį dešinėje su kontekstinėmis nuorodomis.

Dydžiai

Norėdami nustatyti dydį, naudokite papildomas mygtukų klases .btn-mini, .btn-smallarba .btn-large.

<div class = "btn-group" > 
  ...
  <ul class = "išskleidžiamasis meniu ištraukiamas dešinėn" > 
    <!-- išskleidžiamojo meniu nuorodos -->
  </ul>
</div>

Žymėjimo pavyzdys

Išplečiame įprastų mygtukų išskleidžiamuosius meniu, kad pateiktume antrą mygtuko veiksmą, kuris veikia kaip atskiras išskleidžiamojo meniu aktyviklis.

<div class = "btn-group" > 
  <button class = "btn" > Veiksmas </button> 
  <button class = "btn dropdown-toggle" data-toggle = "išskleidžiamasis sąrašas" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "išskleidžiamasis meniu" > 
    <!-- išskleidžiamojo meniu nuorodos -->
  </ul>
</div>

Išskleidžiamieji meniu

Išskleidžiamuosius meniu taip pat galima perjungti iš apačios į viršų, pridedant vieną klasę prie tiesioginio pirminio .dropdown-menu. Jis pasuks kryptį ir pakeis .caretpaties meniu padėtį, kad judėtų iš apačios į viršų, o ne iš viršaus žemyn.

<div class = "btn-group dropup" > 
  <button class = "btn" > Išmesti </button> 
  <button class = "btn dropdown-toggle" data-toggle = "išskleidžiamasis sąrašas" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "išskleidžiamasis meniu" > 
    <!-- išskleidžiamojo meniu nuorodos -->
  </ul>
</div>

Galinga bazinė klasė

Visi čia esantys navigacijos komponentai – skirtukai, tabletės ir sąrašai – turi tą patį pagrindinį žymėjimą ir stilius visoje .navklasėje.

Kada naudoti

Skirtukai ir tabletės puikiai tinka turinio skyriams arba naršyti susijusio turinio puslapiuose.

Komponentų derinimas

Norėdami sulygiuoti navigacijos nuorodas, naudokite .pull-leftarba .pull-rightnaudingumo klases. Abi klasės pridės CSS plūdę nurodyta kryptimi.

Pagrindiniai skirtukai

Paimkite reguliarias <ul>nuorodas ir pridėkite .nav-tabs:

• Namai
• Profilis
• Žinutės

<ul class = "nav nav-tabs" > 
  <li class = "aktyvus" > 
    <a href = "#" > Pagrindinis puslapis </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Pagrindinės tabletės

Paimkite tą patį HTML, bet .nav-pillsvietoj jo naudokite:

• Namai
• Profilis
• Žinutės

<ul class = "nav nav-pills" > 
  <li class = "aktyvus" > 
    <a href = "#" > Pagrindinis puslapis </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Kaip juos sukrauti

Kadangi pagal numatytuosius nustatymus skirtukai ir tabletės yra horizontalios, tiesiog pridėkite antrą klasę , .nav-stackedkad jie atrodytų vertikaliai sukrauti.

Sukrauti skirtukai

• Namai
• Profilis
• Žinutės

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

Sukrautos tabletės

• Namai
• Profilis
• Žinutės

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

Paprastas gausus meniu

„Bootstrap“ skirtukų ir tablečių išskleidžiamieji meniu yra labai paprasti, jiems reikia tik šiek tiek papildomo HTML ir lengvo „jQuery“ papildinio.

Eikite į „Javascript“ puslapį, kad perskaitytumėte dokumentus apie inicijavimo išskleidžiamuosius meniu „Bootstrap“.

Skirtukai su išskleidžiamaisiais meniu

• Namai
• Pagalba
• Išskleidžiamasis meniu
  • Veiksmas
  • Kitas veiksmas
  • Čia dar kažkas
  • Atskira nuoroda

<ul class = "nav nav-tabs" > 
  <li class = "išskleidžiamasis sąrašas" > 
    <a class = "išskleidžiamasis meniu perjungimas" 
       data-toggle = "išskleidžiamasis sąrašas"
       href = "#" >
        Išskleidžiamasis meniu
        <b klasė = "caret" ></b> 
      </a>
    <ul class = "išskleidžiamasis meniu" > 
      <!-- nuorodos -->
    </ul>
  </li>
</ul>

Tabletės su išskleidžiamaisiais meniu

• Namai
• Pagalba
• Išskleidžiamasis meniu
  • Veiksmas
  • Kitas veiksmas
  • Čia dar kažkas
  • Atskira nuoroda

<ul class = "nav nav-pills" > 
  <li class = "išskleidžiamasis sąrašas" > 
    <a class = "išskleidžiamasis meniu perjungimas" 
       data-toggle = "išskleidžiamasis sąrašas"
       href = "#" >
        Išskleidžiamasis meniu
        <b klasė = "caret" ></b> 
      </a>
    <ul class = "išskleidžiamasis meniu" > 
      <!-- nuorodos -->
    </ul>
  </li>
</ul>

Programos stiliaus navigacija

Naršymo sąrašai yra paprastas ir paprastas būdas sukurti naršymo nuorodų grupes su pasirenkamomis antraštėmis. Juos geriausia naudoti šoninėse juostose, pvz., OS X „Finder“.

Struktūriškai jie sukurti pagal tuos pačius pagrindinius navigacijos stilius, kaip ir skirtukai ir tabletės, todėl naudoti ir tinkinti yra paprasta.

Su piktogramomis

Navigacijos sąrašus taip pat lengva aprūpinti piktogramomis. Pridėkite tinkamą <i>žymą su klase ir viskas.

Horizontalūs skirstytuvai

Pridėkite horizontalų skirstytuvą sukurdami tuščią sąrašo elementą su klase .divider, pavyzdžiui:

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

Navigacijos sąrašo pavyzdys

Paimkite nuorodų sąrašą ir pridėkite class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Sąrašo antraštė
  </li>
  <li class = "aktyvus" > 
    <a href = "#" > Pagrindinis puslapis </a> 
  </li>
  <li>
    <a href = "#" > Biblioteka </a> 
  </li>
  ...
</ul>

Pavyzdys su piktogramomis

Tas pats pavyzdys, bet su <i>piktogramų žymomis.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "ikonų knyga" ></i> 
      biblioteka
    </a>
  </li>
  ...
</ul>

Kas įtraukta

Pagyvinkite savo skirtukus naudodami paprastą papildinį, skirtą skirtukuose perjungti turinį. „Bootstrap“ integruoja keturių stilių skirtukus: viršuje (numatytasis), dešinėje, apačioje ir kairėje.

Keisti juos lengva ir reikia pakeisti tik labai mažai žymėjimo.

Išblukti skirtukuose

Jei norite, kad skirtukai išnyktų, pridėkite .fadeprie kiekvieno .tab-pane.

Reikia jQuery papildinio

Visi skirtukai su skirtukais yra aprūpinti mūsų lengvu jQuery papildiniu. Skaitykite daugiau apie tai, kaip atgaivinti skirtukus su skirtukais „Javascript“ dokumentų puslapyje .

Gaukite javascript →

Tabletinis pavyzdys

Kad skirtukai būtų rodomi skirtukuose, .tab-panekiekvienam skirtukui sukurkite unikalų ID ir apvyniokite juos .tab-content.

Jei norite sulygiuoti dešinėje arba kairėje skirtukų, apvyniokite .nav-tabsir .tab-contentį .tabbable.

Paprastas žymėjimas

Norint naudoti skirtukus, kuriuose pateikiami skirtukai, reikalingas įvyniojimo elementas, skirtukų rinkinys ir turinio stulpelių rinkinys.

<div class = "tabable" > <!-- Reikalingas tik kairiesiems / dešiniesiems skirtukams -->  
  <ul class = "nav nav-tabs" > 
    <li class = "aktyvus" ><a href = "#tab1" data-toggle = "skirtukas" > 1 skyrius </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > 2 skiltis </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Esu 1 skyriuje. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Sveiki, esu 2 skyriuje. </p>
    </div>
  </div>
</div>

Skirtukai apačioje

Apverskite HTML tvarką ir pridėkite klasę, kad skirtukai būtų apačioje.

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

Skirtukai kairėje

Pakeiskite klasę, kad skirtukai būtų rodomi kairėje.

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

Skirtukai dešinėje

Sukeiskite klasę, kad skirtukai būtų dešinėje.

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

Navbar pastoliai

Naršymo juostai reikia tik kelių divų, kad ji būtų gerai struktūrizuota statiniam arba fiksuotam ekranui.

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

Pataisyta naršymo juosta

Pritvirtinkite naršymo juostą peržiūros srities viršuje arba apačioje naudodami papildomą klasę atokiausioje dalyje .navbar.

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

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

Kai pritvirtinate naršymo juostą, nepamirškite atsižvelgti į paslėptą sritį po ja. Pridėkite 40 pikselių ar daugiau užpildymo prie <body>. Būtinai pridėkite tai po pagrindinio Bootstrap CSS ir prieš pasirenkamą reaguojantį CSS.

Markės pavadinimas

Paprastai nuorodai, kad būtų rodomas jūsų prekės ženklo ar projekto pavadinimas, reikia tik prierašo žymos.

<a class = "prekės ženklas" href = "#" >  
  Projekto pavadinimas
</a>

Formos naršymo juostoje

Norėdami tinkamai formuoti ir išdėstyti formą naršymo juostoje, pridėkite atitinkamas klases, kaip parodyta toliau. Jei norite naudoti numatytąją formą, įtraukite .navbar-formir arba .pull-leftarba .pull-right, kad ją tinkamai sulygiuotumėte.

<form class = "navbar-form pull-left" > 
  <įvesties tipas = "text" class = "span2" >  
</form>

Norėdami gauti labiau pritaikytą paieškos formą, naršymo juostoje pridėkite .navbar-searchprie specializuotų stilių įvesties ir form..search-query

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

Pasirenkamas reaguojantis variantas

Atsižvelgiant į turinio kiekį viršutinėje juostoje, galbūt norėsite įdiegti reaguojančias parinktis. Norėdami tai padaryti, apvyniokite naršymo turinį į div, .nav-collapse.collapseir pridėkite naršymo juostos perjungimo mygtuką .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "konteineris" > 
 
      <!-- .btn-navbar naudojama kaip sutraukto naršymo juostos turinio perjungiklis -->
      <a class = "btn btn-navbar" data-toggle = "sutraukti" data-target = ".nav-collapse" >   
        <span class = "piktogramų juosta" ></span> 
        <span class = "piktogramų juosta" ></span> 
        <span class = "piktogramų juosta" ></span> 
      </a>
 
      <!-- Būtinai palikite prekės ženklą, jei norite, kad jis būtų rodomas -->
      <a class = "brand" href = "#" > Projekto pavadinimas </a>  
 
      <!-- Viskas, ko norite paslėpti 940 pikselių ar mažesniu raiška, įdėkite čia -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form ir tt -->
      </div>
 
    </div>
  </div>
</div>

Navigacijos nuorodos

Navigacijos elementus paprasta pridėti naudojant nerūšiuotus sąrašus.

<ul class = "nav" > 
  <li class = "aktyvus" > 
    <a href = "#" > Pagrindinis puslapis </a> 
  </li>
  <li><a href = "#" > Nuoroda </a></li> 
  <li><a href = "#" > Nuoroda </a></li> 
</ul>

Galite lengvai pridėti skirstytuvus prie navigacijos nuorodų naudodami tuščią sąrašo elementą ir paprastą klasę. Tiesiog pridėkite tai tarp nuorodų:

<ul class = "nav" > 
  ...
  <li class = "daliklis-vertikalė" ></li> 
  ...
</ul>

Komponentų derinimas

Norėdami sulygiuoti navigaciją, paieškos formą ar tekstą, naudokite .pull-leftarba .pull-rightnaudingumo klases. Abi klasės pridės CSS plūdę nurodyta kryptimi.

Išskleidžiamųjų meniu pridėjimas

Pridėti išskleidžiamuosius ir išskleidžiamuosius meniu prie navigacijos yra labai paprasta, tačiau tam reikia naudoti „ Javascript“ papildinį .

<ul class = "nav" > 
  <li class = "išskleidžiamasis sąrašas" > 
    <a href = "#" 
          klasė = "išskleidžiamasis meniu perjungimas"
          data-toggle = "išskleidžiamasis meniu" >
          sąskaita
          <b klasė = "caret" ></b> 
    </a>
    <ul class = "išskleidžiamasis meniu" > 
      ...
    </ul>
  </li>
</ul>

Gaukite javascript →

Tekstas naršymo juostoje

Apvyniokite teksto eilutes į <.navbar-text>, paprastai ant <p>žymos, kad būtų tinkama pradžia ir spalva.

Kam juos naudoti

Naršymas naršymo žingsnyje naudojamas kaip būdas parodyti naudotojams, kur jie yra programoje ar svetainėje, bet ne kaip pagrindinė naršymo funkcija. Naudokite juos retai ir glaustai, kad jie būtų veiksmingiausi.

Pavyzdžiai

Rodomas vienas pavyzdys, kuris gali būti rodomas keliuose puslapiuose.

• Namai

• Pagrindinis puslapis /
• biblioteka

• Pagrindinis puslapis /
• biblioteka /
• Duomenys

Žymėjimas

HTML yra jūsų standartinis netvarkingas sąrašas su nuorodomis.

<ul class = "džiūvėsėlis" > 
  <li>
    <a href = "#" > Pagrindinis puslapis </a> <span class = "daliklis" > / </span>   
  </li>
  <li>
    <a href = "#" > Biblioteka </a> <span class = "daliklis" > / </span>   
  </li>
  <li class = "aktyvus" > Duomenys </li> 
</ul>

Kada naudoti

Itin paprastas ir minimalaus stiliaus puslapių numeravimas, įkvėptas Rdio, puikiai tinka programoms ir paieškos rezultatams. Didelis blokas yra sunkiai nepastebimas, lengvai keičiamas ir suteikia dideles paspaudimų sritis.

Nurodytos puslapių nuorodos

Nuorodos yra pritaikomos ir veikia įvairiomis aplinkybėmis su tinkama klase. .disablednespaudžiamoms nuorodoms ir .activedabartiniam puslapiui.

Lankstus derinimas

Norėdami pakeisti puslapių nuorodų lygiavimą, pridėkite vieną iš dviejų pasirenkamų klasių: .pagination-centeredir .pagination-right.

Pavyzdžiai

Numatytasis puslapių spausdinimo komponentas yra lankstus ir veikia įvairiais variantais.

Žymėjimas

Suvyniotas į <div>, puslapių skaičius yra tik <ul>.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Ankstesnis </a></li> 
    <li class = "aktyvus" > 
      <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 = "#" > Kitas </a></li> 
  </ul>
</div>

Apie pagerį

Puslapio gaviklio komponentas yra nuorodų rinkinys, skirtas paprastam puslapių puslapių spausdinimui su lengvu žymėjimu ir dar lengvesniais stiliais. Tai puikiai tinka paprastoms svetainėms, pvz., tinklaraščiams ar žurnalams.

Neprivaloma išjungta būsena

Gaviklio nuorodose taip pat naudojama bendroji .disabledpuslapių rūšiavimo klasė.

Numatytasis pavyzdys

Pagal numatytuosius nustatymus gaviklis sutelkia nuorodas.

• Ankstesnis
• Kitas

<ul class = "gaviklis" > 
  <li>
    <a href = "#" > Ankstesnis </a> 
  </li>
  <li>
    <a href = "#" > Kitas </a> 
  </li>
</ul>

Sulygiuotos nuorodos

Arba galite lygiuoti kiekvieną nuorodą į šonus:

• ← Senesnis
• Naujesnis →

<ul class = "gaviklis" > 
  <li class = "ankstesnis" > 
    <a href = "#" > ← Senesnis </a> 
  </li>
  <li class = "kitas" > 
    <a href = "#" > Naujesnis → </a> 
  </li>
</ul>

Apie

Ženkliukai yra maži, paprasti komponentai, skirti rodyti tam tikros rūšies indikatorių ar skaičių. Jie dažniausiai randami el. pašto programose, pvz., Mail.app, arba programose mobiliesiems, skirtose tiesioginiams pranešimams.

Galimos klasės

„Bootstrap“ yra lengvas, lankstus komponentas, vadinamas „hero unit“, skirtas jūsų svetainės turiniui rodyti. Tai gerai veikia rinkodaros ir turinio svetainėse.

Žymėjimas

Apvyniokite savo turinį divtaip:

<div class = "didvyrio vienetas" > 
  <h1> Antraštė </h1>
  <p> Žymės eilutė </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Sužinokite daugiau
    </a>
  </p>
</div>

Paprastas apvalkalas, skirtas h1tinkamai atskirti ir segmentuoti turinio dalis puslapyje. Jis gali naudoti h1numatytąjį smallelementą ir daugumą kitų komponentų (su papildomais stiliais).

<div class = "puslapio antraštė" > 
  <h1> Puslapio antraštės pavyzdys </h1>
</div>

Numatytosios miniatiūros

Pagal numatytuosius nustatymus „Bootstrap“ miniatiūros yra skirtos rodyti susietus vaizdus su minimaliu reikalingu žymėjimu.

Labai pritaikoma

Naudojant šiek tiek papildomo žymėjimo, į miniatiūras galima pridėti bet kokio HTML turinio, pvz., antraščių, pastraipų ar mygtukų.

• 

  Miniatiūros etiketė

  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.

  Veiksmas Veiksmas

• 

  Miniatiūros etiketė

  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.

  Veiksmas Veiksmas

Kodėl verta naudoti miniatiūras

Miniatiūros (anksčiau .media-gridiki 1.4 versijos) puikiai tinka nuotraukų ar vaizdo įrašų tinkleliams, vaizdų paieškos rezultatams, mažmeninės prekybos produktams, portfeliams ir dar daugiau. Tai gali būti nuorodos arba statinis turinys.

Paprastas, lankstus žymėjimas

Miniatiūrų žymėjimas yra paprastas – viskas, ko reikia , ulsu bet kokiu elementų skaičiumi . liJis taip pat itin lankstus, leidžiantis bet kokio tipo turiniui, naudojant tik šiek tiek daugiau žymėjimo turinio apvyniojimui.

Naudojami tinklelio stulpelių dydžiai

Galiausiai, miniatiūrų komponentas naudoja esamas tinklelio sistemos klases, pvz., .span2arba .span3– miniatiūrų matmenims valdyti.

Pažymėjimas

Kaip minėta anksčiau, reikalingas miniatiūrų žymėjimas yra lengvas ir paprastas. Štai numatytosios susietų vaizdų sąrankos peržiūra :

<ul class = "miniatiūros" > 
  <li class = "span3" > 
    <a href = "#" class = "miniatiūra" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Priskirto HTML turinio miniatiūrose žymėjimas šiek tiek pasikeičia. Norėdami leisti bloko lygio turinį bet kur, pakeičiame <a>į <div>tokį:

<ul class = "miniatiūros" > 
  <li class = "span3" > 
    <div class = "miniatiūra" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Miniatiūros etiketė </h5>
      <p> Miniatiūros antraštė čia... </p>
    </div>
  </li>
  ...
</ul>

Daugiau pavyzdžių

Ištirkite visas savo galimybes naudodamiesi įvairiomis jums prieinamomis tinklelio klasėmis. Taip pat galite maišyti ir derinti skirtingus dydžius.

Perrašyta bazinė klasė

Su Bootstrap 2 supaprastinome bazinę klasę: .alertvietoj .alert-message. Taip pat sumažinome minimalų reikalingą žymėjimą – <p>pagal numatytuosius nustatymus nereikalaujama, tik išorinis <div>.

Vienas įspėjimo pranešimas

Siekdami patvaresnio komponento su mažiau kodo, pašalinome skirtingą blokavimo įspėjimų, pranešimų, kuriuose yra daugiau užpildymo ir paprastai daugiau teksto, išvaizdą. Klasė taip pat pasikeitė į .alert-block.

Puikiai dera su javascript

„Bootstrap“ yra su puikiu „jQuery“ papildiniu, kuris palaiko įspėjimo pranešimus, todėl juos galima greitai ir paprastai atmesti.

Gaukite papildinį »

Įspėjimų pavyzdžiai

Įtraukite savo pranešimą ir pasirenkamą uždarymo piktogramą į „div“ naudodami paprastą kursą.

<div class = "alert" > 
  <button class = "uždaryti"   data-dismiss = "alert" > × </button>
  <strong> Įspėjimas! </strong> Geriausia pasitikrinti, ar neatrodote per gerai.
</div>

Galvas aukštyn! „iOS“ įrenginiuose reikia href="#"atmesti įspėjimus. Būtinai įtraukite jį ir duomenų atributą prierašo uždarymo piktogramoms. Arba galite naudoti <button>elementą su duomenų atributu, kurį pasirinkome savo dokumentams. Kai naudojate <button>, turite įtraukti type="button"arba jūsų formos negali būti pateiktos.

Lengvai išplėskite standartinį įspėjimo pranešimą dviem pasirenkamomis klasėmis: .alert-blockdaugiau užpildymo ir teksto valdiklių bei .alert-headingatitinkamos antraštės.

<div class = "alert alert-block"  >
  <a class = "uždaryti" data-dismiss = "alert" href = "#" > ×    </a>
  <h4 class = "alert-heading" > Įspėjimas! </h4>
  Geriausia pasitikrinti save, tu nesi...
</div>

Klaida arba pavojus

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

Sėkmė

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

Informacija

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

Pagrindinis

Numatytoji eigos juosta su vertikaliu gradientu.

<div class = "pažanga" > 
  <div class = "baras" 
       style = " plotis : 60 %; " ></div> 
</div>

Dryžuotas

Naudoja gradientą, kad sukurtų dryžuotą efektą (be IE).

<div class = "progreso progreso juostelės" > 
  <div class = "baras" 
       style = " plotis : 20 %; " ></div> 
</div>

Animuoti

Paima dryžuotą pavyzdį ir jį animuoja (be IE).

<div class = "pažanga, progresija dryžuota 
     aktyvus" >
  <div class = "baras" 
       style = " plotis : 40 %; " ></div> 
</div>

Papildomos spalvos

Pažangos juostose naudojami tie patys mygtukai ir įspėjimų klasės, kad būtų nuoseklūs stiliai.

Dryžuotos juostos

Panašiai kaip ir vienspalvių spalvų, turime įvairių dryžuotų eigos juostų.

Elgesys

Eigos juostose naudojami CSS3 perėjimai, taigi, jei dinamiškai koreguosite plotį naudodami „Javascript“, jo dydis bus sklandžiai pakeistas.

Jei naudojate .activeklasę, .progress-stripedeigos juostos animuos juosteles iš kairės į dešinę.

Naršyklės palaikymas

Pažangos juostose naudojami CSS3 gradientai, perėjimai ir animacijos, kad būtų pasiekti visi jų efektai. Šios funkcijos nepalaikomos IE7-9 ar senesnėse „Firefox“ versijose.

„Opera“ ir „IE“ šiuo metu nepalaiko animacijų.

Šuliniai

Naudokite šulinį kaip paprastą elemento efektą, kad suteiktumėte jam įterptinį efektą.

<div klasė = "gerai" > 
  ...
</div>

Uždaryti piktogramą

Jei norite atsisakyti turinio, pvz., modalų ir įspėjimų, naudokite bendrąją uždarymo piktogramą.

×

<button class = "uždaryti" > × </button> 

„iOS“ įrenginiuose paspaudimų įvykiams reikalingas „href="#", jei verčiau naudojate prieraišą.

<a class = "uždaryti" href = "#" > × </a>