Comhpháirteanna

Tá na iliomad 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í.

Na cleachtais is fearr

Molaimid na treoirlínte seo a leanas maidir le grúpaí cnaipí agus barraí uirlisí a úsáid:

  • Bain úsáid as an eilimint chéanna i ngrúpa cnaipí amháin, <a><button>.
  • Ná measc cnaipí de dhathanna éagsúla sa ghrúpa cnaipí céanna.
  • Úsáid deilbhíní i dteannta nó in ionad téacs, ach bí cinnte go gcuimseofar alt agus téacs teidil nuair is cuí.

Ba chóir grúpaí Cnaipe Gaolmhara le anuas (féach thíos) a ghlaoch amach ar leithligh agus cúram anuas a chur san áireamh i gcónaí chun iompar beartaithe a chur in iúl.

Sampla réamhshocraithe

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. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </div>

Sampla barra uirlisí

Comhcheangail tacair de <div class="btn-group">isteach i <div class="btn-toolbar">do chomhpháirteanna níos casta.

  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 »

Anuas i ngrúpaí cnaipí

Cinnirí suas! Ní mór cnaipí le anuas a bheith fillte ina n-aonar .btn-grouplaistigh de le .btn-toolbarhaghaidh rindreála cuí.

Cnaipí anuas

Forbhreathnú agus samplaí

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>

Oibríonn sé le gach méid cnaipe

Oibríonn dropdowns cnaipe ar aon mhéid. méideanna do chnaipe chuig .btn-large, .btn-small, nó .btn-mini.

Tá javascript ag teastáil

Éilíonn anuas cnaipe an breiseán anuas Bootstrap chun feidhmiú.

I gcásanna áirithe—cosúil le fóin phóca—sínfidh biachláir anuas lasmuigh den radharc. Ní mór duit an t-ailíniú a réiteach de láimh nó le javascript saincheaptha.


Scoilt anuas na cnaipí

Forbhreathnú agus samplaí

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.

Méideanna

Bain úsáid as na ranganna breise cnaipe .btn-mini, .btn-small, nó .btn-largele haghaidh méide.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "dropdown-menu pull-right" >
  4. <!-- naisc roghchláir anuas -->
  5. </ul>
  6. </div>

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. <button class = "btn" > Gníomh </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "anuas" >
  4. <span class = "caret" ></span>
  5. </cnaipe>
  6. <ul class = "roghchlár anuas" >
  7. <!-- naisc roghchláir anuas -->
  8. </ul>
  9. </div>

Roghchláir dropup

Is féidir roghchláir anuas a scoránú ón mbun aníos freisin trí rang amháin a chur le neasthuismitheoir .dropdown-menu. Smeachfaidh sé treo an .caretagus athshuífidh sé an roghchlár féin chun bogadh ón mbun aníos in ionad ón mbarr anuas.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "anuas" >
  4. <span class = "caret" ></span>
  5. </cnaipe>
  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 cliceáil mhóra.

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 leathanach simplí le marcáil éadrom agus fiú stíleanna níos éadroime. Tá sé iontach do shuímh simplí cosúil le blaganna nó irisí.

Staid díchumasaithe roghnach

Úsáideann naisc ghlaoch freisin an .disabledrang ginearálta ón leathanach.

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>
Rath <span class="label label-success">Success</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>
Inbhéartach <span class="label label-inverse">Inverse</span>

Faoi

Is comhpháirteanna beaga simplí iad suaitheantais chun táscaire nó comhaireamh de shaghas éigin a thaispeáint. Faightear iad go coitianta i gcliant ríomhphoist amhail Mail.app nó ar aipeanna móibíleacha le haghaidh fógraí brú.

Ranganna ar fáil

Ainm Sampla Marcáil
Réamhshocrú 1 <span class="badge">1</span>
Rath 2 <span class="badge badge-success">2</span>
Rabhadh 4 <span class="badge badge-warning">4</span>
Tábhachtach 6 <span class="badge badge-important">6</span>
Eolas 8 <span class="badge badge-info">8</span>
Inbhéartach 10 <span class="badge badge-inverse">10</span>

Aonad laoch

Soláthraíonn Bootstrap comhpháirt éadrom, solúbtha ar a dtugtar aonad laoch chun ábhar ar do shuíomh a thaispeáint. Oibríonn sé go maith ar mhargaíocht agus ar shuímh atá trom le hábhar.

Marcáil

Wrap d'inneachar divmar sin:

  1. <div class = "laoch-aonad" >
  2. <h1> Ceannteideal </h1>
  3. <p> Cliblíne </p>
  4. <p>
  5. <a class="btn btn-bunscoil btn-large"> _
  6. Foghlaim níos mó
  7. </a>
  8. </p>
  9. </div>

Dia duit, domhan!

Is aonad laoch simplí é seo, comhpháirt simplí i stíl jumbotron chun aird bhreise a dhíriú ar ábhar nó ar fhaisnéis faoi thrácht.

Foghlaim níos mó

Ceanntásc leathanaigh

Sliogán simplí le spásáil a dhéanamh h1go cuí agus codanna den ábhar a dheighilt ar leathanach. Is féidir é a úsáid h1réamhshocraithe small, eilimint chomh maith leis an chuid is mó comhpháirteanna eile (le stíleanna breise).

  1. <div class = "page-header" >
  2. <h1> Ceanntásc leathanaigh samplach </h1>
  3. </div>

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 do ghreillí 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 na roghanna go léir atá agat 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íl aon <p>ghá ag teastáil de réir réamhshocraithe, ní gá ach an ceann seachtrach <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 go bhfuil siad tapa agus éasca iad a dhíbhe.

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. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Rabhadh! </strong> Is fearr a sheiceáil duit féin, níl tú ag breathnú ró-mhaith.
  4. </div>

Cinnirí suas! Teastaíonn ó ghléasanna iOS href="#"chun foláirimh a dhífhostú. Bí cinnte é a chur san áireamh agus an tréith sonraí le haghaidh deilbhíní gar-ancaire. Nó, is féidir leat <button>eilimint a úsáid leis an tréith sonraí, rud a roghnaigh muid a dhéanamh dár ndoiciméid. Nuair a bheidh tú ag úsáid <button>, ní mór duit a chur san áireamh type="button"nó ní féidir d'fhoirmeacha a chur isteach.

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" data-dismiss="alert" href="#"> × </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ú (gan IE).

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

Beoite

Glacann sé an sampla stríocach agus beochann sé é (gan IE).

  1. < div class = " dul chun cinn progress-striped
  2. gníomhach" >
  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 ranganna cnaipe agus foláirimh céanna le haghaidh stíleanna comhsheasmhacha.

Barraí striped

Cosúil leis na dathanna soladacha, tá barraí dul chun cinn stiallacha éagsúla againn.

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-9 nó i leaganacha níos sine de Firefox.

Ní thacaíonn Opera agus IE 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. <button class = "close" > × </cnaipe>

Teastaíonn href="#" ó ghléasanna iOS le haghaidh imeachtaí cliceáil más fearr leat ancaire a úsáid.

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