Navigation, alerts, popovers leh thil dang tam tak pe turin reusable component dozens zet siam a ni.
Link list tarlanna tur toggleable, contextual menu a awm bawk. Dropdown javascript plugin hmangin interactive taka siam a ni .
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdown-menu" >
- <li><a tabindex = "-1" href = "#" > Thiltih tur </a></li>
- <li><a tabindex = "-1" href = "#" > Thiltih dang </a></li>
- <li><a tabindex = "-1" href = "#" > Hetah hian thil dang </a></li>
- <li class = "insem darhtu" </li> tih a ni
- <li><a tabindex = "-1" href = "#" > Link hrang hrang </a></li>
- </ul> tih a ni
Dropdown menu chauh en chuan hetah hian HTML mamawh chu a awm. Dropdown-a trigger leh dropdown menu chu .dropdown
, emaw , declare element dang emaw chhungah i wrap a ngai a position: relative;
ni. Tichuan menu chu siam mai rawh.
- <div class = "a hnuai lam" >
- <!-- Link emaw button emaw hmangin dropdown toggle theih a ni -->
- A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a , a rilru a hah em em bawk a . aria- labelledby = " dLabel " >
- <li><a tabindex = "-1" href = "#" > Thiltih tur </a></li>
- <li><a tabindex = "-1" href = "#" > Thiltih dang </a></li>
- <li><a tabindex = "-1" href = "#" > Hetah hian thil dang </a></li>
- <li class = "insem darhtu" </li> tih a ni
- <li><a tabindex = "-1" href = "#" > Link hrang hrang </a></li>
- </ul> tih a ni
- </div> tih a ni
Menu te chu dinglamah align la, dropdown level dang pawh dah belh rawh.
Dropdown menu chu .pull-right
a atanga dinglam hawiin add rawh ..dropdown-menu
- A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. <ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >
- ...
- </ul> tih a ni
Dropdown menus extra level add la, OS X ang bawkin hover-ah a lang ang a, markup addition awlsam tak tak a awm bawk. Automatic styling atan dropdown menu awmsaah .dropdown-submenu
eng pawh dah belh rawh .li
- A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a , a rilru a hah em em bawk a . aria- labelledby = " dLabel " >
- ...
- <li class = "a hnuaia mi ang hian" >
- <a tabindex = "-1" href = "#" > Thil dang tih theih </a>
- <ul class = "a hnuaia mi ang hian" >
- ...
- </ul> tih a ni
- </li> tih a ni
- </ul> tih a ni
Rdio atanga inspired pagination awlsam tak, apps leh search results atan a tha hle. Block lian tak hi miss harsa tak a ni a, awlsam taka scalable a ni a, click area lian tak tak a pe bawk.
- <div class = "pagination" > tih hi a ni
- <ul> tih a ni
- <li><a href = "#" > Hmanlai </a></li>
- A rilru a buai em em a, a rilru a hah em em bawk a. 1 </a> < /li >
- A rilru a buai em em a, a rilru a hah em em bawk a. 2 </a> < /li >
- A rilru a buai em em a, a rilru a hah em em bawk a. 3 </a> < /li >
- A rilru a buai em em a, a rilru a hah em em bawk a. 4 </a> < /li >
- <li><a href = "#" > A dawt leh tur </a></li>
- </ul> tih a ni
- </div> tih a ni
Link te hi thil awmdan hrang hrangah customizable a ni. .disabled
Link click theih loh leh .active
page awm mek tarlanna atan hmang ang che .
- <div class = "pagination " > tih hi a ni
- <ul> tih a ni
- <li class = "tih theih loh" ><a href = "#" > Hmanlai </a></li>
- A rilru a buai em em a, a rilru a hah em em bawk a. <li class = "active" ><a href = "#" > 1 </a></li>
- ...
- </ul> tih a ni
- </div> tih a ni
Pagination link alignment thlak danglam turin optional class pahnih zinga pakhat dah belh rawh: .pagination-centered
leh .pagination-right
.
- <div class = "pagination page-a innghat" >
- ...
- </div> tih a ni
- <div class = "pagination phek-dikna" >
- ...
- </div> tih a ni
Light markup leh style hmanga pagination implementation awlsam tak takte tan previous leh next link rang tak tak. Blog emaw magazine emaw ang chi site awlsam tak tak tan chuan a tha hle.
Default-ah chuan pager hian link a center a.
- < ul class = "pager" tih hi a ni
- <li><a href = "#" > Hmanlai </a></li>
- <li><a href = "#" > A dawt leh tur </a></li>
- </ul> tih a ni
A dang pawhin link tin chu a sir lamah i align thei bawk:
- < ul class = "pager" tih hi a ni
- <li class = "a hma lam" >
- A rilru a buai em em a, a rilru a hah em em bawk a. <a href = "#" > ← Kum upa zawk </a>
- </li> tih a ni
- <li class = "a dawt leh tur" >
- <a href = "#" > A thar zawk → </a> tih a ni
- </li> tih a ni
- </ul> tih a ni
Pager link te hian .disabled
pagination atanga general utility class an hmang bawk.
- < ul class = "pager" tih hi a ni
- <li class = "a hmaa tihtawp tawh" >
- A rilru a buai em em a, a rilru a hah em em bawk a. <a href = "#" > ← Kum upa zawk </a>
- </li> tih a ni
- ...
- </ul> tih a ni
Labels te pawh a awm | Markup a ni |
---|---|
Hlawhchhamna | <span class="label">Default</span> |
Hlawhtling | <span class="label label-success">Success</span> |
Vaulawkna | <span class="label label-warning">Warning</span> |
Pawimawh | <span class="label label-important">Important</span> |
Info | <span class="label label-info">Info</span> |
Inverse a ni | <span class="label label-inverse">Inverse</span> |
Hming | Entirna | Markup a ni |
---|---|---|
Hlawhchhamna | 1. a ni | <span class="badge">1</span> |
Hlawhtling | 2. 2. | <span class="badge badge-success">2</span> |
Vaulawkna | 4. 4. | <span class="badge badge-warning">4</span> |
Pawimawh | 6. 6. | <span class="badge badge-important">6</span> |
Info | 8. A ni | <span class="badge badge-info">8</span> |
Inverse a ni | 10 a ni | <span class="badge badge-inverse">10</span> |
I site-a key content pholanna tur component lightweight, flexible tak a ni. Marketing leh content tamna site-ah te a thawk tha hle.
Hei hi hero unit awlsam tak a ni a, featured content emaw information emaw ngaihven belh zelna tur jumbotron-style component awlsam tak a ni.
- <div class = "mi huaisen-unit" > tih hi a ni
- <h1> Thupui </h1> tih a ni
- <p> Tagline hmangin </p> tih a ni
- <p> tih a ni
- <a class = "btn btn-a bul tanna btn-a lian" >
- Hriat belh rawh
- </a> tih a ni
- </p> tih a ni
- </div> tih a ni
h1
Page pakhata thu awmte chu a remchan dan anga space out leh segment turin shell awlsam tak a ni. A h1
's default small
, element bakah component dang tam zawk (style dang nen) a hmang thei bawk.
- <div class = "phek-a thupui" >
- <h1> Entirna phek header </h1>
- </div> tih a ni
Default-ah chuan Bootstrap-a thumbnail te hi linked images te chu markup mamawh tlem ber hmanga pholan theih tura siam a ni.
Extra markup tlem tal hmangin HTML content chi hrang hrang heading, paragraph, button te chu thumbnail-ah dah theih a ni.
A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida chu eget metus ah a awm a. Nullam id dolor id nibh ultricies lirthei ut id elit.
A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida chu eget metus ah a awm a. Nullam id dolor id nibh ultricies lirthei ut id elit.
A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida chu eget metus ah a awm a. Nullam id dolor id nibh ultricies lirthei ut id elit.
Thumbnail ( .media-grid
a hma chuan v1.4 thleng) hi thlalak emaw video emaw grid, image search result, retail products, portfolio leh thil dang tam tak atan a tha hle. Link emaw static content emaw pawh a ni thei.
Thumbnail markup hi a awlsam hle—a element ul
engzat pawh nei chu a mamawh vek a ni. li
Super flexible a ni bawk a, i content wrap theihna tur markup tlemte chauh hmangin content chi hrang hrang pawh a phalsak bawk.
A tawp berah chuan thumbnails component hian grid system class awmsa—like .span2
or .span3
—thumbnail dimension control nan a hmang a.
Sawi tawh ang khan thumbnail atana markup mamawh chu a light leh straightforward a ni. Linked images te default setup chu hetiang hian kan rawn tarlang e :
- <ul class = "thumbnail te" > tih a ni
- <li class = "span4" > tih a ni
- <a href = "#" class = "thumbnail" > tih a ni
- <img src = "A hmunhma leh a hmunhma te" alt = "" >
- </a> tih a ni
- </li> tih a ni
- ...
- </ul> tih a ni
Thumbnail-a custom HTML content atan chuan markup chu a danglam deuh thin. Khawi hmunah pawh block level content phalsak turin kan swap the <a>
for a <div>
like so:
- <ul class = "thumbnail te" > tih a ni
- <li class = "span4" > tih a ni
- <div class = "thumbnail" > tih hi a ni
- <img src = "A hmunhma leh a hmunhma te" alt = "" >
- <h3> Thumbnail label </h3> tih a ni
- <p> Thumbnail thuziak... </p>
- </div> tih a ni
- </li> tih a ni
- ...
- </ul> tih a ni
I duhthlan tur zawng zawng chu grid class hrang hrang i neih theihte hmangin explore rawh. Size hrang hrang pawh mix leh match theih a ni bawk.
Text eng pawh leh optional dismiss button chu wrap la .alert
, basic warning alert message i hmu ang.
- <div class = "a hriattir" >
- <button type = "button" class = "khar" data-dismiss = "alert" > × </button>
- <strong> Vaukhânna! </strong> Best check yo self, i hmel a tha lutuk lo.
- </div> tih a ni
Mobile Safari leh Mobile Opera browser-ah chuan data-dismiss="alert"
attribute bakah hian tag href="#"
hman hunah alerts dismissal atan an mamawh a ni.<a>
- <a href = "#" class = "khar" data-dismiss = "alert" > × </button> tih a ni
A dang pawhin <button>
data attribute nei element i hmang thei bawk a, chu chu kan docs atan tih kan thlang a ni. , i hman hunah chuan <button>
i dah tel tur a ni a, type="button"
chuti lo chuan i form-te chu i thehlut lo thei bawk.
- <button type = "button" class = "khar" data-dismiss = "alert" > × </button>
Alerts jQuery plugin hmangin rang tak leh awlsam takin alerts paih theih a ni.
Message rei zawk tan chuan alert wrapper chung leh hnuai lama padding chu tihpun la, .alert-block
.
Best check yo self, i hmel a tha lutuk lo. Nulla vitae elit libero tih hi a ni a, a man pawh a tlawm hle. A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. vel scelerisque nisl consectetur et.
- <div class = "alert-block hriattirna" >
- <button type = "button" class = "khar" data-dismiss = "alert" > × </button>
- <h4> Vaukhânna! </h4> tih a ni
- Best check yo self, i ni lo...
- </div> tih a ni
Alert pakhat connotation thlak danglam turin optional class te dah belh bawk ang che.
- <div class = "alert-a tihsual hriattirna" >
- ...
- </div> tih a ni
- <div class = "alert-hlawhtlinna" >
- ...
- </div> tih a ni
- <div class = "alert-a hriattirna-info" >
- ...
- </div> tih a ni
Default progress bar ah chuan vertical gradient a awm a.
- <div class = "hmasawnna" >
- <div class = "bar" style = " zau zawng : 60 %; " ></div>
- </div> tih a ni
Gradient hmangin striped effect a siam thin. IE7-8 ah hian a awm lo.
- <div class = "hmasawnna hmasawnna-striped" >
- <div class = "bar" style = " zau zawng : 20 %; " ></div>
- </div> tih a ni
Add .active
to .progress-striped
ah hian stripes te chu dinglam atanga veilam ah animate theih nan. IE version zawng zawngah a awm lo.
- <div class = "hmasawnna hmasawnna-striped active" >
- <div class = "bar" style = " zau zawng : 40 %; " ></div>
- </div> tih a ni
Bar tam tak chu pakhatah dah la .progress
, stack rawh.
- <div class = "hmasawnna" >
- <div class = "bar bar-hlawhtlinna" style = " zau zawng : 35 %; " ></div>
- <div class = "bar bar-warning" style = " zau zawng : 20 %; " ></div>
- <div class = "bar bar-hlauhawm" style = " zau zawng : 10 %; " ></div>
- </div> tih a ni
Progress bar-ah hian style inang lo tak tak siam nan button leh alert class inang thenkhat an hmang thin.
- <div class = "hmasawnna hmasawnna-info" >
- <div class = "bar" style = " zau zawng : 20 % " ></div>
- </div> tih a ni
- <div class = "hmasawnna hmasawnna-hlawhtlinna" >
- <div class = "bar" style = " zau zawng : 40 % " ></div>
- </div> tih a ni
- <div class = "hmasawnna hmasawnna-vaukhânna" >
- <div class = "bar" style = " zau zawng : 60 % " ></div>
- </div> tih a ni
- <div class = "hmasawnna hmasawnna-hlauhawm" >
- <div class = "bar" style = " zau zawng : 80 % " ></div>
- </div> tih a ni
Solid color ang bawkin striped progress bar hrang hrang kan nei bawk.
- <div class = "hmasawnna hmasawnna-info hmasawnna-striped" >
- <div class = "bar" style = " zau zawng : 20 % " ></div>
- </div> tih a ni
- <div class = "hmasawnna hmasawnna-hlawhtlinna hmasawnna-striped" >
- <div class = "bar" style = " zau zawng : 40 % " ></div>
- </div> tih a ni
- <div class = "hmasawnna hmasawnna-vaukhânna hmasawnna-striped" >
- <div class = "bar" style = " zau zawng : 60 % " ></div>
- </div> tih a ni
- <div class = "hmasawnna hmasawnna-hlauhawm hmasawnna-striped" >
- <div class = "bar" style = " zau zawng : 80 % " ></div>
- </div> tih a ni
Progress bar-ah hian CSS3 gradient, transition, leh animation te hmangin an effect zawng zawng an hmu vek a. Heng features te hi IE7-9 emaw Firefox version hlui zawkah chuan a support lo.
Internet Explorer 10 leh Opera 12 aia version hmasa zawkah chuan animation a support lo.
Element pakhata inset effect pe turin well chu simple effect angin hmang ang che.
- <div class = "a tha" > tih hi a ni
- ...
- </div> tih a ni
Control padding leh rounded corner te chu optional modifier class pahnih hmangin a awm bawk.
- <div class = "a tha hle-a lian" >
- ...
- </div> tih a ni
- <div class = "a tha-a te" >
- ...
- </div> tih a ni
Modal leh alerts ang chi content dismiss nan generic close icon hmang ang che.
- <button class = "khar" > × </button> tih a ni
iOS devices ah hian anchor i hman duh chuan click events atan href="#" a ngai a ni.
- <a class = "khar" href = "#" > × </a> tih a ni
Display tenau emaw behavior tweaks emaw atan class awlsam tak, focused tak tak te.
Element pakhat chu a veilamah float rawh
- class = "khawi lamah hruai rawh".
- . pull - veilam { .
- float : veilam ;
- } a ni.
Element pakhat chu dinglam hawiin float rawh
- class = "pull-right" tih a ni.
- . pull - dinglam { .
- float : dinglam ;
- } a ni.
Element pakhat rawng chu thlak rawh#999
- class = "muted" tih a ni.
- . muted { a ni.
- rawng : #999 a ni a;
- } a ni.
float
Element eng pawhah clear rawh
- class = "a tifai" tih a ni.
- . chiang taka siam { .
- * zoom : 1 a ni a;
- &: hma , .
- &: hnuah { .
- display : table ;
- thupui : "" ;
- } a ni.
- &: hnuah { .
- chiang : pahnih ;
- } a ni.
- } a ni.