loke
osi
ọtun
ni isalẹ

Bootstrap, lati Twitter

Bootstrap jẹ ohun elo irinṣẹ lati Twitter ti a ṣe apẹrẹ lati bẹrẹ idagbasoke awọn ohun elo wẹẹbu ati awọn aaye.
O pẹlu CSS ipilẹ ati HTML fun iwe-kikọ, awọn fọọmu, awọn bọtini, awọn tabili, awọn grids, lilọ kiri, ati diẹ sii.

Itaniji Nerd: Bootstrap jẹ itumọ pẹlu Kere ati pe a ṣe apẹrẹ lati ṣiṣẹ ni ẹnu-bode pẹlu awọn aṣawakiri ode oni ni lokan.

Hotlink awọn CSS

Fun ibẹrẹ iyara ati irọrun julọ, kan daakọ snippet yii sinu oju opo wẹẹbu rẹ.

Lo pẹlu Kere

Afẹfẹ ti lilo Kere? Ko si iṣoro, kan ṣe oniye repo ki o ṣafikun awọn laini wọnyi:

Orita lori GitHub

Ṣe igbasilẹ, orita, fa, awọn ọran faili, ati diẹ sii pẹlu aṣẹ Bootstrap repo lori Github.

Bootstrap lori GitHub »

Lọwọlọwọ v1.3.0

Itan

Awọn onimọ-ẹrọ ni Twitter ti lo itan-akọọlẹ ti o fẹrẹẹ jẹ eyikeyi ile-ikawe ti wọn faramọ lati pade awọn ibeere ipari-iwaju. Bootstrap bẹrẹ bi idahun si awọn italaya ti o gbekalẹ. Pẹlu iranlọwọ ti ọpọlọpọ awọn eniyan oniyi, Bootstrap ti dagba ni pataki.

Ka diẹ sii lori dev.twitter.com ›

Atilẹyin aṣawakiri

Bootstrap jẹ idanwo ati atilẹyin ni awọn aṣawakiri ode oni pataki bi Chrome, Safari, Internet Explorer, ati Firefox.

Idanwo ati atilẹyin ni Chrome, Safari, Internet Explorer, ati Firefox
  • Safari tuntun
  • Titun Google Chrome
  • Firefox 4+
  • Internet Explorer 7+
  • Opera 11

Ohun ti o wa ninu

Bootstrap wa ni pipe pẹlu CSS ti a kojọ, ti ko ṣajọpọ, ati awọn awoṣe apẹẹrẹ.

Awọn apẹẹrẹ ibẹrẹ ni iyara

Nilo awọn awoṣe iyara diẹ? Ṣayẹwo awọn apẹẹrẹ ipilẹ wọnyi ti a ti ṣajọpọ:

  • Ifilelẹ ọwọn mẹta ti o rọrun pẹlu ẹyọ akọni
  • Ifilelẹ omi pẹlu ọpa ẹgbe aimi
  • Eiyan ikele ti o rọrun fun awọn ohun elo

akoj aiyipada

Eto akoj aiyipada ti a pese gẹgẹ bi apakan Bootstrap jẹ akoj 16-iwe giga 940px. O jẹ adun ti eto akoj 960 olokiki, ṣugbọn laisi ala afikun / padding ni apa osi ati awọn ẹgbẹ ọtun.

Apeere akoj isamisi

Gẹgẹbi a ṣe han nibi, ipilẹ ipilẹ le ṣee ṣẹda pẹlu “awọn ọwọn” meji, ọkọọkan ti o ni nọmba kan ti awọn ọwọn ipilẹ 16 ti a ṣalaye gẹgẹbi apakan ti eto akoj wa. Wo awọn apẹẹrẹ ni isalẹ fun awọn iyatọ diẹ sii.

  1. <div kilasi = "kana" >
  2. <div kilasi = "span6" >
  3. ...
  4. </div>
  5. <div kilasi = "span10" >
  6. ...
  7. </div>
  8. </div>
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
3
3
3
3
3
1
4
4
4
4
1/3
1/3
1/3
1/3
2/3
4
6
6
8
8
5
11
16

Awọn ọwọn aiṣedeede

4
8 aiṣedeede 4
1/3 aiṣedeede 2/3s
4 aiṣedeede 4
4 aiṣedeede 4
5 aiṣedeede 3
5 aiṣedeede 3
10 aiṣedeede 6

Awọn ọwọn itẹle

Itẹ-ẹiyẹ akoonu rẹ ti o ba gbọdọ nipa ṣiṣẹda kan .rowlaarin iwe to wa tẹlẹ.

Apeere ti iteeye ọwọn

Ipele 1 ti ọwọn
Ipele 2
Ipele 2
  1. <div kilasi = "kana" >
  2. <div kilasi = "span12" >
  3. Ipele 1 ti ọwọn
  4. <div kilasi = "kana" >
  5. <div kilasi = "span6" >
  6. Ipele 2
  7. </div>
  8. <div kilasi = "span6" >
  9. Ipele 2
  10. </div>
  11. </div>
  12. </div>
  13. </div>

Eerun ara rẹ akoj

Ti a ṣe sinu Bootstrap jẹ iwonba awọn oniyipada fun isọdi ti eto akoj 940px aiyipada. Pẹlu diẹ ti isọdi, o le yipada iwọn awọn ọwọn, awọn gọta wọn, ati eiyan ti wọn ngbe.

Inu akoj

Awọn oniyipada nilo lati yi eto akoj pada lọwọlọwọ gbogbo wọn ngbe ni variables.less.

Ayípadà Iwọn aiyipada Apejuwe
@gridColumns 16 Nọmba awọn ọwọn laarin akoj
@gridColumnWidth 40px Awọn iwọn ti kọọkan iwe laarin awọn akoj
@gridGutterWidth 20px Awọn odi aaye laarin kọọkan iwe
@siteWidth Iṣiro apao ti gbogbo awọn ọwọn ati awọn gutters A lo diẹ ninu awọn ibaamu ipilẹ lati ka nọmba awọn ọwọn ati awọn gutters ati ṣeto iwọn ti .fixed-container()mixin.

Bayi lati ṣe akanṣe

Iyipada akoj tumọ si yiyipada awọn @grid-*oniyipada mẹta ati ṣiṣatunṣe awọn faili Kere.

Bootstrap wa ni ipese lati mu eto akoj kan pẹlu to awọn ọwọn 24; awọn aiyipada ni o kan 16. Eyi ni bi rẹ akoj oniyipada yoo wo ti adani si a 24-iwe akoj.

  1. @gridColumns : 24 ;
  2. @gridColumnWidth : 20px ;
  3. @gridGutterWidth : 20px ;

Ni kete ti o ba tun ṣe akopọ, iwọ yoo ṣeto!

Ifilelẹ ti o wa titi

Aiyipada ati irọrun 940px jakejado, ifilelẹ aarin fun o kan nipa oju opo wẹẹbu eyikeyi tabi oju-iwe ti a pese nipasẹ ẹyọkan <div.container>.

  1. <ara>
  2. <div kilasi = "apoti" >
  3. ...
  4. </div>
  5. </ ara>

Ifilelẹ omi

Omiiran, ọna oju-iwe ito rirọ pẹlu min- ati awọn iwọn ti o pọju ati ọpa apa osi kan. Nla fun awọn lw ati awọn docs.

  1. <ara>
  2. <div class = "container-fluid" >
  3. <div kilasi = "apagbe ẹgbẹ" >
  4. ...
  5. </div>
  6. <div class = "akoonu" >
  7. ...
  8. </div>
  9. </div>
  10. </ ara>

Awọn akọle & daakọ

Aṣeṣe aṣawakiri aṣa fun tito awọn oju-iwe wẹẹbu rẹ.

Gbogbo akoj afọwọṣe da lori awọn oniyipada Kere meji ninu awọn oniyipada wa.faili ti ko ni: @basefontati @baseline. Ni igba akọkọ ti ni awọn mimọ-iwọn font lo jakejado ati awọn keji ni awọn mimọ ila-giga.

A nlo awọn oniyipada wọnyẹn, ati awọn iṣiro diẹ, lati ṣẹda awọn ala, awọn paddings, ati awọn giga laini ti gbogbo iru wa ati diẹ sii.

h1. Akọle 1

h2. Akole 2

h3. Akole 3

h4. Akole 4

h5. Akole 5
h6. Akole 6

Apeere ìpínrọ

Nullam quis risus eget urna mollis ornare vel eu leo. Bi o ṣe le jẹ penatibus ati magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Akọle apẹẹrẹ Ni akọle-ipin…

Oriṣiriṣi. eroja

Lilo tcnu, awọn adirẹsi, & awọn kuru

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

Nigbati lati lo

O yẹ ki o lo awọn ami itọkasi ( <strong>ati <em>) lati ṣe afihan pataki afikun tabi tcnu ti ọrọ tabi gbolohun kan ni ibatan si ẹda agbegbe rẹ. Lo <strong>fun pataki ati <em>fun aapọn aapọn .

Tcnu ni a ìpínrọ

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

Akiyesi: O tun dara lati lo <b>ati <i>awọn taagi ni HTML5 ati pe wọn ko ni lati ṣe ara igboya ati italic, lẹsẹsẹ (botilẹjẹpe ti ẹya itumọ diẹ sii, lo). <b>Itumọ lati ṣe afihan awọn ọrọ tabi awọn gbolohun ọrọ laisi sisọ pataki pataki, lakoko <i>ti o jẹ pupọ julọ fun ohun, awọn ọrọ imọ-ẹrọ, ati bẹbẹ lọ.

Awọn adirẹsi

A <address>lo eroja naa fun alaye olubasọrọ fun baba ti o sunmọ, tabi gbogbo ara iṣẹ. Eyi ni apẹẹrẹ meji ti bii o ṣe le lo:

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

Akiyesi: Laini kọọkan ninu ohun <address>gbọdọ pari pẹlu fifọ laini kan ( <br />) tabi ti a we sinu aami-ipele idina (fun apẹẹrẹ, <p>) lati ṣeto akoonu daradara.

Awọn kukuru

Fun awọn kuru ati awọn acronyms, lo <abbr>tag ( <acronym>is deprecated in HTML5 ). Fi fọọmu kukuru sinu tag ati ṣeto akọle fun orukọ pipe.

Blockquotes

<blockquote> <p> <small>

Bawo ni lati sọ

Lati ni blockquote kan, yipo <blockquote>ni ayika <p>ati <small>awọn aami. Lo <small>eroja lati tọka orisun rẹ ati pe iwọ yoo gba dash em &mdash;ṣaaju rẹ.

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

Dokita Julius Hibbert
  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  3. <kekere> Dokita Julius Hibbert </small>
  4. </blockquote>

Awọn akojọ

Ti ko paṣẹ<ul>

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

Ti ko ni aṣa<ul.unstyled>

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

Ti paṣẹ<ol>

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

Apejuwedl

Awọn akojọ apejuwe
Akojọ apejuwe jẹ pipe fun asọye awọn ofin.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit ti kii mi porta gravida ati eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Koodu

<code> <pre>

Pimp koodu rẹ ni ara pẹlu awọn afi meji ti o rọrun. Fun paapaa iyalẹnu diẹ sii nipasẹ JavaScript, ju silẹ sinu ile-ikawe prettify koodu Google ati pe o ti ṣeto.

Nfihan koodu

Koodu, awọn bulọọki ti tabi o kan snippets inline, le ṣe afihan pẹlu ara kan nipa yiyi ni tag ọtun. Fun awọn bulọọki ti koodu ti o kọja laini pupọ, lo <pre>nkan naa. Fun koodu opopo, lo <code>eroja.

Eroja Abajade
<code> Ninu laini ọrọ bii eyi, koodu ti a we rẹ yoo dabi nkan yii <html>.
<pre>
<div>
  <h1>Akọle </h1>
  <p>Nkankan nibi...</p>
</div>

Akiyesi: Rii daju pe o tọju koodu laarin <pre>awọn afi ni isunmọ si apa osi bi o ti ṣee; yoo mu gbogbo awọn taabu.

<pre class="prettyprint">

Lilo ile-ikawe google-code-prettify, awọn bulọọki koodu rẹ gba ara wiwo ti o yatọ diẹ ati fifi aami sintasi laifọwọyi.

<div> <h1> Akọle </h1> <p> Nkankan nibi... </p> </div>
  
  

Ṣe igbasilẹ google-code-prettify ati wo readme fun bi o ṣe le lo.

Awọn aami inline

<span class="label">

Pe akiyesi si tabi ṣe itọsi eyikeyi gbolohun ọrọ ninu ọrọ ara rẹ.

Aami ohunkohun

Nigbagbogbo nilo ọkan ninu awọn tuntun tuntun wọnyẹn ! tabi awọn asia pataki nigba kikọ koodu? O dara, bayi o ni wọn. Eyi ni ohun ti o wa pẹlu aiyipada:

Aami Abajade
<span class="label">Default</span> Aiyipada
<span class="label success">New</span> Tuntun
<span class="label warning">Warning</span> Ikilo
<span class="label important">Important</span> Pataki
<span class="label notice">Notice</span> Akiyesi

Media akoj

Ṣe afihan awọn eekanna atanpako ti awọn titobi oriṣiriṣi lori awọn oju-iwe pẹlu ẹsẹ HTML kekere ati awọn aza ti o kere julọ.

Awọn eekanna atanpako apẹẹrẹ

Awọn eekanna atanpako ninu .media-gridle jẹ iwọn eyikeyi, ṣugbọn wọn ṣiṣẹ dara julọ nigbati a ya aworan taara si eto akoj Bootstrap ti a ṣe sinu. Awọn iwọn aworan bi 90, 210, ati 330 darapọ pẹlu awọn piksẹli diẹ ti padding lati dọgba awọn .span2, .span4, ati .span6awọn iwọn ọwọn.

Tobi

Alabọde

Kekere

Ifaminsi wọn

Awọn akoj Media rọrun lati lo ati dipo rọrun ni ẹgbẹ isamisi. Awọn iwọn wọn da lori iwọn awọn aworan ti o wa.

  1. <ul kilasi = "media-grid" >
  2. <li>
  3. <a href = "#" >
  4. <img kilasi = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
  5. </a>
  6. </li>
  7. <li>
  8. <a href = "#" >
  9. <img kilasi = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
  10. </a>
  11. </li>
  12. </ul>

Awọn tabili ile

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

Awọn tabili jẹ nla-fun ọpọlọpọ awọn nkan. Awọn tabili nla, sibẹsibẹ, nilo diẹ ti ifẹ isamisi lati wulo, iwọn, ati kika (ni ipele koodu). Eyi ni awọn imọran diẹ lati ṣe iranlọwọ.

Fi ipari si awọn akọsori ọwọn rẹ nigbagbogbo ni <thead>iru awọn ilana jẹ <thead>> <tr>> <th>.

Iru si awọn akọle ọwọn, gbogbo akoonu ara tabili rẹ yẹ ki o wa ni titan ni kan <tbody>ki awọn ilana rẹ jẹ <tbody>> <tr>> <td>.

Apeere: Awọn ara tabili aiyipada

Gbogbo awọn tabili yoo jẹ aṣa laifọwọyi pẹlu awọn aala pataki nikan lati rii daju kika ati ṣetọju eto. Ko si iwulo lati ṣafikun awọn kilasi afikun tabi awọn abuda.

# Orukọ akọkọ Oruko idile Ede
1 Diẹ ninu awọn Ọkan English
2 Joe Sixpack English
3 Stu Denti Koodu
  1. <tabili>
  2. ...
  3. </tabili>

Apeere: Tabili Di

Fun awọn tabili ti o nilo data diẹ sii ni awọn aaye wiwọ, lo adun di di ti o ge padding ni idaji. O tun le ṣee lo ni apapo pẹlu awọn aala ati awọn ila abila, gẹgẹ bi awọn aza tabili aiyipada.

# Orukọ akọkọ Oruko idile Ede
1 Diẹ ninu awọn Ọkan English
2 Joe Sixpack English
3 Stu Denti Koodu

Apeere: Tabili aala

Jẹ ki awọn tabili rẹ wo bii sleeker kekere kan nipa yipo awọn igun wọn ati ṣafikun awọn aala ni gbogbo awọn ẹgbẹ.

# Orukọ akọkọ Oruko idile Ede
1 Diẹ ninu awọn Ọkan English
2 Joe Sixpack English
3 Stu Denti Koodu
  1. <tabili kilasi = "bordered-tabili" >
  2. ...
  3. </tabili>

Apeere: Abila-la

Gba igbadun diẹ pẹlu awọn tabili rẹ nipa fifi abila-striping kun-kan ṣafikun .zebra-stripedkilasi naa.

# Orukọ akọkọ Oruko idile Ede
1 Diẹ ninu awọn Ọkan English
2 Joe Sixpack English
3 Stu Denti Koodu
igba 4 ọwọn
igba 2 ọwọn igba 2 ọwọn

Akiyesi: Zebra-striping jẹ imudara ilọsiwaju ti ko si fun awọn aṣawakiri agbalagba bi IE8 ati ni isalẹ.

  1. <tabili kilasi = "Abila-striped" >
  2. ...
  3. </tabili>

Apeere: Abila-dibo w/ TableSorter.js

Gbigba apẹẹrẹ ti tẹlẹ, a mu iwulo ti awọn tabili wa pọ si nipa ipese iṣẹ ṣiṣe titọ nipasẹ jQuery ati ohun itanna Tablesorter . Tẹ akọsori ọwọn eyikeyi lati yi iru naa pada.

# Orukọ akọkọ Oruko idile Ede
2 Joe Sixpack English
3 Stu Denti Koodu
1 Tirẹ Ọkan English
  1. <script src = "js/jquery/jquery.tablesorter.min.js" </script>
  2. <akosile >
  3. $ ( iṣẹ () {
  4. $ ( "tabili# tooTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
  5. });
  6. </script>
  7. <tabili kilasi = "Abila-striped" >
  8. ...
  9. </tabili>

Awọn ara aiyipada

Gbogbo awọn fọọmu ni a fun ni awọn aza aiyipada lati ṣafihan wọn ni ọna kika ati iwọn. Awọn aṣa ti pese fun awọn igbewọle ọrọ, yan awọn atokọ, awọn agbegbe ọrọ, awọn bọtini redio ati awọn apoti ayẹwo, ati awọn bọtini.

Àlàyé fọọmu apẹẹrẹ
Diẹ ninu awọn iye nibi
Kekere snippet ti ọrọ iranlọwọ
Aseyori!
Roh ru!
Àlàyé fọọmu apẹẹrẹ
@
Eyi ni diẹ ninu ọrọ iranlọwọ
Àlàyé fọọmu apẹẹrẹ
Akiyesi: Awọn aami yi gbogbo awọn aṣayan fun awọn agbegbe tẹ ti o tobi pupọ ati fọọmu lilo diẹ sii.
si Gbogbo awọn akoko ni a fihan bi Aago Standard Pacific (GMT -08:00).
Àkọsílẹ ọrọ iranlọwọ lati ṣe apejuwe aaye loke ti o ba nilo.
 

Awọn fọọmu tolera

Ṣafikun .form-stackedsi HTML fọọmu rẹ ati pe iwọ yoo ni awọn akole lori oke awọn aaye wọn dipo si apa osi wọn. Eyi ṣiṣẹ nla ti awọn fọọmu rẹ ba kuru tabi o ni awọn ọwọn meji ti awọn igbewọle fun awọn fọọmu wuwo.

Àlàyé fọọmu apẹẹrẹ
Àlàyé fọọmu apẹẹrẹ
Kekere snippet ti ọrọ iranlọwọ
Akiyesi: Awọn aami yi gbogbo awọn aṣayan fun awọn agbegbe tẹ ti o tobi pupọ ati fọọmu lilo diẹ sii.
 

Awọn iwọn aaye fọọmu

Ṣe akanṣe eyikeyi fọọmu input, select, tabi textareaiwọn nipa fifi awọn kilasi diẹ kun si isamisi rẹ.

Bi ti v1.3.0, a ti ṣafikun awọn kilasi iwọn-orisun akoj fun awọn eroja fọọmu. Jọwọ lo awọn wọnyi lori awọn kilasi ti o wa .mini, .small, ati bẹbẹ lọ.

Awọn bọtini

Gẹgẹbi apejọ kan, awọn bọtini lo fun awọn iṣe lakoko ti a lo awọn ọna asopọ fun awọn nkan. Fun apẹẹrẹ, “Download” le jẹ bọtini kan ati pe “iṣẹ ṣiṣe aipẹ” le jẹ ọna asopọ kan.

Gbogbo awọn bọtini aiyipada si ara grẹy ina, ṣugbọn nọmba awọn iṣẹ ṣiṣe le ṣee lo fun awọn aza awọ oriṣiriṣi. Awọn kilasi wọnyi pẹlu kilasi buluu .primary, kilasi ina-bulu .info, kilasi alawọ ewe .success, ati kilasi pupa .dangerkan.

Awọn bọtini apẹẹrẹ

Awọn aza bọtini le ṣee lo si ohunkohun pẹlu ohun .btnelo. Ni deede iwọ yoo fẹ lati lo awọn wọnyi si <a>, <button>, ati yan <input>awọn eroja. Eyi ni bii o ṣe ri:

       

Awọn iwọn omiiran

Fancy tobi tabi kere bọtini? Wa ninu rẹ!

Ipo alaabo

Fun awọn bọtini ti ko ṣiṣẹ tabi ti wa ni alaabo nipasẹ app fun idi kan tabi omiiran, lo ipo alaabo. Iyẹn jẹ .disabledfun awọn ọna asopọ ati :disabledfun <button>awọn eroja.

Awọn ọna asopọ

Awọn bọtini

 

Awọn itaniji ipilẹ

.alert-message

Awọn ifiranšẹ laini kan fun iṣafihan ikuna, ikuna ti o ṣeeṣe, tabi aṣeyọri ti iṣe. Paapa wulo fun awọn fọọmu.

Gba JavaScript naa

×

Guacamole mimọ! Ṣayẹwo ararẹ ti o dara julọ, iwọ ko dara ju .

×

Oh imolara! Yi eyi ati iyẹn pada ki o tun gbiyanju lẹẹkansi .

×

Kú isé! O ti ka ifiranṣẹ itaniji yii ni aṣeyọri.

×

Efeti sile! Eyi jẹ itaniji ti o nilo akiyesi rẹ, ṣugbọn kii ṣe pataki pataki kan sibẹsibẹ.

Apeere koodu

  1. <div class = "Ìkìlọ̀ ìkìlọ̀-ìfiránṣẹ́" >
  2. <a kilasi = "sunmọ" href = "#" > × </a>
  3. <p><strong> Guacamole Mimọ! </strong> Ṣayẹwo ti o dara julọ fun ararẹ, iwọ ko dara ju. </p>
  4. </div>

Dina awọn ifiranṣẹ

.alert-message.block-message

Fun awọn ifiranṣẹ ti o nilo alaye diẹ, a ni awọn titaniji ara paragira. Iwọnyi jẹ pipe fun sisọ awọn ifiranṣẹ aṣiṣe gigun gun, ikilọ olumulo kan ti iṣe isunmọ, tabi ṣafihan alaye kan fun tcnu diẹ sii lori oju-iwe naa.

Gba JavaScript naa

×

Guacamole mimọ! Eyi jẹ ikilọ! Ṣayẹwo ararẹ ti o dara julọ, iwọ ko dara ju. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur ati be be lo.

×

Oh imolara! O ni aṣiṣe! Yi eyi ati iyẹn pada ki o tun gbiyanju lẹẹkansi .

  • Duis mollis est kii ṣe commodo luctus
  • Nisi erat porttitor ligula
  • Eget lacinia odio sem nec elit
×

Kú isé! O ti ka ifiranṣẹ itaniji yii ni aṣeyọri. Bi o ṣe le jẹ penatibus ati magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

×

Efeti sile! Eyi jẹ itaniji ti o nilo akiyesi rẹ, ṣugbọn kii ṣe pataki pataki kan sibẹsibẹ.

Apeere koodu

  1. <div class = "alert-message block-message ìkìlọ" >
  2. <a kilasi = "sunmọ" href = "#" > × </a>
  3. <p><strong> Guacamole Mimọ! Eyi jẹ ikilọ! </strong> Ṣayẹwo ti o dara julọ fun ararẹ, iwọ ko dara ju. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur ati be be lo. </p>
  4. <div class = "allert-actions" >
  5. <a class = "btn small" href = "#" > Ṣe igbese yii </a> <a class = "btn small" href = "#" > Tabi ṣe eyi </a>
  6. </div>
  7. </div>

Awọn awoṣe

Modals-awọn ibaraẹnisọrọ tabi awọn apoti ina-jẹ nla fun awọn iṣe ọrọ-ọrọ ni awọn ipo nibiti o ṣe pataki ki o wa ni itọju ipo isale.

Gba JavaScript naa

Awọn imọran irinṣẹ

Twipsies wulo pupọ fun iranlọwọ olumulo ti o ni idamu ati tọka si ọna ti o tọ.

Gba JavaScript naa

Lorem ipsum dolar sit amet illo error ipsum veritatis aut perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, tabi natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam fun enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptam vol

Popovers

Lo awọn agbejade lati pese alaye abẹlẹ si oju-iwe kan lai ni ipa lori ifilelẹ.

Gba JavaScript naa

Popover Title

Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum ati eros.

Bibẹrẹ

Ṣiṣẹpọ JavaScript pẹlu ile-ikawe Bootstrap jẹ irọrun pupọ. Ni isalẹ a lọ lori awọn ipilẹ ati pese fun ọ pẹlu awọn afikun oniyi lati jẹ ki o bẹrẹ!

Wo awọn iwe javascript »

Ohun ti o wa ninu

Mu diẹ ninu awọn paati akọkọ Bootstrap wa si igbesi aye pẹlu awọn afikun aṣa tuntun ti o ṣiṣẹ pẹlu jQuery ati Ender . A gba ọ niyanju lati faagun ati yipada wọn lati baamu awọn iwulo idagbasoke rẹ pato.

Faili Apejuwe
bootstrap-modal.js Ohun itanna Modal wa jẹ imudani tẹẹrẹ pupọ lori ohun itanna modal js ibile! A ṣe itọju pataki lati ṣafikun iṣẹ ṣiṣe igboro nikan ti a nilo ni twitter.
bootstrap-alert.js Ohun itanna gbigbọn jẹ kilasi kekere ti o ga julọ fun fifi iṣẹ ṣiṣe sunmọ si awọn titaniji.
bootstrap-dropdown.js Ohun itanna yii jẹ fun fifi ibaraenisepo silẹ silẹ si oke igi bootstrap tabi awọn lilọ kiri taabu.
bootstrap-scrollspy.js Ohun itanna ScrollSpy jẹ fun fifi nav imudojuiwọn adaṣe da lori ipo yi lọ si oke igi bootstrap.
bootstrap-bọtini.js Ohun itanna ScrollSpy jẹ fun fifi nav imudojuiwọn adaṣe da lori ipo yi lọ si oke igi bootstrap.
bootstrap-tabs.js Ohun itanna yii ṣe afikun iyara, taabu agbara ati iṣẹ ṣiṣe egbogi fun gigun kẹkẹ nipasẹ akoonu agbegbe.
bootstrap-twipsy.js Da lori ohun itanna jQuery.tipsy ti o dara julọ ti Jason Frame kọ; twipsy jẹ ẹya imudojuiwọn, eyiti ko gbẹkẹle awọn aworan, nlo css3 fun awọn ohun idanilaraya, ati awọn abuda data fun ibi ipamọ akọle agbegbe!
bootstrap-popover.js Ohun itanna agbejade n pese wiwo ti o rọrun fun fifi awọn agbejade kun si ohun elo rẹ. O fa afikun ohun itanna boostrap-twipsy.js , nitorinaa rii daju pe o gba faili yẹn daradara nigbati o ba pẹlu awọn agbejade ninu iṣẹ akanṣe rẹ!

Ṣe JavaScript pataki?

Bẹẹkọ! Bootstrap jẹ apẹrẹ akọkọ ati ṣaaju lati jẹ ile-ikawe CSS kan. JavaScript yii n pese ipele ibaraenisepo ipilẹ lori oke awọn aza ti o wa.

Sibẹsibẹ, fun awọn ti o nilo JavaScript, a ti pese awọn afikun loke lati ṣe iranlọwọ fun ọ ni oye bi o ṣe le ṣepọ Bootstrap pẹlu JavaScript ati lati fun ọ ni iyara, aṣayan iwuwo fẹẹrẹ fun iṣẹ ṣiṣe ipilẹ lẹsẹkẹsẹ.

Fun alaye diẹ sii ati lati rii diẹ ninu awọn demos laaye, jọwọ tọka si oju-iwe iwe ohun itanna wa .

Bootstrap was built from Preboot , ohun ìmọ-orisun pack ti mixins ati oniyipada lati ṣee lo ni apapo pẹlu Kere , a CSS preprocessor fun yiyara ati ki o rọrun idagbasoke ayelujara.

Ṣayẹwo bii a ṣe lo Preboot ni Bootstrap ati bii o ṣe le lo o yẹ ki o yan lati ṣiṣẹ Kere lori iṣẹ akanṣe atẹle rẹ.

Bawo ni lati lo

Lo aṣayan yii lati lo kikun Bootstrap ká Kere oniyipada, mixins, ati itẹ-ẹiyẹ ni CSS nipasẹ JavaScript ninu rẹ browser.

  1. <link rel = "stylesheet/less" href = "kere/bootstrap.less" media = "gbogbo" />
  2. <script src = "js/less-1.1.3.min.js" </script>

Ko rilara ojutu .js? Gbiyanju ohun elo Mac Kere tabi lo Node.js lati ṣajọ nigbati o ba ran koodu rẹ lọ.

Ohun ti o wa ninu

Eyi ni diẹ ninu awọn ifojusi ohun ti o wa ninu Bootstrap Twitter gẹgẹbi apakan ti Bootstrap. Ori si oju opo wẹẹbu Bootstrap tabi oju-iwe iṣẹ akanṣe Github lati ṣe igbasilẹ ati kọ ẹkọ diẹ sii.

Awọn oniyipada

Awọn oniyipada ni Kere jẹ pipe fun mimu ati mimu dojuiwọn orififo CSS rẹ ọfẹ. Nigbati o ba fẹ yi iye awọ pada tabi iye ti a lo nigbagbogbo, ṣe imudojuiwọn ni aaye kan ati pe o ti ṣeto.

  1. // Awọn ọna asopọ
  2. @linkColor : # 8b59c2;
  3. @linkColorHover : ṣokunkun ( @linkColor , 10 );
  4.  
  5. // Grẹy
  6. @dudu : #000;
  7. @grayDark : fẹẹrẹfẹ ( @black , 25 %);
  8. @grẹy : fẹẹrẹfẹ ( @ dudu , 50 %);
  9. @grayLight : fẹẹrẹfẹ ( @ dudu , 70 %);
  10. @grayLighter : fẹẹrẹfẹ ( @ dudu , 90 %);
  11. @funfun : #fff;
  12.  
  13. // Awọn awọ Asẹnti
  14. @bulu : #08b5fb;
  15. @ewe : #46a546;
  16. @pupa : #9d261d;
  17. @ofeefee : #ffc40d;
  18. @osan : #f89406;
  19. @pinu : #c3325f;
  20. @eleyi ti : #7a43b6;
  21.  
  22. // Ipilẹ akoj
  23. @basunt : ​​13px ;
  24. @ipese : 18px ;

Ọrọ sisọ

Kere tun pese ọna asọye miiran ni afikun si /* ... */sintasi deede CSS.

  1. // Eleyi jẹ a ọrọìwòye
  2. /* Eyi tun jẹ asọye */

Dapọ soke awọn wazoo

Mixins jẹ ipilẹ pẹlu tabi awọn apakan fun CSS, gbigba ọ laaye lati ṣajọpọ koodu bulọọki kan sinu ọkan. Wọn jẹ nla fun awọn ohun-ini iṣaju ataja bii box-shadow, awọn gradients aṣawakiri-kiri, awọn akopọ fonti, ati diẹ sii. Ni isalẹ ni apẹẹrẹ ti awọn mixins ti o wa pẹlu Bootstrap.

Awọn akopọ Font

  1. # font {
  2. . shorthand ( @ iwuwo : deede , @ iwọn : 14px , @lineHeight : 20px ) {
  3. font - iwọn : @ iwọn ;
  4. font - iwuwo : @ iwuwo ;
  5. ila - iga : @lineHeight ;
  6. }
  7. . sans - serif ( @ iwuwo : deede , @ iwọn : 14px , @lineHeight : 20px ) {
  8. font - idile : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
  9. font - iwọn : @ iwọn ;
  10. font - iwuwo : @ iwuwo ;
  11. ila - iga : @lineHeight ;
  12. }
  13. ...
  14. }

Gidiẹdi

  1. #giradient {
  2. ...
  3. . inaro ( @startColor : #555, @endColor: #333) {
  4. abẹlẹ - awọ : @endColor ;
  5. abẹlẹ - tun : tun - x ;
  6. abẹlẹ - aworan : - khtml - gradient ( laini , oke osi , isalẹ osi , lati ( @startColor ), si ( @endColor )); // Konqueror
  7. abẹlẹ - aworan : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+
  8. abẹlẹ - aworan : - ms - linear - gradient ( @startColor , @endColor ); // IE10
  9. abẹlẹ - aworan : - webkit - gradient ( laini , oke osi , isalẹ osi , awọ - Duro ( 0 % , @startColor ), awọ - Duro ( 100 % , @endColor )); // Safari 4+, Chrome 2+
  10. abẹlẹ - aworan : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
  11. abẹlẹ - aworan : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10
  12. abẹlẹ - aworan : laini - gradient ( @startColor , @endColor ); // Awọn bošewa
  13. }
  14. ...
  15. }

Awọn iṣẹ ṣiṣe

Gba fanimọra ki o ṣe awọn iṣiro diẹ lati ṣe ina rọ ati awọn alapọpọ ti o lagbara bii eyiti o wa ni isalẹ.

  1. // Griditude
  2. @gridColumns : 16 ;
  3. @gridColumnWidth : 40px ;
  4. @gridGutterWidth : 20px ;
  5. @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
  6.  
  7. // Ṣe diẹ ninu awọn ọwọn
  8. . awọn ọwọn ( @columnSpan : 1 ) {
  9. iwọn : ( @ gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
  10. }

Iṣakojọpọ Kere

Lẹhin ti o ṣe atunṣe awọn .lessfaili ni / lib/, iwọ yoo nilo lati tun ṣe atunṣe wọn lati le ṣe atunṣe bootstrap-*.*.*.css ati bootstrap-*.*.*.min.css. Ti o ba n fi ibeere fa silẹ si GitHub, o gbọdọ ṣajọpọ nigbagbogbo.

Awọn ọna lati ṣajọ

Ọna Awọn igbesẹ
Node pẹlu makefile

Fi olupilẹṣẹ laini aṣẹ ti o kere si pẹlu npm nipa ṣiṣe pipaṣẹ atẹle:

$ npm fi lessc sori ẹrọ

Ni kete ti fi sori ẹrọ kan ṣiṣe makelati gbongbo ti itọsọna bootstrap rẹ ati pe o ti ṣeto gbogbo rẹ.

Ni afikun, ti o ba ni oluṣọ ti fi sori ẹrọ, o le ṣiṣẹ make watchlati ni atunṣe bootstrap laifọwọyi ni gbogbo igba ti o ṣatunkọ faili kan ninu lib bootstrap (eyi ko nilo, ọna irọrun nikan).

Javascript

Ṣe igbasilẹ Less.js tuntun ki o pẹlu ọna si (ati Bootstrap) ninu faili head.

  1. <link rel = "stylesheet/less" href = "/path/to/bootstrap.less" >
  2. <script src = "/path/to/less.js" </script>

Lati tun awọn faili ti ko kere si, kan fi wọn pamọ ki o tun gbee si oju-iwe rẹ. Less.js ṣe akopọ wọn ati tọju wọn ni ibi ipamọ agbegbe.

Laini aṣẹ

Ti o ba ti ni ohun elo laini aṣẹ ti o kere si ti fi sori ẹrọ, nìkan ṣiṣẹ aṣẹ wọnyi:

$ lessc ./lib/bootstrap.less> bootstrap.css

Rii daju lati ṣafikun --compressninu aṣẹ yẹn ti o ba n gbiyanju lati fipamọ diẹ ninu awọn baiti!

Ohun elo Mac ti o kere ju

Ohun elo Mac laigba aṣẹ n wo awọn ilana ti .less awọn faili ati ṣe akopọ koodu si awọn faili agbegbe lẹhin gbogbo fifipamọ faili .less ti wiwo.

Ti o ba fẹ, o le yi awọn ayanfẹ pada ninu ohun elo naa fun idinku aifọwọyi ati itọsọna wo ni awọn faili ti o ṣajọ pari ni.