Tá na mórán comhpháirteanna ath-inúsáidte ionsuite i Bootstrap chun loingseoireacht, foláirimh, popovers agus go leor eile a sholáthar.
Leathanach uimhriúcháin ultra-simplí agus íostach spreagtha ag Rdio, iontach le haghaidh apps agus torthaí cuardaigh. Is deacair an bloc mór a chailleann, inscálaithe go héasca, agus soláthraíonn sé limistéir mhóra cliceáil.
Is féidir naisc a shaincheapadh agus oibríonn siad i roinnt cúinsí leis an rang ceart. .disabled
le haghaidh naisc nach féidir a chliceáil agus .active
le haghaidh an leathanaigh reatha.
Cuir ceachtar den dá rang roghnach leis chun ailíniú naisc uimhriúcháin a athrú: .pagination-centered
agus .pagination-right
.
Tá an chomhpháirt uimhriúcháin réamhshocraithe solúbtha agus oibríonn sé i roinnt éagsúlachtaí.
Fillte i <div>
leathanach , níl ann ach leathanach <ul>
.
- <div class = "leathanach" >
- <ul>
- <li><a href = " #"> Roimhe </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 = " #"> Ar Aghaidh </a> < /li>
- </ul>
- </div>
Is é atá sa chomhpháirt glaoire ná sraith nasc le haghaidh cur i bhfeidhm simplí leathanach le marcáil éadrom agus fiú stíleanna níos éadroime. Tá sé iontach do shuímh simplí cosúil le blaganna nó irisí.
De réir réamhshocraithe, díríonn an glaoire naisc.
- <ul class = "pager" >
- <li>
- <a href="#"> Roimhe </a> _ _ _
- </li>
- <li>
- <a href="#"> Ar Aghaidh </a> _ _
- </li>
- </ul>
Nó, is féidir leat gach nasc a ailíniú leis na taobhanna:
- <ul class = "pager" >
- <li class = "previous" >
- <a href="#"> & larr ; _ Níos sine </a>
- </li>
- <li rang = "ar aghaidh" >
- <a href="#"> Níos nuaí & rarr ; </a>
- </li>
- </ul>
Lipéid | Marcáil |
---|---|
Réamhshocrú | <span class="label">Default</span> |
Nua | <span class="label label-success">New</span> |
Rabhadh | <span class="label label-warning">Warning</span> |
Tábhachtach | <span class="label label-important">Important</span> |
Eolas | <span class="label label-info">Info</span> |
De réir réamhshocraithe, tá mionsamhlacha Bootstrap deartha chun íomhánna nasctha a thaispeáint le híosmhéid marcála riachtanach.
Le beagán marcála breise, is féidir aon chineál ábhar HTML cosúil le ceannteidil, ailt, nó cnaipí a chur isteach i mionsamhlacha.
Tá mionsamhlacha ( .media-grid
go dtí v1.4 roimhe seo) iontach le haghaidh greillí grianghraif nó físeáin, torthaí cuardaigh íomhá, táirgí miondíola, punanna, agus go leor eile. Is féidir iad a bheith ina naisc nó ina n-ábhar statach.
Tá marcáil mionsamhlacha simplí—is é sin ul
le haon líon li
eilimintí atá ag teastáil. Tá sé thar a bheith solúbtha freisin, rud a ligeann d'aon chineál ábhair a bhfuil beagán níos mó marcála aige chun d'inneachar a chuimilt.
Ar deireadh, úsáideann comhpháirt na mionsamhlacha aicmí córais ghreille atá ann cheana féin - cosúil le .span2
nó .span3
- chun toisí mionsamhlacha a rialú.
Mar a luadh cheana, tá an marcáil riachtanach le haghaidh mionsamhlacha éadrom agus simplí. Seo breathnú ar an socrú réamhshocraithe le haghaidh íomhánna nasctha :
- <ul class = "mionsamhlacha" >
- <li class = "span3" >
- < a href = " # " class = " mionsamhail " >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
Maidir le hábhar HTML saincheaptha i mionsamhlacha, athraíonn an marcáil beagán. Chun an t-ábhar blocleibhéil a cheadú áit ar bith, malartóidh muid é le <a>
haghaidh a <div>
leithéid:
- <ul class = "mionsamhlacha" >
- <li class = "span3" >
- <div class = "mionsamhla" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> Lipéad mionsamhla </h5>
- <p> Fotheideal mionsamhla anseo... </p>
- </div>
- </li>
- ...
- </ul>
Le Bootstrap 2, tá an bunrang simplithe againn: .alert
in ionad .alert-message
. Táimid tar éis an t-íosmhéid marcála a theastaíonn a laghdú freisin—ní <p>
gá de réir réamhshocraithe, gan ach an t-imeacht <div>
.
Chun comhpháirt níos marthanaí agus níos lú cód a fháil, tá deireadh curtha againn leis an gcuma idirdhealaitheach le haghaidh blocrabhaidh, teachtaireachtaí a thagann le níos mó stuála agus níos mó téacs de ghnáth. D'athraigh an rang go .alert-block
.
Tagann Bootstrap le breiseán jQuery iontach a thacaíonn le teachtaireachtaí foláirimh, rud a fhágann gur féidir iad a dhíbhe go tapa agus go héasca.
Wrap do theachtaireacht agus deilbhín gar roghnach i div le rang simplí.
- <div class = "aire" >
- <a class="close"> × </a> _ _ _
- <strong> Rabhadh! </strong> Is fearr a sheiceáil duit féin, níl tú ag breathnú ró-mhaith.
- </div>
Leathnaigh an teachtaireacht foláirimh chaighdeánach go héasca le dhá rang roghnacha: .alert-block
le haghaidh tuilleadh stuála agus rialuithe téacs agus .alert-heading
le haghaidh ceannteideal meaitseála.
Is fearr a sheiceáil leat féin, níl tú ag breathnú ró-mhaith. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, nó scelerisque nisl consectetur et.
- <div class = "bloc foláirimh" >
- <a class="close"> × </a> _ _ _
- <h4 class = "alert-heading" > Rabhadh! </h4>
- Is fearr seiceáil leat féin, níl tú ...
- </div>
- <div class = "alert alert-error" >
- ...
- </div>
- <div class = "alert alert-rath" >
- ...
- </div>
- <div class = "alert alert-info" >
- ...
- </div>
Barra dul chun cinn réamhshocraithe le grádán ceartingearach.
- <div class = "progress" >
- <div class = "barra"
- style = " leithead : 60 %; " ></div>
- </div>
Úsáideann sé grádán chun éifeacht stríocach a chruthú.
- < div class = " dul chun cinn progress-info
- dul chun cinn" >
- <div class = "barra"
- style = " leithead : 20 %; " ></div>
- </div>
Tógann an sampla stríocach agus beocht é.
- < div class = " dul chun cinn progress-danger
- gníomhach le dul chun cinn" >
- <div class = "barra"
- style = " leithead : 40 %; " ></div>
- </div>
Úsáideann barraí dul chun cinn cuid de na hainmneacha ranga céanna mar chnaipí agus foláirimh le haghaidh stílithe comhchosúla.
.progress-info
.progress-success
.progress-danger
Nó, is féidir leat na comhaid LESS a shaincheapadh agus do chuid dathanna agus méideanna féin a rolladh.
Úsáideann barraí dul chun cinn aistrithe CSS3, mar sin má choigeartóidh tú an leithead go dinimiciúil trí javascript, déanfar é a athrú go réidh.
Má úsáideann tú an .active
rang, beochtóidh do .progress-striped
bharraí dul chun cinn na stríoca ó chlé go deas.
Úsáideann barraí dul chun cinn grádáin CSS3, aistrithe agus beochan chun a n-éifeachtaí go léir a bhaint amach. Ní thacaítear leis na gnéithe seo in IE7-8 nó i leaganacha níos sine de Firefox.
Ní thacaíonn Opera le beochan faoi láthair.
Bain úsáid as an tobar mar éifeacht shimplí ar eilimint chun éifeacht inset a thabhairt dó.
- <div rang = "go maith" >
- ...
- </div>
Bain úsáid as an deilbhín gar-chineálach chun ábhar cosúil le módúil agus foláirimh a dhíbhe.
- <a class="close"> & amanna ; _ </a>