Zigawo

Zida zambiri zomwe zingagwiritsidwenso ntchito zimamangidwa mu Bootstrap kuti zipereke kuyenda, zidziwitso, popovers, ndi zina zambiri.

Magulu a batani

Gwiritsani ntchito magulu a batani kuti mugwirizane ndi mabatani angapo pamodzi ngati chigawo chimodzi. Mangani iwo ndi mndandanda wa <a>kapena <button>zinthu.

Mukhozanso kuphatikiza ma seti a <div class="btn-group">ma <div class="btn-toolbar">projekiti ovuta kwambiri.

Chizindikiro cha chitsanzo

Umu ndi momwe HTML imawonera gulu labatani lokhazikika lomangidwa ndi mabatani a nangula:

<div class = "btn-group" > 
  <a class = "btn" href = "#"> 1 </a> _  
  <a class = "btn" href = "#"> 2 </a> _  
  <a class = "btn" href = "#"> 3 </a> _  
</div>

Ndipo ndi chida chamagulu angapo:

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

Checkbox ndi zokometsera wailesi

Magulu a mabatani amathanso kugwira ntchito ngati mawayilesi, pomwe batani limodzi lokha litha kukhala logwira, kapena mabokosi, pomwe mabatani angapo amatha kugwira ntchito. Onani zolemba za Javascript za izo.

Pezani javascript »

Mungodziwiratu

CSS yamagulu a batani ili mu fayilo yosiyana, batani-groups.less.

Zotsitsa za batani

Gwiritsani ntchito batani lililonse kuti muyambitse menyu yotsitsa poyiyika mkati .btn-groupndikupereka zolembera zoyenera.

Chizindikiro cha chitsanzo

Mofanana ndi gulu la mabatani, zolembera zathu zimagwiritsa ntchito mabatani okhazikika, koma ndi zowonjezera zochepa kuti ziwongolere kalembedwe ndikuthandizira Bootstrap's dropdown jQuery plugin.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">   
    Zochita
    <span class = "caret" > </span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- maulalo a menyu otsika -->
  </ul>
</div>

Kutsitsa kwa batani logawanika

Kumanga pamatayilo amagulu a batani ndi zolembera, titha kupanga batani logawanika mosavuta. Mabatani ogawanika amakhala ndi zochitika zokhazikika kumanzere ndikusintha kotsikira kumanja ndi maulalo amkati.

Chizindikiro cha chitsanzo

Timakulitsa pa batani lotsika kuti tipereke batani lachiwiri lomwe limagwira ntchito ngati choyambitsa chotsitsa.

<div class = "btn-group" > 
  <a class = "btn" href = "#"> Zochita </a> _  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">   
    <span class = "caret" > </span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- maulalo a menyu otsika -->
  </ul>
</div>

Zosasintha zopepuka Kusindikiza komweko, magulu osiyanasiyana

Gulu loyambira lamphamvu

Zonse zomwe zili pano - ma tabo, mapiritsi, ndi mindandanda - zimagawana zoyambira ndi masitaelo omwewo m'kalasi .nav.

Chifukwa ma tabu ndi mapiritsi

Ma tabu ndi mapiritsi mu Bootstrap amamangidwa pa <ul>HTML yomweyi, mndandanda wamaulalo. Sinthani pakati pa ma tabu kapena mapiritsi ndi kalasi yokha.

Zosankha zonsezi ndizabwino pamagawo ang'onoang'ono azinthu kapena kuyenda pakati pamasamba okhudzana.

Ma tabu oyambira

Tengani <ul>maulalo okhazikika ndikuwonjezera .nav-tabs:

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

Mapiritsi oyambira

Tengani HTML yomweyo, koma gwiritsani ntchito .nav-pills:

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

Zosasunthika Pangani ma tabu kapena mapiritsi kukhala ofukula

Momwe mungazisungire

Monga ma tabo ndi mapiritsi ali opingasa mwachisawawa, ingowonjezerani kalasi yachiwiri, .nav-stacked, kuti awoneke ngati atapachikidwa.

Ma tabu osungidwa

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

Mapiritsi osanjikizidwa

<ul class = "mapiritsi a nav nav-stacked" > 
  ...
</ul>

Zotsitsa Pazinthu zapamwamba za nav

Mindandanda yazakudya idapangidwa kukhala yosavuta

Ma menyu otsikira m'ma tabu ndi mapiritsi a Bootstrap ndi osavuta kwambiri ndipo amangofunika HTML yowonjezera pang'ono ndi pulogalamu yowonjezera ya jQuery yopepuka.

Pitani ku tsamba la Javascript kuti muwerenge zolemba zoyambira kutsitsa mu Bootstrap.

Ma tabu okhala ndi zotsitsa

<ul class = "nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "kutsitsa"
       href = "#" >
        Tsitsa m'munsi
        <b class = "caret" > </b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- maulalo -->
    </ul>
  </li>
</ul>

Mapiritsi okhala ndi zotsitsa

<ul class = "mapiritsi a nav-nav" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "kutsitsa"
       href = "#" >
        Tsitsa m'munsi
        <b class = "caret" > </b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- maulalo -->
    </ul>
  </li>
</ul>

Nav mindandanda Pangani ma navs osavuta osanjikizidwa, abwino pazitsulo zam'mbali

Mayendedwe amtundu wa ntchito

Mindandanda ya Nav imapereka njira yosavuta komanso yosavuta yopangira magulu a maulalo a nav okhala ndi mitu yosankha. Amagwiritsidwa ntchito bwino m'mbali mwazitsulo monga Finder mu OS X.

Mwamakhalidwe, amamangidwa pamayendedwe amtundu womwewo wa nav monga ma tabo ndi mapiritsi, kotero kugwiritsa ntchito ndikusintha mwamakonda ndikosavuta.

Ndi zithunzi

Mindandanda ya Nav ndiyosavuta kukhazikitsa ndi zithunzi. Onjezani tag yoyenera <i>ndi kalasi ndipo mwakonzeka.

Chitsanzo nav list

Tengani maulalo ndikuwonjezera class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Lembani mutu
  </li>
  <li class = "active" > 
    <a href = "#"> Kwawo </a> _ 
  </li>
  <li>
    <a href = "#"> Library </a> _ 
  </li>
  ...
</ul>

Chitsanzo ndi zithunzi

Chitsanzo chomwecho, koma ndi <i>ma tag a zithunzi.

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

Tabable nav Bweretsani ma tabu kukhala amoyo kudzera pa javascript

Zomwe zikuphatikizidwa

Bweretsani ma tabu anu kukhala ndi moyo ndi pulogalamu yowonjezera yosavuta kuti musinthe pakati pa zomwe zili ndi ma tabo. Bootstrap imaphatikiza ma tabo owoneka mu masitayelo anayi: pamwamba (zosasintha), kumanja, pansi, ndi kumanzere.

Kusintha pakati pawo ndikosavuta ndipo kumangofunika kusintha pang'ono.

Table chitsanzo

Kuti ma tabo awoneke, sungani .nav-tabsdiv ina ndi kalasi .tabbable.

Ndili mu Gawo 1.

Moni, ndili mu Gawo 2.

Watani mtsikana, iyi ndi Gawo 3.

Pulogalamu yowonjezera ya jQuery

Ma tabu onse owoneka amathandizidwa ndi plugin yathu yopepuka ya jQuery. Werengani zambiri zamomwe mungapangire ma tabable kukhala amoyo patsamba la javascript docs.

Pezani javascript →

Chizindikiro chowongoka

Kugwiritsa ntchito ma tabbable kumafuna div yokulungidwa, ma tabo angapo, ndi magawo angapo azinthu.

<div class = "tabble" > 
  <ul class = "nav-tabs" > 
    <li class = "active" ><a href = "#1" data-toggle = "tab"> Gawo 1 </a></li >   
    <li><a href = "#2" data-toggle = "tab"> Gawo 2 </a></li >  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "1" >  
      <p> Ndili mu Gawo 1. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> Moni, ndili mu Gawo 2. </p>
    </div>
  </div>
</div>

Table mbali iliyonse

Ma tabu pansi

Sinthani dongosolo la HTML ndikuwonjezera kalasi kuti muyike ma tabu pansi.

Ndili mu Gawo A.

Moni, ndili mu Gawo B.

Watani mtsikana, iyi ndi Gawo C.

<div class = "ma tabu omwe ali pansipa" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav-tabs" > 
    ...
  </ul>
</div>

Ma tabu kumanzere

Sinthanitsani kalasi kuti muyike ma tabu kumanzere.

Ndili mu Gawo A.

Moni, ndili mu Gawo B.

Watani mtsikana, iyi ndi Gawo C.

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

Ma tabu kumanja

Sinthanitsani kalasi kuti muyike ma tabu kumanja.

Ndili mu Gawo A.

Moni, ndili mu Gawo B.

Watani mtsikana, iyi ndi Gawo C.

<div class = "tabtable tabo-kumanja" > 
  <ul class = "nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Static navbar chitsanzo

Chitsanzo cha navbar yosasunthika (yosakhazikika pamwamba) yokhala ndi dzina la polojekiti, kuyenda, ndi mawonekedwe osakira.

Navbar scaffolding

Navbar imangofunika ma div ochepa kuti ipangike bwino kuti iwonetsere mawonekedwe osasunthika.

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

Kuti mupange navbar yokhazikika pamwamba pa malo owonera, onjezani .navbar-fixed-topku div yakunja, .navbar. Mu CSS yanu , mudzafunikanso kuwerengera kuchuluka komwe kumayambitsa powonjezera padding-top: 40px;.<body>

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

Dzina lamalonda

Ulalo wosavuta wowonetsa mtundu wanu kapena dzina la pulojekiti yanu umangofunika chizindikiro cha nangula.

<a class = "brand" href = "#"> _  
  Dzina la polojekiti
</a>

Fufuzani mawonekedwe

Mafomu osakira amalandila masitaelo anthawi zonse mu navbar ndi .navbar-searchkalasi. Phatikizanipo .pull-leftkapena .pull-rightkugwirizanitsa formizo.

<form class = "navbar-search kukoka kumanzere" > 
  <input type = "text" class = "search-query" placeholder = "Sakani" >   
</ fomu>

Kusiyanasiyana koyankhira kosankha

Kutengera kuchuluka kwa zomwe zili patsamba lanu lapamwamba, mungafune kugwiritsa ntchito njira zoyankhira. Kuti muchite izi, sungani zomwe zili mu nav mu div, .nav-collapse.collapse, ndikuwonjezera batani la navbar, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "chotengera" > 
 
      <!-- .btn-navbar imagwiritsidwa ntchito ngati kusintha kwa navbar zomwe zagwa -->
      <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>
 
      <!-- Onetsetsani kuti mwasiya chizindikirocho ngati mukufuna kuti chiwonetsedwe -->
      <a class = "brand" href = "#"> Dzina la polojekiti </a>  
 
      <!-- Chilichonse chomwe mukufuna chibisike pa 940px kapena kuchepera, chiyikeni mkati muno -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Mungodziwiratu! Navbar yomvera imafuna pulogalamu yowonjezera yogwa .

Nav maulalo

Zinthu za Nav ndizosavuta kuwonjezera kudzera pamndandanda wosasankhidwa.

<ul class = "nav" > 
  <li class = "active" > 
    <a href = "#"> Kwawo </a> _ 
  </li>
  <li><a href = "#"> Link </a> </li> 
  <li><a href = "#"> Link </a> </li> 
</ul>

Kuwonjezera zotsitsa

Kuyika zotsikira ku nav ndikosavuta, koma kumafunikira kugwiritsa ntchito pulogalamu yathu ya javascript .

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

Pezani javascript →

Chifukwa chiyani amazigwiritsa ntchito

Breadcrumb navigation imagwiritsidwa ntchito ngati njira yowonetsera ogwiritsa ntchito komwe ali mkati mwa pulogalamu kapena tsamba, koma osati pakusaka koyamba. Kugwiritsa ntchito kwawo pafupipafupi komanso kwachidule kuti kukhale kothandiza kwambiri.

Zitsanzo

Chitsanzo chimodzi chikuwonetsedwa momwe chikhoza kuwonetsedwa pamasamba angapo.

Markup

HTML ndiye mndandanda wanu wokhazikika wosayendetsedwa ndi maulalo.

<ul class = "breadcrumb" > 
  <li>
    <a href = "#" > Kwawo </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#"> Library </a> < span class = "divider" > / </span>   
  </li>
  <li class = "active" > 
    <a href = "#"> Deta </a> _ 
  </li>
</ul>

Multicon-page pagination

Nthawi yoti mugwiritse ntchito

Zosavuta komanso zosasinthika pang'ono zowuziridwa ndi Rdio, zabwino pamapulogalamu ndi zotsatira zosaka. Chotchinga chachikulu ndi chovuta kuphonya, chiwonjezeke mosavuta, ndipo chimapereka malo akulu odina.

Maulalo atsamba lachidziwitso

Maulalo amasinthidwa mwamakonda ndipo amagwira ntchito zingapo ndi kalasi yoyenera. .disabledpa maulalo osadina komanso .activepatsamba lapano.

Kukhazikika kosinthika

Onjezani limodzi mwamakalasi awiri osankha kuti musinthe masinthidwe amitundu: .pagination-centeredndi .pagination-right.

Zitsanzo

Chigawo chosasinthika cha pagination chimasinthasintha ndipo chimagwira ntchito zosiyanasiyana.

Markup

Kukulungidwa mu <div>, pagination ndi chabe <ul>.

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

Pager Kwa maulalo am'mbuyomu komanso otsatira

Za pager

Chigawo cha pager ndi gulu la maulalo osavuta kugwiritsa ntchito zilembo zamitundu yokhala ndi zowunikira komanso masitayelo opepuka. Ndi yabwino kwa masamba osavuta monga mabulogu kapena magazini.

Chitsanzo chosasinthika

Mwachikhazikitso, pager centers maulalo.

<ul class = "pager" > 
  <li>
    <a href = "#"> Zakale </a> _ 
  </li>
  <li>
    <a href = "#"> Kenako </a> _ 
  </li>
</ul>

Zogwirizana

Kapenanso, mutha kugwirizanitsa ulalo uliwonse kumbali:

<ul class = "pager" > 
  <li class = "previous" > 
    <a href = "#" > ← Zakale </a> 
  </li>
  <li class = "next" > 
    <a href = "#"> Zatsopano &rarr ; </a> 
  </li>
</ul>

Zolemba	Markup
Zosasintha	`<span class="label">Default</span>`
Chatsopano	`<span class="label label-success">New</span>`
Chenjezo	`<span class="label label-warning">Warning</span>`
Zofunika	`<span class="label label-important">Important</span>`
Zambiri	`<span class="label label-info">Info</span>`

Zojambula zofikira

Mwachikhazikitso, zikwangwani za Bootstrap zidapangidwa kuti ziziwonetsa zithunzi zolumikizidwa zomwe zili ndi zolembera zochepa.

Kwambiri makonda

Powonjezera pang'ono, ndizotheka kuwonjezera mtundu uliwonse wazinthu za HTML monga mitu, ndime, kapena mabatani pazithunzi.

Chizindikiro chazithunzi

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id ili si mi porta gravida ndi eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Zochita Zochita
Chizindikiro chazithunzi

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id ili si mi porta gravida ndi eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Zochita Zochita

Chifukwa chiyani timagwiritsa ntchito tizithunzi

Tizithunzi (kale .media-gridmpaka v1.4) ndi zabwino kwa ma gridi a zithunzi kapena makanema, zotsatira zosaka zithunzi, malonda ogulitsa, ma portfolio, ndi zina zambiri. Zitha kukhala maulalo kapena zokhazikika.

Zosavuta, zosinthika

Zolemba pazithunzi ndizosavuta - ulzokhala ndi chiwerengero lichilichonse ndizomwe zimafunikira. Ndiwosinthika kwambiri, kulola mtundu uliwonse wazinthu zokhala ndi zolembera zochulukirapo kuti zimakutira zomwe muli nazo.

Amagwiritsa ntchito makulidwe a gridi

Pomaliza, gawo la tizithunzi limagwiritsa ntchito makalasi a gridi omwe alipo - monga .span2kapena .span3-kuwongolera kukula kwazithunzi.

Chizindikiro

Monga tanena kale, chizindikiro chofunikira pazithunzithunzi ndizopepuka komanso zowongoka. Nayi mawonekedwe okhazikika azithunzi zolumikizidwa :

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

Pazokonda za HTML pazithunzithunzi, zolembera zimasintha pang'ono. <a>Kuti tilole zomwe zili mu block level kulikonse, timasinthana <div>motere:

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Chizindikiro chazithunzi </h5>
      <p> Mawu azithunzi pomwe pano... </p>
    </div>
  </li>
  ...
</ul>

Zitsanzo zambiri

Onani zosankha zanu zonse ndi magulu osiyanasiyana a gridi omwe mungapeze. Mukhozanso kusakaniza ndi ma size osiyana.

Zosasintha zopepuka

Kalasi yoyambira yolembedwanso

Ndi Bootstrap 2, tafewetsa kalasi yoyambira: .alertm'malo mwa .alert-message. Tachepetsanso zotsalira zomwe zimafunikira—ayi <p>amafunikira mwachisawawa, akunja okha <div>.

Uthenga umodzi wochenjeza

Pachigawo chokhazikika chokhala ndi ma code ochepa, tachotsa mawonekedwe osiyanitsa a zidziwitso za block, mauthenga omwe amabwera ndi zotchingira zambiri komanso zolemba zambiri. Kalasi nayonso yasintha kukhala .alert-block.

Zimayenda bwino ndi javascript

Bootstrap imabwera ndi pulogalamu yowonjezera ya jQuery yomwe imathandizira mauthenga ochenjeza, kuwapangitsa kuwachotsa mwachangu komanso kosavuta.

Pezani pulogalamu yowonjezera »

Zidziwitso zachitsanzo

Manga uthenga wanu ndi chithunzi chotseka mu div yokhala ndi kalasi yosavuta.

× Chenjezo! Chabwino, fufuzani nokha, simukuwoneka bwino kwambiri.

<div class = "chenjezo" > 
  <a class = "close"> × </a> _ 
  <strong> Chenjezo! </strong> Chabwino fufuzani inu nokha, simukuwoneka bwino kwambiri.
</div>

Wonjezerani mosavuta uthenga wa chenjezo ndi makalasi awiri omwe mungafune: .alert-blockkuti muwonjezere zowongolera ndi zolemba komanso .alert-headingmutu wofananira.

Chenjezo!

Chabwino, fufuzani nokha, simukuwoneka bwino kwambiri. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class = "alert alert-block" > 
  <a class = "close"> × </a> _ 
  <h4 class = "alert-heading" > Chenjezo! </ h4> 
  Chabwino dziyeseni nokha, simuli ...
</div>

Zosintha za Context Onjezani makalasi osankha kuti musinthe tanthauzo la zidziwitso

Cholakwika kapena ngozi

× O, bwerani! Sinthani zinthu zingapo ndikuyesa kutumizanso.

<div class = "cholakwika chochenjeza" > 
  ...
</div>

Kupambana

× Mwachita bwino! Munawerenga bwino uthenga wochenjezawu.

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

Zambiri

× Mungodziwiratu! Chenjezoli likufunika chisamaliro chanu, koma silofunika kwambiri.

<div class = "chidziwitso chochenjeza" > 
  ...
</div>

Zitsanzo ndi zizindikiro

Basic

Njira yofikira yomwe ili ndi gradient yoyima.

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

Mizeremizere

Amagwiritsa ntchito gradient kuti apange mizeremizere.

<div class = "kupita patsogolo-info 
     kupita patsogolo " >
  <div class = "bar" 
       style = " wide : 20 %; " ></div> 
</div>

Makanema

Amatenga chitsanzo chamizeremizere ndikuchiwonetsa.

<div class = "kupita patsogolo-ngozi 
     patsogolo-mizere yogwira " >
  <div class = "bar" 
       style = " wide : 40 %; " ></div> 
</div>

Zosankha ndi chithandizo cha msakatuli

Mitundu yowonjezera

Mipiringidzo yopita patsogolo imagwiritsa ntchito mayina amtundu womwewo monga mabatani ndi zidziwitso zamakongoletsedwe ofanana.

.progress-info
.progress-success
.progress-danger

Kapenanso, mutha kusintha mafayilo a LESS ndikugudubuza mitundu yanu ndi makulidwe anu.

Khalidwe

Mipiringidzo yopita patsogolo imagwiritsa ntchito kusintha kwa CSS3, kotero ngati mutasintha m'lifupi mwa javascript, idzasintha bwino.

Ngati mugwiritsa ntchito .activekalasi, .progress-stripedmipiringidzo yanu yopita patsogolo idzawonetsa mikwingwirima kumanzere kupita kumanja.

Thandizo la msakatuli

Mipiringidzo yopita patsogolo imagwiritsa ntchito ma gradients a CSS3, masinthidwe, ndi makanema ojambula kuti akwaniritse zotsatira zake zonse. Izi sizimathandizidwa mu IE7-8 kapena mitundu yakale ya Firefox.

Opera sichirikiza makanema ojambula pakali pano.

Zitsime

Gwiritsani ntchito chitsime ngati chosavuta pa chinthu kuti chiwonekere.

Taonani, ndili pachitsime!

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

Mabaji

Gwiritsani ntchito baji pazinthu zomwe simunawerenge kapena ngati chizindikiro chosavuta.

<span class = "baji" > 3 </div>

Tsekani chizindikiro

Gwiritsani ntchito chizindikiro chapafupi chotseka pochotsa zinthu monga ma modals ndi zidziwitso.

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

Magulu a mabatani Lowani mabatani kuti mugwiritse ntchito ngati chida

Magulu a batani

Chizindikiro cha chitsanzo

Checkbox ndi zokometsera wailesi

Mungodziwiratu

Mabatani otsikirako Mindandanda yotsitsa yomangidwa pamagulu a mabatani

Zotsitsa za batani

Chizindikiro cha chitsanzo

Kutsitsa kwa batani logawanika

Chizindikiro cha chitsanzo

Nav, ma tabo, ndi mapiritsi Kusanja kwa mndandanda wazomwe mungasinthire makonda kwambiri

Zosasintha zopepuka Kusindikiza komweko, magulu osiyanasiyana

Gulu loyambira lamphamvu

Chifukwa ma tabu ndi mapiritsi

Ma tabu oyambira

Mapiritsi oyambira

Zosasunthika Pangani ma tabu kapena mapiritsi kukhala ofukula

Momwe mungazisungire

Ma tabu osungidwa

Mapiritsi osanjikizidwa

Zotsitsa Pazinthu zapamwamba za nav

Mindandanda yazakudya idapangidwa kukhala yosavuta

Ma tabu okhala ndi zotsitsa

Mapiritsi okhala ndi zotsitsa

Nav mindandanda Pangani ma navs osavuta osanjikizidwa, abwino pazitsulo zam'mbali

Mayendedwe amtundu wa ntchito

Ndi zithunzi

Chitsanzo nav list

Chitsanzo ndi zithunzi

Tabable nav Bweretsani ma tabu kukhala amoyo kudzera pa javascript

Zomwe zikuphatikizidwa

Table chitsanzo

Pulogalamu yowonjezera ya jQuery

Chizindikiro chowongoka

Table mbali iliyonse

Ma tabu pansi

Ma tabu kumanzere

Ma tabu kumanja

Navbar

Static navbar chitsanzo

Navbar scaffolding

Dzina lamalonda

Fufuzani mawonekedwe

Kusiyanasiyana koyankhira kosankha

Nav maulalo

Kuwonjezera zotsitsa

Zinyenyeswazi za mkate

Chifukwa chiyani amazigwiritsa ntchito

Zitsanzo

Markup

Pagination Njira ziwiri zopangira paging kudzera pazomwe zili

Multicon-page pagination

Nthawi yoti mugwiritse ntchito

Maulalo atsamba lachidziwitso

Kukhazikika kosinthika

Zitsanzo

Markup

Pager Kwa maulalo am'mbuyomu komanso otsatira

Za pager

Chitsanzo chosasinthika

Zogwirizana

Zolemba zapamzere Label ndi mawu ofotokozera

Thumbnails Magulu a zithunzi, makanema, zolemba, ndi zina zambiri

Zojambula zofikira

Kwambiri makonda

Chizindikiro chazithunzi

Chizindikiro chazithunzi

Chifukwa chiyani timagwiritsa ntchito tizithunzi

Zosavuta, zosinthika

Amagwiritsa ntchito makulidwe a gridi

Chizindikiro

Zitsanzo zambiri

Masitayelo Ochenjeza za kupambana, chenjezo, ndi mauthenga olakwika

Zosasintha zopepuka

Kalasi yoyambira yolembedwanso

Uthenga umodzi wochenjeza

Zimayenda bwino ndi javascript

Zidziwitso zachitsanzo

Chenjezo!

Zosintha za Context Onjezani makalasi osankha kuti musinthe tanthauzo la zidziwitso