Bootstrap

Baz CSS

Sou tèt echafodaj la, eleman HTML debaz yo style ak amelyore ak klas extensible pou bay yon aparans fre, ki konsistan.

Tipografi Tit, paragraf, lis, ak lòt eleman inline

Tit ak kopi kò

Echèl tipografik

Tout kadriyaj tipografik la baze sou de Less variables nan fichye variables.less nou an: @baseFontSizeak @baseLineHeight. 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ò.

Egzanp tèks kò

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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Men, li pa gen okenn komodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

h1. Tit 1

h2. Tit 2

h3. Tit 3

h4. Tit 4

h5. Tit 5
h6. Tit 6

Anfaz, adrès, ak abrevyasyon

Eleman Itilizasyon Si ou vle
<strong> Pou mete aksan sou yon ti bout tèks ak enpòtan Okenn
<em> Pou mete aksan sou yon ti bout tèks ak estrès Okenn
<abbr> Anvlope abrevyasyon ak akwonim yo montre vèsyon an elaji sou hover Mete opsyonèl titlepou tèks elaji
<address> Pou enfòmasyon kontak pou zansèt ki pi pre li oswa tout kò travay la Prezève fòma lè w fini tout liy ak<br>

Sèvi ak anfaz

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: Ou lib pou itilize <b>ak <i>nan HTML5, men itilizasyon yo chanje yon ti jan. <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.

Egzanp adrès

Men de egzanp sou fason yo <address>ka itilize tag la:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Non konplè
[email protected]

Egzanp abrevyasyon

Abreviyasyon yo style ak tèks majiskil ak yon fwontyè anba limyè pwentiye. Yo menm tou yo gen yon kurseur èd sou hover pou itilizatè yo gen endikasyon siplemantè yon bagay yo pral montre sou hover.

HTML se pi bon bagay depi tranche pen.

Yon abrevyasyon mo atribi se attr .

Blockquotes

Eleman Itilizasyon Si ou vle
<blockquote> Eleman nan nivo blòk pou site kontni ki soti nan yon lòt sous

Ajoute citeatribi pou URL sous

Itilize .pull-leftak .pull-rightklas pou opsyon flote
<small> Eleman opsyonèl pou ajoute yon sitasyon itilizatè a, anjeneral, yon otè ki gen tit travay Mete la <cite>alantou tit la oswa non sous la

Pou enkli yon blockquote, vlope <blockquote>nenpòt HTML kòm quote la. Pou quotes dwat nou rekòmande yon <p>.

Mete yon <small>eleman si ou vle site sous ou a epi w ap jwenn yon priz &mdash;devan li pou rezon manier.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer poses erat a ante venenatis. </p>
  3.   <small> Yon moun ki pi popilè </small>
  4. </blockquote>

Egzanp blockquotes

Default blockquotes yo style jan sa a:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer poses erat a ante venenatis.

Yon moun ki pi popilè nan Body of work

Pou flote blockquote ou a sou bò dwat la, ajoute class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer poses erat a ante venenatis.

Yon moun ki pi popilè nan Body of work

Lis

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

Deskripsyon

<dl>

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 Inline ak blòk fragments kòd

Nan liy

Vlope fragman nan kòd ak <code>.

  1. Pa egzanp , <code> seksyon </ code > ta dwe vlope kòm aliye .

Blòk debaz

Itilize <pre>pou plizyè liy kòd. Asire ou ke ou vire nenpòt ki kachèt nan karaktè unicode yo pou rann kòrèk.

<p>Egzanp tèks isit la...</p>

  1. <pre>
  2.   <p>Egzanp tèks isit la...</p>
  3. </pre>

Remak: Asire w ke w kenbe kòd nan <pre>tags pi pre gòch la ke posib; li pral rann tout onglet.

Google Prettify

Pran menm <pre>eleman an epi ajoute de klas si ou vle pou rann amelyore.

  1. <p> Egzanp tèks isit la... </p>
  1. <pre klas = "prettyprint 
  2.      linenums" >
  3.   <p>Egzanp tèks isit la...</p>
  4. </pre>

Telechaje google-code-prettify epi gade readme a pou kijan pou itilize.

Tablo Pou, ou devine li, done tabul

Tablo maketing

Tag Deskripsyon
<table> Eleman anbalaj pou montre done nan yon fòma tabular
<thead> Eleman veso pou ranje header tab ( <tr>) pou make kolòn tab yo
<tbody> Eleman veso pou ranje tab ( <tr>) nan kò tab la
<tr> Eleman veso pou yon seri selil tab ( <td>oswa <th>) ki parèt sou yon sèl ranje
<td> Selil tab default
<th> Selil tab espesyal pou etikèt kolòn (oswa ranje, depann sou dimansyon ak plasman)
Dwe itilize nan yon<thead>
<caption> Deskripsyon oswa rezime sa ki tab la kenbe, espesyalman itil pou lektè ekran yo 
  1. <tab>
  2.   <tèt>
  3.     <tr>
  4.       <th> … </th>
  5.       <th> … </th>
  6.     </tr>
  7.   </thead>
  8.   <tbody>
  9.     <tr>
  10.       <td> … </td>
  11.       <td> … </td>
  12.     </tr>
  13.   </tbody>
  14. </tab>

Opsyon tab la

Non Klas Deskripsyon
Default Okenn Pa gen estil, jis kolòn ak ranje
Debaz .table Se sèlman liy orizontal ant ranje
Borde .table-bordered Arrondi kwen epi ajoute fwontyè deyò
Zèb-bande .table-striped Ajoute koulè background gri limyè nan ranje enpè (1, 3, 5, elatriye)
Kondanse .table-condensed Koupe vètikal padding an mwatye, soti nan 8px a 4px, nan tout tdak theleman

Egzanp tab

1. Default estil tab

Tablo yo otomatikman estile ak sèlman kèk fwontyè asire lizibilite epi kenbe estrikti. Avèk 2.0, .tableklas la obligatwa.

  1. <table class = "tab" > 
  2.   …
  3. </tab>
# Premye Non Siyati Lang
1 Mak Otto CSS
2 Jakòb Thornton Javascript
3 Stu Dent HTML

2. Tablo par

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

Remak: Tablo sprite yo itilize :nth-childseleksyon CSS la epi yo pa disponib nan IE7-IE8.

  1. <table class = "tab tab-striped" > 
  2.   …
  3. </tab>
# Premye Non Siyati Lang
1 Mak Otto CSS
2 Jakòb Thornton Javascript
3 Stu Dent HTML

3. Borded tab

Ajoute fwontyè alantou tab la tout antye ak kwen awondi pou rezon ayestetik.

  1. <tab class = "tab tab-borde" > 
  2.   …
  3. </tab>
# Premye Non Siyati Lang
1 Mak Otto CSS
2 Jakòb Thornton Javascript
3 Stu Dent
3 Brosef Stalin HTML

4. Tablo kondanse

Fè tab ou yo plis konpak lè w ajoute .table-condensedklas la pou koupe padding selil tab la an mwatye (soti nan 8px a 4px).

  1. <table class = "table table-condensed" > 
  2.   …
  3. </tab>
# Premye Non Siyati Lang
1 Mak Otto CSS
2 Jakòb Thornton Javascript
3 Stu Dent HTML

5. Konbine yo tout!

Ou lib pou konbine nenpòt nan klas tab yo pou reyalize diferan aparans lè w itilize nenpòt nan klas ki disponib yo.

  1. <table class = "tab tab-ray tab-borded table-condensed" > 
  2.   ...
  3. </tab>
# Premye Non Siyati Lang
1 Mak Otto CSS
2 Jakòb Thornton Javascript
3 Stu Dent HTML
4 Brosef Stalin HTML

Fòm

HTML fleksib ak CSS

Pi bon pati sou fòm nan Bootstrap se ke tout antre ak kontwòl ou yo gade bèl kèlkeswa jan ou bati yo nan maketing ou a. Pa gen okenn HTML nesesè, men nou bay modèl yo pou moun ki bezwen li.

Layout ki pi konplike vini ak klas suks ak évolutive pou fason fasil ak evènman obligatwa, kidonk ou ap kouvri nan chak etap.

Kat kouman enkli

Bootstrap vini ak sipò pou kat kalite fòm fòm:

  • Vètikal (default)
  • Rechèch
  • Nan liy
  • Orizontal

Diferan kalite fòm fòm mande kèk chanjman nan maketing, men kontwòl yo tèt yo rete ak konpòte menm jan an.

Kontwòl eta yo ak plis ankò

Fòm Bootstrap yo gen ladan estil pou tout kontwòl fòm baz yo tankou D ', Textarea, ak chwazi ou ta atann. Men, li tou vini ak yon kantite konpozan koutim tankou antre ak ajoute ak sipò pou lis kaz.

Eta tankou erè, avètisman, ak siksè yo enkli pou chak kalite kontwòl fòm. Epitou enkli estil pou kontwòl ki andikape.

Kat kalite fòm

Bootstrap bay mak senp ak estil pou kat estil fòm entènèt komen.

Non Klas Deskripsyon
Vètikal (default) .form-vertical (pa obligatwa) Anpile, etikèt ki aliye sou bò gòch sou kontwòl yo
Nan liy .form-inline Etikèt ki aliye agoch ​​ak kontwòl inline-blòk pou style kontra enfòmèl ant
Rechèch .form-search Antre tèks siplemantè awondi pou yon ayestetik rechèch tipik
Orizontal .form-horizontal Flote sou bò gòch, etikèt ki aliye adwat sou menm liy ak kontwòl yo

Egzanp fòm lè l sèvi avèk jis kontwòl fòm, pa gen okenn mak siplemantè

Fòm de baz

Avèk v2.0, nou gen pi lejè ak pi entelijan default pou estil fòm. Pa gen mak siplemantè, jis fòm kontwòl.

Asosye èd tèks!

Fòm rechèch

Reflete estil WebKit default, jis ajoute .form-searchpou jaden rechèch siplemantè awondi.

Fòm Inline

Antre yo se nivo blòk yo kòmanse. Pou .form-inlineak .form-horizontal, nou itilize inline-block.


Fòm orizontal

Kontwole sipò Bootstrap yo

Anplis tèks freeform, nenpòt opinyon HTML5 ki baze sou tèks parèt konsa.

Ki sa ki enkli

Yo montre sou bò gòch la tout kontwòl fòm default nou sipòte. Men lis bal la:

  • Antre tèks (tèks, modpas, imèl, elatriye)
  • kaz
  • radyo
  • chwazi
  • seleksyon miltip
  • antre dosye
  • zòn tèks

Nouvo default ak v2.0

Jiska v1.4, estil fòm default Bootstrap yo te itilize layout orizontal la. Avèk Bootstrap 2, nou te retire kontrent sa a pou gen pi entelijan, pi évolutive default pou nenpòt fòm.


Eta kontwòl fòm
Gen kèk valè isit la
Gen yon bagay ki ka pase mal
Tanpri korije erè a
Woooo!
Woooo!

Eta navigatè reamenaje

Bootstrap prezante estil pou navigatè ki sipòte konsantre ak disabledeta yo. Nou retire Webkit default la outlineepi aplike yon box-shadownan plas li pou :focus.

Validasyon fòm

Li gen ladan tou estil validation pou erè, avètisman, ak siksè. Pou itilize, ajoute klas erè a nan vwazinaj la .control-group.

  1. <fieldset
  2.   klas = "Erè gwoup kontwòl" >
  3.   …
  4. </fieldset>

Pwolonje kontwòl fòm yo

Sèvi ak menm .span*klas yo nan sistèm kadriyaj la pou gwosè opinyon.

@

Men kèk tèks èd

.00

Men plis tèks èd

Remak: Etikèt antoure tout opsyon yo pou zòn klike pi gwo ak yon fòm ki pi itil.

Antre ak ajoute entrées

Gwoup Antre—ak tèks ki ann ajoute oswa devan—bay yon fason fasil bay plis kontèks pou antre ou yo. Gwo egzanp genyen siy @ pou non itilizatè Twitter oswa $ pou finans.

Case ak radyo

Jiska v1.4, Bootstrap te mande yon mak siplemantè alantou kaz ak radyo pou anpile yo. Koulye a, se yon senp kesyon de repete a <label class="checkbox">ki vlope a <input type="checkbox">.

Yo sipòte kaz ak radyo yo tou. Jis ajoute .inlinenan nenpòt .checkboxoswa .radioepi w ap fini.

Fòm Inline ak ajoute/andan

Pou itilize antre oswa ajoute antre nan yon fòm aliye, asire w ke ou mete .add-onak inputsou menm liy lan, san espas.

Fòme tèks èd

Pou ajoute tèks èd pou antre fòm ou a, enkli tèks èd aliy ak <span class="help-inline">oswa yon blòk tèks èd ak <p class="help-block">apre eleman opinyon an.

Bouton

Bouton Klas Deskripsyon
Default .btn Bouton gri estanda ak gradyan
Prensipal .btn-primary Bay plis pwa vizyèl epi idantifye aksyon prensipal la nan yon seri bouton
Info .btn-info Itilize kòm yon altènatif nan estil yo default
Siksè .btn-success Endike yon aksyon siksè oswa pozitif
Avètisman .btn-warning Endike yo ta dwe pran prekosyon ak aksyon sa a
Danje .btn-danger Endike yon aksyon danjere oswa potansyèlman negatif

Bouton pou aksyon

Kòm yon konvansyon, bouton yo ta dwe itilize sèlman pou aksyon pandan y ap lyen ipèr yo dwe itilize pou objè yo. Pou egzanp, "Download" ta dwe yon bouton pandan ke "aktivite ki sot pase" ta dwe yon lyen.

Pou lank ak fòm

Styles bouton yo ka aplike nan nenpòt bagay ak .btnaplike a. Sepandan, tipikman ou pral vle aplike sa yo sèlman <a>ak <button>eleman.

Remak: Tout bouton yo dwe genyen .btnklas la. Styles bouton yo ta dwe aplike nan <button>ak <a>eleman pou konsistans.

Plizyè gwosè

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

Aksyon prensipal Aksyon

Aksyon prensipal Aksyon

Eta andikape

Pou bouton ki andikape, sèvi ak .btn-disabledpou lyen ak :disabledpou <button>eleman.

Aksyon prensipal Aksyon

Cross navigatè konpatibilite

Nan IE9, nou lage gradyan an sou tout bouton an favè kwen awondi kòm IE9 pa koupe gradyan background nan kwen yo.

Ki gen rapò, IE9 jankifies buttoneleman ki andikape, rann tèks gri ak yon lonbraj tèks anbarasan - malerezman nou pa ka ranje sa a.


Ikon Glyphicons te bay avèk pitye

Tèt leve! Klas ikon yo repete atravè CSS :after. Nan dokiman yo, nou montre yon koulè limyè wouj background sou hover pou mete aksan sou gwosè icon nan.

Bati kòm yon luten

Olye pou nou fè chak ikòn yon demann siplemantè, nou te konpile yo nan yon luten—yon pakèt imaj nan yon sèl dosye ki sèvi ak CSS pou pozisyon imaj yo ak background-position. Sa a se menm metòd nou itilize sou Twitter.com epi li te travay byen pou nou.

Tout klas ikon yo gen prefiks .icon-pou bon espas non ak kad, menm jan ak lòt konpozan nou yo. Sa ap ede evite konfli ak lòt zouti.

Glyphicons te akòde nou sèvi ak Halflings yo mete nan bwat zouti sous ouvè nou an toutotan nou bay yon lyen ak kredi isit la nan dokiman yo. Tanpri konsidere fè menm bagay la nan pwojè ou yo.

Kouman pou itilize

Avèk v2.0.0, nou te chwazi sèvi ak yon <i>tag pou tout ikon nou yo, men yo pa gen okenn klas ka-sèlman yon prefiks pataje. Pou itilize, mete kòd sa a jis sou nenpòt kote:

  1. <i klas = "ikon-rechèch" ></i>

Genyen tou estil ki disponib pou ikon envèse (blan), ki prepare ak yon klas siplemantè:

  1. <i klas = "icon-rechèch icon-blan" ></i>

Gen 120 klas pou chwazi pou ikon ou yo. Jis ajoute yon <i>tag ak bon klas yo epi w ap fikse. Ou ka jwenn lis konplè a nan sprites.less oswa isit la nan dokiman sa a.

Sèvi ak ka yo

Ikon yo se gwo, men ki kote yon moun ta sèvi ak yo? Men kèk ide:

  • Kòm vizyèl pou navigasyon bò kote w la
  • Pou yon navigasyon piman icon-kondwi
  • Pou bouton ede transmèt siyifikasyon an nan yon aksyon
  • Avèk lyen pou pataje kontèks sou destinasyon yon itilizatè

Esansyèlman, nenpòt kote ou ka mete yon <i>tag, ou ka mete yon icon.

Egzanp yo

Sèvi ak yo nan bouton, gwoup bouton pou yon ba ikòn, navigasyon, oswa antre fòm avan.

Itilizatè

Rafrechi Kesye Efase

Kòmantè Anviwònman Plis Enfòmasyon