Comhpháirteanna

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.

Grúpaí cnaipí

Úsáid grúpaí cnaipí chun cnaipí iolracha a cheangal le chéile mar chomhpháirt ilchodach amháin. Tóg iad le sraith <a><button>eilimintí.

Is féidir leat tacair de a chur le chéile freisin <div class="btn-group">i <div class="btn-toolbar">do thionscadail níos casta.

1 2 3 4
5 6 7
8

Marcáil shampla

Seo mar a lorgaíonn an HTML grúpa cnaipe caighdeánach a tógadh le cnaipí clib ancaire:

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

Agus le barra uirlisí le haghaidh grúpaí iolracha:

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

Blasanna ticbhosca agus raidió

Is féidir le grúpaí cnaipí feidhmiú mar raidiónna freisin, áit nach féidir ach cnaipe amháin a bheith gníomhach, nó ticbhoscaí, áit a bhféadfadh líon ar bith cnaipí a bheith gníomhach. Féach ar na doiciméid Javascript chuige sin.

Faigh javascript »


Cinnirí suas

Tá CSS do ghrúpaí cnaipe i gcomhad ar leith, button-groups.less.

Cnaipí anuas

Bain úsáid as aon chnaipe chun roghchlár anuas a spreagadh trína chur laistigh de .btn-groupagus trí mharcáil ceart an roghchláir a sholáthar.

Marcáil shampla

Cosúil le grúpa cnaipí, úsáideann ár marcáil marcáil cnaipe rialta, ach le dornán breiseanna chun an stíl a bheachtú agus chun tacú le breiseán jQuery anuas Bootstrap.

  1. <div class = "btn-group" >
  2. <a class="btn dropdown-toggle" data-toggle = "titim" href="#"> _ _ _ _
  3. Gníomh
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "roghchlár anuas" >
  7. <!-- naisc roghchláir anuas -->
  8. </ul>
  9. </div>

Scoilt anuas na cnaipí

Ag tógáil ar stíleanna agus marcáil an ghrúpa cnaipe, is féidir linn cnaipe scoilte a chruthú go héasca. Tá gníomh caighdeánach ar chlé i gceist le cnaipí scoilte agus scorán anuas ar dheis le naisc chomhthéacsúla.

Marcáil shampla

Déanaimid leathnú ar na gnáth-anuasanna cnaipe chun an dara gníomh cnaipe a sholáthar a fheidhmíonn mar truicear anuas ar leith.

  1. <div class = "btn-group" >
  2. <a class="btn" href="#"> Gníomh </a> _ _ _ _ _
  3. <a class="btn dropdown-toggle" data-toggle = "titim" href="#"> _ _ _ _
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "roghchlár anuas" >
  7. <!-- naisc roghchláir anuas -->
  8. </ul>
  9. </div>

Leathanaigh ilchonaire

Cathain a úsáid

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.

Naisc leathanach ráiteasacha

Is féidir naisc a shaincheapadh agus oibríonn siad i roinnt cúinsí leis an rang ceart. .disabledle haghaidh naisc nach féidir a chliceáil agus .activele haghaidh an leathanaigh reatha.

Ailíniú solúbtha

Cuir ceachtar den dá rang roghnach leis chun ailíniú naisc uimhriúcháin a athrú: .pagination-centeredagus .pagination-right.

Samplaí

Tá an chomhpháirt uimhriúcháin réamhshocraithe solúbtha agus oibríonn sé i roinnt éagsúlachtaí.

Marcáil

Fillte i <div>leathanach , níl ann ach leathanach <ul>.

  1. <div class = "leathanach" >
  2. <ul>
  3. <li><a href = " #"> Roimhe </a> < /li>
  4. <li class = "active" >
  5. <a href="#"> 1 </a> _ _ _
  6. </li>
  7. <li><a href="#">2 </a> < / li >
  8. <li><a href="#">3 </a> < / li >
  9. <li><a href="#">4 </a> < / li >
  10. <li><a href = " #"> Ar Aghaidh </a> < /li>
  11. </ul>
  12. </div>

Pager Le haghaidh naisc thapa roimhe seo agus na chéad naisc eile

Maidir le glaoire

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

Sampla réamhshocraithe

De réir réamhshocraithe, díríonn an glaoire naisc.

  1. <ul class = "pager" >
  2. <li>
  3. <a href="#"> Roimhe </a> _ _ _
  4. </li>
  5. <li>
  6. <a href="#"> Ar Aghaidh </a> _ _
  7. </li>
  8. </ul>

Naisc ailínithe

Nó, is féidir leat gach nasc a ailíniú leis na taobhanna:

  1. <ul class = "pager" >
  2. <li class = "previous" >
  3. <a href="#"> & larr ; _ Níos sine </a>
  4. </li>
  5. <li rang = "ar aghaidh" >
  6. <a href="#"> Níos nuaí & rarr ; </a>
  7. </li>
  8. </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>

Mionsamhlacha réamhshocraithe

De réir réamhshocraithe, tá mionsamhlacha Bootstrap deartha chun íomhánna nasctha a thaispeáint le híosmhéid marcála riachtanach.

An-customizable

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.

  • Lipéad mionsamhlacha

    Cras justo odio, dapibus agus facilisis in, egestas eget quam. Donec id elit non mi porta gravida agus eget metus. Nullam id dolor id ultricies vehicula ut id elit.

    Gníomh Gníomh

  • Lipéad mionsamhlacha

    Cras justo odio, dapibus agus facilisis in, egestas eget quam. Donec id elit non mi porta gravida agus eget metus. Nullam id dolor id ultricies vehicula ut id elit.

    Gníomh Gníomh

Cén fáth mionsamhlacha a úsáid

Tá mionsamhlacha ( .media-gridgo 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.

Simplí, marcáil solúbtha

Tá marcáil mionsamhlacha simplí—is é sin ulle haon líon lieilimintí 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.

Úsáideann sé méideanna colún greille

Ar deireadh, úsáideann comhpháirt na mionsamhlacha aicmí córais ghreille atá ann cheana féin - cosúil le .span2.span3- chun toisí mionsamhlacha a rialú.

An marcáil

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 :

  1. <ul class = "mionsamhlacha" >
  2. <li class = "span3" >
  3. < a href = " # " class = " mionsamhail " >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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:

  1. <ul class = "mionsamhlacha" >
  2. <li class = "span3" >
  3. <div class = "mionsamhla" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Lipéad mionsamhla </h5>
  6. <p> Fotheideal mionsamhla anseo... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Tuilleadh samplaí

Déan iniúchadh ar do chuid roghanna go léir leis na ranganna eangaí éagsúla atá ar fáil duit. Is féidir leat méideanna éagsúla a mheascadh agus a mheaitseáil freisin.

Réamhshocruithe éadroma

Bunrang athscríofa

Le Bootstrap 2, tá an bunrang simplithe againn: .alertin 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>.

Teachtaireacht foláirimh aonair

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.


Go hiontach le javascript

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.

Faigh an breiseán »

Foláirimh shamplacha

Wrap do theachtaireacht agus deilbhín gar roghnach i div le rang simplí.

× Rabhadh! Is fearr a sheiceáil leat féin, níl tú ag breathnú ró-mhaith.
  1. <div class = "aire" >
  2. <a class="close"> × </a> _ _ _
  3. <strong> Rabhadh! </strong> Is fearr a sheiceáil duit féin, níl tú ag breathnú ró-mhaith.
  4. </div>

Leathnaigh an teachtaireacht foláirimh chaighdeánach go héasca le dhá rang roghnacha: .alert-blockle haghaidh tuilleadh stuála agus rialuithe téacs agus .alert-headingle haghaidh ceannteideal meaitseála.

×

Rabhadh!

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.

  1. <div class = "bloc foláirimh" >
  2. <a class="close"> × </a> _ _ _
  3. <h4 class = "alert-heading" > Rabhadh! </h4>
  4. Is fearr seiceáil leat féin, níl tú ...
  5. </div>

Roghanna comhthéacsúla Cuir ranganna roghnacha leis chun ciall foláirimh a athrú

Earráid nó baol

× Ó Léim! Athraigh cúpla rud agus bain triail as é a chur isteach arís.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Rath

× An-mhaith! D'éirigh leat an teachtaireacht thábhachtach foláirimh seo a léamh.
  1. <div class = "alert alert-rath" >
  2. ...
  3. </div>

Eolas

× Cinnirí suas! Ní mór d'aird a thabhairt ar an bhfoláireamh seo, ach níl sé thar a bheith tábhachtach.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Samplaí agus marcáil

Bunúsach

Barra dul chun cinn réamhshocraithe le grádán ceartingearach.

  1. <div class = "progress" >
  2. <div class = "barra"
  3. style = " leithead : 60 %; " ></div>
  4. </div>

Striped

Úsáideann sé grádán chun éifeacht stríocach a chruthú.

  1. < div class = " dul chun cinn progress-info
  2. dul chun cinn" >
  3. <div class = "barra"
  4. style = " leithead : 20 %; " ></div>
  5. </div>

Beoite

Tógann an sampla stríocach agus beocht é.

  1. < div class = " dul chun cinn progress-danger
  2. gníomhach le dul chun cinn" >
  3. <div class = "barra"
  4. style = " leithead : 40 %; " ></div>
  5. </div>

Roghanna agus tacaíocht brabhsálaí

Dathanna breise

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

Iompar

Ú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 .activerang, beochtóidh do .progress-stripedbharraí dul chun cinn na stríoca ó chlé go deas.

Tacaíocht bhrabhsálaí

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

toibreacha

Bain úsáid as an tobar mar éifeacht shimplí ar eilimint chun éifeacht inset a thabhairt dó.

Féach, táim i dtobar!
  1. <div rang = "go maith" >
  2. ...
  3. </div>

Dún an deilbhín

Bain úsáid as an deilbhín gar-chineálach chun ábhar cosúil le módúil agus foláirimh a dhíbhe.

×

  1. <a class="close"> & amanna ; _ </a>