Enghreifftiau cychwyn cyflym

Angen rhai templedi cyflym? Edrychwch ar yr enghreifftiau sylfaenol hyn rydyn ni wedi'u rhoi at ei gilydd:

Grid diofyn

Y system grid rhagosodedig a ddarperir fel rhan o Bootstrap yw grid 16-colofn 940px o led. Mae'n flas o'r system grid 960 boblogaidd, ond heb yr ymyl / padin ychwanegol ar yr ochr chwith a dde.

Enghraifft o farcio grid

Fel y dangosir yma, gellir creu cynllun sylfaenol gyda dwy "golofn," pob un yn rhychwantu nifer o'r 16 colofn sylfaenol a ddiffiniwyd gennym fel rhan o'n system grid. Gweler yr enghreifftiau isod am ragor o amrywiadau.

<div class = "row" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Colofnau nythu

Nythu eich cynnwys os oes rhaid drwy greu o .rowfewn colofn sy'n bodoli eisoes.

Enghraifft o golofnau nythu

<div class = "row" > 
  <div class = "span12" > 
    Lefel 1 y golofn
    <div class = "row" > 
      <div class = "span6" > 
        Lefel 2
      </div>
      <div class = "span6" > 
        Lefel 2
      </div>
    </div>
  </div>
</div>

Rholiwch eich grid eich hun

Wedi'u hymgorffori yn Bootstrap mae llond llaw o newidynnau ar gyfer addasu'r system grid 940px rhagosodedig. Gydag ychydig o addasu, gallwch chi addasu maint y colofnau, eu cwteri, a'r cynhwysydd maen nhw'n byw ynddo.

Y tu mewn i'r grid

Mae'r newidynnau sydd eu hangen i addasu'r system grid i gyd yn byw yn preboot.less.

Nawr i addasu

Mae addasu'r grid yn golygu newid y tri @grid-*newidyn ac ail-grynhoi'r Ffeiliau Llai.

Daw'r offer i Bootstrap drin system grid gyda hyd at 24 o golofnau; dim ond 16 yw'r rhagosodiad. Dyma sut y byddai eich newidynnau grid yn edrych wedi'u haddasu i grid 24-colofn.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

Unwaith y byddwch wedi'ch ail-grynhoi, byddwch yn barod!

Gosodiad sefydlog

Y gosodiad diofyn a syml 940px-eang, wedi'i ganoli ar gyfer bron unrhyw wefan neu dudalen a ddarperir gan un ffeil <div.container>.

<corff>
  <div class = "cynhwysydd" > 
    ...
  </div>
</corff>

Gosodiad hylif

Strwythur tudalen hylif hyblyg amgen gyda lled isaf ac uchaf a bar ochr chwith. Gwych ar gyfer apps a dogfennau.

<corff>
  <div class = "container-fluid" > 
    <div class = "bar ochr" > 
      ...
    </div>
    <div class = "cynnwys" > 
      ...
    </div>
  </div>
</corff>

Penawdau a chopi

Hierarchaeth deipograffig safonol ar gyfer strwythuro'ch tudalennau gwe.

Mae'r grid teipograffeg cyfan yn seiliedig ar ddau newidyn Llai yn ein ffeil preboot.less: @basefonta @baseline. Y cyntaf yw maint y ffont sylfaen a ddefnyddir drwyddi draw a'r ail yw uchder y llinell sylfaen.

Rydyn ni'n defnyddio'r newidynnau hynny, a rhywfaint o fathemateg, i greu'r ymylon, padinau, ac uchder llinell o'n holl fath a mwy.

h1. Pennawd 1

h2. Pennawd 2

h3. Pennawd 3

h4. Pennawd 4

h5. Pennawd 5

h6. Pennawd 6

Paragraff enghreifftiol

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id ultricies vehicula ut id elit.

Mae gan bennawd enghreifftiol is-bennawd…

Amryw. elfennau

Defnyddio pwyslais, cyfeiriadau, a byrfoddau

<strong> <em> <address> <abbr>

Pryd i ddefnyddio

Dylid defnyddio tagiau pwyslais ( <strong>a ) i ddangos pwysigrwydd neu bwyslais ychwanegol gair neu ymadrodd o'i gymharu â'r copi o'i amgylch. <em>Defnyddiwch <strong>ar gyfer pwysigrwydd ac <em>ar gyfer pwyslais straen .

Pwyslais mewn paragraff

Fusce dapibus , tellus ac cursus comodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus . Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.

Nodyn: Mae'n dal yn iawn i ddefnyddio <b>a <i>thagiau yn HTML5 ac nid oes rhaid iddynt gael eu steilio mewn print trwm ac italig, yn y drefn honno (er os oes elfen fwy semantig, defnyddiwch hi). <b>i fod i amlygu geiriau neu ymadroddion heb gyfleu pwysigrwydd ychwanegol, tra ei fod <i>yn bennaf ar gyfer llais, termau technegol, ac ati.

Cyfeiriadau

Defnyddir yr <address>elfen ar gyfer gwybodaeth gyswllt ar gyfer ei hynafiad agosaf, neu'r corff cyfan o waith. Dyma ddwy enghraifft o sut y gellid ei ddefnyddio:

Nodyn: Rhaid i bob llinell mewn llinell <address>ddod i ben gyda toriad llinell ( <br />) neu gael ei lapio mewn tag lefel bloc (ee, <p>) i strwythuro'r cynnwys yn gywir.

Byrfoddau

Ar gyfer byrfoddau ac acronymau, defnyddiwch y <abbr>tag ( <acronym>wedi'i anghymeradwyo yn HTML5 ). Rhowch y ffurflen llaw-fer o fewn y tag a gosodwch deitl ar gyfer yr enw cyflawn.

Blockquotes

<blockquote> <p> <small>

Sut i ddyfynnu

I gynnwys blockquote, cofleidiol a <blockquote>thagiau . Defnyddiwch yr elfen i ddyfynnu eich ffynhonnell a byddwch yn cael 'em dash' o'i flaen.<p><small><small>&mdash;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cyfanrif posuere erat a ante venenatis dapibus posuere velit aliquet.

Julius Hibbert, Dr

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cyfanrif posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Dr. Julius Hibbert </small>
</blockquote>

Heb drefn<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Cyfanrif molestie lorem yn massa
• Facilitis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttititor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Unstyled<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Cyfanrif molestie lorem yn massa
• Facilitis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttititor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Archebwyd<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Cyfanrif molestie lorem yn massa
4. Facilitis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Disgrifiaddl

Rhestri disgrifiadau

Mae rhestr ddisgrifiad yn berffaith ar gyfer diffinio termau.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus.

Porthladd Malesuada

Etiam porta sem malesuada magna mollis euismod.

Côd

<code> <pre>

Pimpiwch eich cod mewn steil gyda dau dag syml. I gael mwy fyth o ryfeddod trwy javascript, galwch heibio i lyfrgell prettify cod Google ac rydych chi'n barod.

Cyflwyno cod

Gellir arddangos cod, blociau o neu bytiau mewnol yn unig, gydag arddull dim ond trwy lapio'r tag cywir. Ar gyfer blociau o god sy'n rhychwantu llinellau lluosog, defnyddiwch yr <pre>elfen. Ar gyfer cod mewnol, defnyddiwch yr <code>elfen.

<div>
  <h1>Pennawd</h1>
  <p>Rhywbeth yma...</p>
</div>

<div> <h1> Heading </h1> <p> Rhywbeth yn iawn yma... </p> </div>
  
  

Labeli mewnol

<span class="label">

Galwch sylw neu fflagiwch unrhyw ymadrodd yn nhestun eich corff.

Labelwch unrhyw beth

Erioed angen un o'r rhai ffansi Newydd! neu Baneri pwysig wrth ysgrifennu cod? Wel, nawr mae gennych chi nhw. Dyma beth sydd wedi'i gynnwys yn ddiofyn:

Grid cyfryngau

Arddangos mân-luniau o wahanol feintiau ar dudalennau sydd ag ôl troed HTML isel ac ychydig iawn o arddulliau.

Mân-luniau enghreifftiol

Gall mân-luniau yn y .media-gridfod unrhyw faint, ond maen nhw'n gweithio orau o'u mapio'n uniongyrchol i'r system grid Bootstrap adeiledig. Mae lled delwedd fel 90, 210, a 330 yn cyfuno ag ychydig bicseli o badin i fod yn gyfartal â meintiau .span2, .span4, a .span6cholofn.

Mawr

Canolig

Bach

Eu codio

Mae gridiau cyfryngau yn hawdd i'w defnyddio ac yn eithaf syml ar yr ochr marcio. Mae eu dimensiynau yn seiliedig yn unig ar faint y delweddau a gynhwysir.

<ul class = "media-grid" > 
  <li>
    <a href="#"> _ _ _ 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href="#"> _ _ _ 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

Adeiladu byrddau

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Mae byrddau yn wych - am lawer o bethau. Fodd bynnag, mae angen ychydig o gariad marcio ar dablau gwych i fod yn ddefnyddiol, yn raddadwy ac yn ddarllenadwy (ar lefel y cod). Dyma ychydig o awgrymiadau i helpu.

Lapiwch benawdau eich colofnau bob amser <thead>fel bod hierarchaeth yn <thead>>> <tr>.<th>

Yn debyg i benawdau'r colofnau, dylai holl gynnwys corff eich tabl gael ei lapio mewn a <tbody>fel mai eich hierarchaeth yw <tbody>>> .<tr><td>

Enghraifft: Arddulliau tabl rhagosodedig

Bydd pob bwrdd yn cael ei steilio'n awtomatig gyda dim ond y borderi hanfodol i sicrhau darllenadwyedd a chynnal strwythur. Nid oes angen ychwanegu dosbarthiadau neu briodoleddau ychwanegol.

<bwrdd>
  ...
</table>

Enghraifft: Sebra-streipiau

Mynnwch ychydig o ffansi gyda'ch byrddau trwy ychwanegu stribedi sebra - ychwanegwch y .zebra-stripeddosbarth.

Nodyn: Mae stripio sebra yn welliant cynyddol nad yw ar gael ar gyfer porwyr hŷn fel IE8 ac is.

< table class = "sebra-streip" > 
...
</table>

Enghraifft: Sebra-streipiau w/ TableSorter.js

Gan gymryd yr enghraifft flaenorol, rydym yn gwella defnyddioldeb ein tablau trwy ddarparu ymarferoldeb didoli trwy jQuery ac ategyn Tablesorter . Cliciwch ar bennyn unrhyw golofn i newid y math.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( swyddogaeth ( ) { 
    $ ( " table#sortTableExample " ). tablesorter ( { sortList : [[ 1 , 0 ]] });  
  });
</script>
< table class = "sebra-streip" > 
  ...
</table>

Arddulliau rhagosodedig

Rhoddir arddulliau rhagosodedig i bob ffurflen i'w cyflwyno mewn ffordd ddarllenadwy a graddadwy. Darperir arddulliau ar gyfer mewnbynnau testun, rhestrau dethol, meysydd testun, botymau radio a blychau ticio, a botymau.

Ffurflenni wedi'u pentyrru

Ychwanegwch .form-stackedat HTML eich ffurflen a bydd gennych labeli ar ben eu meysydd yn hytrach nag ar y chwith. Mae hyn yn gweithio'n wych os yw'ch ffurflenni'n fyr neu os oes gennych chi ddwy golofn o fewnbynnau ar gyfer ffurflenni trymach.

Ffurfio meintiau caeau

Addaswch unrhyw ffurf input, select, neu textarealed trwy ychwanegu ychydig o ddosbarthiadau yn unig at eich marcio.

O f1.3.0, rydym wedi ychwanegu'r dosbarthiadau maint ar sail grid ar gyfer elfennau ffurf. Defnyddiwch y rhain dros y dosbarthiadau .mini, .small, ac ati presennol.

Botymau

Fel confensiwn, defnyddir botymau ar gyfer gweithredoedd tra defnyddir dolenni ar gyfer gwrthrychau. Er enghraifft, gallai "Lawrlwytho" fod yn fotwm a gallai "gweithgaredd diweddar" fod yn ddolen.

Mae pob botwm yn rhagosodedig i arddull llwyd golau, ond gellir cymhwyso nifer o ddosbarthiadau swyddogaethol ar gyfer gwahanol arddulliau lliw. Mae'r dosbarthiadau hyn yn cynnwys dosbarth glas .primary, dosbarth glas golau .info, dosbarth gwyrdd .success, a dosbarth coch .danger.

Botymau enghreifftiol

Gellir cymhwyso arddulliau botwm i unrhyw beth gyda'r .btncymhwyso. Yn nodweddiadol byddwch am gymhwyso'r rhain i elfennau <a>, <button>, a dethol yn unig. <input>Dyma sut mae'n edrych:

Meintiau eraill

Awydd botymau mwy neu lai? Mwynhewch!

Cyflwr anabl

Ar gyfer botymau nad ydynt yn weithredol neu sy'n anabl gan yr ap am ryw reswm neu'i gilydd, defnyddiwch y cyflwr anabl. Mae hynny ar .disabledgyfer dolenni ac :disabledar gyfer <button>elfennau.

Cysylltiadau

Botymau

Beth ydyw

Mae ein bar uchaf yn far sefydlog sy'n cynnwys logo neu enw gwefan, llywio cynradd, a ffurflen chwilio.

Customizable

Mae'r holl elfennau oddi mewn, a'r bar uchaf cyfan hefyd, yn ddewisol. Gallwch ddewis cynnwys logo/enw, llywio, chwiliad, a llywio eilaidd – neu unrhyw gyfuniad o hynny.

Cwympiadau wedi'u cynnwys

Fel rhan o'r prif lywio, rydym wedi cynnwys y gallu i chi ychwanegu cwymplenni i'ch llywio. Edrychwch ar y llywio eilaidd uchod (wedi'i alinio i'r dde) i weld sut mae'n cael ei wneud. Mae tagiau dropdown lihefyd yn cefnogi .activedangos y dewis tudalen gyfredol.

Tabiau a tabledi

Creu llywio eilaidd syml gyda <ul>. Newidiwch rhwng tabiau neu dabledi trwy ychwanegu'r dosbarth priodol.

Gwych ar gyfer is-adrannau cynnwys fel ein tudalennau gosodiadau cyfrif a llinellau amser defnyddwyr ar gyfer toglo rhwng tudalennau o gynnwys tebyg. Ar gael mewn arddulliau tabledi neu bilsen.

• Cartref
• Proffil
• Negeseuon
• Gosodiadau
• Cysylltwch
• Gollwng i lawr
  • Dolen uwchradd
  • Rhywbeth arall yma
  • Dolen arall

<ul class = "tabiau" > 
  < li class = " active " <a href = " # " > Cartref </a></li>  
  <li><a href="#"> Proffil </a> < / li> 
  <li><a href="#"> Negeseuon </a> < / li> 
  <li><a href="#"> Gosodiadau </a> < / li> 
  <li><a href="#"> Cysylltu </a> < / li> 
</ul>

• Cartref
• Proffil
• Negeseuon
• Gosodiadau
• Cysylltwch

<ul class = "pils" > 
  < li class = " active " <a href = " # " > Cartref </a></li>  
  <li><a href="#"> Proffil </a> < / li> 
  <li><a href="#"> Negeseuon </a> < / li> 
  <li><a href="#"> Gosodiadau </a> < / li> 
  <li><a href="#"> Cysylltu </a> < / li> 
</ul>

Briwsion bara

Defnyddir llywio briwsion bara fel ffordd o ddangos i ddefnyddwyr ble maent o fewn ap neu wefan, ond nid ar gyfer llywio cynradd.

• Cartref

• Cartref /
• Tudalen ganol

• Cartref /
• Tudalen ganol /
• Un arall

• Cartref /
• Tudalen ganol /
• Un arall /
• Rwyt ti yma

<ul class = "breadcrumb" > 
  <li><a href="#"> Cartref </a> < span class = " divider" > < / span></li>   
  <li><a href="#"> Tudalen ganol </a> < span class = "divider" > < / span></li>   
  <li><a href="#"> Un arall </a> < span class = "divider" > < / span></li>   
  <li class = "active" > Rydych chi yma </li> 
</ul>

Tudaleniad

Tudaleniad hynod or-syml a lleiaf posibl wedi'i ysbrydoli gan Rdio. Mae'r bloc mawr yn anodd ei golli, yn hawdd ei raddio, ac mae'n darparu ardaloedd clicio mawr.

<div class = "tudalen" > 
  <ul>
    < li class = "#" > <a href="#"> & larr ; Blaenorol </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="#"> 5 </a> < / li> 
    <li class = "nesaf" <a href = "#" > Nesaf & rarr ; </a></li>  
  </ul>
</div>

Rhybuddion sylfaenol

.alert-message

Negeseuon un llinell ar gyfer tynnu sylw at fethiant, methiant posibl, neu lwyddiant gweithred. Yn arbennig o ddefnyddiol ar gyfer ffurflenni.

Cael y javascript »

Cod enghreifftiol

<div class = "rhybudd-message" > 
  <a class="close" href="#"> × </a> _ _ _ _ _  
  <p><strong> Guacamole sanctaidd! </strong> Gorau gwirio yo hunan, nid ydych yn edrych yn rhy dda. </p>
</div>

Rhwystro negeseuon

.alert-message.block-message

Ar gyfer negeseuon sydd angen ychydig o esboniad, mae gennym rybuddion arddull paragraff. Mae'r rhain yn berffaith ar gyfer byrlymu negeseuon gwall hirach, rhybuddio defnyddiwr am weithred arfaethedig, neu ddim ond cyflwyno gwybodaeth i gael mwy o bwyslais ar y dudalen.

Cael y javascript »

Cod enghreifftiol

<div class = "rhybudd bloc-message rhybudd-message" > 
  <a class="close" href="#"> × </a> _ _ _ _ _  
  <p><strong> Guacamole sanctaidd! Dyma rybudd! </strong> Gorau gwirio yo hunan, nid ydych yn edrych yn rhy dda. Nulla vitae elit libero, pharetra augue. Cwlwm comodo cwrsws magna, neu scelerisque nisl consectetur et. </p>
  <div class = "alert-actions" > 
    < a class = " btn bach " href = " # " > Cymerwch y cam hwn </a> <a class="btn small" href="#"> Neu gwnewch hyn </a>     
  </div>
</div>

moddau

Mae moddau - deialogau neu flychau golau - yn wych ar gyfer gweithredoedd cyd-destunol mewn sefyllfaoedd lle mae'n bwysig cynnal y cyd-destun cefndirol.

Cael y javascript »

Cynghorion offer

Mae Twipsies yn hynod ddefnyddiol ar gyfer cynorthwyo defnyddiwr dryslyd a'u pwyntio i'r cyfeiriad cywir.

Cael y javascript »

Popovers

Defnyddiwch popovers i ddarparu gwybodaeth is-destunol i dudalen heb effeithio ar y cynllun.

Cael y javascript »

Dechrau arni

Mae integreiddio javascript â llyfrgell Bootstrap yn hynod hawdd. Isod rydyn ni'n mynd dros y pethau sylfaenol ac yn darparu rhai ategion anhygoel i chi i'ch rhoi ar ben ffordd!

Gweld dogfennau javascript »

Beth sydd wedi'i gynnwys

Dewch â rhai o brif gydrannau Bootstrap yn fyw gydag ategion personol newydd sy'n gweithio gyda jQuery ac Ender . Rydym yn eich annog i'w hymestyn a'u haddasu i gyd-fynd â'ch anghenion datblygu penodol.

Oes angen javascript?

Naddo! Mae Bootstrap wedi'i gynllunio yn bennaf oll i fod yn llyfrgell CSS. Mae'r javascript hwn yn darparu haen ryngweithiol sylfaenol ar ben yr arddulliau sydd wedi'u cynnwys.

Fodd bynnag, i'r rhai sydd angen javascript, rydym wedi darparu'r ategion uchod i'ch helpu i ddeall sut i integreiddio Bootstrap â javascript ac i roi opsiwn cyflym, ysgafn i chi ar gyfer y swyddogaeth sylfaenol ar unwaith.

Am ragor o wybodaeth ac i weld rhai demos byw, cyfeiriwch at ein tudalen dogfennaeth ategyn .