Egzanp ki kòmanse rapid

Bezwen kèk modèl rapid? Tcheke egzanp debaz sa yo nou te mete ansanm:

Kadriyaj default

Sistèm kadriyaj default yo bay kòm yon pati nan Bootstrap se yon griy 940px lajè 16-kolòn. Li se yon gou nan sistèm nan kadriyaj popilè 960, men san yo pa Marge adisyonèl / padding sou bò gòch ak bò dwat yo.

Egzanp kadriyaj maketing

Jan yo montre la a, yo ka kreye yon layout debaz ak de "kolòn," yo chak kouvri yon kantite 16 kolòn fondamantal nou defini kòm yon pati nan sistèm kadriyaj nou an. Gade egzanp ki anba yo pou plis varyasyon.

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

Kolòn nidifikasyon

Nich kontni ou si ou dwe pa kreye yon .rownan yon kolòn ki egziste deja.

Egzanp kolòn enbrike

<div class = "ranje" > 
  <div class = "span12" > 
    Nivo 1 nan kolòn
    <div class = "ranje" > 
      <div class = "span6" > 
        Nivo 2
      </div>
      <div class = "span6" > 
        Nivo 2
      </div>
    </div>
  </div>
</div>

Woule griy pwòp ou a

Bati nan Bootstrap gen yon ti ponyen nan varyab pou pèrsonalize sistèm nan kadriyaj default 940px. Avèk yon ti kras nan personnalisation, ou ka modifye gwosè kolòn yo, goutyè yo, ak veso yo abite nan.

Anndan kadriyaj la

Varyab ki nesesè pou modifye sistèm kadriyaj la kounye a tout abite nan preboot.less.

Koulye a pou personnaliser

Modifye kadriyaj la vle di chanje twa @grid-*varyab yo ak rekonpile fichye mwens yo.

Bootstrap vini ekipe pou okipe yon sistèm kadriyaj ki gen jiska 24 kolòn; default la se jis 16. Men ki jan varyab kadriyaj ou yo ta gade Customized nan yon kadriyaj 24-kolòn.

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

Yon fwa rekonpile, ou pral mete!

Layout fiks

Defo ak senp 940px lajè, Layout santre pou prèske nenpòt sitwèb oswa paj ki ofri pa yon sèl <div.container>.

<kò>
  <div class = "kontenè" > 
    ...
  </div>
</kò>

Layout likid

Yon altènatif, fleksib estrikti paj likid ak min- ak max-lajè ak yon bò gòch. Bon pou aplikasyon ak dokiman.

<kò>
  <div class = "kontenè-likid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "kontni" > 
      ...
    </div>
  </div>
</kò>

Tit ak kopi

Yon yerachi tipografik estanda pou estrikti paj wèb ou yo.

Tout kadriyaj tipografik la baze sou de Less variables nan fichye preboot.less nou an: @basefontak @baseline. Premye a se gwosè font de baz yo itilize nan tout e dezyèm lan se wotè liy debaz la.

Nou itilize varyab sa yo, ak kèk matematik, pou kreye maj yo, paddings, ak liy-wotè nan tout kalite nou yo ak plis ankò.

h1. Tit 1

h2. Tit 2

h3. Tit 3

h4. Tit 4

h5. Tit 5

h6. Tit 6

Egzanp paragraf

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

Egzanp tit Gen sou-tit...

Misk. eleman

Sèvi ak anfaz, adrès, ak abrevyasyon

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

Lè pou itilize

Tag anfaz ( <strong>ak <em>) ta dwe itilize pou endike plis enpòtans oswa anfaz yon mo oswa yon fraz anrapò ak kopi ki antoure l. Itilize <strong>pou enpòtans ak <em>pou mete aksan sou estrès .

Anfaz nan yon paragraf

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

Remak: Li toujou oke pou itilize <b>ak <i>tag nan HTML5 epi yo pa bezwen estile fonse ak italik, respektivman (byenke si gen yon eleman plis semantik, sèvi ak li). <b>se vle di yo mete aksan sou mo oswa fraz san yo pa transmèt plis enpòtans, pandan y ap <i>se sitou pou vwa, tèm teknik, elatriye.

Adrès

Se <address>eleman nan itilize pou enfòmasyon kontak pou zansèt ki pi pre li yo, oswa tout kò travay la. Men de egzanp sou fason li ka itilize:

Remak: Chak liy nan yon <address>dwe fini ak yon kase liy ( <br />) oswa yo dwe vlope nan yon etikèt nivo blòk (egzanp, <p>) pou byen estriktire kontni an.

Abreviyasyon yo

Pou abrevyasyon ak akwonim, sèvi ak <abbr>tag ( <acronym>se depreche nan HTML5 ). Mete fòm kout la nan tag la epi mete yon tit pou non konplè a.

Blockquotes

<blockquote> <p> <small>

Ki jan yo site

Pou enkli yon blockquote, vlope <blockquote>ak <p>tags <small>. Sèvi ak <small>eleman nan site sous ou a epi w ap jwenn yon priz em —anvan li.

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

Doktè Julius Hibbert

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

San lòd<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis nan pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor 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
• Integer molestie lorem at massa
• Facilisis nan pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Kòmande<ol>

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

Deskripsyondl

Lis deskripsyon yo

Yon lis deskripsyon pafè pou defini tèm.

Euismod

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

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Kòd

<code> <pre>

Tchoul kòd ou nan style ak de tags senp. Pou menm plis awesomeness atravè javascript, gout nan bibliyotèk Google prettify kòd epi w ap fikse.

Prezante kòd

Kòd, blòk oswa jis snippets inline, yo ka parèt ak style jis pa vlope nan tag dwat la. Pou blòk kòd ki kouvri plizyè liy, sèvi ak <pre>eleman an. Pou kòd inline, sèvi ak <code>eleman an.

<div>
  <h1>Tit</h1>
  <p>Yon bagay isit la...</p>
</div>

<div> <h1> Tit </h1> <p> Yon bagay isit la... </p> </div>
  
  

Etikèt Inline

<span class="label">

Rele atansyon oswa make nenpòt fraz nan tèks kò ou.

Mete etikèt sou anyen

Tout tan tout tan bezwen youn nan sa yo anpenpan New! oswa Drapo enpòtan lè w ap ekri kòd? Oke, kounye a ou gen yo. Men sa ki enkli pa default:

Griy medya

Montre miniatures diferan gwosè sou paj ki gen anprint HTML ki ba ak estil minim.

Egzanp miniatures

Miniatures nan .media-gridka gen nenpòt gwosè, men yo travay pi byen lè kat dirèkteman nan sistèm nan kadriyaj Bootstrap bati-an. Lajè imaj tankou 90, 210, ak 330 konbine avèk kèk piksèl nan padding pou egal gwosè kolòn .span2, .span4, ak ..span6

Gwo

Mwayen

Ti

Kode yo

Griy medya yo fasil pou itilize epi yo pito senp sou bò balisaj la. Dimansyon yo piman baze sou gwosè imaj yo enkli.

<ul class = "medya-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>

Bati tab

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

Tablo yo gwo-pou anpil bagay. Gwo tab, sepandan, bezwen yon ti jan nan renmen maketing yo dwe itil, évolutive, ak lizib (nan nivo kòd). Men kèk konsèy pou ede.

Toujou vlope tèt kolòn ou yo nan yon <thead>fason ki yerachi se <thead>> <tr>> <th>.

Menm jan ak tèt kolòn yo, tout kontni kò tab ou a ta dwe vlope nan yon <tbody>konsa yerachi ou a <tbody>> <tr>> <td>.

Egzanp: Styles tab default

Tout tab yo pral otomatikman estile ak sèlman fwontyè esansyèl yo asire lizibilite epi kenbe estrikti. Pa bezwen ajoute klas oswa atribi siplemantè.

<tab>
  ...
</tab>

Egzanp: Zèb-ray

Jwenn yon ti kras anpenpan ak tab ou lè w ajoute zebra-striping-jis ajoute .zebra-stripedklas la.

Remak: Zebra-striping se yon amelyorasyon pwogresif ki pa disponib pou pi gran navigatè tankou IE8 ak anba a.

<table class = "zebra-ray" > 
...
</tab>

Egzanp: Zebra-ray w/ TableSorter.js

Pran egzanp anvan an, nou amelyore itilite tab nou yo lè nou bay fonksyonalite klasman atravè jQuery ak Plugin Tablesorter . Klike sou tèt nenpòt kolòn pou chanje klasman an.

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

Estil default

Tout fòm yo bay estil default yo prezante yo nan yon fason lizib ak évolutive. Yo bay estil pou antre tèks, lis chwazi, zòn tèks, bouton radyo ak kaz, ak bouton.

Fòm anpile

Ajoute .form-stackedHTML fòm ou a epi w ap gen etikèt sou tèt jaden yo olye pou yo sou bò gòch yo. Sa a travay anpil si fòm ou yo kout oswa ou gen de kolòn nan entrain pou fòm pi lou.

Fòme gwosè jaden

Customize nenpòt fòm input, select, oswatextarea lajè lè w ajoute jis kèk klas nan maketing ou a.

Apati v1.3.0, nou te ajoute klas dimensionnement ki baze sou kadriyaj pou eleman fòm yo. Tanpri itilize sa yo sou klas ki deja egziste .mini, .small, elatriye.

Bouton

Kòm yon konvansyon, bouton yo itilize pou aksyon pandan y ap lyen yo itilize pou objè yo. Pou egzanp, "Download" ta ka yon bouton ak "aktivite ki sot pase" ta ka yon lyen.

Tout bouton pa default nan yon style gri limyè, men yon kantite klas fonksyonèl ka aplike pou diferan estil koulè. Klas sa yo genyen yon .primaryklas ble, yon klas ble limyè .info, yon klas vèt .successak yon klas wouj .danger.

Egzanp bouton

Styles bouton yo ka aplike nan nenpòt bagay ak .btnaplike a. Tipikman ou pral vle aplike sa yo nan sèlman <a>, <button>, ak <input>eleman chwazi. Men ki jan li sanble:

Lòt gwosè

Anpenpan bouton ki pi gwo oswa pi piti? Gen nan li!

Eta andikape

Pou bouton ki pa aktif oswa ki enfim nan aplikasyon an pou yon rezon oswa yon lòt, sèvi ak eta a andikape. Sa a .disabledpou lyen ak :disabledpou <button>eleman.

Lyen

Bouton

Kisa li ye

Topbar nou an se yon ba fiks ki mete logo oswa non yon sit entènèt, navigasyon prensipal, ak fòm rechèch.

Customizable

Tout eleman ki nan, ak tout bar top la tou, yo opsyonèl. Ou ka chwazi pou mete yon logo/non, navigasyon, rechèch, ak yon navigasyon segondè—oswa nenpòt konbinezon sa a.

Dropdowns enkli

Kòm yon pati nan navigasyon prensipal la, nou te enkli kapasite pou ou ajoute dropdowns nan nav ou. Tcheke navigasyon segondè ki pi wo a (kiline adwat) pou wè ki jan li fè. Tag Dropdowns lisipòte tou .activepou montre seleksyon paj aktyèl la.

Tabs ak grenn

Kreye senp navigasyon segondè ak yon <ul>. Boukante ant tab oswa grenn lè w ajoute klas ki apwopriye a.

Bon pou sous-seksyon nan kontni tankou paj paramèt kont nou yo ak delè itilizatè yo pou chanje ant paj tankou kontni. Disponib nan estil tabbed oswa pilil.

• Lakay
• Profile
• Mesaj
• Anviwònman
• Kontakte
• Dropdown
  • Segondè lyen
  • Yon lòt bagay isit la
  • Yon lòt lyen

<ul klas = "onglè" > 
  <li class = "active" ><a href = "#" > Kay </a></li>  
  <li><a href = "#" > Pwofil </a></li> 
  <li><a href = "#" > Mesaj </a></li> 
  <li><a href = "#" > Anviwònman </a></li> 
  <li><a href = "#" > Kontakte </a></li> 
</ul>

• Lakay
• Profile
• Mesaj
• Anviwònman
• Kontakte

<ul class = "grenn" > 
  <li class = "active" ><a href = "#" > Kay </a></li>  
  <li><a href = "#" > Pwofil </a></li> 
  <li><a href = "#" > Mesaj </a></li> 
  <li><a href = "#" > Anviwònman </a></li> 
  <li><a href = "#" > Kontakte </a></li> 
</ul>

Ti pen

Navigasyon Breadcrumb yo itilize kòm yon fason pou montre itilizatè yo kote yo ye nan yon aplikasyon oswa yon sit, men se pa pou navigasyon prensipal.

• Lakay

• Lakay /
• Mitan paj

• Kay /
• Mitan paj /
• Yon lòt ankò

• Kay /
• paj mitan /
• Yon lòt ankò /
• Ou la

<ul class = "breadcrumb" > 
  <li><a href = "#" > Kay </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > paj mitan </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Yon lòt </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Ou la </li> 
</ul>

Papyaj

Ultra senplist ak minim estile pagination enspire pa Rdio. Gwo blòk la difisil pou rate, fasil évolutive, epi li bay gwo zòn klike sou.

<div class = "pagination" > 
  <ul>
    <li class = "prev enfim" ><a href = "#" > ← Previous </a></li>  
    <li class = "aktif" ><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 = "next" ><a href = "#" > Next → </a></li>  
  </ul>
</div>

Alèt debaz yo

.alert-message

Mesaj yon sèl liy pou mete aksan sou echèk, echèk posib, oswa siksè nan yon aksyon. Patikilyèman itil pou fòm.

Jwenn javascript la »

Egzanp kòd

<div class = "avètisman mesaj avètisman" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Sentespri guacamole! </strong> Pi bon tcheke yo tèt ou, ou pa gade twò bon. </p>
</div>

Bloke mesaj yo

.alert-message.block-message

Pou mesaj ki mande yon ti eksplikasyon, nou gen alèt style paragraf. Sa yo pafè pou ebulisyon mesaj erè ki pi long, avèti yon itilizatè sou yon aksyon annatant, oswa jis prezante enfòmasyon pou plis anfaz sou paj la.

Jwenn javascript la »

Egzanp kòd

<div class = "avètisman mesaj blòk-avètisman" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Sentespri guacamole! Sa a se yon avètisman! </strong> Pi bon tcheke yo tèt ou, ou pa gade twò bon. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alèt-aksyon" > 
    <a class = "btn small" href = "#" > Pran aksyon sa a </a> <a class = "btn small" href = "#" > Oswa fè sa </a>     
  </div>
</div>

Modal

Modèl-dyalòg oswa bwat limyè-yo bon pou aksyon kontèks nan sitiyasyon kote li enpòtan pou kontèks background yo kenbe.

Jwenn javascript la »

Konsèy zouti

Twipsies yo trè itil pou ede yon itilizatè konfonn epi montre yo nan bon direksyon an.

Jwenn javascript la »

Popovers

Sèvi ak popovers pou bay enfòmasyon subtext nan yon paj san yo pa afekte layout.

Jwenn javascript la »

Kòmanse

Entegre javascript ak bibliyotèk Bootstrap la trè fasil. Anba a nou ale sou debaz yo epi ba ou kèk grefon awizom pou fè ou kòmanse!

Gade dokiman javascript »

Ki sa ki enkli

Pote kèk nan eleman prensipal Bootstrap yo bay lavi ak nouvo grefon koutim ki travay ak jQuery ak Ender . Nou ankouraje w pou pwolonje ak modifye yo pou anfòm bezwen espesifik devlopman ou yo.

Èske javascript nesesè?

Non! Bootstrap fèt premye ak premye yo dwe yon bibliyotèk CSS. Javascript sa a bay yon kouch entèaktif debaz sou tèt estil enkli yo.

Sepandan, pou moun ki bezwen javascript, nou te bay grefon ki anwo yo pou ede w konprann kijan pou entegre Bootstrap ak javascript epi pou ba w yon opsyon rapid, ki lejè pou fonksyonalite debaz la touswit.

Pou plis enfòmasyon ak pou wè kèk demonstrasyon ap viv, tanpri al gade nan paj dokimantasyon plugin nou an .