Mfano

Menyu inayoweza kugeuzwa, ya muktadha ya kuonyesha orodha za viungo. Imeingiliana na menyu kunjuzi ya JavaScript .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Kitendo </a></li>  
  <li><a tabindex = "-1" href = "#" > Kitendo kingine </a></li>  
  <li><a tabindex = "-1" href = "#" > Kitu kingine hapa </a></li>  
  <li class = "divider" ></li> 
  <li><a tabindex = "-1" href = "#" > Kiungo kilichotenganishwa </a></li>  
</ul>

Alama

Ukiangalia menyu kunjuzi tu, hii ndio HTML inayohitajika. Unahitaji kukunja kianzio cha menyu kunjuzi na menyu kunjuzi ndani ya .dropdown, au kipengele kingine kinachotangaza position: relative;. Kisha tu kuunda menyu.

<div class = "dropdown" > 
  <!-- Unganisha au kitufe cha kugeuza menyu kunjuzi -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Kitendo </a></li>  
    <li><a tabindex = "-1" href = "#" > Kitendo kingine </a></li>  
    <li><a tabindex = "-1" href = "#" > Kitu kingine hapa </a></li>  
    <li class = "divider" ></li> 
    <li><a tabindex = "-1" href = "#" > Kiungo kilichotenganishwa </a></li>  
  </ul>
</ div>

Chaguo

Pangilia menyu upande wa kulia na uongeze ni pamoja na viwango vya ziada vya menyu kunjuzi.

Kupanga menyu

Ongeza .pull-rightkwenye a .dropdown-menupanga menyu kunjuzi.

<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Chaguzi za menyu zilizozimwa

Ongeza .disabledkwenye <li>menyu kunjuzi ili kuzima kiungo.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Kiungo cha kawaida </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Kiungo kilichozimwa </a></li>   
  <li><a tabindex = "-1" href = "#" > Kiungo kingine </a></li>  
</ul>

Menyu ndogo kwenye menyu kunjuzi

Ongeza kiwango cha ziada cha menyu kunjuzi, zinazoonekana kwenye kielelezo kama zile za OS X, pamoja na nyongeza rahisi za alamisho. Ongeza .dropdown-submenukwa yoyote likatika menyu kunjuzi iliyopo ili uweke mtindo wa kiotomatiki.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#" > Chaguo zaidi </a>  
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Mifano

Chaguzi mbili za msingi, pamoja na tofauti mbili maalum zaidi.

Kikundi cha kitufe kimoja

Funga mfululizo wa vifungo na .btnin .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Kushoto </button> 
  <button class = "btn" > Kati </button> 
  <button class = "btn" > Kulia </button> 
</ div>

Vikundi vingi vya vifungo

Changanya seti za <div class="btn-group">katika a <div class="btn-toolbar">kwa vipengele ngumu zaidi.

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

Vikundi vya vitufe vya wima

Fanya seti ya vitufe ionekane ikiwa imepangwa kwa safu wima badala ya mlalo.

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

Kisanduku cha kuteua na ladha za redio

Vikundi vya vitufe vinaweza pia kufanya kazi kama redio, ambapo kitufe kimoja pekee kinaweza kuwa amilifu, au visanduku vya kuteua, ambapo idadi yoyote ya vitufe vinaweza kuwa hai. Tazama hati za JavaScript kwa hiyo.

Kunjuzi katika vikundi vya vitufe

Vichwa juu!Vifungo vilivyo na menyu kunjuzi lazima vifunikwe kivyake .btn-groupndani ya a .btn-toolbarkwa uwasilishaji unaofaa.

Muhtasari na mifano

Tumia kitufe chochote kuanzisha menyu kunjuzi kwa kuiweka ndani ya a .btn-groupna kutoa lebo sahihi ya menyu.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Kitendo
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- viungo vya menyu kunjuzi -->
  </ul>
</ div>

Inafanya kazi na saizi zote za vitufe

Vifungo kunjuzi hufanya kazi kwa ukubwa wowote: .btn-large, .btn-small, au .btn-mini.

Inahitaji JavaScript

Vituo kunjuzi vinahitaji programu- jalizi ya kunjuzi ya Bootstrap kufanya kazi.

Katika baadhi ya matukio—kama vile menyu kunjuzi ya simu ya mkononi itapanuliwa nje ya kituo cha kutazama. Unahitaji kutatua upangaji wewe mwenyewe au kwa JavaScript maalum.

Kunjuzi za vitufe vya kugawanyika

Kujenga juu ya mitindo ya vikundi vya vifungo na lebo, tunaweza kuunda kifungo cha mgawanyiko kwa urahisi. Vifungo vya kugawanya huangazia kitendo cha kawaida upande wa kushoto na kugeuza kunjuzi upande wa kulia kwa kutumia viungo vya muktadha.

<div class = "btn-group" > 
  <button class = "btn" > Kitendo </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </kifungo>
  <ul class = "dropdown-menu" > 
    <!-- viungo vya menyu kunjuzi -->
  </ul>
</ div>

Ukubwa

Tumia madarasa ya vitufe vya ziada .btn-mini, .btn-small, au .btn-largekwa ukubwa.

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Kitendo </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </kifungo>
  <ul class = "dropdown-menu" > 
    <!-- viungo vya menyu kunjuzi -->
  </ul>
</ div>

Menyu za kudondosha

Menyu kunjuzi pia zinaweza kugeuzwa kutoka chini kwenda juu kwa kuongeza darasa moja kwa mzazi wa karibu wa .dropdown-menu. Itageuza uelekeo wa .caretna kuweka upya menyu yenyewe ili kusonga kutoka chini kwenda juu badala ya juu kwenda chini.

<div class = "btn-group dropup" > 
  <button class = "btn" > Drop </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </kifungo>
  <ul class = "dropdown-menu" > 
    <!-- viungo vya menyu kunjuzi -->
  </ul>
</ div>

Mipangilio nyepesi nyepesi Alama sawa, madarasa tofauti

Vipengee vyote vya nav hapa - vichupo, tembe na orodha - hushiriki lebo ya msingi na mitindo sawa kupitia .navdarasa.

Vichupo vya msingi

Chukua <ul>viungo vya kawaida na uongeze .nav-tabs:

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

Vidonge vya msingi

Chukua HTML hiyo hiyo, lakini tumia .nav-pillsbadala yake:

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

Jimbo la walemavu

Kwa kipengele chochote cha nav (vichupo, tembe, au orodha), ongeza .disabledkwa viungo vya kijivu na hakuna madoido ya kuelea . Viungo vitasalia kubofya, hata hivyo, isipokuwa ukiondoa hrefsifa. Vinginevyo, unaweza kutekeleza JavaScript maalum ili kuzuia mibofyo hiyo.

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

Mpangilio wa vipengele

Ili kupanga viungo vya nav, tumia .pull-leftau .pull-rightmadarasa ya matumizi. Madarasa yote mawili yataongeza kuelea kwa CSS katika mwelekeo maalum.

Inaweza kudumu

Kwa vile vichupo na tembe ziko mlalo kwa chaguo-msingi, ongeza tu darasa la pili, .nav-stacked, ili kuzifanya zionekane zikiwa zimepangwa kwa safu wima.

Vichupo vilivyopangwa

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

Vidonge vilivyowekwa

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

Kunjuzi

Ongeza menyu kunjuzi na HTML ya ziada kidogo na programu- jalizi ya JavaScript .

Vichupo vilivyo na menyu kunjuzi

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

Vidonge vilivyo na kushuka

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

Orodha za Nav

Njia rahisi na rahisi ya kuunda vikundi vya viungo vya nav na vichwa vya hiari. Zinatumika vyema kwenye upau wa pembeni kama Kipataji katika OS X.

Mfano orodha ya nav

Chukua orodha ya viungo na uongeze class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Orodhesha kichwa </li> 
  <li class = "active" ><a href = "#" > Nyumbani </a></li>  
  <li><a href = "#" > Maktaba </a></li> 
  ...
</ul>

KumbukaKwa kuweka kiota ndani ya orodha ya nav, jumuisha class="nav nav-list"kwenye kiota chochote <ul>.

Vigawanyiko vya usawa

Ongeza kigawanyiko cha mlalo kwa kuunda kipengee cha orodha tupu na class .divider, kama hivyo:

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

Table nav

Sasisha vichupo vyako kwa programu-jalizi rahisi ya kugeuza kati ya maudhui kupitia vichupo. Bootstrap huunganisha vichupo vinavyoweza kutekelezeka katika mitindo minne: juu (chaguo-msingi), kulia, chini na kushoto.

Mfano wa tabo

Ili kufanya vichupo vionekane, unda kitambulisho chenye .tab-panekipekee kwa kila kichupo na uzifunge kwenye .tab-content.

<div class = "tabble" > <!-- Inahitajika tu kwa vichupo vya kushoto/kulia -->  
  <ul class = "nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Sehemu ya 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Sehemu ya 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Niko katika Sehemu ya 1. </p>
    </ div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Habari, niko katika Sehemu ya 2. </p>
    </ div>
  </ div>
</ div>

Fifisha kwenye vichupo

Ili kufanya vichupo kufifia, ongeza .fadekwa kila .tab-pane.

Inahitaji programu-jalizi ya jQuery

Vichupo vyote vinavyoweza kutekelezeka vinaendeshwa na programu-jalizi yetu nyepesi ya jQuery. Soma zaidi kuhusu jinsi ya kuhuisha vichupo vya tabbable kwenye ukurasa wa hati za JavaScript .

Table katika mwelekeo wowote

Vichupo chini

Geuza mpangilio wa HTML na uongeze darasa ili kuweka vichupo chini.

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

Vichupo upande wa kushoto

Badilisha darasa ili kuweka vichupo upande wa kushoto.

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

Vichupo upande wa kulia

Badilisha darasa ili kuweka vichupo upande wa kulia.

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

Upau wa urambazaji wa msingi

Kuanza, pau za urambazaji ni tuli (hazijawekwa juu) na zinajumuisha usaidizi wa jina la mradi na urambazaji msingi. Weka mahali popote ndani ya .container, ambayo huweka upana wa tovuti yako na maudhui.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Kichwa </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Nyumbani </a></li>  
      <li><a href = "#" > Unganisha </a></li> 
      <li><a href = "#" > Unganisha </a></li> 
    </ul>
  </ div>
</ div>

Vipengele vya Navbar

Chapa

Kiungo rahisi cha kuonyesha chapa yako au jina la mradi kinahitaji tu lebo ya nanga.

<a class = "brand" href = "#" > Jina la mradi </a>  

Viungo vya Nav

Vipengee vya Nav ni rahisi kuongeza kupitia orodha zisizopangwa.

<ul class = "nav" > 
  <li class = "active" > 
    <a href = "#" > Nyumbani </a> 
  </li>
  <li><a href = "#" > Unganisha </a></li> 
  <li><a href = "#" > Unganisha </a></li> 
</ul>

Unaweza kuongeza vigawanyiko kwa urahisi kwenye viungo vyako vya nav na kipengee cha orodha tupu na darasa rahisi. Ongeza hii tu kati ya viungo:

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

Fomu

Ili kupanga vizuri na kuweka fomu ndani ya upau wa urambazaji, ongeza madarasa yanayofaa kama inavyoonyeshwa hapa chini. Kwa fomu chaguo-msingi, jumuisha .navbar-formna ama .pull-leftau .pull-rightuipangilie vizuri.

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
  <button type = "submit" class = "btn" > Wasilisha </button>  
</ fomu>

Tafuta fomu

Kwa fomu ya utafutaji iliyogeuzwa kukufaa zaidi, ongeza .navbar-searchkwenye formna .search-querykwenye ingizo kwa mitindo maalum katika upau wa urambazaji.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Tafuta" >   
</ fomu>

Mpangilio wa vipengele

Pangilia viungo vya nav, fomu ya utafutaji, au maandishi, tumia .pull-leftau .pull-rightmadarasa ya matumizi. Madarasa yote mawili yataongeza kuelea kwa CSS katika mwelekeo maalum.

Kwa kutumia menyu kunjuzi

Ongeza menyu kunjuzi na menyu kunjuzi kwenye urambazaji na uwekaji alama kidogo na programu- jalizi ya JavaScript .

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

Tembelea hati kunjuzi za JavaScript kwa lebo zaidi na maelezo kuhusu kunjuzi za kupiga simu.

Maandishi

Funga mifuatano ya maandishi katika kipengele na .navbar-text, kwa kawaida kwenye <p>lebo kwa uongozi na rangi ifaayo.

Tofauti za onyesho za hiari

Rekebisha upau wa urambazaji juu au chini ya kituo cha kutazama na darasa la ziada kwenye div ya nje, .navbar.

Imewekwa juu

Ongeza .navbar-fixed-topna ukumbuke kuhesabu eneo lililofichwa chini yake kwa kuongeza angalau 40px paddingkwenye <body>. Hakikisha umeongeza hii baada ya CSS ya msingi ya Bootstrap na kabla ya CSS jibu ya hiari.

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

Imewekwa chini

Ongeza .navbar-fixed-bottombadala yake.

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

Upau wa urambazaji wa juu tuli

Unda upau wa uelekezaji wa upana kamili ambao unasogeza mbali na ukurasa kwa kuongeza .navbar-static-top. Tofauti na .navbar-fixed-topdarasa, hauitaji kubadilisha pedi yoyote kwenye body.

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

Upau wa urambazaji unaoitikia

Ili kutekeleza upau wa urambazaji unaoanguka, funga maudhui yako ya upau wa urambazaji katika div iliyo na, .nav-collapse.collapse, na uongeze kitufe cha kugeuza cha upau wa urambazaji, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "chombo" > 
 
      <!-- .btn-navbar inatumika kama kigeuzi cha maudhui ya upau wa urambazaji yaliyokunjwa -->
      <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>
 
      <!-- Hakikisha umeacha chapa kama unataka ionyeshwe -->
      <a class = "brand" href = "#" > Jina la mradi </a>  
 
      <!-- Kila kitu unachotaka kimefichwa kwa 940px au chini yake, weka hapa -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, n.k -->
      </ div>
 
    </ div>
  </ div>
</ div>

Tofauti iliyogeuzwa

Rekebisha mwonekano wa upau wa urambazaji kwa kuongeza .navbar-inverse.

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

Mifano

Mfano mmoja umeonyeshwa kwani unaweza kuonyeshwa kwenye kurasa nyingi.

<ul class = "breadcrumb" > 
  <li><a href = "#" > Nyumbani </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Maktaba </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Data </li> 
</ul>

Pagination ya kawaida

Uandikaji rahisi uliochochewa na Rdio, mzuri kwa programu na matokeo ya utafutaji. Kizuizi kikubwa ni ngumu kukosa, kinaweza kuongezwa kwa urahisi, na hutoa maeneo makubwa ya kubofya.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Iliyotangulia </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 = "#" > Inayofuata </a></li> 
  </ul>
</ div>

Chaguo

Majimbo ya walemavu na amilifu

Viungo vinaweza kubinafsishwa kwa hali tofauti. Tumia .disabledkwa viungo visivyobofya na .activekuashiria ukurasa wa sasa.

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

Unaweza kubadilisha kwa hiari viunga vinavyotumika au vilivyozimwa kwa vipenyo ili kuondoa utendakazi wa kubofya huku ukihifadhi mitindo iliyokusudiwa.

<div class = "pagination" > 
  <ul>
    <li class = "walemavu" ><span> « </span></li> 
    <li class = "active" ><span> 1 </span></li> 
    ...
  </ul>
</ div>

Ukubwa

Je, ungependa kutengeneza kurasa kubwa au ndogo zaidi? Ongeza .pagination-large, .pagination-small, au .pagination-minikwa saizi za ziada.

<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>

Mpangilio

Ongeza mojawapo ya madarasa mawili ya hiari ili kubadilisha upatanishi wa viungo vya upagino: .pagination-centeredna .pagination-right.

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

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

Peja

Viungo vya haraka vilivyotangulia na vifuatavyo vya utekelezaji rahisi wa uwekaji alama na mitindo nyepesi. Ni nzuri kwa tovuti rahisi kama blogu au majarida.

Mfano chaguomsingi

Kwa chaguo-msingi, paja huweka viungo.

<ul class = "pager" > 
  <li><a href = "#" > Iliyotangulia </a></li> 
  <li><a href = "#" > Inayofuata </a></li> 
</ul>

Viungo vilivyopangiliwa

Vinginevyo, unaweza kusawazisha kila kiunga kwa pande:

<ul class = "pager" > 
  <li class = "previous" > 
    <a href = "#" > ← Mzee </a> 
  </li>
  <li class = "next" > 
    <a href = "#" > Mpya zaidi → </a> 
  </li>
</ul>

Hali ya hiari ya walemavu

Viungo vya Pager pia hutumia .disableddarasa la matumizi ya jumla kutoka kwa pagination.

<ul class = "pager" > 
  <li class = "previous disabled" > 
    <a href = "#" > ← Mzee </a> 
  </li>
  ...
</ul>

Lebo

Beji

Inakunjwa kwa urahisi

Kwa utekelezaji rahisi, lebo na beji zitaanguka (kupitia kiteuzi cha CSS :empty) wakati hakuna maudhui ndani.

Kitengo cha shujaa

Sehemu nyepesi, inayonyumbulika ili kuonyesha maudhui muhimu kwenye tovuti yako. Inafanya kazi vizuri kwenye tovuti za uuzaji na maudhui mazito.

<div class = "hero-unit" > 
  <h1> Kichwa </ h1>
  <p> Mstari wa tagi </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Jifunze zaidi
    </a>
  </ p>
</ div>

Kijajuu cha ukurasa

Gamba rahisi la h1kuweka nafasi ipasavyo na kuweka sehemu za yaliyomo kwenye ukurasa. Inaweza kutumia h1chaguo-msingi small, kipengele pamoja na vipengele vingine vingi (na mitindo ya ziada).

<div class = "page-header" > 
  <h1> Mfano wa kichwa cha ukurasa <small> Matini ndogo ya kichwa </small></h1>
</ div>

Vijipicha chaguomsingi

Kwa chaguo-msingi, vijipicha vya Bootstrap vimeundwa ili kuonyesha picha zilizounganishwa na alama ndogo zinazohitajika.

Inayoweza kubinafsishwa sana

Ukiwa na lebo ya ziada, inawezekana kuongeza aina yoyote ya maudhui ya HTML kama vile vichwa, aya, au vitufe kwenye vijipicha.

Kwa nini utumie vijipicha

Vijipicha (hapo awali .media-gridhadi v1.4) ni vyema kwa gridi za picha au video, matokeo ya utafutaji wa picha, bidhaa za rejareja, portfolios, na mengi zaidi. Wanaweza kuwa viungo au maudhui tuli.

Rahisi, markup rahisi

Alama ya kijipicha ni rahisi—a ulyenye idadi yoyote ya livipengele ndiyo tu inayohitajika. Pia ni rahisi kunyumbulika, ikiruhusu aina yoyote ya maudhui yenye alamisho kidogo zaidi ili kufunga maudhui yako.

Hutumia ukubwa wa safu wima ya gridi

Hatimaye, sehemu ya vijipicha hutumia aina zilizopo za mfumo wa gridi—kama .span2au .span3—kwa udhibiti wa vipimo vya kijipicha.

Alama

Kama ilivyotajwa hapo awali, alama inayohitajika ya vijipicha ni nyepesi na moja kwa moja. Hapa angalia usanidi chaguo-msingi wa picha zilizounganishwa :

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

Kwa maudhui maalum ya HTML katika vijipicha, alama hubadilika kidogo. Ili kuruhusu maudhui ya kiwango cha kuzuia mahali popote, tunabadilishana <a>kama <div>vile:

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Lebo ya kijipicha </h3>
      <p> Manukuu ya kijipicha... </p>
    </ div>
  </li>
  ...
</ul>

Mifano zaidi

Chunguza chaguo zako zote ukitumia aina mbalimbali za gridi zinazopatikana kwako. Unaweza pia kuchanganya na kuchanganya ukubwa tofauti.

Tahadhari chaguomsingi

Funga maandishi yoyote na kitufe cha hiari cha kuondoa .alertkwa ujumbe wa tahadhari ya msingi.

<div class = "alert" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </kifungo>   
  <strong> Onyo! </strong> Bora jiangalie mwenyewe, huonekani kuwa mzuri sana.
</ div>

Ondoa vifungo

Vivinjari vya Safari ya Simu na Mobile Opera, pamoja na data-dismiss="alert"sifa, vinahitaji ili kuondoa href="#"arifa unapotumia <a>lebo.

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

Vinginevyo, unaweza kutumia <button>kipengele chenye sifa ya data, ambacho tumechagua kufanya kwa hati zetu. Unapotumia <button>, ni lazima ujumuishe type="button"au fomu zako zisiwasilishe.

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

Ondoa arifa kupitia JavaScript

Tumia programu- jalizi ya arifa za jQuery kwa uondoaji wa arifa haraka na rahisi.

Chaguo

Kwa ujumbe mrefu, ongeza pedi juu na chini ya kanga ya tahadhari kwa kuongeza .alert-block.

<div class = "alert alert-block" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </kifungo>   
  <h4> Onyo! </ h4>
  Bora ujichunguze, wewe si...
</ div>

Njia mbadala za muktadha

Ongeza madarasa ya hiari ili kubadilisha maana ya arifa.

Hitilafu au hatari

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

Mafanikio

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

Habari

<div class = "tahadhari ya taarifa" > 
  ...
</ div>

Mifano na markup

Msingi

Upau chaguo-msingi wa maendeleo na upinde rangi wima.

<div class = "progress" > 
  <div class = "bar" style = " width : 60 %; " ></div>   
</ div>

Milia

Hutumia upinde rangi kuunda athari yenye milia. Haipatikani katika IE7-8.

<div class = "progress progress-striped" > 
  <div class = "bar" style = " width : 20 %; " ></div>   
</ div>

Imehuishwa

Ongeza .activekwa .progress-stripedkuhuisha milia kulia kwenda kushoto. Haipatikani katika matoleo yote ya IE.

<div class = "progress progress-striped active" > 
  <div class = "bar" style = " width : 40 %; " ></div>   
</ div>

Imepangwa kwa rafu

Weka pau nyingi kwenye kitu kimoja .progressili kuziweka.

<div class = "progress" > 
  <div class = "bar-success" style = " upana : 35 %; " ></div>   
  <div class = "bar-warning" style = " upana : 20 %; " ></div>   
  <div class = "bar-danger" style = " width : 10 %; " ></div>   
</ div>

Chaguo

Rangi za ziada

Pau za maendeleo hutumia baadhi ya vitufe sawa na madarasa ya tahadhari kwa mitindo thabiti.

<div class = "progress progress-info" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</ div>
<div class = "progress progress-success" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</ div>
<div class = "onyo la maendeleo" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</ div>
<div class = "progress progress-hatari" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</ div>

Paa zilizopigwa

Sawa na rangi dhabiti, tuna pau tofauti za maendeleo zenye mistari.

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</ div>
<div class = "progress progress-success progress-striped" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</ div>
<div class = "maendeleo-onyo la maendeleo-yamepunguzwa" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</ div>
<div class = "progress progress-danger progress-striped" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</ div>

Usaidizi wa kivinjari

Pau za maendeleo hutumia gradient za CSS3, mipito, na uhuishaji kufikia athari zao zote. Vipengele hivi havitumiki katika IE7-9 au matoleo ya awali ya Firefox.

Matoleo ya mapema zaidi ya Internet Explorer 10 na Opera 12 hayatumii uhuishaji.

Mitindo ya vitu dhahania ya kuunda aina mbalimbali za vipengele (kama maoni ya blogu, Tweets, n.k) ambazo zinaangazia picha iliyopangwa kushoto au kulia pamoja na maudhui ya maandishi.

Mfano chaguomsingi

Midia chaguo-msingi huruhusu kuelea kitu cha midia (picha, video, sauti) upande wa kushoto au kulia wa kizuizi cha maudhui.

Kichwa cha habari

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

Kichwa cha habari

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

Kichwa cha habari

Cras sit amet nibh libero, katika gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum katika vulputate saa, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis kwenye 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 = "media-heading" > Kichwa cha habari </h4> 
    ...
 
    <!-- Nested media object -->
    <div class = "media" > 
      ...
    </ div>
  </ div>
</ div>

Orodha ya vyombo vya habari

Ukiwa na lebo ya ziada, unaweza kutumia maudhui ya ndani ya orodha (yanafaa kwa mazungumzo ya maoni au orodha za makala).

<ul class = "media-list" > 
  <li class = "media" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Kichwa cha habari </h4> 
      ...
 
      <!-- Nested media object -->
      <div class = "media" > 
        ...
     </ div>
    </ div>
  </li>
</ul>

Visima

Tumia kisima kama athari rahisi kwenye kipengele ili kukipa athari ya kuingiza.

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

Madarasa ya hiari

Dhibiti pedi na pembe zilizo na mviringo kwa madarasa mawili ya hiari ya kurekebisha.

<div class = "well-large" > 
  ...
</ div>

<div class = "well-small" > 
  ...
</ div>

Funga ikoni

Tumia aikoni ya jumla ya kufunga kwa kuondoa maudhui kama vile miundo na arifa.

<button class = "close" > × </kifungo> 

Vifaa vya iOS vinahitaji href="#"kwa matukio ya kubofya ikiwa ungependa kutumia nanga.

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

Madarasa ya wasaidizi

Madarasa rahisi, yaliyolengwa kwa maonyesho madogo au marekebisho ya tabia.

.vuta-kushoto

Elekeza kipengele kushoto

darasa = "vuta-kushoto"

. vuta - kushoto {
  kuelea : kushoto ;
}

.vuta-kulia

Elekeza kipengele kulia

darasa = "vuta kulia"

. vuta - kulia {
  kuelea : kulia ;
}

.imezimwa

Badilisha rangi ya kipengele kuwa#999

darasa = "umezimwa"

. imenyamazishwa {
  rangi : #999; 
}

.clearfix

Futa floatkwenye kipengele chochote

darasa = "clearfix"

. clearfix {
  * kuza : 1  ;
  &: kabla ,
  &: baada ya {
    onyesha : meza ;
    maudhui : ""  ;
  }
  &: baada ya {
    wazi : zote mbili ;
  }
}