Tusaale

La beddeli karo, liiska macnaha guud ee muujinaya liisaska isku xirka. Lagu sameeyay is dhexgal leh hoos udhaca JavaScript plugin .

<ul class = "Dropdown-menu" doorka = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Ficil </a></li>  
  <li><a tabindex = "-1" href = "#" > Ficil kale </a></li>  
  <li><a tabindex = "-1" href = "#" > Wax kale halkan </a></li>  
  <li class = "qaybiye" </li> 
  <li><a tabindex = "-1" href = "#" > Xiriirinta goonida ah </a></li>  
</ul>

Calaamadayn

Markaad eegto kaliya liiska hoos u dhaca, waa kan HTML-ka loo baahan yahay. Waxaad u baahan tahay inaad ku duubto kiciyaha hoos u dhaca iyo liiska hoos u dhaca ee gudaha .dropdown, ama shay kale oo sheegaya position: relative;. Kadib samee kaliya menu-ka.

<div class = "hoos u dhac" > 
  <!-- Isku xidhka ama badhanka si aad u beddesho hoos u dhaca -->
  <ul class = "Dropdown-menu" doorka = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Ficil </a></li>  
    <li><a tabindex = "-1" href = "#" > Ficil kale </a></li>  
    <li><a tabindex = "-1" href = "#" > Wax kale halkan </a></li>  
    <li class = "qaybiye" </li> 
    <li><a tabindex = "-1" href = "#" > Xiriirinta goonida ah </a></li>  
  </ul>
</div>

Ikhtiyaarada

Ku toosi menus dhinaca midig oo ku dar waxa ku jira heerar dheeraad ah oo hoos u dhigis ah.

Isku toosinta menu-yada

Ku dar .pull-righta .dropdown-menuto midig toosi liiska hoos u dhaca.

<ul class = "Dropdown-menu pull-right" doorka = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Ikhtiyaarada liiska naafada

Ku dar .disabledhoos <li>-hoosaadka si aad u joojiso xidhiidhka

<ul class = "Dropdown-menu" doorka = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Xiriirinta joogtada ah </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Xiriirinta naafada </a></li>   
  <li><a tabindex = "-1" href = "#" > Xiriiriye kale </a></li>  
</ul>

Liiska hoose ee hoos u dhaca

Ku dar heerar dheeri ah oo liiska hoos-u-dhaca ah, oo ka muuqda dul heehaab la mid ah kuwa OS X, oo leh qaar ka mid ah ku-kordhinta fudud. Ku dar .dropdown-submenumid kasta lioo ku jira liiska hoos u dhaca ee jira qaabaynta tooska ah.

<ul class = "Dropdown-menu" doorka = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "Dropdown-submenu" > 
    <a tabindex = "-1" href = "#" > Ikhtiyaar badan </a>  
    <ul class = "Dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Tusaalooyinka

Laba ikhtiyaar oo aasaasi ah, oo ay weheliyaan laba kala duwanaansho gaar ah oo dheeraad ah.

Kooxda hal badhan

Ku duub badhamada taxane ah .btngudaha .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Bidix </button> 
  <button class = "btn" > Dhexe </button> 
  <button class = "btn" > Midig </button> 
</div>

Kooxo badhan oo badan

Isku-dubbarid isku-dar ah <div class="btn-group">qaybo <div class="btn-toolbar">aad u adag.

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

Kooxaha badhanka toosan

Samee badhamada u muuqda kuwo toosan oo is dulsaaran halkii ay ahaan lahaayeen kuwo toosan.

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

Sanduuqa hubinta iyo dhadhanka raadiyaha

Kooxaha badhanka waxay sidoo kale u shaqayn karaan raadiyayaal, halkaas oo hal badhan oo keliya uu shaqayn karo, ama sanduuqyada hubinta, halkaasoo tiro kasta oo badhammo ahi ay shaqayn karaan. U eeg dokumentiyada JavaScript taas.

Hoos u dhigista kooxaha badhanka

Madaxa kor u qaad!Badhamada hoos-u-dhaca leh waa in si gaar ah loogu duuduubo iyaga oo u gaar .btn-groupah .btn-toolbarsi loo sameeyo.

Dulmar iyo tusaaleyaal

Isticmaal badhan kasta si aad u kiciso liiska hoos u dhaca adiga oo gelinaya gudaha a .btn-groupoo bixisa calaamadaynta liiska saxda ah.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Ficil
    <span class = "daryeel" </span> 
  </a>
  <ul class = "Dropdown-menu" > 
    <!-- liiska hoos-u-dhaca links-->
  </ul>
</div>

Wuxuu la shaqeeyaa dhammaan cabbirrada badhanka

Hoos-u-dhacyada badhanka waxay shaqeeyaan cabbir kasta: .btn-large, .btn-small, ama .btn-mini.

Wuxuu u baahan yahay JavaScript

Hoos-u-dhaca badhanka wuxuu u baahan yahay Bootstrap dropdown plugin si uu u shaqeeyo.

Xaaladaha qaarkood-sida mobilada- menu-yada hoos u dhaca ayaa ku fidi doona meel ka baxsan goobta daawashada. Waxaad u baahan tahay inaad ku xalliso toosinta gacanta ama JavaScript-ka caadiga ah.

Hoos udhaca badhanka

Ku dhisidda qaababka kooxda badhanka iyo calaamadaynta, waxaan si fudud u abuuri karnaa badhanka kala qaybsan. Badhamada kala qaybsan waxay ka kooban yihiin fal caadi ah oo bidixda ah iyo hoos u rogid dhanka midig ah oo leh xidhiidhin guud.

<div class = "btn-group" > 
  <button class = "btn" > Ficil </button> 
  <button class = "btn dropdown-toggle" data-toggle = "hoos u dhac" >  
    <span class = "daryeel" </span> 
  </button>
  <ul class = "Dropdown-menu" > 
    <!-- liiska hoos-u-dhaca links-->
  </ul>
</div>

Cabbirrada

Ka faa'iidayso casharrada badhanka dheeraadka ah .btn-mini, .btn-small, ama .btn-largecabbiridda.

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Ficil </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "hoos u dhac" >  
    <span class = "daryeel" </span> 
  </button>
  <ul class = "Dropdown-menu" > 
    <!-- liiska hoos-u-dhaca links-->
  </ul>
</div>

menus tuur

Liiska hoos-u-dhaca sidoo kale waxaa laga rogi karaa hoosta kor iyadoo lagu darayo hal fasal waalidka dhow ee .dropdown-menu. Waxay rogi doontaa jihada .caretoo dib u dejin doonta menu laftiisa si ay uga dhaqaaqdo xagga hoose kor halkii ay ka ahayd sare hoos.

<div class = "btn-group dropup" > 
  <button class = "btn" > Tuur < /button> 
  <button class = "btn dropdown-toggle" data-toggle = "hoos u dhac" >  
    <span class = "daryeel" </span> 
  </button>
  <ul class = "Dropdown-menu" > 
    <!-- liiska hoos-u-dhaca links-->
  </ul>
</div>

Qalabyo fudud oo isku mid ah, fasallo kala duwan

Dhammaan qaybaha nav-ga halkan-tabaha, kiniiniyada, iyo liisaska- waxay wadaagaan isla calaamadaynta saldhigga iyo qaababka fasalka .navdhexdiisa.

tabs aasaasiga ah

Si joogto <ul>ah u qaado xiriiriyeyaasha oo ku dar .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "firfircoon" > 
    <a href = "#" > Guriga </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Kiniinnada aasaasiga ah

Qaado HTML isku mid ah, laakiin isticmaal .nav-pillsbeddelka:

<ul class = "nav nav-pills" > 
  <li class = "firfircoon" > 
    <a href = "#" > Guriga </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Gobolka naafada

Qayb kasta oo nav ah (tabs, pills, or list), ku dar .disabledxiriirinta cawl oo wax saameyn ah ma leh . Xiriirinta waxay ahaan doonaan kuwo la riixi karo, si kastaba ha ahaatee, ilaa aad ka saarto hrefsifada mooyaane. Haddii kale, waxaad hirgelin kartaa JavaScript-ka caadiga ah si aad uga hortagto gujisyadaas.

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" ><a href = "#" > Guriga </a></li>  
  ...
</ul>

Isku toosinta qaybaha

Si aad isku xidhidhiyaha nav, isticmaal fasalada utility .pull-leftama . .pull-rightLabada fasalba waxay ku dari doonaan sabayn CSS jihada la cayimay.

La fadhiisan karo

Sida tabs iyo kaniiniyadu ay siman yihiin, kaliya ku dar fasal labaad, .nav-stacked, si ay ugu muuqdaan kuwo toosan.

tabs is dulsaaran

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

Kiniinno is dulsaaran

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

Hoos u dhac

Ku dar liiska hoos-u-dhaca oo leh HTML yar oo dheeri ah iyo dul-dhigayaasha JavaScript plugin .

Tabs leh hoos u dhac

<ul class = "nav nav-tabs" > 
  <li class = "hoos u dhac" > 
    <a class = "Dropdown-Toggle" 
       data-toggle = "hoos u dhac"
       href = "#" >
        Hoos u dhigid
        <b class = "daryeel" </b> 
      </a>
    <ul class = "Dropdown-menu" > 
      <!-- links -->
    </ul>
  </li>
</ul>

Kiniinnada hoos u dhaca

<ul class = "nav nav-pills" > 
  <li class = "hoos u dhac" > 
    <a class = "Dropdown-Toggle" 
       data-toggle = "hoos u dhac"
       href = "#" >
        Hoos u dhigid
        <b class = "daryeel" </b> 
      </a>
    <ul class = "Dropdown-menu" > 
      <!-- links -->
    </ul>
  </li>
</ul>

Liiska Nav

Hab fudud oo fudud oo lagu dhiso kooxo xiriiriye nav ah oo leh madax ikhtiyaari ah. Waxay si fiican ugu isticmaalaan dhinacyada sida Finder ee OS X.

Tusaalaha liiska nav

Qaado liiska xiriiriyeyaasha oo ku dar class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Liiska madaxa </li> 
  <li class = "firfircoon" ><a href = "#" > Guriga </a></li>  
  <li><a href = "#" > Library </a></li> 
  ...
</ul>

OgowBuul ku dhex jira liiska nav, ku dar mid class="nav nav-list"kasta oo buul ah <ul>.

Qaybiyayaal toosan

Ku dar qaybiye toosan adiga oo fasalka la samaynaya liis madhan .divider, sida:

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

Nav la taaban karo

Keen tabahaaga nolosha adoo wata plugin fudud si aad ugu dhex rogto waxa ku jira tabs Bootstrap wuxuu isku daraa tabs tabs oo afar nooc ah: sare (default), midig, hoose, iyo bidix.

Tusaalaha la taaban karo

Si loo sameeyo tabs tab, samee .tab-paneaqoonsi u gaar ah tab kasta oo ku duub .tab-content.

<div class = "tabbable" > <!-- Kaliya waxaa looga baahan yahay tabs bidix/midig -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Qaybta 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Qaybta 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Waxaan ku jiraa Qaybta 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Howdy, waxaan ku jiraa Qaybta 2. </p>
    </div>
  </div>
</div>

Ku libdhi tabs

Si aad tabsku u libdhaan, ku dar .fademid kasta .tab-pane.

Wuxuu u baahan yahay plugin jQuery

Dhammaan tabsiyada tababbarka ah waxaa ku shaqeeya pluginkeena jQuery ee fudud. Ka akhri wax badan oo ku saabsan sida loo keeno tabs tabs nolosha bogga dukumeenti JavaScript .

Jiho kasta loo tabcan karo

Tabs xagga hoose

U rogo nidaamka HTML oo ku dar fasal si aad tabs ugu dhejiso xagga hoose.

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

Tabaha bidixda

Ku beddel fasalka si aad tabs ugu dhejiso bidixda.

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

Tabaha dhanka midig

Ku beddel fasalka si aad tabs ugu dhejiso midigta.

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

Navbar aasaasiga ah

Si loo bilaabo, navbars-ku waa taagan yihiin (kuma jiraan xagga sare) waxaana ku jira taageerada magaca mashruuca iyo hagidda aasaasiga ah. Dhig meel kasta oo ka mid ah a .container, kaas oo dejinaya ballaca boggaaga iyo waxa ku jira.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Cinwaanka </a>  
    <ul class = "nav" > 
      <li class = "firfircoon" ><a href = "#" > Guriga </a></li>  
      <li><a href = "#" > Isku xidhka </a></li> 
      <li><a href = "#" > Isku xidhka </a></li> 
    </ul>
  </div>
</div>

Qaybaha Navbar

Summada

Xiriirinta fudud ee lagu tuso astaantaada ama magaca mashruuca waxay u baahan tahay summada barroosinka.

<a class = "brand" href = "#" > Magaca mashruuca </a>  

Xiriirinta Nav

Alaabta Nav way fududahay in lagu daro liisaska aan la dalban.

<ul class = "nav" > 
  <li class = "firfircoon" > 
    <a href = "#" > Guriga </a> 
  </li>
  <li><a href = "#" > Isku xidhka </a></li> 
  <li><a href = "#" > Isku xidhka </a></li> 
</ul>

Waxaad si fudud ugu dari kartaa qaybiyayaal isku xidhkaaga nav oo wata shay liis maran iyo fasal fudud. Kaliya ku dar tan inta u dhaxaysa xiriiriyeyaasha:

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

Foomamka

Si aad si habboon u qaabayso oo aad foom ugu dhejiso gudaha navbar, ku dar fasallada ku habboon sida hoos ku cad. Foomka caadiga ah, ku dar .navbar-formoo midkood .pull-leftama .pull-rightsi sax ah u waafajiyo.

< class class = "navbar-form jiid-bidix" > 
  <input type = "text" class = "span2" >  
  <button type = "gudbi" class = "btn" > Gudbi </button>  
</form>

Foomka raadinta

Si aad u hesho foom goobid oo aad loo habeeyey, ku dar .navbar-searchgelinta formiyo .search-querygelinta qaababka gaarka ah ee navbar-ka.

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

Isku toosinta qaybaha

Isku hagaaji xiriirinta nav, foomka raadinta, ama qoraalka, isticmaal .pull-leftfasallada .pull-rightutility-ga. Labada fasalba waxay ku dari doonaan sabayn CSS jihada la cayimay.

Isticmaalka hoos u dhaca

Ku dar hoos-u-dhacyo iyo hoos-u-dhacyo nav ah oo leh waxoogaa calaamadayn ah iyo hoos-u- dhacyada JavaScript plugin .

<ul class = "nav" > 
  <li class = "hoos u dhac" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "hoos u dhac" >   
      Xisaab
      <b class = "daryeel" </b> 
    </a>
    <ul class = "Dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Booqo dukumeentiyada hoos u dhaca JavaScript si aad u hesho calaamadayn dheeraad ah iyo macluumaad ku saabsan wicitaanka hoos u dhaca.

Qoraal

Ku duub xargaha qoraalka curiye leh .navbar-text, badiyaa <p>sumad si loogu hoggaansamo iyo midab habboon.

Kala duwanaanshaha bandhigga ikhtiyaariga ah

Ku hagaaji navbar xagga sare ama hoose ee goobta daawashada oo leh fasal dheeraad ah oo ku yaal div-ga ugu dambeeya, .navbar.

Ku go'an xagga sare

Ku dar oo xasuuso inaad ku xisaabtanto meesha qarsoon ee hoosteeda adoo ku daraya ugu .navbar-fixed-topyaraan 40px . Hubi inaad tan ku darto ka dib Bootstrap-ka CSS ee xudunta u ah iyo ka hor CSS-ga jawaabta ikhtiyaariga ah.padding<body>

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

Ku go'an xagga hoose

Halkii ku darso .navbar-fixed-bottom.

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

Navbar sare oo taagan

Samee navbar ballac buuxa oo la wareegaya bogga adoo ku daraya .navbar-static-top. Si ka duwan .navbar-fixed-topfasalka, uma baahnid inaad wax ka bedesho suufka body.

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

Navbar ka jawaabaya

Si aad u hirgeliso navbar jawaab celin ah oo burburaysa, ku duub macluumaadkaaga navbar div ka kooban, .nav-collapse.collapse, oo ku dar badhanka toggle navbar, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "konteenar" > 
 
      <!-- .btn-navbar waxa loo istcimaalaa beddelka nuxurka navbar burburay -->
      <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>
 
      <!-- Hubi inaad ka tagto summada halkaas haddii aad rabto in la muujiyo -->
      <a class = "brand" href = "#" > Magaca mashruuca </a>  
 
      <!-- Wax kasta oo aad rabto in lagu qariyo 940px ama ka yar, dhig halkan -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, iwm -->
      </div>
 
    </div>
  </div>
</div>

Kala duwanaanshiyaha rogan

Wax ka beddel muuqaalka navbar adiga oo ku daraya .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Tusaalooyinka

Tusaalaha kaliya ee muujinaya sida laga yaabo in lagu soo bandhigo bogag badan.

<ul class = "Qalabka rootiga" > 
  <li><a href = "#" > Guriga </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Library </a> <span class = "qaybi" > / </span></li>   
  <li class = "firfircoon" > Xog </li> 
</ul>

Bogga caadiga ah

Pagination fudud oo ay dhiirigelisay Rdio, ku fiican abka iyo natiijooyinka raadinta. Baloogga weyni way adag tahay in la waayo, si fudud ayaa loo miisaami karaa, wuxuuna bixiyaa meelo badan oo gujis ah.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Horay </a></li> 
    <li><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 = "#" > 5 </a></li> 
    <li><a href = "#" > Xiga </a></li> 
  </ul>
</div>

Ikhtiyaarada

Naafada iyo gobolada firfircoon

Xiriirinta waa kuwo lagu habeyn karo duruufo kala duwan. U isticmaal .disabledxiriiriyeyaasha aan la gujin karin iyo .activesi aad u muujiso bogga hadda jira.

<div class = "pagination" > 
  <ul>
    <li class = "disabled" ><a href = "#" > « </a></li>  
    <li class = "firfircoon" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Waxaad si ikhtiyaari ah u beddeli kartaa barroosinnada firfircoon ama naafada ah ee taako si aad meesha uga saarto shaqeynta guji inta aad haysatid qaababka loogu talagalay.

<div class = "pagination" > 
  <ul>
    <li class = "naafo" ><span> & laquo; </span></li> 
    <li class = "firfircoon" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Cabbirrada

Ma jeceshahay bogag ka weyn ama ka yar? Ku dar .pagination-large, .pagination-small, ama .pagination-minicabbirro dheeraad ah.

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Toosin

Ku dar mid ka mid ah laba fasal oo ikhtiyaari ah si aad u bedesho isku xidhka boggaga: .pagination-centerediyo .pagination-right.

<div class = "pagination pagination-centered" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</div>

Pager

Xidhiidhada degdega ah ee hore iyo kan xiga ee hirgelinta pagination fudud oo leh calaamad iftiin iyo qaabab. Waxay u fiican tahay bogagga fudud sida blogyada ama majaladaha.

Tusaale ahaan

Sida caadiga ah, pager-ku wuxuu isku xiraa.

<ul class = "pager" > 
  <li><a href = "#" > Hore </a></li> 
  <li><a href = "#" > Xiga </a></li> 
</ul>

Xiriirinta toosan

Haddii kale, waxaad isku toosin kartaa xiriiriye kasta dhinacyada:

<ul class = "pager" > 
  <li class = "kii hore" > 
    <a href = "#" > ← Ka weyn </a> 
  </li>
  <li class = "ku xiga" > 
    <a href = "#" > Ka cusub → </a> 
  </li>
</ul>

Xaalad naafada ah

Xiriirinta Pager sidoo kale waxay isticmaalaan .disabledfasalka utility guud ee bogga.

<ul class = "pager" > 
  <li class = "hore naafo ah" > 
    <a href = "#" > ← Ka weyn </a> 
  </li>
  ...
</ul>

Calaamadaha

Calaamadaha

Si fudud u burburi kara

Si loo fududeeyo hirgelinta, sumadaha iyo calaamaduhu si fudud ayay u burburi doonaan (iyada oo loo sii marayo :emptyxulashada CSS) marka aanay wax nuxur ahi ku jirin.

Halyeeyga

Qayb fufud, dabacsanaan leh si loogu soo bandhigo nuxurka muhiimka ah ee goobtaada. Waxay si fiican uga shaqeysaa suuq-geynta iyo boggaga culculus.

<div class = "hero-unit" > 
  <h1> Ciwaanka </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Wax dheeri ah baro
    </a>
  </p>
</div>

Madaxa bogga

Qolf fudud oo loogu talagalay in h1si habboon loo baneeyo oo u qaybiyo qaybaha nuxurka bogga. Waxay ka faa'iidaysan kartaa h1' default' small, element iyo sidoo kale inta badan qaybaha kale (oo leh qaabab dheeraad ah).

<div class = "page-header" > 
  <h1> Tusaale bogga madaxa <small> Qoraal-hoosaadka madaxa </small></h1>
</div>

Sawir gacmeedyada asalka ah

Sida caadiga ah, Bootstrap's thumbnails waxaa loogu talagalay inay soo bandhigaan sawirro ku xiran oo leh calaamado loo baahan yahay ugu yar.

Aad loo habeyn karo

Waxoogaa calaamad ah oo dheeri ah, waxaa suurtogal ah in lagu daro nooc kasta oo ka mid ah waxyaabaha HTML sida cinwaannada, cutubyada, ama badhamada thumbnails.

Waa maxay sababta loo isticmaalo thumbnails

Sawir-gacmeedka (horay .media-gridu ahaa ilaa v1.4) waxay ku fiican yihiin xadhkaha sawirada ama fiidyaha, natiijooyinka raadinta sawirka, alaabta tafaariiqda, faylalka, iyo wax ka badan. Waxay noqon karaan xiriirin ama nuxur taagan.

Calaamad fudud, dabacsan

Calaamadaynta thumbnail waa mid fudud - oo ulleh tiro kasta oo liwalxood ayaa ah waxa loo baahan yahay oo dhan. Waxa kale oo aad u dabacsan, oo u oggolaanaysa nooc kasta oo ka mid ah nuxurka leh wax yar oo dheeraad ah si loo duubo waxa ku jira.

Waxay isticmaashaa cabbirrada tiirarka grid

Ugu dambayntii, qaybta thumbnails-ka waxay isticmaashaa fasallada nidaamka grid-ka-sida .span2ama - .span3si loo xakameeyo cabbirrada thumbnail-ka.

Calaamadayn

Sidii hore loo sheegay, calaamadaynta loo baahan yahay ee thumbnails waa mid fudud oo toosan. Waa kan eega habaynta caadiga ah ee sawirada ku xidhan :

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <a href = "#" class = "thumbnail" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

Wixii HTML ka kooban ee thumbnails, calaamadeyntu wax yar ayey isu beddeshaa. Si loo oggolaado nuxurka heerka xannibaadda meel kasta, waxaanu ku beddelannaa sidan <a>oo kale:<div>

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Calaamadda thumbnail </h3>
      <p> Qoraalka sawirka thumbnail... </p>
    </div>
  </li>
  ...
</ul>

Tusaalayaal badan

Ku sahamin dhammaan xulashooyinkaaga fasallada kala duwan ee kala duwan ee aad diyaar u tahay. Waxa kale oo aad isku dari kartaa oo aad isku dari kartaa cabbirro kala duwan.

Digniinaha caadiga ah

Ku duub qoraal kasta iyo badhanka cayrinta ikhtiyaarka ah ee .alertfariinta digniinta aasaasiga ah.

<div class = " feejignaan " > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  Digniin ! </strong> Hubinta ugu fiican ee naftaada, uma eka mid aad u wanaagsan.
</div>

Daar badhamada

Mobile Safari iyo Mobile Opera browsers, marka lagu daro data-dismiss="alert"sifada, waxay u baahan yihiin href="#"ka saarida digniinaha marka la isticmaalayo <a>sumadda.

<a href = "#" class = "close" data-dismiss = "alert" > × </a>   

Haddii kale, waxa aad isticmaali kartaa shay <button>leh sifada xogta, kaas oo aanu u dooranay in aanu u samayno docsyadayada. Markaad isticmaalayso <button>, waa inaad ku dartaa type="button"ama foomamkaagu ma soo gudbin karaan.

<button type = "button" class = "close" data-dismiss = "alert" > × </button>   

Ku rid ogeysiisyada JavaScript

U isticmaal digniinaha jQuery plugin si deg deg ah oo sahlan u ceyrinta ogeysiisyada.

Ikhtiyaarada

Fariimaha dhaadheer, kordhi suufka sare iyo hoose ee duubabka digniinta adiga oo ku daraya .alert-block.

<div class = "digniinta digniin-block" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <h4> Digniin! </h4>
  Is hubinta ugu fiican, ma tihid...
</div>

Beddelka macnaha guud

Ku dar xiisado ikhtiyaari ah si aad u bedesho macnaha digniinta.

Khalad ama khatar

<div class = "wargelinta digniinta- khalad" > 
  ...
</div>

Guul

<div class = " feejignaan-guul" > 
  ...
</div>

Xog

<div class = "wargelinta digniin-info" > 
  ...
</div>

Tusaalooyinka iyo calaamadaynta

Aasaaska

Bar horumarka caadiga ah oo leh jaangooyo toosan.

<div class = "horumar" > 
  <div class = "bar" style = " ballaaran : 60 %; " ></ div>   
</div>

Xariifnimo

Wuxuu isticmaalaa gradient si uu u abuuro saamayn xariijimo ah. Lagama heli karo IE7-8

<div class = "horumar-horumar-ku-soo-bax" > 
  <div class = "bar" style = " ballac : 20 %; " ></ div>   
</div>

Animation

Ku dar .activesi .progress-stripedaad u dhaqaajiso xariijimaha midig ilaa bidix. Lama heli karo dhammaan noocyada IE.

<div class = "horumar horu-socod-xariif firfircoon" > 
  <div class = "bar" style = " ballac : 40 %; " ></ div>   
</div>

Is dulsaaran

Dhig baararka badan oo isku mid .progressah si aad isugu dhejiso.

<div class = "horumar" > 
  <div class = "bar bar-guul" style = " ballaaran : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " ballaaran : 20 %; " </div>   
  <div class = "bar-bar-danger" style = " ballaaran : 10 %; " </div>   
</div>

Ikhtiyaarada

Midabada dheeriga ah

Baararka horusocodku waxay isticmaalaan qaar ka mid ah badhanka isku midka ah iyo xiisadaha digniinta ee qaababka joogtada ah.

<div class = "progress progress-info" > 
  <div class = "bar" style = " ballaaran : 20 % " ></ div>   
</div>
<div class = "horumar horumar-guul" > 
  <div class = "bar" style = " ballaaran : 40 % " ></ div>   
</div>
<div class = "horumarka-horumarka digniinta" > 
  <div class = "bar" style = " ballaaran : 60 % " ></ div>   
</div>
<div class = "horumarka horumarka-khatar" > 
  <div class = "bar" style = " ballaaran : 80 % " ></ div>   
</div>

baararka xadhkaha goostay

Si la mid ah midabada adag, waxaan leenahay baararka horumarka xariijimaha kala duwan.

<div class = "horumarka horumarka-info horu-socod-xariif" > 
  <div class = "bar" style = " ballaaran : 20 % " ></ div>   
</div>
<div class = "horumar horu-soco-guul-ku-socod-hor-u-socod" > 
  <div class = "bar" style = " ballaaran : 40 % " ></ div>   
</div>
<div class = "horumar horu-u-socod-digniin horu-u-socod-ku-duuban" > 
  <div class = "bar" style = " ballaaran : 60 % " ></ div>   
</div>
<div class = "horumar horu-u-socod-khatar-horumar-ku-dhac" > 
  <div class = "bar" style = " ballaaran : 80 % " ></ div>   
</div>

Taageerada browserka

Baararka horusocodku waxay isticmaalaan gradients CSS3, kala-guurka, iyo animations si ay u gaaraan dhammaan saameyntooda. Tilmaamahan laguma taageero IE7-9 ama noocyadii hore ee Firefox.

Noocyadii hore ee Internet Explorer 10 iyo Opera 12 ma taageeraan animations.

Qaababka shayga la taaban karo ee lagu dhisayo noocyo kala duwan oo ka kooban (sida faallooyinka blogka, Tweets, iwm) kuwaas oo leh muuqaal bidix ama midig ku toosan oo ay weheliso nuxur qoraal ah.

Tusaale ahaan

Warbaahinta caadiga ah waxay ogolaataa inay sabbayso shay warbaahineed (sawir, muuqaal, maqal) bidix ama midig ee block content.

Ciwaanka warbaahinta

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Ciwaanka warbaahinta

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Ciwaanka warbaahinta

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<div class = "media" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "madax-madaxeed" > Ciwaanka warbaahinta </h4> 
    ...
 
    <!-- Shay warbaahin buul leh -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

Liiska warbaahinta

Iyada oo waxoogaa calaamadayn dheeraad ah, waxaad isticmaali kartaa warbaahinta liiska gudaha (waxtar u leh mawduucyada faallooyinka ama liisaska maqaallada).

<ul class = "liiska warbaahinta" > 
  <li class = "media" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "madax-madaxeed" > Ciwaanka warbaahinta </h4> 
      ...
 
      <!-- Shay warbaahin buul leh -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Ceelasha

Isticmaal ceelka si sahlan oo saameyn ku leh curiyaha si aad u siiso saameyn gelinta.

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

fasallada ikhtiyaariga ah

Xakamaynta suufka iyo geesaha wareegsan oo leh laba fasal wax-beddeleyaal ikhtiyaari ah.

<div class = "si fiican u weyn" > 
  ...
</div>

<div class = "si fiican u-yar" > 
  ...
</div>

Xir astaanta

U isticmaal astaanta guud ee u dhow si aad meesha uga saarto waxyaabaha sida moodalka iyo digniinaha.

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

Aaladaha iOS waxay u baahan yihiin href="#"dhacdooyinka gujinta haddii aad doorbidi lahayd inaad isticmaasho barroosin.

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

Fasalada caawiyaha

Fasalo fudud, diirada saaraya bandhig yar ama habdhaqan.

.bidix jiid

Sabbeyn qayb bidix

fasalka = "jiid-bidix"

. bidix u jiid {
  sabayn : bidix ;
}

.jiid-midig

Saxeex xubinta midig

fasalka = "jiid-midig"

. jiid - midig {
  sabayn : xaq ;
}

.la aamusay

U beddel midabka curiyaha#999

fasalka = "la aamusay"

. la aamusay {
  midabka : # 999; 
}

. caddeeyo

Nadiifi floatshay kasta

class = "clearfix"

. nadiifin {
  * zoom : 1 ; 
  &: ka hor ,
  &: kadib {
    bandhig : miiska ;
    nuxurka : "" ; 
  }
  &: kadib {
    cad : labadaba ;
  }
}