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>nó <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>nó <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:

<div rang="btn-group">
  <a class="btn" href="#">1</a>
  <a class="btn" href="#">2</a>
  <a class="btn" href="#">3</a>
</div>

Sampla barra uirlisí

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

<div class="btn-toolbar">
  <div rang="btn-group">
    ...
  </div>
</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.

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

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.

<div rang="btn-group">
  <a class="btn dropdown-toggle" data-toggle=" dropdown" href="#">
    Gníomh
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- naisc roghchláir anuas -->
  </ul>
</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.

<div rang="btn-group">
  <a class="btn" href="#">Gníomh</a>
  <a class="btn dropdown-toggle" data-toggle=" dropdown" href="#">
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- naisc roghchláir anuas -->
  </ul>
</div>

Bunrang cumhachtach

Roinneann na comhpháirteanna uile nav anseo - cluaisíní, piollaí, agus liostaí - an bonnmharcáil agus na stíleanna céanna tríd an .navrang.

Cathain a úsáid

Tá cluaisíní agus piollaí iontach le haghaidh codanna den ábhar nó le nascleanúint a dhéanamh idir leathanaigh d’ábhar gaolmhar.

Ailíniú comhpháirte

Chun naisc nascleanúna a ailíniú, úsáid na .pull-leftranganna .pull-rightfóntais. Cuirfidh an dá rang snámhán CSS sa treo sonraithe.

Cluaisíní bunúsacha

Glac líon rialta <ul>de naisc agus cuir leis .nav-tabs:

• Baile
• Próifíl
• Teachtaireachtaí

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#">Abhaile</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

pills bunúsacha

Tóg an HTML céanna sin, ach úsáid .nav-pillsina ionad sin:

• Baile
• Próifíl
• Teachtaireachtaí

<ul class="nav nav-pills">
  <li class="active">
    <a href="#">Abhaile</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Conas iad a chruachadh

Toisc go bhfuil cluaisíní agus piollaí cothrománacha de réir réamhshocraithe, ní gá ach rang a dó, .nav-stacked, a chur leis chun iad a chur le feiceáil go hingearach.

Cluaisíní Cruachta

• Baile
• Próifíl
• Teachtaireachtaí

<ul class="nav nav-tabs nav-stacked">
  ...
</ul>

Pills cruachta

• Baile
• Próifíl
• Teachtaireachtaí

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Biachláir saibhir déanta éasca

Tá biachláir anuas i gcluaisíní agus piollaí Bootstrap thar a bheith éasca agus ní theastaíonn ach beagán HTML breise agus breiseán éadrom jQuery.

Téigh ar aghaidh chuig an leathanach Javascript chun na doiceanna a léamh maidir le híoslódálacha a thosú i Bootstrap.

Cluaisíní le dropdowns

• Baile
• Próifíl
• Titim síos
  • Gníomh
  • Gníomh eile
  • Rud eile anseo
  • Nasc scartha

<ul class="nav nav-tabs">
  <li class="dropdown">
    <a rang="scoránaigh anuas"
       data-toggle=" dropdown"
       href="#">
        Titim síos
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- naisc -->
    </ul>
  </li>
</ul>

Pills le dropdowns

• Baile
• Próifíl
• Titim síos
  • Gníomh
  • Gníomh eile
  • Rud eile anseo
  • Nasc scartha

<ul class="nav nav-pills">
  <li class="dropdown">
    <a rang="scoránaigh anuas"
       data-toggle=" dropdown"
       href="#">
        Titim síos
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- naisc -->
    </ul>
  </li>
</ul>

Nascleanúint feidhmchláir

Soláthraíonn liostaí nascleanúna bealach simplí agus éasca chun grúpaí de naisc loingseoireachta a chruthú le ceanntásca roghnacha. Is fearr iad a úsáid i barraí taoibh mar an Aimsitheoir in OS X.

Go struchtúrach, tá siad bunaithe ar na stíleanna lárnacha nascleanúna céanna le cluaisíní agus piollaí, agus mar sin tá úsáid agus saincheapadh simplí.

Le deilbhíní

Is furasta liostaí nascleanúna a threalmhú le deilbhíní freisin. Cuir an <i>chlib cheart leis an rang agus tá tú socraithe.

Sampla liosta nav

Glac liosta naisc agus cuir leis class="nav nav-list":

<ul class="nav nav-list">
  <li class="nav-header">
    Ceanntásc liosta
  </li>
  <li class="active">
    <a href="#">Abhaile</a>
  </li>
  <li>
    <a href="#">Leabharlann</a>
  </li>
  ...
</ul>

Sampla le deilbhíní

Sampla céanna, ach le <i>clibeanna le haghaidh deilbhíní.

<ul class="nav nav-list">
  ...
  <li>
    <a href="#">
      <i class="icon-book"></i>
      Leabharlann
    </a>
  </li>
  ...
</ul>

Cad atá san áireamh

Cuir do chuid cluaisíní ar an saol le breiseán simplí chun scoránaigh idir ábhar trí chluaisíní. Comhtháthaíonn Bootstrap cluaisíní cluaisíní i gceithre stíl: barr (réamhshocraithe), ar dheis, ar bhun agus ar chlé.

Is furasta iad a athrú agus ní gá ach fíorbheagán marcála a athrú.

Sampla tábla

Chun tabbable a dhéanamh, tim .nav-tabsi div eile leis an rang .tabbable.

Breiseán jQuery saincheaptha

Tá gach cluaisín cluaisín faoi thiomáint ag ár mbreiseán éadrom jQuery. Léigh tuilleadh faoi conas cluaisíní cluaisíní a thabhairt beo ar an leathanach javascript docs.

Faigh an javascript →

Cluaisíní ar an mbun

Smeach ord an HTML agus cuir rang leis chun cluaisíní a chur ar an mbun.

<div class="cluaisíní tabbable-thíos">
  <div rang="tab-content">
    ...
  </div>
  <ul class="nav nav-tabs">
    ...
  </ul>
</div>

Cluaisíní ar thaobh na láimhe clé

Malartaigh an rang chun cluaisíní a chur ar thaobh na láimhe clé.

<div class="cluaisíní tabbable-left">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div rang="tab-content">
    ...
  </div>
</div>

Cluaisíní ar dheis

Malartaigh an rang chun cluaisíní a chur ar dheis.

<div class="tabable tabs-right">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div rang="tab-content">
    ...
  </div>
</div>

Scafall Navbar

Níl ach cúpla div ag teastáil ón mbarra loingseoireachta chun é a struchtúrú go maith le haghaidh taispeáint statach nó sheasta.

<div rang="navbar">
  <div rang="navbar-inner">
    <div rang="container">
      ...
    </div>
  </div>
</div>

Navbar seasta

Chun an barra nascleanúna a dhéanamh ag barr an amhairc, cuir .navbar-fixed-topleis an div is forimeallaí, .navbar.

<div class="navbar navbar-fixed-top">
  ...
</div>

I do CSS, beidh ort cuntas a thabhairt freisin ar an bhforluí a chruthaíonn sé trí stuáil 40px nó níos mó a chur le do <body>. Bí cinnte é seo a chur leis tar éis an CSS Bootstrap lárnach agus roimh an CSS freagrúil roghnach.

Ainm branda

Ní theastaíonn ach clib ancaire le nasc simplí chun do bhranda nó d’ainm tionscadail a thaispeáint.

<a class="brand" href="#">
  Ainm an tionscadail
</a>

Foirm chuardaigh

Faigheann foirmeacha cuardaigh stíleanna saincheaptha sa bharra nascleanúna leis an .navbar-searchrang. Cuir san áireamh .pull-leftnó .pull-rightar an formchun é a ailíniú.

<form class="navbar-search tarraingt-chlé">
  <input type="text" class="search-query" placeholder="Cuardaigh">
</form>

Athrú sofhreagrach roghnach

Ag brath ar an méid ábhair i do bharrbharra, b'fhéidir gur mhaith leat na roghanna sofhreagracha a chur i bhfeidhm. Chun é sin a dhéanamh, fillte do chuid ábhar nav i div, .nav-collapse.collapse, agus cuir an cnaipe scoránaigh an bharra nascleanúna, .btn-navbar.

<div rang="navbar">
  <div rang="navbar-inner">
    <div rang="container">

      Úsáidtear <!-- .btn-navbar mar an scoránaigh le haghaidh ábhar an bharra nascleanúna tite -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Bí cinnte an branda a fhágáil amach ansin más mian leat é a thaispeáint -->
      <a class="brand" href="#">Ainm an tionscadail</a>

      <!-- Gach rud atá uait i bhfolach ag 940px nó níos lú, cuir isteach anseo -->
      <div rang="nav-collapse">
        <!-- .nav, .navbar-search, .navbar-form, srl -->
      </div>

    </div>
  </div>
</div>

Naisc Nav

Is furasta míreanna nascleanúna a chur leis trí liostaí neamhordaithe.

<ul rang="nav">
  <li class="active">
    <a href="#">Abhaile</a>
  </li>
  <li><a href="#">Nasc</a></li>
  <li><a href="#">Nasc</a></li>
</ul>

Is féidir leat roinnteoirí a chur le do naisc nascleanúna go héasca le mír liosta folamh agus rang simplí. Cuir é seo idir naisc:

<ul rang="nav">
  ...
  <li class="divider-vertical"> </li>
  ...
</ul>

Ailíniú comhpháirte

Chun nav, foirm chuardaigh, nó téacs a ailíniú, úsáid na ranganna .pull-leftnó .pull-rightfóntais. Cuirfidh an dá rang snámhán CSS sa treo sonraithe.

Ag cur dropdowns leis

Tá sé an-simplí anuas anuas a chur leis an nascleanúint, ach ní mór ár mbreiseán javascript a úsáid .

<ul rang="nav">
  <li class="dropdown">
    <a href="#"
          class="stopán anuas"
          data-toggle=" dropdown">
          Cuntas
          <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

Faigh an javascript →

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

Úsáidtear loingseoireacht arán mar bhealach chun úsáideoirí a thaispeáint cá bhfuil siad laistigh d’aip nó de shuíomh, ach ní le haghaidh loingseoireachta príomhúil. Coinnigh a n-úsáid gann agus gonta le bheith ar an mbealach is éifeachtaí.

Samplaí

Taispeántar sampla amháin mar go bhféadfaí é a thaispeáint thar leathanaigh iolracha.

• Baile

• Baile /
• Leabharlann

• Baile /
• Leabharlann /
• Sonraí

Marcáil

Is é HTML do liosta caighdeánach neamhordaithe le naisc.

<ul rang="breadcrumb">
  <li>
    <a href="#">Baile</a> <span class="divider">/</span>
  </li>
  <li>
    <a href="#">Leabharlann</a> <span class="divider">/</span>
  </li>
  <li class="active">
    <a href="#">Sonraí</a>
  </li>
</ul>

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

<div class="page">
  <ul>
    <li><a href="#">Roimhe seo</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>

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

Sampla réamhshocraithe

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

• Roimhe Seo
• Ar aghaidh

<ul rang="pager">
  <li>
    <a href="#">Roimhe Seo</a>
  </li>
  <li>
    <a href="#">Ar Aghaidh</a>
  </li>
</ul>

Naisc ailínithe

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

• ← Níos sine
• Níos nuaí →

<ul rang="pager">
  <li rang="previous">
    <a href="#">← Níos sine</a>
  </li>
  <li rang="next">
    <a href="#">Níos nua →</a>
  </li>
</ul>

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:

<div class="hero-unit">
  <h1>Ceannteideal</h1>
  <p>Cliblíne</p>
  <p>
    <a rang="btn btn-bunscoil btn-large">
      Foghlaim níos mó
    </a>
  </p>
</div>

Sliogán simplí le haghaidh h1spásáil a dhéanamh go 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).

<div rang="page-haeder">
  <h1>Ceanntásc leathanach mar shampla</h1>
</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 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 .span2nó .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 :

<ul class="mionsamhlacha">
  <li rang="span3">
    <a href="#" class="thumbnail">
      <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 rang="span3">
    <div rang="thumbnail">
      <img src="https://placehold.it/260x180" alt="">
      <h5>Lipéad mionsamhla</h5>
      <p>Fotheideal mionsamhla anseo...</p>
    </div>
  </li>
  ...
</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.

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

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

<div class="alert alert-block">
  <a class="close" data-dismiss="alert">×</a>
  <h4 class="alert-heading">Rabhadh!</h4>
  Is fearr seiceáil leat féin, níl tú ...
</div>

Earráid nó baol

<div class="alert alert-error">
  ...
</div>

Rath

<div class="alert alert-success">
  ...
</div>

Eolas

<div class="alert alert-info">
  ...
</div>

Bunúsach

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

<div class="progress">
  <div class="bar"
       style="width: 60%;"> </div>
</div>

Striped

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

<div class="dul chun cinn faisnéis-dul chun cinn
     dul chun cinn-striped">
  <div class="bar"
       style="width: 20%;"> </div>
</div>

Beoite

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

<div class="dul chun cinn dul chun cinn-chontúirt
     dul chun cinn-striped gníomhach">
  <div class="bar"
       style="width: 40%;"> </div>
</div>

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

<div rang="well">
  ...
</div>

Suaitheantais

Úsáid suaitheantas ar eilimint le haghaidh comhaireamh neamhléite nó mar tháscaire simplí.

<span class="badge">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.

×

<a class="close">&uaireanta;</a>