Awọn ẹgbẹ bọtini

Lo awọn ẹgbẹ bọtini lati darapọ mọ awọn bọtini pupọ papọ gẹgẹbi paati akojọpọ kan. Kọ wọn pẹlu lẹsẹsẹ <a>tabi <button>awọn eroja.

Awọn iṣe ti o dara julọ

A ṣeduro awọn itọnisọna wọnyi fun lilo awọn ẹgbẹ bọtini ati awọn ọpa irinṣẹ:

• Nigbagbogbo lo eroja kanna ni ẹgbẹ bọtini kan, <a>tabi <button>.
• Maṣe dapọ awọn bọtini ti awọn awọ oriṣiriṣi ni ẹgbẹ bọtini kanna.
• Lo awọn aami ni afikun si tabi dipo ọrọ, ṣugbọn rii daju pẹlu alt ati ọrọ akọle nibiti o yẹ.

Awọn ẹgbẹ Bọtini ti o jọmọ pẹlu awọn isọ silẹ (wo isalẹ) yẹ ki o pe ni lọtọ ati nigbagbogbo pẹlu itọju sisọ silẹ lati tọka ihuwasi ti a pinnu.

Apeere aiyipada

Eyi ni bii HTML ṣe n wa ẹgbẹ botini boṣewa ti a ṣe pẹlu awọn bọtini ami oran:

<div class = "btn-ẹgbẹ" > 
  <bọtini kilasi = "btn" > 1 </bọtini> 
  <bọtini kilasi = "btn" > 2 </bọtini> 
  <bọtini kilasi = "btn" > 3 </bọtini> 
</div>

Àpẹrẹ irinṣẹ́

Darapọ tosaaju ti <div class="btn-group">sinu kan <div class="btn-toolbar">fun eka sii irinše.

<div class = "btn-toolbar" > 
  <div class = "btn-ẹgbẹ" > 
    ...
  </div>
</div>

Apoti ati awọn adun redio

Awọn ẹgbẹ bọtini tun le ṣiṣẹ bi awọn redio, nibiti bọtini kan le ti ṣiṣẹ, tabi awọn apoti ayẹwo, nibiti nọmba eyikeyi ti awọn bọtini le ṣiṣẹ. Wo awọn iwe aṣẹ Javascript fun iyẹn.

Gba JavaScript naa

Sisọ silẹ ni awọn ẹgbẹ bọtini

Efeti sile! Awọn bọtini pẹlu awọn isọ silẹ gbọdọ wa ni ọkọọkan ti a we sinu tiwọn .btn-grouplaarin kan .btn-toolbarfun ṣiṣe deede.

Akopọ ati awọn apẹẹrẹ

Lo eyikeyi bọtini lati ma nfa akojọ aṣayan silẹ nipa gbigbe si laarin kan .btn-groupati pese isamisi akojọ aṣayan to dara.

Apeere isamisi

Iru si ẹgbẹ bọtini kan, isamisi wa nlo isamisi bọtini deede, ṣugbọn pẹlu ọwọ diẹ ti awọn afikun lati tun ara ati ṣe atilẹyin ohun itanna jQuery silẹ silẹ Bootstrap.

<div class = "btn-ẹgbẹ" > 
  <a class = "btn dropdown-toggle" data-toggle = " dropdown" href = "#" >   
    Iṣe
    <span class = "abojuto" </span> 
  </a>
  <ul kilasi = "akojọ-silẹ silẹ" > 
    <!-- awọn ọna asopọ akojọ aṣayan silẹ -->
  </ul>
</div>

Ṣiṣẹ pẹlu gbogbo awọn iwọn bọtini

Awọn ifilọlẹ bọtini ṣiṣẹ ni iwọn eyikeyi. awọn titobi bọtini rẹ si .btn-large, .btn-small, tabi .btn-mini.

Nilo JavaScript

Awọn ifilọlẹ bọtini nilo ohun itanna silẹ Bootstrap lati ṣiṣẹ.

Ni awọn igba miiran — bii alagbeka — awọn akojọ aṣayan silẹ yoo fa si ita wiwo wiwo. O nilo lati yanju titete pẹlu ọwọ tabi pẹlu JavaScript aṣa.

Akopọ ati awọn apẹẹrẹ

Ilé lori awọn aza ẹgbẹ bọtini ati isamisi, a le ni rọọrun ṣẹda kan pipin bọtini. Awọn bọtini pipin ṣe ẹya iṣe boṣewa ni apa osi ati yiyi silẹ silẹ ni apa ọtun pẹlu awọn ọna asopọ ọrọ-ọrọ.

Awọn iwọn

Lo awọn kilasi bọtini afikun .btn-mini, .btn-small, tabi .btn-largefun titobi.

<div class = "btn-ẹgbẹ" > 
  ...
  <ul class = " dropdown-menu pull-right" > 
    <!-- awọn ọna asopọ akojọ aṣayan silẹ -->
  </ul>
</div>

Apeere isamisi

A faagun lori awọn silẹ bọtini deede lati pese iṣe bọtini keji ti o ṣiṣẹ bi okunfa sisọ silẹ lọtọ.

<div class = "btn-ẹgbẹ" > 
  <bọtini kilasi = "btn" > Iṣe </bọtini> 
  <bọtini kilasi = "btn dropdown-toggle" data-toggle = "silẹ silẹ" >  
    <span class = "abojuto" </span> 
  </bọtini>
  <ul kilasi = "akojọ-silẹ silẹ" > 
    <!-- awọn ọna asopọ akojọ aṣayan silẹ -->
  </ul>
</div>

Awọn akojọ aṣayan silẹ

Awọn akojọ aṣayan silẹ tun le yipada lati isalẹ soke nipa fifi kilasi kan kun si obi lẹsẹkẹsẹ ti .dropdown-menu. Yoo yi itọsọna ti .caretati tunpo akojọ aṣayan funrararẹ lati gbe lati isalẹ soke dipo oke si isalẹ.

<div class = "btn-group dropup" > 
  < kilaasi bọtini = "btn" > Ifasilẹ </bọtini> 
  <bọtini kilasi = "btn dropdown-toggle" data-toggle = "silẹ silẹ" >  
    <span class = "abojuto" </span> 
  </bọtini>
  <ul kilasi = "akojọ-silẹ silẹ" > 
    <!-- awọn ọna asopọ akojọ aṣayan silẹ -->
  </ul>
</div>

Alagbara mimọ kilasi

Gbogbo awọn paati nav nibi — awọn taabu, awọn oogun, ati awọn atokọ — pin isamisi ipilẹ kanna ati awọn aza nipasẹ .navkilasi naa.

Nigbati lati lo

Awọn taabu ati awọn oogun jẹ nla fun awọn apakan ti akoonu tabi lilọ kiri laarin awọn oju-iwe ti akoonu ti o ni ibatan.

Titete paati

Lati mö awọn ọna asopọ nav, lo .pull-lefttabi .pull-rightIwUlO kilasi. Awọn kilasi mejeeji yoo ṣafikun omi leefofo CSS kan ni itọsọna pàtó kan.

Awọn taabu ipilẹ

Mu awọn <ul>ọna asopọ deede ati ṣafikun .nav-tabs:

• Ile
• Profaili
• Awọn ifiranṣẹ

<ul kilasi = "nav nav-tabs" > 
  <li kilasi = "lọwọ" > 
    <a href = "#" > Ile </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Awọn oogun ipilẹ

Mu HTML kanna, ṣugbọn lo .nav-pillsdipo:

• Ile
• Profaili
• Awọn ifiranṣẹ

<ul kilasi = "nav nav-pills" > 
  <li kilasi = "lọwọ" > 
    <a href = "#" > Ile </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Bii o ṣe le ṣe akopọ wọn

Bi awọn taabu ati awọn oogun jẹ petele nipasẹ aiyipada, kan ṣafikun kilasi keji, .nav-stacked, Lati jẹ ki wọn han ni inaro tolera.

Awọn taabu tolera

• Ile
• Profaili
• Awọn ifiranṣẹ

<ul kilasi = "nav nav-tabs nav-tolera" > 
  ...
</ul>

Awọn oogun tolera

• Ile
• Profaili
• Awọn ifiranṣẹ

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

Awọn akojọ aṣayan ọlọrọ ṣe rọrun

Awọn akojọ aṣayan silẹ ni awọn taabu Bootstrap ati awọn oogun jẹ rọrun pupọ ati pe o nilo afikun HTML diẹ ati itanna jQuery iwuwo fẹẹrẹ kan.

Lọ si oju-iwe Javascript lati ka awọn iwe aṣẹ lori bibẹrẹ awọn silẹ ni Bootstrap.

Awọn taabu pẹlu awọn silẹ

• Ile
• Egba Mi O
• Faa silẹ
  • Action
  • Another action
  • Something else here
  • Separated link

<ul kilasi = "nav nav-tabs" > 
  <li kilasi = "silẹ silẹ" > 
    <a kilasi = "julọ silẹ-toggle" 
       data-toggle = "silẹ silẹ"
       href = "#" >
        Faa silẹ
        <b kilasi = "abojuto" </b> 
      </a>
    <ul kilasi = "akojọ-silẹ silẹ" > 
      <!-- awọn ọna asopọ -->
    </ul>
  </li>
</ul>

Ìşọmọbí pẹlu dropdowns

• Ile
• Egba Mi O
• Faa silẹ
  • Action
  • Another action
  • Something else here
  • Separated link

<ul kilasi = "nav nav-pills" > 
  <li kilasi = "silẹ silẹ" > 
    <a kilasi = "julọ silẹ-toggle" 
       data-toggle = "silẹ silẹ"
       href = "#" >
        Faa silẹ
        <b kilasi = "abojuto" </b> 
      </a>
    <ul kilasi = "akojọ-silẹ silẹ" > 
      <!-- awọn ọna asopọ -->
    </ul>
  </li>
</ul>

Lilọ kiri ara-elo

Awọn atokọ Nav pese ọna ti o rọrun ati irọrun lati kọ awọn ẹgbẹ ti awọn ọna asopọ nav pẹlu awọn akọle yiyan. Wọn dara julọ ni lilo awọn ẹgbẹ ẹgbẹ bi Oluwari ni OS X.

Ni igbekalẹ, wọn ṣe lori awọn aza nav mojuto kanna bi awọn taabu ati awọn oogun, nitorinaa lilo ati isọdi jẹ taara.

Pẹlu awọn aami

Awọn atokọ Nav tun rọrun lati pese pẹlu awọn aami. Ṣafikun <i>tag to dara pẹlu kilasi ati pe o ti ṣeto.

Petele pin

Ṣafikun ipin petele kan nipa ṣiṣẹda nkan atokọ ofo pẹlu kilasi .divider, bii bẹ:

<ul kilasi = "nav nav-akojọ" > 
  ...
  <li kilasi = "olupin" </li> 
  ...
</ul>

Apeere nav akojọ

Mu atokọ ti awọn ọna asopọ ki o ṣafikun class="nav nav-list":

<ul kilasi = "nav nav-akojọ" > 
  <li kilasi = "nav-akọsori" > 
    Akojọ akọsori
  </li>
  <li kilasi = "lọwọ" > 
    <a href = "#" > Ile </a> 
  </li>
  <li>
    <a href = "#" > Ile-ikawe </a> 
  </li>
  ...
</ul>

Apẹẹrẹ pẹlu awọn aami

Apeere kanna, ṣugbọn pẹlu <i>awọn afi fun awọn aami.

<ul kilasi = "nav nav-akojọ" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" </i> 
      Ile-ikawe
    </a>
  </li>
  ...
</ul>

Ohun ti o wa ninu

Mu awọn taabu rẹ wa si igbesi aye pẹlu ohun itanna kan lati yi laarin akoonu nipasẹ awọn taabu. Bootstrap ṣepọ awọn taabu taabu ni awọn aza mẹrin: oke (aiyipada), sọtun, isalẹ, ati osi.

Iyipada laarin wọn rọrun ati pe nikan nilo iyipada isamisi kekere pupọ.

Pare ninu awọn taabu

Lati jẹ ki awọn taabu rẹ wọ inu, ṣafikun .fadesi ọkọọkan .tab-pane.

Nilo itanna jQuery

Gbogbo awọn taabu tabbable ni agbara nipasẹ ohun itanna jQuery iwuwo fẹẹrẹ wa. Ka diẹ sii nipa bi o ṣe le mu awọn taabu taabu wa si igbesi aye lori oju-iwe JavaScript .

Gba JavaScript →

Apeere Tabbable

Lati ṣe awọn taabu taabu, ṣẹda .tab-paneID alailẹgbẹ fun gbogbo taabu ki o fi ipari si wọn sinu .tab-content.

Fun awọn taabu ti o somọ sọtun tabi osi, fi ipari si .nav-tabsati .tab-contentsinu .tabbable.

Siṣamisi taara

Lilo awọn taabu tabbable nilo div murasilẹ, ṣeto awọn taabu, ati ṣeto awọn paneeti ti akoonu.

<div class = "tabbable" > <!-- Nikan beere fun awọn taabu osi/ọtun -->  
  <ul kilasi = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "taabu" > Abala 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "taabu" > Abala 2 </a></li>  
  </ul>
  <div class = "akoonu-taabu" > 
    <div class = "tab-pane ti nṣiṣe lọwọ" id = "tab1" >  
      <p> Mo wa ni Abala 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Howdy, Mo wa ni Abala 2. </p>
    </div>
  </div>
</div>

Awọn taabu lori isalẹ

Yi aṣẹ HTML pada ki o ṣafikun kilasi lati fi awọn taabu si isalẹ.

<div class = "tabbable tabs-labẹlẹ" > 
  <div class = "akoonu-taabu" > 
    ...
  </div>
  <ul kilasi = "nav nav-tabs" > 
    ...
  </ul>
</div>

Awọn taabu lori osi

Yi kilasi pada lati fi awọn taabu si apa osi.

<div class = "tabbable tabs-osi" > 
  <ul kilasi = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "akoonu-taabu" > 
    ...
  </div>
</div>

Awọn taabu lori ọtun

Yi kilasi pada lati fi awọn taabu si apa ọtun.

<div class = "tabbable tabs-right" > 
  <ul kilasi = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "akoonu-taabu" > 
    ...
  </div>
</div>

Navbar scaffolding

Navbar nilo awọn divs diẹ lati ṣeto daradara fun ifihan aimi tabi ti o wa titi.

<div kilasi = "navbar" > 
  <div kilasi = "navbar-inner" > 
    <div kilasi = "apoti" > 
      ...
    </div>
  </div>
</div>

Navbar ti o wa titi

Fix navbar si oke tabi isalẹ ti awọn viewport pẹlu afikun kilasi lori awọn outermost div .navbar,.

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

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

Nigbati o ba fi navbar sii, ranti lati ṣe akọọlẹ fun agbegbe ti o farapamọ labẹ. Ṣafikun 40px tabi diẹ sii ti padding si <body>. Rii daju lati ṣafikun eyi lẹhin Bootstrap CSS mojuto ati ṣaaju CSS idahun iyan.

Oruko oja

Ọna asopọ ti o rọrun lati ṣafihan ami iyasọtọ rẹ tabi orukọ iṣẹ akanṣe nilo tag oran nikan.

<a kilasi = "brand" href = "#" >  
  Orukọ ise agbese
</a>

Awọn fọọmu ni navbar

Lati ṣe ara daradara ati ipo fọọmu kan laarin navbar, ṣafikun awọn kilasi ti o yẹ bi a ṣe han ni isalẹ. Fun fọọmu aiyipada, pẹlu .navbar-formati boya .pull-lefttabi .pull-rightlati ṣe deedee rẹ daradara.

< kilaasi fọọmu = "navbar-form pull-osi" > 
  < iru titẹ sii = "ọrọ" kilasi = "span2" >  
</fọọmu>

Fun fọọmu wiwa ti adani diẹ sii, ṣafikun .navbar-searchsi formati .search-querysi igbewọle fun awọn aza amọja ni navbar.

< kilaasi fọọmu = "navbar-search pull-osi" > 
  <input type = "text" class = "search-query" ibi ipamọ = "Ṣawari" >   
</fọọmu>

Iyatọ idahun iyan

Da lori iye akoonu ti o wa ninu ọpa oke rẹ, o le fẹ lati ṣe awọn aṣayan idahun. Lati ṣe bẹ, fi ipari si akoonu nav rẹ sinu div ti o ni ninu, .nav-collapse.collapse, ati fi bọtini lilọ kiri navbar kun, .btn-navbar.

<div kilasi = "navbar" > 
  <div kilasi = "navbar-inner" > 
    <div kilasi = "apoti" > 
 
      <!-- .btn-navbar ni a lo bi iyipada fun akoonu navbar ti o ṣubu -->
      <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>
 
      <!-- Rii daju lati fi ami iyasọtọ naa silẹ nibẹ ti o ba fẹ ki o han -->
      <a class = "brand" href = "#" > Orukọ ise agbese </a>  
 
      <!-- Ohun gbogbo ti o fẹ farapamọ ni 940px tabi kere si, gbe laarin ibi -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-fọọmu, ati bẹbẹ lọ -->
      </div>
 
    </div>
  </div>
</div>

Nav ìjápọ

Awọn ohun Nav rọrun lati ṣafikun nipasẹ awọn atokọ ti a ko paṣẹ.

<ul kilasi = "nav" > 
  <li kilasi = "lọwọ" > 
    <a href = "#" > Ile </a> 
  </li>
  <li><a href = "#" > Ọna asopọ </a></li> 
  <li><a href = "#" > Ọna asopọ </a></li> 
</ul>

O le ni rọọrun ṣafikun awọn ipin si awọn ọna asopọ nav rẹ pẹlu ohun atokọ ti o ṣofo ati kilasi ti o rọrun. Kan fi eyi kun laarin awọn ọna asopọ:

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

Titete paati

Lati ṣe deede nav kan, fọọmu wiwa, tabi ọrọ, lo .pull-lefttabi .pull-rightawọn kilasi ohun elo. Awọn kilasi mejeeji yoo ṣafikun omi leefofo CSS kan ni itọsọna pàtó kan.

Fifi awọn akojọ aṣayan silẹ

Ṣafikun awọn ifilọlẹ ati awọn ifilọlẹ si nav jẹ rọrun pupọ, ṣugbọn o nilo lilo ohun itanna javascript wa .

<ul kilasi = "nav" > 
  <li kilasi = "silẹ silẹ" > 
    <a href = "#" 
          kilasi = "julọ-silẹ"
          data-toggle = "silẹ silẹ" >
          Iroyin
          <b kilasi = "abojuto" </b> 
    </a>
    <ul kilasi = "akojọ-silẹ silẹ" > 
      ...
    </ul>
  </li>
</ul>

Gba JavaScript →

Ọrọ ni navbar

Pa awọn okun ọrọ sinu <.navbar-text>, nigbagbogbo lori <p>tag fun itọsọna to dara ati awọ.

Kí nìdí lo wọn

Lilọ kiri burẹdi jẹ lilo bi ọna lati ṣafihan awọn olumulo nibiti wọn wa laarin ohun elo kan tabi aaye kan, ṣugbọn kii ṣe fun lilọ kiri akọkọ. Jeki lilo wọn fọnka ati ṣoki lati jẹ imunadoko julọ.

Awọn apẹẹrẹ

Apeere kan ti o han bi o ṣe le ṣe afihan kọja awọn oju-iwe pupọ.

• Ile

• Ile /
• Ile-ikawe

• Ile /
• Ile-ikawe /
• Data

Siṣamisi

HTML jẹ atokọ ti a ko paṣẹ pẹlu boṣewa rẹ pẹlu awọn ọna asopọ.

<ul kilasi = "akara akara" > 
  <li>
    <a href = "#" > Ile </a> <span class = "olupin" > / </span>   
  </li>
  <li>
    <a href = "#" > Ile-ikawe </a> <span class = "olupin" > / </span>   
  </li>
  <li kilasi = "lọwọ" > Data </li> 
</ul>

Nigbati lati lo

Ultra simplistic ati pagination ara iwonba ti o ni atilẹyin nipasẹ Rdio, nla fun awọn lw ati awọn abajade wiwa. Bulọọki nla naa nira lati padanu, ni irọrun iwọn, ati pese awọn agbegbe tẹ nla.

Awọn ọna asopọ oju-iwe ti o ni ipinlẹ

Awọn ọna asopọ jẹ asefara ati ṣiṣẹ ni nọmba awọn ayidayida pẹlu kilasi ti o tọ. .disabledfun awọn ọna asopọ ti a ko le tẹ ati .activefun oju-iwe lọwọlọwọ.

Titete to rọ

Ṣafikun boya ninu awọn kilasi iyan meji lati yi titete awọn ọna asopọ pagination pada: .pagination-centeredati .pagination-right.

Awọn apẹẹrẹ

Awọn paati pagination aiyipada jẹ rọ ati ṣiṣẹ ni nọmba awọn iyatọ.

Siṣamisi

Ti a we sinu kan <div>, oju-iwe jẹ o kan kan <ul>.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Iṣaaju </a></li> 
    <li kilasi = "lọwọ" > 
      <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 = "#" > Itele </a></li> 
  </ul>
</div>

Nipa pager

Awọn paati pager jẹ eto awọn ọna asopọ fun awọn imuse pagination ti o rọrun pẹlu isamisi ina ati paapaa awọn aza fẹẹrẹfẹ. O jẹ nla fun awọn aaye ti o rọrun bi awọn bulọọgi tabi awọn akọọlẹ.

Iyan alaabo ipinle

Awọn ọna asopọ Pager tun lo .disabledkilasi gbogbogbo lati pagination.

Apeere aiyipada

Nipa aiyipada, awọn ọna asopọ awọn ile-iṣẹ pager.

• Ti tẹlẹ
• Itele

<ul kilasi = "pager" > 
  <li>
    <a href = "#" > Ti tẹlẹ </a> 
  </li>
  <li>
    <a href = "#" > Next </a> 
  </li>
</ul>

Awọn ọna asopọ deede

Ni omiiran, o le mu ọna asopọ kọọkan pọ si awọn ẹgbẹ:

• ← Agbalagba
• Tuntun →

<ul kilasi = "pager" > 
  <li kilasi = "tẹlẹ" > 
    <a href = "#" > ← Agbalagba </a> 
  </li>
  <li kilasi = "tókàn" > 
    <a href = "#" > Opo & rarr; </a> 
  </li>
</ul>

Nipa

Awọn baaji jẹ kekere, awọn paati ti o rọrun fun iṣafihan afihan tabi kika iru kan. Wọn jẹ igbagbogbo ri ni awọn alabara imeeli bi Mail.app tabi lori awọn ohun elo alagbeka fun awọn iwifunni titari.

Awọn kilasi ti o wa

Bootstrap n pese iwuwo fẹẹrẹ, paati rọ ti a pe ni ẹyọ akọni kan lati ṣafihan akoonu lori aaye rẹ. O ṣiṣẹ daradara lori titaja ati awọn aaye ti o wuwo akoonu.

Siṣamisi

Pa akoonu rẹ sinu divbii bẹ:

<div kilasi = "akọni-kuro" > 
  <h1> Akọle </h1>
  <p> Tagline </p>
  <p>
    <a kilasi = "btn btn-primary btn-large" > 
      Kọ ẹkọ diẹ si
    </a>
  </p>
</div>

Ikarahun ti o rọrun fun aye ni h1deede ati awọn apakan apakan ti akoonu lori oju-iwe kan. O le lo h1aiyipada 's small, ano bi daradara julọ awọn paati miiran (pẹlu awọn aza afikun).

<div class = "akọsori oju-iwe" > 
  <h1> Akọsori oju-iwe apẹẹrẹ </h1>
</div>

Awọn eekanna atanpako aiyipada

Nipa aiyipada, awọn eekanna atanpako Bootstrap jẹ apẹrẹ lati ṣe afihan awọn aworan ti o sopọ pẹlu isamisi ti o nilo diẹ.

Gíga asefara

Pẹlu ifamisi afikun diẹ, o ṣee ṣe lati ṣafikun eyikeyi iru akoonu HTML bii awọn akọle, awọn ìpínrọ, tabi awọn bọtini sinu eekanna atanpako.

• 

  Aami eekanna atanpako

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit ti kii mi porta gravida ati eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Iṣe Iṣe

• 

  Aami eekanna atanpako

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit ti kii mi porta gravida ati eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Iṣe Iṣe

Kini idi ti o lo awọn eekanna atanpako

Awọn eekanna atanpako (tẹlẹ .media-gridtiti di v1.4) jẹ nla fun awọn akoj ti awọn fọto tabi awọn fidio, awọn abajade wiwa aworan, awọn ọja soobu, awọn portfolios, ati pupọ diẹ sii. Wọn le jẹ awọn ọna asopọ tabi akoonu aimi.

Rọrun, isamisi rọ

Siṣamisi eekanna atanpako rọrun-kan ulpẹlu nọmba awọn lieroja ni gbogbo ohun ti o nilo. O tun rọ pupọ, gbigba fun eyikeyi iru akoonu pẹlu isamisi diẹ diẹ sii lati fi ipari si awọn akoonu rẹ.

Nlo awọn iwọn ọwọn akoj

Nikẹhin, paati eekanna atanpako nlo awọn kilasi eto akoj ti o wa tẹlẹ—bii .span2tabi .span3—fun iṣakoso awọn iwọn eekanna atanpako.

Isamisi naa

Gẹgẹbi a ti sọ tẹlẹ, isamisi ti a beere fun awọn eekanna atanpako jẹ ina ati taara. Eyi ni wiwo iṣeto aiyipada fun awọn aworan ti o sopọ :

<ul kilasi = "awọn eekanna atanpako" > 
  <li kilasi = "span3" > 
    <a href = "#" kilasi = "thumbnail" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Fun akoonu HTML aṣa ni awọn eekanna atanpako, isamisi naa yipada diẹ. Lati gba akoonu ipele dina nibikibi, a paarọ rẹ <a>fun <div>iru bẹ:

<ul kilasi = "awọn eekanna atanpako" > 
  <li kilasi = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Aami eekanna atanpako </h5>
      <p> Akọle eekanna atanpako nibi... </p>
    </div>
  </li>
  ...
</ul>

Awọn apẹẹrẹ diẹ sii

Ṣawari gbogbo awọn aṣayan rẹ pẹlu ọpọlọpọ awọn kilasi akoj ti o wa si ọ. O tun le dapọ ati baramu awọn titobi oriṣiriṣi.

Atunkọ mimọ kilasi

Pẹlu Bootstrap 2, a ti sọ kilaasi ni irọrun: .alertdipo .alert-message. A tun ti dinku isamisi ti o kere julọ ti a beere - rara <p>ni a nilo nipasẹ aiyipada, o kan lode <div>.

Ifiranṣẹ itaniji ẹyọkan

Fun paati ti o tọ diẹ sii pẹlu koodu ti o dinku, a ti yọ iwo iyatọ kuro fun awọn itaniji bulọọki, awọn ifiranṣẹ ti o wa pẹlu fifẹ diẹ sii ati deede ọrọ diẹ sii. Kilasi tun ti yipada si .alert-block.

Lọ nla pẹlu JavaScript

Bootstrap wa pẹlu ohun itanna jQuery nla kan ti o ṣe atilẹyin awọn ifiranṣẹ titaniji, ṣiṣe piparẹ wọn ni iyara ati irọrun.

Gba ohun itanna naa »

Awọn itaniji apẹẹrẹ

Fi ipari si ifiranṣẹ rẹ ati aami isunmọ iyan ni div pẹlu kilasi ti o rọrun.

<div class = "titaniji" > 
  <bọtini kilasi = "sunmọ" data-dismiss = "titaniji" > × </button>  
  <strong> Ikilọ! </strong> Ṣayẹwo ti o dara julọ fun ararẹ, iwọ ko dara ju.
</div>

Efeti sile! Awọn ẹrọ iOS nilo ohun href="#"fun yiyọ kuro ti awọn titaniji. Rii daju lati ṣafikun rẹ ati abuda data fun awọn aami isunmọ oran. Ni omiiran, o le lo ipin <button>kan pẹlu abuda data, eyiti a ti yọ kuro lati ṣe fun awọn iwe aṣẹ wa. Nigbati o ba nlo <button>, o gbọdọ pẹlu type="button"tabi awọn fọọmu rẹ le ma fi silẹ.

Ni irọrun faagun ifiranṣẹ itaniji boṣewa pẹlu awọn kilasi aṣayan meji: .alert-blockfun fifẹ diẹ sii ati awọn iṣakoso ọrọ ati .alert-headingfun akọle ti o baamu.

<div class = "Titaniji-block" > 
  <a class = "sunmọ" data-dismiss = "alert" href = "#" > × </a>   
  <h4 kilasi = "akọle titaniji" > Ikilọ! </h4> 
  Ṣayẹwo ararẹ ti o dara julọ, iwọ kii ṣe ...
</div>

Aṣiṣe tabi ewu

<div class = "aṣiṣe titaniji-aṣiṣe" > 
  ...
</div>

Aseyori

<div class = "aṣeyọri itaniji itaniji" > 
  ...
</div>

Alaye

<div class = "alaye titaniji" > 
  ...
</div>

Ipilẹṣẹ

Pẹpẹ ilọsiwaju aiyipada pẹlu isọdi inaro.

<div kilasi = "ilọsiwaju" > 
  <div class = "ọgọ" 
       ara = " ibú : 60 %; " </div> 
</div>

Ṣiṣiri

Nlo gradient lati ṣẹda ipa didan (ko si IE).

<div class = "ilọsiwaju-ṣipopada ilosiwaju" > 
  <div class = "ọgọ" 
       ara = " ibú : 20 %; " </div> 
</div>

Ti ere idaraya

Ya awọn ṣi kuro apẹẹrẹ ati ki o animates o (ko si IE).

<div class = "ilọsiwaju-si-ni-tẹle 
     ti nṣiṣe lọwọ" >
  <div class = "ọgọ" 
       ara = " ibú : 40 %; " </div> 
</div>

Awọn awọ afikun

Awọn ifi ilọsiwaju lo diẹ ninu bọtini kanna ati awọn kilasi itaniji fun awọn aza ti o ni ibamu.

Ṣiṣiri ifi

Iru si awọn awọ ri to, a ni orisirisi ṣi kuro itesiwaju ifi.

Iwa

Awọn ifi ilọsiwaju lo awọn iyipada CSS3, nitorinaa ti o ba ṣatunṣe iwọn ni agbara nipasẹ JavaScript, yoo ṣe atunṣe laisiyonu.

Ti o ba lo .activekilaasi naa, awọn .progress-stripedọpa ilọsiwaju rẹ yoo mu awọn ila lati osi si otun.

Atilẹyin aṣawakiri

Awọn ifi ilọsiwaju lo awọn gradients CSS3, awọn iyipada, ati awọn ohun idanilaraya lati ṣaṣeyọri gbogbo awọn ipa wọn. Awọn ẹya wọnyi ko ni atilẹyin ni IE7-9 tabi awọn ẹya agbalagba ti Firefox.

Opera ati IE ko ṣe atilẹyin awọn ohun idanilaraya ni akoko yii.

Kanga

Lo daradara bi ipa ti o rọrun lori nkan kan lati fun ni ipa inset.

<div kilasi = "daradara" > 
  ...
</div>

Pa aami

Lo aami isunmọ jeneriki fun yiyọ akoonu bi awọn awoṣe ati awọn titaniji.

×

< kilaasi bọtini = "sunmọ" > & igba; </bọtini> 

Awọn ẹrọ iOS nilo href = "#" fun awọn iṣẹlẹ titẹ ti o ba kuku lo oran kan.

<a kilasi = "sunmọ" href = "#" > & igba; </a>