Samplaí mear-thosaithe

Teastaíonn roinnt teimpléid tapa? Breathnaigh ar na samplaí bunúsacha seo atá curtha le chéile againn:

Greille réamhshocraithe

Is é an córas greille réamhshocraithe a chuirtear ar fáil mar chuid de Bootstrap ná greille 16-colún 940px ar leithead. Is blas é den chóras greille 960 a bhfuil an-tóir air, ach gan an corrlach/stuáil bhreise ar an taobh clé agus ar dheis.

Sampla marcáil greille

Mar a léirítear anseo, is féidir leagan amach bunúsach a chruthú le dhá “cholún,” gach ceann acu a chuimsíonn roinnt de na 16 cholún bhunúsacha a shainmhínigh muid mar chuid dár gcóras greille. Féach ar na samplaí thíos le haghaidh tuilleadh éagsúlachtaí.

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

Colúin neadaithe

Nead d'inneachar más gá duit trí .rowcholún atá ann cheana féin a chruthú.

Sampla de cholúin neadaithe

<div rang = "row" > 
  <div class = "span12" > 
    Leibhéal 1 den cholún
    <div rang = "row" > 
      <div class = "span6" > 
        Leibhéal 2
      </div>
      <div class = "span6" > 
        Leibhéal 2
      </div>
    </div>
  </div>
</div>

Rollaigh do ghreille féin

Insuite i Bootstrap tá dornán athróg chun an córas greille 940px réamhshocraithe a shaincheapadh. Le beagán saincheaptha, is féidir leat méid na gcolún, a gcuid gáitéir, agus an coimeádán ina bhfuil cónaí orthu a mhodhnú.

Laistigh den ghreille

Is i variables.less.

Anois a shaincheapadh

Is éard atá i gceist leis an eangach a mhodhnú ná na trí @grid-*athróg a athrú agus na comhaid Níos Lú a ath-thiomsú.

Tagann Bootstrap feistithe chun córas greille a láimhseáil le suas le 24 colún; níl sa réamhshocrú ach 16. Seo é mar a bhreathnódh d’athróga greille saincheaptha do ghreille 24-colún.

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

Nuair a bheidh tú recompiled, beidh tú a shocrú!

Leagan amach seasta

An leagan amach réamhshocraithe agus simplí ar fud 940px, dírithe ar shuíomh Gréasáin nó leathanach ar bith a sholáthraíonn leathanach amháin <div.container>.

<comhlacht>
  <div class = "container" > 
    ...
  </div>
</corp>

Leagan amach sreabhach

Struchtúr leathanach sreabhán malartach, solúbtha le leithead íosta agus uasta agus barra taoibh clé. Sármhaith le haghaidh apps agus doiciméid.

<comhlacht>
  <div class = "container-fluid" > 
    <div class = "barra taobh" > 
      ...
    </div>
    <div rang = "content" > 
      ...
    </div>
  </div>
</corp>

Ceannteidil & cóip

Ordlathas clóghrafach caighdeánach chun do leathanaigh ghréasáin a struchtúrú.

Tá an eangach clóghrafaíoch ar fad bunaithe ar dhá athróg Lúide inár gcomhad athróg.less: @basefontagus @baseline. Is é an chéad cheann an clómhéid a úsáidtear tríd síos agus is é an dara ceann an bonnlíne airde.

Bainimid úsáid as na hathróga sin, agus roinnt matamaitice, chun na himill, na stuáil, agus na hairde líne de gach cineál againn agus níos mó a chruthú.

h1. Ceannteideal 1

h2. Ceannteideal 2

h3. Ceannteideal 3

h4. Ceannteideal 4

h5. Ceannteideal 5

h6. Ceannteideal 6

Alt samplach

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

Tá fo-cheannteideal ag baint le ceannteideal samplach …

Measc. eilimintí

Úsáid béime, seoltaí, & giorrúcháin

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

Cathain a úsáid

Ba chóir clibeanna béime ( <strong>agus <em>) a úsáid chun tábhacht nó béim bhreise a chur ar fhocal nó frása i gcoibhneas lena chóip timpeall air. Bain úsáid as <strong>le haghaidh tábhacht agus <em>le béim ar strus .

Béim i mír

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.

Nóta: Tá sé ceart go leor clibeanna <b>agus <i>HTML5 a úsáid go fóill agus ní gá go mbeadh siad i gcló trom agus i gcló iodálach, faoi seach (cé go bhfuil eilimint níos séimeantaí ann, bain úsáid as é). <b>Tá sé i gceist béim a chur ar fhocail nó ar fhrásaí gan tábhacht bhreise a chur in iúl, cé <i>go mbaineann sé den chuid is mó le guth, téarmaí teicniúla, etc.

Seoltaí

Úsáidtear an <address>eilimint le haghaidh faisnéise teagmhála dá sinsear is gaire, nó don chorp oibre ar fad. Seo dhá shampla de conas a d’fhéadfaí é a úsáid:

Nóta: Ní mór deireadh a chur le gach líne i <address>líne le briseadh líne ( <br />) nó a bheith fillte i gclib blocleibhéil (m.sh., <p>) chun an t-ábhar a struchtúrú i gceart.

Giorrúcháin

Le haghaidh giorrúcháin agus acrainmneacha, bain úsáid as an <abbr>chlib ( <acronym>tá sé i léig i HTML5 ). Cuir an fhoirm ghearrscríbhneoireachta laistigh den chlib agus socraigh teideal don ainm iomlán.

Blockquotes

<blockquote> <p> <small>

Conas a lua

Chun blocquote a chur san áireamh, fillte <blockquote>timpeall <p>agus <small>clibeanna. Bain úsáid as an <small>eilimint chun do fhoinse a lua agus gheobhaidh tú em dash —roimhe.

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

An Dr Julius Hibbert

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

Neamhordúil<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Slánuimhir molestie lorem ag massa
• Facilisis i pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttititor sem
  • Ac tristique libero volutpat ag
• Faucibus porta lacus fringilla nó
• Aenean sit amet erat nunc
• Eget porttitor lorem

Gan stíl<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Slánuimhir molestie lorem ag massa
• Facilisis i pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttititor sem
  • Ac tristique libero volutpat ag
• Faucibus porta lacus fringilla nó
• Aenean sit amet erat nunc
• Eget porttitor lorem

D'ordaigh<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Slánuimhir molestie lorem ag massa
4. Facilisis i pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla nó
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Cur síosdl

Liostaí cur síos

Tá liosta tuairisce foirfe chun téarmaí a shainiú.

Euismod

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

Donec id elit non mi porta gravida agus eget metus.

Porta Malesuada

Etiam porta sem malesuada magna mollis euismod.

Cód

<code> <pre>

Pimp do chód i stíl le dhá chlib shimplí. Le haghaidh níos mó fós uamhnach trí javascript, buail isteach i leabharlann prettify cód Google agus tá tú socraithe.

Cód á chur i láthair

Is féidir cód, bloic nó díreach blúirí inlíne, a thaispeáint le stíl díreach trí fhilleadh ar an gclib cheart. Le haghaidh bloic de chód a chuimsíonn línte iolracha, bain úsáid as an <pre>eilimint. Le haghaidh cód inlíne, bain úsáid as an <code>eilimint.

<div>
  <h1>Ceannteideal</h1>
  <p>Rud éigin anseo...</p>
</div>

<div> <h1> Ceannteideal </h1> <p> Rud éigin ceart anseo... </p> </div>
  
  

Lipéid inlíne

<span class="label">

Tabhair aird ar fhrása ar bith i do chorp-théacs nó bratach a chur air.

Cuir lipéad ar rud ar bith

Bhí gá riamh le ceann de na Nua bhréige sin ! nó Bratacha tábhachtacha agus cód á scríobh? Bhuel, anois tá siad agat. Seo a bhfuil san áireamh de réir réamhshocraithe:

Greille meáin

Taispeáin mionsamhlacha de mhéideanna éagsúla ar leathanaigh a bhfuil lorg HTML íseal acu agus stíleanna íosta.

Mionsamhlacha Sampla

Is féidir le mionsamhlacha sa .media-gridmhéid a bheith ar aon mhéid, ach is fearr a oibríonn siad nuair a dhéantar iad a mhapáil go díreach chuig an gcóras greille Bootstrap ionsuite. Comhcheanglaíonn leithid na híomhánna mar 90, 210, agus 330 le cúpla picteilín stuála go cothrom le méideanna .span2, .span4, agus colún..span6

Mór

Mheán

Beaga

Ag códú iad

Tá greillí meán éasca le húsáid agus sách simplí ar an taobh marcála. Tá a gcuid toisí bunaithe go hiomlán ar mhéid na n-íomhánna atá san áireamh.

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

Tógáil táblaí

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

Tá táblaí iontach - le haghaidh a lán rudaí. Tá beagán grá marcála ag teastáil ó tháblaí móra, áfach, le bheith úsáideach, inscálaithe agus inléite (ag leibhéal an chóid). Seo roinnt leideanna chun cabhrú leat.

Clúdaigh ceanntásca do cholúin i gcónaí ar bhealach a <thead>fhágann go bhfuil <thead>>> <tr>.<th>

Cosúil le ceanntásca na gcolún, ba cheart ábhar coirp uile do bhoird a fhilleadh i dtreoir go bhfuil <tbody>do ordlathas <tbody>>> <tr>.<td>

Sampla: Stíleanna tábla réamhshocraithe

Stíleofar na táblaí go léir go huathoibríoch agus gan ach na teorainneacha riachtanacha acu chun inléiteacht a áirithiú agus chun an struchtúr a chothabháil. Ní gá ranganna nó tréithe breise a chur leis.

<tábla>
  ...
</table>

Sampla: Tábla comhdhlúite

Le haghaidh táblaí a dteastaíonn níos mó sonraí uathu i spásanna níos déine, bain úsáid as an blas comhdhlúite a ghearrann stuáil ina dhá leath. Is féidir é a úsáid freisin i gcomhar le teorainneacha agus stiallacha séabra, díreach cosúil leis na stíleanna tábla réamhshocraithe.

Sampla: Tábla teorann

Déan breathnú ar do tháblaí beagán níos caol trí na coirnéil a shlánú agus teorainneacha a chur leis ar gach taobh.

<table class = "bordered-table" > 
  ...
</table>

Sampla: Séabra-stiallach

Faigh beagán mhaisiúil le do tháblaí trí stiallacha séabra a chur leis - níl le déanamh ach an .zebra-stripedrang a chur leis.

Nóta: Is feabhsú forásach é stialladh séabra nach bhfuil ar fáil do bhrabhsálaithe níos sine mar IE8 agus thíos.

<table class = "zebra-striped" > 
  ...
</table>

Sampla: Séabra-stiallaithe w/ TableSorter.js

Ag glacadh leis an sampla roimhe seo, feabhsaítear úsáideacht ár dtáblaí trí fheidhmiúlacht sórtála a sholáthar trí jQuery agus an breiseán Tablesorter . Cliceáil ceanntásc aon cholúin chun an sórt a athrú.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( feidhm ( ) { 
    $ ( "tábla#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "zebra-striped" > 
  ...
</table>

Stíleanna réamhshocraithe

Tugtar stíleanna réamhshocraithe do gach foirm chun iad a chur i láthair ar bhealach inléite agus inscálaithe. Cuirtear stíleanna ar fáil le haghaidh ionchuir téacs, liostaí roghnaithe, réimsí téacs, cnaipí raidió agus ticbhoscaí, agus cnaipí.

Foirmeacha cruachta

Cuir .form-stackedle HTML d'fhoirme agus beidh lipéid agat ar bharr a réimsí seachas ar thaobh na láimhe clé. Oibríonn sé seo go hiontach má tá do chuid foirmeacha gearr nó má tá dhá cholún ionchuir agat le haghaidh foirmeacha níos troime.

Foirm méideanna réimse

Saincheap foirm ar bith input, select, nó textarealeithead trí roinnt ranganna a chur le do mharcáil.

Amhail v1.3.0, tá na haicmí méide greille-bhunaithe le haghaidh eilimintí foirme curtha leis againn. Bain úsáid as iad seo thar na ranganna reatha .mini, .small, srl.

Cnaipí

Mar ghnás, úsáidtear cnaipí le haghaidh gníomhartha agus úsáidtear naisc le haghaidh réad. Mar shampla, d'fhéadfadh "Íoslódáil" a bheith ina chnaipe agus d'fhéadfadh "gníomhaíocht le déanaí" a bheith ina nasc.

Tá stíl liath éadrom réamhshocraithe ag na cnaipí go léir, ach is féidir roinnt ranganna feidhmiúla a chur i bhfeidhm le haghaidh stíleanna dathanna éagsúla. Áirítear ar na ranganna seo rang gorm .primary, rang éadrom-gorm .info, rang glas .success, agus rang dearg .danger.

Cnaipí samplaí

Is féidir stíleanna cnaipe a chur i bhfeidhm ar aon rud leis an .btnbhfeidhm. Go hiondúil beidh tú ag iarraidh iad seo a chur i bhfeidhm ar eilimintí <a>, <button>, agus roghnaithe . <input>Seo mar a bhreathnaíonn sé:

Méideanna malartacha

An bhfuil fonn ort cnaipí níos mó nó níos lú? Bíodh ag é!

Stát faoi mhíchumas

Le haghaidh cnaipí nach bhfuil gníomhach nó atá díchumasaithe ag an aip ar chúis amháin nó ar chúis eile, bain úsáid as an stát díchumasaithe. Sin le .disabledhaghaidh naisc agus :disabledle haghaidh <button>eilimintí.

Naisc

Cnaipí

Cad é sin

Is barra seasta é ár mbarra barr ar a bhfuil lógó nó ainm an tsuímh Ghréasáin, bunseoladh agus foirm chuardaigh.

Incheaptha

Tá gach eilimint laistigh, agus an barra bairr ar fad chomh maith, roghnach. Is féidir leat rogha a dhéanamh lógó/ainm, nascleanúint, cuardach, agus nascleanúint tánaisteach a chur san áireamh – nó aon teaglaim de sin.

Dropdowns san áireamh

Mar chuid den phríomh nascleanúint, chuireamar san áireamh an cumas duit anuas a chur le do nascleanúint. Amharc ar an seoladh tánaisteach thuas (ailínithe ar dheis) le fáil amach conas a dhéantar é. liTacaíonn clibeanna dropdown freisin .activele roghnú na leathanach reatha a thaispeáint.

Cluaisíní agus pills

Cruthaigh nascleanúint thánaisteach shimplí le <ul>. Babhtáil idir cluaisíní nó piollaí tríd an rang cuí a chur leis.

Sármhaith le haghaidh fo-ailt d’inneachar ar nós ár leathanaigh socruithe cuntais agus amlínte úsáideora chun scoránú idir leathanaigh d’inneachar comhchosúil. Ar fáil i stíleanna tabbed nó pill.

Sampla cluaisíní bunúsacha

Is féidir cluaisíní a úsáid mar loingseoireacht rialta (leathanaigh sheachtracha a lódáil sa chluaisín céanna) nó mar réimsí ábhair tabbable chun pannaí ábhair a mhalartú. Tá breiseán cluaisíní againn ar féidir a úsáid chun an dara ceann a chomhtháthú.

• Baile
• Próifíl
• Teachtaireachtaí
• Socruithe
• Teagmháil
• Titim síos
  • Nasc tánaisteach
  • Rud eile anseo
  • Nasc eile

<ul class = "cluaisíní" > 
  <li class = "active" < a href = " # " > Baile </a></li>  
  <li><a href="#">Próifíl </a> < / li > 
  <li><a href="#">Teachtaireachtaí </a> < / li > 
  <li><a href="#"> Socruithe </a> < / li> 
  <li><a href = " #"> Déan teagmháil </a> < /li> 
</ul>

Sampla pills bunúsacha

• Baile
• Próifíl
• Teachtaireachtaí
• Socruithe
• Teagmháil

<ul class = "pills" > 
  <li class = "active" < a href = " # " > Baile </a></li>  
  <li><a href="#">Próifíl </a> < / li > 
  <li><a href="#">Teachtaireachtaí </a> < / li > 
  <li><a href="#"> Socruithe </a> < / li> 
  <li><a href = " #"> Déan teagmháil </a> < /li> 
</ul>

Brioscáin aráin

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

• Baile

• Baile /
• Meán-leathanach

• Baile /
• Meánleathanach /
• Ceann eile

• Baile /
• Meánleathanach /
• ceann eile /
• Tá tú anseo

<ul class = "breadcrumb" > 
  <li><a href="#"> Baile </a> < span class = " divider" > / < /span></li>   
  <li><a href="#"> Meanleathanach </a> < span class = " divider " > / </span></li>   
  <li><a href="#"> Ceann eile </a> < span class = "divider" > / < /span></li>   
  <li class = "active" > Tá tú anseo </li> 
</ul>

Leathanaigh

Leathanach uimhriúcháin ultra-simplí agus íostach spreagtha ag Rdio. Is deacair an bloc mór a chailleann, inscálaithe go héasca, agus soláthraíonn sé limistéir mhóra cliceáil.

<div class = "leathanach" > 
  <ul>
    <li class = "prev míchumasaithe" > <a href="#"> & larr ; 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="#">5 </a> < / li > 
    <li class = "ar aghaidh" < a href = " # " > Ar Aghaidh → </a></li>  
  </ul>
</div>

Foláirimh bhunúsacha

.alert-message

Teachtaireachtaí aon líne chun béim a chur ar theip, ar theip nó ar rathúlacht gníomhaíochta. Go háirithe úsáideach le haghaidh foirmeacha.

Faigh javascript »

Cód samplach

<div class = "rabhadh teachtaireachta" > 
  <a class="close" href="#"> × </a> _ _ _ _ _  
  <p><strong> Guacamole Naofa! </strong> Is fearr a sheiceáil duit féin, níl tú ag breathnú ró-mhaith. </p>
</div>

Cuir bac ar theachtaireachtaí

.alert-message.block-message

Le haghaidh teachtaireachtaí a dteastaíonn beagán mínithe uathu, tá foláirimh maidir le stíl ailt againn. Tá siad seo foirfe chun teachtaireachtaí earráide níos faide a mhéadú, rabhadh a thabhairt d'úsáideoir faoi ghníomh atá ar feitheamh, nó díreach chun faisnéis a chur i láthair chun níos mó béime a chur ar an leathanach.

Faigh javascript »

Cód samplach

<div class = "alert-message block-message warning" > 
  <a class="close" href="#"> × </a> _ _ _ _ _  
  <p><strong> Guacamole Naofa! Is rabhadh é seo! </strong> Is fearr a sheiceáil duit féin, níl tú ag breathnú ró-mhaith. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, nó scelerisque nisl consectetur et. </p>
  <div class = "alert-actions" > 
    <a class="btn small" href="#"> Déan an gníomh seo </a> <a class="btn small" href="#"> Nó déan é seo </a> _ _     
  </div>
</div>

Modhanna

Tá modhanna – dialóga nó boscaí solais – iontach maith le haghaidh gníomhaíochtaí comhthéacsúla i gcásanna ina bhfuil sé tábhachtach an comhthéacs cúlra a choinneáil.

Faigh javascript »

Leideanna uirlisí

Tá Twipsies thar a bheith úsáideach chun cabhrú le húsáideoir mearbhall agus iad a dhíriú sa treo ceart.

Faigh javascript »

Popovers

Úsáid popovers chun faisnéis fhothéacsúil a sholáthar do leathanach gan cur isteach ar leagan amach.

Faigh javascript »

Ag tosú

Tá sé thar a bheith éasca javascript a chomhtháthú le leabharlann Bootstrap. Thíos déanaimid dul thar na bunghnéithe agus cuirimid roinnt breiseán uamhnach ar fáil duit chun tú a chur ar bun!

Féach ar dhoiciméid javascript »

Cad atá san áireamh

Tabhair beocht do chuid de phríomhchodanna Bootstrap le forlíontáin saincheaptha nua a oibríonn le jQuery agus Ender . Molaimid duit iad a leathnú agus a mhodhnú chun freastal ar do riachtanais forbartha ar leith.

An bhfuil javascript riachtanach?

Ní hea! Dearadh Bootstrap ar an gcéad dul síos le bheith ina leabharlann CSS. Soláthraíonn an javascript seo ciseal bunúsach idirghníomhach ar bharr na stíleanna atá san áireamh.

Mar sin féin, dóibh siúd a bhfuil javascript de dhíth orthu, tá na forlíontáin thuas curtha ar fáil againn chun cabhrú leat tuiscint a fháil ar conas Bootstrap a chomhtháthú le javascript agus chun rogha tapa éadrom a thabhairt duit don bhunfheidhmíocht láithreach.

Le haghaidh tuilleadh faisnéise agus chun roinnt taispeántas beo a fheiceáil, féach le do thoil ar ár leathanach doiciméadú breiseán .