Zida zambiri zomwe zingagwiritsidwenso ntchito zimamangidwa mu Bootstrap kuti zipereke kuyenda, zidziwitso, popovers, ndi zina zambiri.
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 amasinthidwa mwamakonda ndipo amagwira ntchito zingapo ndi kalasi yoyenera. .disabled
pa maulalo osadina komanso .active
patsamba lapano.
Onjezani limodzi mwamakalasi awiri osasankha kuti musinthe masinthidwe amitundu: .pagination-centered
ndi .pagination-right
.
Chigawo chapagination chosasinthika chimakhala chosinthika ndipo chimagwira ntchito zosiyanasiyana.
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>
Chigawo cha pager ndi gulu la maulalo osavuta kukhazikitsa amitundu okhala ndi mawonekedwe opepuka komanso masitayelo opepuka. Ndi yabwino kwa masamba osavuta monga mabulogu kapena magazini.
Mwachikhazikitso, pager centers maulalo.
- <ul class = "pager" >
- <li>
- <a href = "#"> Zakale </a> _
- </li>
- <li>
- <a href = "#"> Kenako </a> _
- </li>
- </ul>
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> |
Kupambana | <span class="label label-success">Success</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> |
Bootstrap imapereka gawo lopepuka, losinthika lotchedwa gawo la ngwazi kuti liwonetse zomwe zili patsamba lanu. Zimagwira ntchito bwino pazamalonda komanso masamba olemera.
Mangirirani zomwe div
mwalemba motere:
- <div class = "hero-unit" >
- <h1> Mutu </h1>
- <p> Tagline </p>
- <p>
- <a class = "btn btn-primary btn-large">
- Dziwani zambiri
- </a>
- </p>
- </div>
Ichi ndi gawo losavuta la ngwazi, gawo losavuta la jumbotron poyitanitsa chidwi chowonjezereka pazomwe zili kapena zambiri.
Chipolopolo chosavuta h1
kuti mupangire malo moyenerera ndikugawa magawo azinthu patsamba. Itha kugwiritsa ntchito h1
's default small
, element komanso zigawo zina zambiri (ndi masitaelo owonjezera).
- <div class = "page-haeder" >
- <h1> Chitsanzo cha mutu watsamba </h1>
- </div>
Mwachikhazikitso, zikwangwani za Bootstrap zidapangidwa kuti ziziwonetsa zithunzi zolumikizidwa zomwe zimafunikira zochepa.
Powonjezera pang'ono, ndizotheka kuwonjezera zamtundu uliwonse wa HTML monga mitu, ndime, kapena mabatani pazithunzi.
Tizithunzi (kale .media-grid
mpaka 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.
Zolemba pazithunzi ndizosavuta - ul
zokhala ndi chiwerengero li
chilichonse ndizomwe zimafunikira. Ndiwosinthika kwambiri, kulola mtundu uliwonse wazinthu zokhala ndi zolembera zochulukirapo kuti zimakutira zomwe muli nazo.
Pomaliza, gawo la tizithunzi limagwiritsa ntchito makalasi a gridi omwe alipo - monga .span2
kapena .span3
-kuwongolera kukula kwazithunzi.
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>
Pazinthu zamtundu wa HTML pazithunzi, 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>
Ndi Bootstrap 2, tafewetsa kalasi yoyambira: .alert
m'malo mwa .alert-message
. Tachepetsanso zotsalira zomwe zimafunikira—ayi <p>
amafunikira mwachisawawa, akunja okha <div>
.
Pachigawo chokhazikika chokhala ndi ma code ochepa, tachotsa mawonekedwe osiyanitsa a zidziwitso zamabuloka, mauthenga omwe amabwera ndi ma padding ambiri komanso zolemba zambiri. Kalasi nayonso yasintha kukhala .alert-block
.
Bootstrap imabwera ndi pulogalamu yowonjezera ya jQuery yomwe imathandizira mauthenga ochenjeza, kuwapangitsa kuwachotsa mwachangu komanso kosavuta.
Manga uthenga wanu ndi chithunzi chotseka mu div yokhala ndi kalasi yosavuta.
- <div class = "chenjezo" >
- <a class = "close" data-dismiss = "chenjezo"> × </a> _
- <strong> Chenjezo! </strong> Chabwino fufuzani inu nokha, simukuwoneka bwino kwambiri.
- </div>
Wonjezerani mosavuta uthenga wa chenjezo ndi makalasi awiri omwe mungasankhe: .alert-block
kuti muwongolere ma padding ndi zolemba zambiri komanso mutu .alert-heading
wofananira.
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" data-dismiss = "chenjezo"> × </a> _
- <h4 class = "alert-heading" > Chenjezo! </ h4>
- Chabwino dziyeseni nokha, simuli ...
- </div>
- <div class = "chidziwitso-cholakwika" >
- ...
- </div>
- <div class = "alert alert-success" >
- ...
- </div>
- <div class = "chidziwitso chochenjeza" >
- ...
- </div>
Mzere wotsikirapo womwe uli ndi gradient yoyima.
- <div class = "progress" >
- <div class = "bar"
- style = " wide : 60 %; " ></div>
- </div>
Amagwiritsa ntchito gradient kuti apange mizeremizere.
- <div class = "kupita patsogolo-info
- kupita patsogolo " >
- <div class = "bar"
- style = " wide : 20 %; " ></div>
- </div>
Amatenga chitsanzo chamizeremizere ndikuchiwonetsa.
- <div class = "kupita patsogolo-ngozi
- patsogolo-mizere yogwira " >
- <div class = "bar"
- style = " m'lifupi : 40 %; " ></div>
- </div>
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.
Mipiringidzo yopita patsogolo imagwiritsa ntchito kusintha kwa CSS3, kotero ngati mutasintha m'lifupi mwa javascript, idzasintha bwino.
Ngati mugwiritsa ntchito .active
kalasi, .progress-striped
mipiringidzo yanu yopita patsogolo idzawonetsa mikwingwirima kumanzere kupita kumanja.
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 pakadali pano.
Gwiritsani ntchito chitsime ngati chosavuta pa chinthu kuti chiwonekere.
- <div class = "chabwino" >
- ...
- </div>
Gwiritsani ntchito chizindikiro chapafupi chotseka pochotsa zinthu monga ma modals ndi zidziwitso.
- <a class = "close" > × </a>