Lihlopha tsa konopo

Sebelisa lihlopha tsa likonopo ho kopanya likonopo tse ngata hammoho e le motsoako o le mong. Li hahe ka letoto la <a>kapa <button>likarolo.

Mekhoa e metle

Re khothaletsa litataiso tse latelang tsa ho sebelisa lihlopha tsa likonopo le li-toolbar:

• Kamehla sebelisa ntho e tšoanang sehlopheng se le seng sa konopo, <a>kapa <button>.
• Se ke oa kopanya likonopo tsa mebala e fapaneng sehlopheng se le seng sa likonopo.
• Sebedisa diaekhone ho ekeletsa mongolo kapa sebakeng sa mongolo, empa etsa bonnete ba hore o kenyelletsa mongolo wa alt le sehlooho moo ho loketseng.

Lihlopha tsa Likonopo tse amanang tse nang le li-dropdown (sheba ka tlase) li lokela ho bitsoa ka thoko 'me li kenyelletse le tlhokomelo ea ho theoha ho bontša boitšoaro bo reriloeng.

Mohlala oa kamehla

Mona ke kamoo HTML e batlang sehlopha se tloaelehileng sa konopo se hahiloeng ka likonopo tsa tag ea anchor:

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

Mohlala oa Toolbar

Kopanya lihlopha tsa <div class="btn-group">ho ba a <div class="btn-toolbar">bakeng sa likarolo tse rarahaneng haholoanyane.

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

Li-checkbox le litlolo tsa radio

Lihlopha tsa likonopo le tsona li ka sebetsa joalo ka liea-le-moea, moo konopo e le 'ngoe feela e ka bang teng, kapa mabokose a hlahlobang, moo palo efe kapa efe ea likonopo e ka bang teng. Sheba litokomane tsa Javascript bakeng sa seo.

Fumana javascript »

Litheolelo ka lihlopha tsa likonopo

Hlokomela! Likonopo tse nang le li-dropdown li tlameha ho phutheloa ka botsona .btn-groupka botsona ba tsona .btn-toolbarbakeng sa phetolelo e nepahetseng.

Kakaretso le mehlala

Sebelisa konopo efe kapa efe ho qala menu e theoha ka ho e beha ka har'a a .btn-grouple ho fana ka letšoao le nepahetseng la menu.

Mehlala ea mohlala

Joalo ka sehlopha sa li-button, li-markup tsa rona li sebelisa likonopo tse tloaelehileng, empa ka litlatsetso tse seng kae ho ntlafatsa setaele le ho ts'ehetsa plugin ea Bootstrap ea jQuery.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">   
    Ketso
    <span class = "caret" > </span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- lihokelo tsa menu tse theoha -->
  </ul>
</ div>

E sebetsa ka boholo ba likonopo

Likonopo tse theohang li sebetsa ka boholo bofe kapa bofe. likonopo tsa hau tsa boholo ho .btn-large, .btn-small, kapa .btn-mini.

E hloka javascript

Likonopo tse theohang li hloka hore plugin e theohang ea Bootstrap e sebetse.

Maemong a mang - joalo ka li-menu tse theohang tsa mobile li tla atoloha ka ntle ho boema-kepe. U hloka ho rarolla tlhophiso ka letsoho kapa ka javascript e tloaelehileng.

Kakaretso le mehlala

Ho aha holim'a li-styles tsa lihlopha tsa konopo le li-markup, re ka theha konopo ea ho arohana habonolo. Likonopo tse arohaneng li na le ketso e tloaelehileng ka ho le letšehali le toggle ea ho theoha ka ho le letona ka lihokelo tsa maemo.

Boholo

Sebelisa li-buttons tse eketsehileng .btn-mini, .btn-smallkapa .btn-largeho etsa boholo.

<div class = "btn-group" > 
  ...
  <ul class = "menu e theoha-ho hula-ka ho le letona" > 
    <!-- lihokelo tsa menu tse theoha -->
  </ul>
</ div>

Mehlala ea mohlala

Re holisa likonopo tse tloaelehileng ho fana ka ts'ebetso ea bobeli ea konopo e sebetsang e le mokhoa o ikhethileng oa ho theola.

<div class = "btn-group" > 
  < sehlopha sa konopo = "btn" > Ketso </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" > </span> 
  </ konopo>
  <ul class = "dropdown-menu" > 
    <!-- lihokelo tsa menu tse theoha -->
  </ul>
</ div>

Menu ea ho tlohela

Manane a theohang le ona a ka fetoloa ho tloha tlase ho ea holimo ka ho kenyelletsa sehlopha se le seng ho motsoali ea haufi oa .dropdown-menu. E tla fetola tsela ea ' .caretme e behe menu ka boeona hore e tsamaee ho tloha tlaase ho ea holimo ho e-na le ho ea holimo.

<div class = "btn-group dropup" > 
  < sehlopha sa konopo = "btn" > Tloha </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" > </span> 
  </ konopo>
  <ul class = "dropdown-menu" > 
    <!-- lihokelo tsa menu tse theoha -->
  </ul>
</ div>

Sehlopha sa motheo se matla

Likarolo tsohle tsa nav mona - li-tab, lipilisi, le manane- li arolelanoa ka mokhoa o ts'oanang oa mokhoa le mekhoa ho pholletsa le .navsehlopha.

Nako ea ho sebelisoa

Li-tab le lipilisi li ntle bakeng sa likarolo tsa litaba kapa ho tsamaea lipakeng tsa maqephe a litaba tse amanang.

Ho tsamaisana le karolo

Ho hokahanya lihokelo tsa nav, sebelisa .pull-leftkapa .pull-rightlitlelase tsa lisebelisoa. Lihlopha tsena ka bobeli li tla eketsa CSS float ka tsela e boletsoeng.

Li-tab tsa motheo

Nka <ul>li-link tse tloaelehileng 'me u kenye .nav-tabs:

• Lehae
• Profile
• Melaetsa

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

Lipilisi tsa motheo

Nka HTML e tšoanang, empa sebelisa .nav-pillsho e-na le hoo:

• Lehae
• Profile
• Melaetsa

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

Mokhoa oa ho li beha

Joalo ka ha li-tab le lipilisi li tšekaletse ka ho sa feleng, eketsa feela sehlopha sa bobeli, .nav-stacked, ho etsa hore li hlahe li patiloe ka kotloloho.

Li-tab tse behiloeng

• Lehae
• Profile
• Melaetsa

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

Lipilisi tse pakiloeng

• Lehae
• Profile
• Melaetsa

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

Li-menu tse monate li entsoe hore li be bonolo

Manane a theohang ho li-tabo le lipilisi tsa Bootstrap a bonolo haholo 'me a hloka HTML e nyane feela le plugin ea jQuery e bobebe.

E fetela leqepheng la Javascript ho bala litokomane tsa ho qala ho theoha ho Bootstrap.

Li-tab tse nang le li-dropdown

• Lehae
• Thusa
• Theosa
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "theoha"
       href = "#" >
        Theosa
        <b sehlopha = "tlhokomelo" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- mahokelo -->
    </ul>
  </li>
</ul>

Lipilisi tse nang le marotholi

• Lehae
• Thusa
• Theosa
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "theoha"
       href = "#" >
        Theosa
        <b sehlopha = "tlhokomelo" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- mahokelo -->
    </ul>
  </li>
</ul>

Navigation ea mofuta oa ts'ebeliso

Manane a Nav a fana ka mokhoa o bonolo le o bonolo oa ho theha lihlopha tsa lihokelo tsa nav tse nang le lihlooho tsa boikhethelo. Li sebelisoa hantle ka ho fetisisa mabaleng a mahlakoreng joalo ka Finder ho OS X.

Ka sebopeho, li hahiloe holim'a mekhoa e tšoanang ea nav joalo ka li-tab le lipilisi, kahoo ts'ebeliso le mokhoa oa ho ikhethela li hlakile.

Ka litšoantšo

Manane a Nav le ona a bonolo ho a hlomella ka litšoantšo. Kenya <i>tag e nepahetseng le sehlopha 'me u se u hlophisitsoe.

Likarohano tse tšekaletseng

Kenya karohano e otlolohileng ka ho theha lethathamo le se nang letho le sehlopha .divider, joalo ka:

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

Mohlala oa lethathamo la nav

Nka lethathamo la lihokelo ebe u eketsa class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Hlooho ea lethathamo
  </li>
  <li class = "active" > 
    <a href = "#"> Lehae </a> _ 
  </li>
  <li>
    <a href = "#"> Laeborari </a> _ 
  </li>
  ...
</ul>

Mohlala ka litšoantšo

Mohlala o tšoanang, empa ka <i>li-tag tsa litšoantšo.

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

Se kenyellelitsoeng

Etsa hore li-tab tsa hau li phele ka plugin e bonolo ea ho fetola lipakeng tsa litaba ka li-tab. Bootstrap e kopanya li-tabbable ka mekhoa e mene: holimo (kamehla), ka ho le letona, ka tlase le ka ho le letšehali.

Ho fetola pakeng tsa bona ho bonolo mme ho hloka feela ho fetola markup e nyane haholo.

Fade ka li-tab

Ho etsa hore li-tab li nyamele, eketsa .fadeho e 'ngoe le e 'ngoe .tab-pane.

E hloka plugin ea jQuery

Li-tab tsohle tse fumanehang li tsamaisoa ke plugin ea rona ea jQuery e bobebe. Bala haholoanyane mabapi le mokhoa oa ho etsa hore li-tabbable li phele leqepheng la litokomane tsa javascript .

Fumana Javascript →

Mohlala oa letlapa

Ho etsa hore li-tab li khonehe, theha .tab-paneID e ikhethang bakeng sa tab e 'ngoe le e' ngoe 'me u e phuthele ka .tab-content.

Bakeng sa li-tab tse tsamaellanang le letona kapa le letšehali, thatela .nav-tabsle .tab-contentho .tabbable.

Markup e otlolohileng

Ho sebelisa li-tabbable ho hloka div e phuthelang, sete ea li-tab, le sete ea li-panels tse ka khonehang tsa litaba.

<div class = "tabable" > <!-- E hlokeha feela bakeng sa di-tab tsa leqele/le letona -->  
  <ul class = "nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab"> Karolo 1 </a></li >   
    <li><a href = "#tab2" data-toggle = "tab"> Karolo 2 </a></li >  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane e sebetsang" id = "tab1" >  
      <p> Ke Karolong ea 1. </p>
    </ div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Dumela, ke kena Karolong ea 2. </p>
    </ div>
  </ div>
</ div>

Li-tab ka tlase

Fetola tatellano ea HTML 'me u kenye sehlopha ho beha li-tab ka tlase.

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

Li-tab ka ho le letšehali

Fetola sehlopha ho beha li-tab ka ho le letšehali.

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

Li-tab ka ho le letona

Fetola sehlopha ho beha li-tab ka ho le letona.

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

Navbar scaffolding

Navbar e hloka li-div tse 'maloa feela ho e hlophisa hantle bakeng sa ponts'o e tsitsitseng kapa e tsitsitseng.

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

Navbar e tsitsitseng

Lokisa navbar holimo kapa tlase sebakeng sa pono ka sehlopha sa tlatsetso ho div e ka ntle, .navbar.

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

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

Ha o kenya navbar, hopola ho ikarabella bakeng sa sebaka se patiloeng ka tlase. Kenya 40px kapa ho feta ea padding ho <body>. Etsa bonnete ba hore u eketsa sena ka mor'a motheo oa Bootstrap CSS le pele ho khetho ea CSS e arabelang.

Lebitso la lebitso

Khokahano e bonolo ea ho bonts'a lebitso la hau kapa lebitso la projeke e hloka feela tag ea ankora.

<a sehlopha = "brand" href = "#"> _  
  Lebitso la morero
</a>

Liforomo ho navbar

Ho seta hantle le ho beha foromo ka har'a navbar, eketsa lihlopha tse nepahetseng joalo ka ha ho bonts'itsoe ka tlase. Bakeng sa foromo ea kamehla, kenyelletsa .navbar-formle ebang .pull-leftkapa .pull-rightho e lekanya hantle.

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

Bakeng sa mofuta o ikhethileng oa ho batla, eketsa .navbar-searchle ho formtse .search-querykenyelletsoang bakeng sa mefuta e ikhethileng ea navbar.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-potso" setshwari sa sebaka = "Batla" >   
</ form>

Phapang ea boikhethelo ea ho arabela

Ho ipapisitse le palo ea litaba tse kaholimo ho topbar ea hau, o kanna oa batla ho kenya tšebetsong likhetho tse arabelang. Ho etsa joalo, thatela litaba tsa hau tsa nav ka har'a div, .nav-collapse.collapse, 'me u kenye konopo ea navbar toggle, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "setshelo" > 
 
      <!-- .btn-navbar e sebelisoa joalo ka toggle bakeng sa litaba tsa navbar tse putlang -->
      <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>
 
      <!-- Etsa bonnete ba hore o tlohela lebitso leo haeba o batla hore le bontshiwe -->
      <a class = "brand" href = "#"> Lebitso la morero </a>  
 
      <!-- Tsohle tseo o di batlang di patilwe ho 940px kapa ka tlase ho moo, beha ka hare ho mona -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, joalo-joalo -->
      </ div>
 
    </ div>
  </ div>
</ div>

Lihokelo tsa Nav

Lintho tsa Nav li bonolo ho li kenyelletsa ka manane a sa reroang.

<ul class = "nav" > 
  <li class = "active" > 
    <a href = "#"> Lehae </a> _ 
  </li>
  <li><a href = "#"> Sehokelo </a> </li> 
  <li><a href = "#"> Sehokelo </a> </li> 
</ul>

U ka eketsa li-divider habonolo lihokelong tsa hau tsa nav ka ntho e se nang letho ea lenane le sehlopha se bonolo. Kenya feela sena lipakeng tsa lihokelo:

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

Ho tsamaisana le karolo

Ho hokahanya nav, foromo ea ho batla, kapa mongolo, sebelisa .pull-leftkapa .pull-rightlitlelase tsa lisebelisoa. Lihlopha tsena ka bobeli li tla eketsa CSS float ka tsela e boletsoeng.

E eketsa menyetla ea ho theoha

Ho kenya li-dropdowns le li-drop-ups ho nav ho bonolo haholo, empa ho hloka ts'ebeliso ea plugin ea rona ea javascript .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          sehlopha = "toggle-toggle"
          data-toggle = "dropdown" >
          Akhaonto
          <b sehlopha = "tlhokomelo" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Fumana Javascript →

Mongolo ho navbar

Koaela mantsoe ka a <.navbar-text>, hangata holim'a <p>theke bakeng sa moeta-pele le mebala e nepahetseng.

Ke hobane'ng ha u li sebelisa

Breadcrumb navigation e sebelisoa e le mokhoa oa ho bonts'a basebelisi moo ba leng teng ka har'a sesebelisoa kapa sebaka sa marang-rang, empa eseng bakeng sa ho sesa ka tsela ea mantlha. Boloka tšebeliso ea bona e le nyenyane le e khutšoanyane hore e atlehe ka ho fetisisa.

Mehlala

Mohlala o le mong o bonts'itsoe kaha o ka bonts'oa maqepheng a mangata.

• Lehae

• Lehae /
• Laebrari

• Lehae /
• Laeborari /
• Lintlha

Markup

HTML ke lenane la hau le tloaelehileng le sa hlophisoang le nang le lihokelo.

<ul sehlopha = "breadcrumb" > 
  <li>
    <a href = "#" > Lehae </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Library </a> <span class = "divider" > / </span>   
  </li>
  <li class = "active" > Data </li> 
</ul>

Nako ea ho sebelisoa

Mokhoa o bonolo le o sa reng letho oa pagination o bululetsoeng ke Rdio, o loketse lits'ebetso le liphetho tsa lipatlisiso. Sebaka se seholo se thata ho fosa, se ka senyeha habonolo, 'me se fana ka libaka tse kholo tsa ho tobetsa.

Lihokelo tsa leqephe tse hlakileng

Lihokelo li ka khoneha 'me li sebetsa maemong a mangata ka sehlopha se nepahetseng. .disabledbakeng sa lihokelo tse sa totobaleheng le .activebakeng sa leqephe la hajoale.

Ho tsamaisana le maemo

Eketsa e 'ngoe ea lihlopha tse peli tseo u ka li khethang ho fetola lihokelo tsa pagination: .pagination-centeredle .pagination-right.

Mehlala

Karolo ea kamehla ea pagination ea fetoha 'me e sebetsa ka mefuta e mengata.

Markup

E phuthetsoe ka <div>, bohetene ke <ul>.

<div class = "pagination" > 
  <ul>
    <li><a href = "#"> E fetileng </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 = "#"> E latelang </a></li> 
  </ul>
</ div>

Mabapi le pager

Karolo ea pager ke sete ea likhokahano bakeng sa ts'ebetso e bonolo ea bohetene e nang le markup e bobebe esita le mekhoa e bobebe. E ntle bakeng sa libaka tse bonolo joalo ka li-blog kapa limakasine.

Boemo ba ho holofala ha boikhethelo

Lihokelo tsa li-pager li boetse li sebelisa sehlopha se akaretsang .disabledho tloha boheteneng.

Mohlala oa kamehla

Ka ho sa feleng, li-pager centers li hokahanya.

• E fetileng
• E 'ngoe

<ul class = "pager" > 
  <li>
    <a href = "#"> E fetileng </a> 
  </li>
  <li>
    <a href = "#"> E latelang </a> 
  </li>
</ul>

Lihokelo tse tsamaellanang

Ntle le moo, o ka hokahanya sehokelo se seng le se seng mahlakoreng:

• ← E moholo
• E ncha →

<ul class = "pager" > 
  <li class = "e fetileng" > 
    <a href = "#" > ← Khale </a> 
  </li>
  <li class = "e latelang" > 
    <a href = "#"> > Ntjhanyana → </a> 
  </li>
</ul>

About

Libeche ke likaroloana tse nyane, tse bonolo bakeng sa ho hlahisa letšoao kapa palo ea mofuta o itseng. Li fumaneha hangata ho bareki ba lengolo-tsoibila joalo ka Mail.app kapa lits'ebetsong tsa mehala bakeng sa litsebiso.

Lihlopha tse fumanehang

Bootstrap e fana ka karolo e bobebe, e tenyetsehang e bitsoang yuniti ea mohale ho bonts'a litaba sebakeng sa hau sa marang-rang. E sebetsa hantle ho mebaraka le liwebsaete tse boima ba litaba.

Markup

Qetella litaba tsa hau ka tsela e divtšoanang:

<div class = "hero-unit" > 
  <h1> Sehlooho </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primary btn-large"> 
      Ithute haholoanyane
    </a>
  </p>
</ div>

Khetla e bonolo bakeng sa h1ho beha sebaka ka nepo le ho arola likarolo tsa litaba leqepheng. E ka sebelisa h1's default small, element hammoho le likarolo tse ling tse ngata (ka mekhoa e meng).

<div class = "leqephe-hlooho" > 
  <h1> Sehlooho sa leqephe la mohlala </h1>
</ div>

Lits'oants'o tsa kamehla

Ka nako e sa lekanyetsoang, linepe tsa Bootstrap li etselitsoe ho bonts'a litšoantšo tse hokahaneng tse nang le matšoao a fokolang a hlokahalang.

Haholo customisable

Ka li-markup tse ling, hoa khoneha ho kenya mofuta ofe kapa ofe oa litaba tsa HTML joalo ka lihlooho, lirapa, kapa likonopo ho li-thumbnails.

• 

  Leibole ea li-thumbnail

  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.

  Ketso Ketso

• 

  Leibole ea li-thumbnail

  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.

  Ketso Ketso

Hobaneng u sebelisa li-thumbnails

Li -thumbnails (pele .media-gridho fihlela v1.4) li ntle bakeng sa marang-rang a lifoto kapa livideo, liphetho tsa lipatlisiso tsa litšoantšo, lihlahisoa tsa mabenkele, li-portfolio, le tse ling tse ngata. E ka ba lihokelo kapa litaba tse sa fetoheng.

E bonolo, e tenyetseha

Letšoao la li-thumbnail le bonolo - ho ulna le palo efe kapa efe ea lilikarolo ke sona se hlokahalang. E boetse e tenyetseha haholo, e lumella mofuta ofe kapa ofe oa litaba tse nang le li-markups tse ngatanyana ho thatela litaba tsa hau.

E sebelisa boholo ba kholomo ea grid

Qetellong, karolo ea li-thumbnail e sebelisa lihlopha tse seng li ntse li le teng tsa tsamaiso ea grid-joaloka .span2kapa .span3- bakeng sa ho laola boholo ba li-thumbnail.

Thepa

Joalokaha ho boletsoe pejana, letšoao le hlokahalang bakeng sa li-thumbnails le bobebe ebile le hlakile. Mona ke ho sheba litlhophiso tsa kamehla tsa litšoantšo tse hokahantsoeng :

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

Bakeng sa litaba tsa tloaelo tsa HTML ka har'a li-thumbnails, markup e fetoha hanyane. Ho lumella litaba tsa block level kae kapa kae, re fapanyetsana <a>le <div>tse ling tse joalo:

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Leibole ya manane < /h5>
      <p> Lits'oants'o tse nyane hona mona... </p>
    </ div>
  </li>
  ...
</ul>

Mehlala e meng

Lekola likhetho tsohle tsa hau ka lihlopha tse fapaneng tsa grid tse fumanehang ho uena. U ka boela ua kopanya le ho bapisa boholo bo fapaneng.

Sehlopha sa motheo se ngotsweng hape

Ka Bootstrap 2, re nolofalitse sehlopha sa motheo: .alertsebakeng sa .alert-message. Hape re fokolitse palo e tlase e hlokahalang - che <p>e batloang ka ho sa feleng, e ka ntle feela <div>.

Molaetsa o le mong oa tlhokomeliso

Bakeng sa karolo e tšoarellang haholoanyane e nang le khoutu e nyane, re tlositse ponahalo e khethollang ea tlhokomeliso ea li-block, melaetsa e tlang le li-padding tse ngata le mongolo o mongata. Sehlopha le sona se fetohile ho .alert-block.

E tsamaisana hantle le javascript

Bootstrap e tla le plugin e ntle ea jQuery e ts'ehetsang melaetsa ea tlhokomeliso, e etsang hore e lelekoe kapele le ha bonolo.

Fumana plugin »

Mehlala ea tlhokomeliso

Qetella molaetsa oa hau le aekhone ea boikhethelo ea ho koala ka div ka sehlopha se bonolo.

<div class = "temoso" > 
  < sehlopha sa konopo = "koala" data-dismiss = "temoso" > × </button>  
  <strong> Temoso! </strong> Molemo ka ho fetisisa hlahloba u self, ha u shebahale hantle haholo.
</ div>

Hlokomela! Lisebelisoa tsa iOS li hloka tlhokomeliso href="#"bakeng sa ho tlosoa ha litemoso. Netefatsa hore oa e kenyelletsa le tšobotsi ea data bakeng sa li-icon tsa anchor close. Ntle le moo, o ka sebelisa <button>ntho e nang le tšobotsi ea data, eo re khethileng ho e etsa bakeng sa litokomane tsa rona. Ha u sebelisa <button>, u tlameha ho kenyelletsa type="button"kapa liforomo tsa hau li ka 'na tsa se ke tsa fana ka tsona.

Atolosa molaetsa o tloaelehileng oa tlhokomeliso ka litlelase tse peli tseo u ka li khethang: .alert-blockbakeng sa li- padding tse ngata le li-taolo tsa mongolo le .alert-headingbakeng sa sehlooho se nyallanang.

<div class = "temoso ea tlhokomeliso-block" > 
  <a class = "close" data-dismiss = "alert" href = "#"> × </a> _   
  <h4 class = "alert-heading" > Tlhokomeliso! </h4> 
  Ho molemo hore u itlhahlobe, ha u...
</ div>

Phoso kapa kotsi

<div class = "temoso-phoso ea tlhokomeliso" > 
  ...
</ div>

Katleho

<div class = "temoso-katleho ea tlhokomeliso" > 
  ...
</ div>

Boitsebiso

<div class = "temoso ea tlhokomeliso-litaba" > 
  ...
</ div>

Motheo

Sebaka sa kamehla sa tsoelo-pele se nang le gradient e otlolohileng.

<div class = "tsoelopele" > 
  <div class = "bar" 
       style = " bophara : 60 %; " ></div> 
</ div>

E methalo

E sebelisa gradient ho theha phello e metsero (ha ho IE).

<div class = "tsoelopele-tsoelopele" > 
  <div class = "bar" 
       style = " bophara : 20 %; " ></div> 
</ div>

Animated

E nka mohlala o nang le mela 'me oa e phelisa (ha ho IE).

<div class = "tsoelopele-tsoelopele 
     e sebetsang" >
  <div class = "bar" 
       style = " bophara : 40 %; " ></div> 
</ div>

Mebala e eketsehileng

Libaka tsa tsoelo-pele li sebelisa likonopo tse tšoanang le lihlopha tsa tlhokomeliso bakeng sa mekhoa e tsitsitseng.

Mehala e methalo

Ho tšoana le mebala e tiileng, re na le mekoallo ea tsoelo-pele e fapaneng.

Boitšoaro

Libaka tsa tsoelo-pele li sebelisa liphetoho tsa CSS3, kahoo haeba u fetola bophara ka matla ka javascript, e tla fetola boholo ba eona hantle.

Haeba u sebelisa .activesehlopha, mekoallo ea hau ea .progress-stripedtsoelo-pele e tla phelisa mela e tlohang ho le letšehali ho ea ho le letona.

Tšehetso ea sebatli

Libaka tsa tsoelo-pele li sebelisa li-gradients tsa CSS3, liphetoho, le litšoantšo ho finyella liphello tsohle tsa tsona. Likarolo tsena ha li tšehetsoe ho IE7-9 kapa mefuta ea khale ea Firefox.

Opera le IE ha li tšehetse lipopae ka nako ena.

Liliba

Sebelisa seliba e le phello e bonolo holim'a element ho e fa phello ea inset.

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

Koala letšoao

Sebelisa lets'oao le akaretsang la ho koala ho qhelela litaba tse kang mekhoa le litlhokomeliso.

×

< sehlopha sa konopo = "koala" > &nako; </ konopo> 

Lisebelisoa tsa iOS li hloka href="#" bakeng sa liketsahalo tsa ho tobetsa haeba u khetha ho sebelisa ankora.

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