maluna
hema
akau
malalo

Bootstrap, mai Twitter

ʻO Bootstrap kahi hāmeʻa mai Twitter i hoʻolālā ʻia e hoʻomaka i ka hoʻomohala ʻana i nā webapps a me nā pūnaewele.
Loaʻa iā ia ka CSS kumu a me HTML no ka typography, forms, buttons, tables, grids, navigation, and more.

Nerd alert: Ua kūkulu ʻia ʻo Bootstrap me Less a ua hoʻolālā ʻia e hana ma waho o ka ʻīpuka me ka noʻonoʻo ʻana i nā polokalamu kele hou.

Hotlink i ka CSS

No ka hoʻomaka wikiwiki a me ka maʻalahi, e kope wale i kēia snippet i kāu ʻaoʻao pūnaewele.

E hoʻohana me ka liʻiliʻi

He mea hoʻohana i ka Less? ʻAʻohe pilikia, hoʻopili wale i ka repo a hoʻohui i kēia mau laina:

Fork ma GitHub

Hoʻoiho, ʻoki, huki, faila i nā pilikia, a me nā mea hou aʻe me ka mana Bootstrap repo ma Github.

Bootstrap ma GitHub »

I kēia manawa v1.3.0

Moolelo

Ua hoʻohana mua nā ʻenekinia ma Twitter i nā hale waihona puke a lākou i kamaʻāina ai e hoʻokō i nā koi mua. Ua hoʻomaka ʻo Bootstrap i pane i nā pilikia i hōʻike ʻia. Me ke kōkua o nā poʻe weliweli he nui, ua ulu nui ʻo Bootstrap.

Heluhelu hou aku ma dev.twitter.com ›

Kākoʻo polokalamu kele pūnaewele

Hoʻāʻo ʻia ʻo Bootstrap a kākoʻo ʻia i nā polokalamu kele hou e like me Chrome, Safari, Internet Explorer, a me Firefox.

Hoʻāʻo ʻia a kākoʻo ʻia ma Chrome, Safari, Internet Explorer, a me Firefox
  • Safari Hou loa
  • Google Chrome hou loa
  • Firefox 4+
  • Internet Explorer 7+
  • ʻOpera 11

He aha ka mea i komo

Hoʻopiha piha ʻia ʻo Bootstrap me CSS i hōʻuluʻulu ʻia, uncompiled, a me nā kumu hoʻohālike.

  • Mea hou ma 1.3 Javascript plugins
  • Nā waihona kumu .less a pau
  • Hoʻopili piha ʻia a hoʻemi ʻia ka CSS
  • Hoʻopiha i nā palapala alakaʻi style
  • ʻEkolu laʻana ʻaoʻao me nā hoʻolālā like ʻole

Nā laʻana hoʻomaka wikiwiki

Makemake ʻoe i nā maʻamau wikiwiki? E nānā i kēia mau hiʻohiʻona kumu a mākou i hui pū ai:

  • Hoʻolālā maʻalahi ʻekolu kolamu me ka pūʻulu koa
  • Hoʻolālā wai me ka ʻaoʻao ʻaoʻao paʻa
  • ʻO ka pahu kau maʻalahi no nā polokalamu

Mānoa paʻamau

ʻO ka ʻōnaehana mākia paʻamau i hāʻawi ʻia ma ke ʻano he ʻāpana o Bootstrap he 940px ākea 16-kolani mākia. He mea ʻono ia o ka ʻōnaehana 960 grid kaulana, akā me ka ʻole o ka palena ʻē aʻe ma ka ʻaoʻao hema a me ka ʻaoʻao ʻākau.

Hōʻailona mānoanoa laʻana

E like me ka mea i hōʻike ʻia ma ʻaneʻi, hiki ke hana ʻia kahi hoʻolālā kumu me ʻelua "nā kolamu," ʻo kēlā me kēia me kahi helu o nā kolamu kumu 16 a mākou i wehewehe ai ma ke ʻano he ʻāpana o kā mākou pūnaewele puni honua. E ʻike i nā laʻana ma lalo no nā ʻano like ʻole.

  1. <div class = "lālani" >
  2. <div class = "span6" >
  3. ...
  4. </div>
  5. <div class = "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

Hoʻopio i nā kolamu

4
8 hoopau 4
1/3 offset 2/3s
4 hoʻopau 4
4 hoʻopau 4
5 hoʻopau 3
5 hoʻopau 3
10 hoʻopau 6

Nā kolamu nesting

E hoʻopaʻa i kāu ʻike inā pono ʻoe ma ka hana ʻana i .rowkahi kolamu i loaʻa.

Laʻana o nā kolamu pūnana

Papa 1 o ke kolamu
Papa 2
Papa 2
  1. <div class = "lālani" >
  2. <div class = "span12" >
  3. Papa 1 o ke kolamu
  4. <div class = "lālani" >
  5. <div class = "span6" >
  6. Papa 2
  7. </div>
  8. <div class = "span6" >
  9. Papa 2
  10. </div>
  11. </div>
  12. </div>
  13. </div>

E ʻōwili i kāu mānoanoa ponoʻī

Hoʻokomo ʻia i loko o Bootstrap he mau ʻāpana liʻiliʻi no ka hoʻoponopono ʻana i ka ʻōnaehana 940px paʻamau. Me kahi hana maʻamau, hiki iā ʻoe ke hoʻololi i ka nui o nā kolamu, ko lākou mau auwai, a me ka pahu a lākou e noho ai.

I loko o ka pā

ʻO nā ʻano like ʻole e pono ai e hoʻololi i ka ʻōnaehana grid i kēia manawa aia nā mea āpau ma preboot.less.

Hoʻololi Waiwai paʻamau wehewehe
@gridColumns 16 Ka helu o nā kolamu i loko o ka mānoanoa
@gridColumnWidth 40px ʻO ka laulā o kēlā me kēia kolamu i loko o ka pā
@gridGutterWidth 20px ʻO ka hakahaka maikaʻi ʻole ma waena o kēlā me kēia kolamu
@siteWidth Huina helu o na kolamu a me na auwai a pau Hoʻohana mākou i kekahi pāʻani maʻamau e helu i ka helu o nā kolamu a me nā auwai a hoʻonohonoho i ka laulā o ka .fixed-container()mixin.

I kēia manawa e hoʻopilikino

ʻO ka hoʻololi ʻana i ka mānoanoa, ʻo ia ka hoʻololi ʻana i nā ʻano ʻekolu @grid-*a me ka hoʻohui hou ʻana i nā faila liʻiliʻi.

Ua lako ʻia ʻo Bootstrap no ka mālama ʻana i kahi ʻōnaehana grid me nā kolamu 24; ʻO ka paʻamau he 16 wale nō. Penei ke ʻano o kāu mau ʻano hoʻololi i hoʻopilikino ʻia i kahi mākia 24-kolume.

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

Ke hoʻopili hou ʻia, e hoʻonohonoho ʻia ʻoe!

Hoʻolālā paʻa

ʻO ka paʻamau a maʻalahi 940px-ākea, hoʻonohonoho kikowaena no kahi pūnaewele a i ʻole ʻaoʻao i hāʻawi ʻia e kahi <div.container>.

  1. <kino>
  2. <div class = "container" >
  3. ...
  4. </div>
  5. </kino>

Hoʻolālā wai

ʻO kahi ʻaoʻao ʻaoʻao wai maʻalahi me ka min- a me ka nui-ākea a me ka ʻaoʻao ʻaoʻao hema. Nui no nā polokalamu a me nā palapala.

  1. <kino>
  2. <div class = "container-fluid" >
  3. <div class = "sidebar" >
  4. ...
  5. </div>
  6. <div class = "maʻiʻo" >
  7. ...
  8. </div>
  9. </div>
  10. </kino>

Poʻomanaʻo & kope

ʻO kahi hierarchy typographic maʻamau no ka hoʻonohonoho ʻana i kāu mau ʻaoʻao pūnaewele.

Hoʻokumu ʻia ka mānoanoa typographic holoʻokoʻa i ʻelua mau ʻano liʻiliʻi liʻiliʻi i kā mākou faila preboot.less: @basefonta@baseline . ʻO ka mua, ʻo ia ka nui font-nui i hoʻohana ʻia a puni a ʻo ka lua ke kiʻekiʻe laina kumu.

Hoʻohana mākou i kēlā mau mea hoʻololi, a me kekahi makemakika, e hana i nā palena, nā pale, a me nā kiʻekiʻe laina o kā mākou ʻano āpau a me nā mea hou aku.

h1. Poʻomanaʻo 1

h2. Poʻomanaʻo 2

h3. Poʻomanaʻo 3

h4. Poʻomanaʻo 4

h5. Poʻomanaʻo 5
h6. Poʻomanaʻo 6

Laʻana paukū

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 nibh ultricies vehicula ut id elit.

Ke poʻo poʻomanaʻo He poʻomanaʻo poʻomanaʻo…

Kekahi. mau mea

Ke hoʻohana nei i ka manaʻo nui, nā ʻōlelo a me nā pōkole

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

I ka wā e hoʻohana ai

Pono e hoʻohana ʻia nā huaʻōlelo koʻikoʻi ( <strong>a <em>) e hōʻike i ke koʻikoʻi a i ʻole ka manaʻo nui o kahi huaʻōlelo a ʻōlelo paha e pili ana i kona kope a puni. E hoʻohana <strong>no ka mea nui a <em>no ka pilikia koʻikoʻi.

Hoʻoikaika i ka paukū

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.

' Ōlelo Aʻo: Maikaʻi nō ka hoʻohana ʻana <b>a me <i>nā hōʻailona ma HTML5 a ʻaʻole pono lākou e kapa ʻia me ka wiwo ʻole a me ka italic, i kēlā me kēia (ʻoiai inā he ʻano semantic hou, e hoʻohana iā ia). <b>ʻO ka manaʻo e hōʻike i nā huaʻōlelo a i ʻole nā ​​​​huaʻōlelo me ka ʻole o ka lawe ʻana i ka mea nui, ʻoiai <i>ka hapa nui no ka leo, nā ʻōlelo loea, etc.

Heluhelu

Hoʻohana ʻia ka <address>mea no ka ʻike pili no kona kupuna kokoke, a i ʻole ke kino holoʻokoʻa o ka hana. Eia nā laʻana ʻelua o ka hiki ke hoʻohana ʻia:

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

Hoʻomaopopo: Pono e hoʻopau ʻia kēlā me kēia laina <address>me ka haki laina ( <br />) a i ʻole e ʻōwili ʻia i kahi hōʻailona pae poloka (e laʻa, <p>) no ka hoʻonohonoho pono ʻana i ka ʻike.

Nā pōkole

No nā pōkole a me nā acronyms, e hoʻohana i ka <abbr>hōʻailona ( <acronym>ua hoʻopau ʻia ma HTML5 ). E kau i ka pepa pōkole i loko o ka hōʻailona a hoʻonoho i poʻo inoa no ka inoa piha.

Blockquotes

<blockquote> <p> <small>

Pehea e ʻōlelo ai

No ka hoʻokomo ʻana i kahi blockquote, ʻōwili a <blockquote>puni . E hoʻohana i ka mea e haʻi i kāu kumu a e loaʻa iā ʻoe kahi em dash ma mua o ia.<p><small><small>&mdash;

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

Kauka 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. <liʻiliʻi> Kauka Julius Hibbert </liʻiliʻi>
  4. </blockquote>

Nā papa inoa

Kau ʻole ʻia<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem and massa
  • Facilisis in 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 noho amet erat nunc
  • Eget porttitor lorem

Kaulana ʻole<ul.unstyled>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem and massa
  • Facilisis in 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 noho amet erat nunc
  • Eget porttitor lorem

Kauoha ʻia<ol>

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

wehewehedl

Nā papa inoa wehewehe
Kūpono ka papa inoa wehewehe no ka wehewehe ʻana i nā huaʻōlelo.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida and eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Code

<code> <pre>

Pimp i kāu code i ke ʻano me ʻelua mau hōʻailona maʻalahi. No ka ʻoi aku ka maikaʻi ma o javascript, e hoʻokuʻu i ka waihona prettify code a Google a ua hoʻonohonoho ʻoe.

Hōʻike code

Hiki ke hōʻike ʻia me ke kaila, nā poloka a i ʻole nā ​​snippets inline ma ke kāʻei wale ʻana i ka hōʻailona kūpono. No nā poloka o ke code e kau ana i nā laina he nui, e hoʻohana i ka <pre>mea. No ke code inline, e hoʻohana i ka <code>mea.

ʻElemu Ka hopena
<code> Ma kahi laina kikokikona e like me kēia, e like ke ʻano o kāu code i kāwili ʻia me kēia >html<mea.
<pre>
<div>
  <h1>Poʻomanaʻo</h1>
  <p>Kekahi mea ma aneʻi...</p>
</div>

'Ōlelo Aʻo: E mālama pono i ke code i loko o prenā hōʻailona ma kahi kokoke i ka hema; e hāʻawi i nā papa āpau.

<pre class="prettyprint">

Me ka hoʻohana ʻana i ka waihona google-code-prettify, loaʻa iā ʻoe nā poloka o ke code i kahi ʻano hiʻohiʻona ʻokoʻa a me ka hōʻailona syntax maʻalahi.

<div> <h1> Poʻomanaʻo </h1> <p> Kekahi mea ma aneʻi... </p> </div>
  
  

Hoʻoiho iā google-code-prettify a nānā i ka readme no ka hoʻohana ʻana.

Lepili inline

<span class="label">

Kāhea i ka manaʻo a i ʻole ka hae i kekahi huaʻōlelo ma kāu kikokikona kino.

E lepili i kekahi mea

Pono ʻoe i kekahi o kēlā mau mea hou! a i ʻole nā ​​hae koʻikoʻi i ke kākau ʻana i ke code? ʻAe, aia iā ʻoe i kēia manawa. Eia ka mea i hoʻokomo ʻia e ka paʻamau:

Lepili Ka hopena
<span class="label">Default</span> Default
<span class="label success">New</span> Hou
<span class="label warning">Warning</span> ʻŌlelo aʻo
<span class="label important">Important</span> Mea nui
<span class="label notice">Notice</span> Hoolaha

Māhele Media

Hōʻike i nā liʻiliʻi liʻiliʻi o nā ʻano like ʻole ma nā ʻaoʻao me kahi kapuaʻi HTML haʻahaʻa a me nā ʻano liʻiliʻi.

Laʻana kiʻi liʻiliʻi

Hiki ke .media-gridʻano nui nā kiʻi liʻiliʻi, akā hana maikaʻi loa lākou ke paʻi pololei ʻia i ka ʻōnaehana mākia Bootstrap i kūkulu ʻia. Hoʻohui ʻia nā laula kiʻi e like me 90, 210, a me 330 me kekahi mau pikika o ka padding e like me ka nui .span2, .span4, a me .span6nā kolamu.

Nui

Kauwaena

Liʻiliʻi

Hoʻopili iā lākou

He mea maʻalahi ka hoʻohana ʻana i nā grids media ma ka ʻaoʻao markup. Hoʻokumu wale ʻia kā lākou mau ana i ka nui o nā kiʻi i hoʻokomo ʻia.

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

Nā papa kūkulu hale

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

Nui nā papaʻaina-no nā mea he nui. ʻO nā papa nui, akā naʻe, pono ke aloha markup e pono, scalable, a hiki ke heluhelu ʻia (ma ka pae code). Eia kekahi mau ʻōlelo kōkua.

Hoʻopili mau i kāu mau poʻomanaʻo kolamu i loko o kahi <thead>hierarchy he <thead>> <tr>> <th>.

E like me nā poʻomanaʻo kolamu, pono e hoʻopaʻa ʻia nā ʻike a pau o kāu papaʻaina i kahi <tbody>a no laila ʻo kāu hierarchy <tbody>> <tr>> <td>.

Laʻana: Nā ʻano papa paʻamau

Hoʻopili ʻia nā papa ʻaina āpau me nā palena koʻikoʻi wale nō e hōʻoia i ka heluhelu ʻana a mālama ʻia ke ʻano. ʻAʻole pono e hoʻohui i nā papa a i ʻole nā ​​hiʻohiʻona.

# Inoa mua Inoa hope ʻŌlelo
1 ʻO kekahi ʻekahi Pelekania
2 Joe ʻEono ʻeke Pelekania
3 ʻO Stu Dent Code
  1. <papa>
  2. ...
  3. </papa>

Laʻana: Zebra-striped

E ʻoluʻolu iki i kāu mau papa ma ka hoʻohui ʻana i ka zebra-striping—e hoʻohui wale i ka .zebra-stripedpapa.

# Inoa mua Inoa hope ʻŌlelo
1 ʻO kekahi ʻekahi Pelekania
2 Joe ʻEono ʻeke Pelekania
3 ʻO Stu Dent Code

'Ōlelo Aʻo: Zebra-striping he holomua holomua ʻaʻole i loaʻa no nā polokalamu kele kahiko e like me IE8 a ma lalo.

  1. <papa papa = "zebra-striped" >
  2. ...
  3. </papa>

Laʻana: Zebra-striped w/ TableSorter.js

Ke lawe nei i ka laʻana mua, hoʻomaikaʻi mākou i ka pono o kā mākou papa ʻaina ma o ka hāʻawi ʻana i nā hana hoʻokaʻawale ma o jQuery a me ka plugin Tablesorter . Kaomi i ke poʻo o ke kolamu e hoʻololi i ke ʻano.

# Inoa mua Inoa hope ʻŌlelo
2 Joe ʻEono ʻeke Pelekania
3 ʻO Stu Dent Code
1 ʻO kāu ʻekahi Pelekania
  1. <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
  2. <script >
  3. $ ( hana () {
  4. $ ( "papa#sortTableExample" ). papa kuhikuhi papa ({ sortList : [[ 1 , 0 ]] });
  5. });
  6. </script>
  7. <papa papa = "zebra-striped" >
  8. ...
  9. </papa>

Nā ʻano paʻamau

Hāʻawi ʻia nā ʻano āpau i nā kaila paʻamau e hōʻike iā lākou ma ke ʻano hiki ke heluhelu a hiki ke hoʻonui ʻia. Hāʻawi ʻia nā ʻano no nā hoʻokomo kikokikona, koho i nā papa inoa, nā wahi kikokikona, nā pihi lekiō a me nā pahu pahu, a me nā pihi.

Kaao hoʻohālike
Kekahi waiwai maanei
Snippet liʻiliʻi o ka kikokikona kōkua
Kaao hoʻohālike
@
Kaao hoʻohālike
Hoʻomaopopo: Hoʻopuni nā lepili i nā koho āpau no nā wahi kaomi nui aʻe a me kahi ʻano hoʻohana hou aku.
i Hōʻike ʻia nā manawa āpau e like me ka Pacific Standard Time (GMT -08:00).
Poloka o ka kikokikona kōkua e wehewehe i ke kahua ma luna inā pono.
 

Nā palapala i hoʻopaʻa ʻia

Hoʻohui .form-stackedi ka HTML o kāu palapala a loaʻa iā ʻoe nā lepili ma luna o kā lākou mau kahua ma mua o ko lākou hema. Hana maikaʻi kēia inā pōkole kāu mau palapala a i ʻole ʻelua kolamu o nā mea hoʻokomo no nā ʻano kaumaha.

Kaao hoʻohālike
Kaao hoʻohālike
Snippet liʻiliʻi o ka kikokikona kōkua
Hoʻomaopopo: Hoʻopuni nā lepili i nā koho āpau no nā wahi kaomi nui aʻe a me kahi ʻano hoʻohana hou aku.
 

Nui kahua puka

Hoʻopilikino i kekahi ʻano input, select, a i ʻoletextarea laula paha ma ka hoʻohui ʻana i kekahi mau papa i kāu markup.

E like me v1.3.0, ua hoʻohui mākou i nā papa hoʻonui ʻana ma muli o ka grid-based no nā mea hana. E ʻoluʻolu e hoʻohana i kēia ma luna o nā papa .mini, .small, etc.

Nā pihi

Ma ke ʻano he ʻaha kūkā, hoʻohana ʻia nā pihi no nā hana ʻoiai e hoʻohana ʻia nā loulou no nā mea. No ka laʻana, ʻo "Download" paha he pihi a ʻo "hana hou" hiki ke lilo i loulou.

ʻO nā pihi āpau i ke ʻano hina hina, akā hiki ke hoʻohana ʻia kekahi mau papa hana no nā ʻano kala like ʻole. ʻO kēia mau papa he .primarypapa uliuli , he papa ʻulaʻula .info, he ʻōmaʻomaʻo .success, a he ʻulaʻula .danger.

Nā pihi laʻana

Hiki ke hoʻohana ʻia nā ʻano pihi i kekahi mea me ka mea i hoʻopili ʻia .btn. ʻO ka maʻamau, makemake ʻoe e hoʻopili i kēia mau mea wale nō i <a>, <button>, a koho i <input>nā mea. Penei kona ano:

       

Nui ʻokoʻa

Makemake i nā pihi nui a liʻiliʻi paha? Loaʻa iā ia!

Mokuʻāina kīnā

No nā pihi ʻaʻole hoʻoikaika a paʻa ʻole paha e ka app no ​​kekahi kumu a i ʻole, e hoʻohana i ka mokuʻāina kīnā. ʻO ia .disabledno nā loulou a me :disabled<button>mea.

Nā loulou

Nā pihi

 

Nā mākau kumu

.alert-message

Nā leka laina hoʻokahi no ka hōʻike ʻana i ka hāʻule, hiki ʻole, a i ʻole ka kūleʻa o kahi hana. Pono pono no nā puka.

E kiʻi i ka javascript »

×

Guacamole hemolele! ʻO ka nānā maikaʻi iā ʻoe iho, ʻaʻole maikaʻi ʻoe.

×

ʻŌ! E hoʻololi i kēia a me kēlā a hoʻāʻo hou.

×

Hana maikaʻi! Ua heluhelu pono ʻoe i kēia memo makaʻala.

×

Nā poʻo i luna! He makaʻala kēia e pono ai kou nānā ʻana, akā ʻaʻole ia he mea nui i kēia manawa.

Laʻana code

  1. <div class = "ʻōlelo aʻoaʻo aʻoaʻo" >
  2. <a papa = "kokoke" href = "#" > × </a>
  3. <p><strong> Guacamole hemolele! </strong> ʻO ka nānā maikaʻi loa iā ʻoe iho, ʻaʻole ʻoe maikaʻi loa. </p>
  4. </div>

Kāohi i nā memo

.alert-message.block-message

No nā memo e koi ana i kahi wehewehe wehewehe, loaʻa iā mākou nā mākaʻikaʻi kaila paukū. He kūpono kēia no ka hoʻoulu ʻana i nā memo hala ʻoi aku ka lōʻihi, e ʻōlelo ana i ka mea hoʻohana i kahi hana e kali nei, a i ʻole ka hōʻike ʻana i ka ʻike no ka manaʻo nui i ka ʻaoʻao.

E kiʻi i ka javascript »

×

Guacamole hemolele! He hōʻailona kēia! ʻO ka nānā maikaʻi iā ʻoe iho, ʻaʻole maikaʻi ʻoe. Nulla vitae elit libero, a pharetra augue. ʻO ka hoʻomaka ʻana o ka cursus magna, vel scelerisque nisl consectetur et.

×

ʻŌ! Loaʻa iā ʻoe kahi hewa! E hoʻololi i kēia a me kēlā a hoʻāʻo hou.

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

Hana maikaʻi! Ua heluhelu pono ʻoe i kēia memo makaʻala. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

×

Nā poʻo i luna! He makaʻala kēia e pono ai kou nānā ʻana, akā ʻaʻole ia he mea nui i kēia manawa.

Laʻana code

  1. <div class = "ʻōlelo aʻoaʻo block-message alert" >
  2. <a papa = "kokoke" href = "#" > × </a>
  3. <p><strong> Guacamole hemolele! He hōʻailona kēia! </strong> ʻO ka nānā maikaʻi loa iā ʻoe iho, ʻaʻole ʻoe maikaʻi loa. Nulla vitae elit libero, a pharetra augue. ʻO ka hoʻomaka ʻana o ka cursus magna, vel scelerisque nisl consectetur et. </p>
  4. <div class = "nā hana makaʻala" >
  5. <a class = "btn small" href = "#" > E hana i kēia hana </a> <a class = "btn small" href = "#" > A i ʻole e hana i kēia </a>
  6. </div>
  7. </div>

Modal

Maikaʻi nā modals—dialogs a i ʻole pahu kukui—no nā hana ʻokoʻa i nā kūlana he mea nui e mālama ʻia ka pōʻaiapili hope.

E kiʻi i ka javascript »

Mea kōkua

He mea maikaʻi loa nā Twipsies no ke kōkua ʻana i kahi mea hoʻohana huikau a kuhikuhi iā lākou i ke ala pololei.

E kiʻi i ka javascript »

Lorem ipsum dollar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut 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 voluptas nemo volupremtis quasi fugit fugit .

Popovers

E hoʻohana i nā popovers no ka hāʻawi ʻana i ka ʻike subtexttual i kahi ʻaoʻao me ka ʻole o ka pili ʻana i ka hoʻolālā.

E kiʻi i ka javascript »

Popover Poʻo inoa

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

E hoʻomaka ana

Maʻalahi loa ka hoʻohui ʻana i ka javascript me ka waihona Bootstrap. Ma lalo mākou e hele ai i nā kumu a hāʻawi iā ʻoe i kekahi mau plugins weliweli e hoʻomaka ai ʻoe!

Nānā i nā palapala javascript »

He aha ka mea i komo

E lawe mai i kekahi o nā mea nui o Bootstrap i ke ola me nā plugins maʻamau hou e hana pū me jQuery a me Ender . Paipai mākou iā ʻoe e hoʻonui a hoʻololi iā lākou i kūpono i kāu mau pono hoʻomohala kikoʻī.

waihona wehewehe
bootstrap-modal.js ʻO kā mākou Modal plugin he mea ʻoi loa ka lawe ʻana i ka plugin modal js kuʻuna ! Ua mālama nui mākou i ka hoʻokomo wale ʻana i nā mea hana ʻole a mākou e koi ai ma twitter.
bootstrap-alerts.js ʻO ka plugin alert kahi papa liʻiliʻi loa no ka hoʻohui ʻana i nā hana kokoke i nā makaʻala.
bootstrap-dropdown.js ʻO kēia plugin no ka hoʻohui ʻana i ka launa pū ʻana i ka bootstrap topbar a i ʻole nā ​​​​hoʻokele tabbed.
bootstrap-scrollspy.js ʻO ka plugin ScrollSpy no ka hoʻohui ʻana i kahi nav hōʻano hou e pili ana i ke kūlana ʻōwili i ka bootstrap topbar.
bootstrap-tabs.js Hoʻohui kēia plugin i ka wikiwiki, dynamic tab a me ka hana pila no ka holo paikikala ma o ka ʻike kūloko.
bootstrap-twipsy.js Ma muli o ka plugin jQuery.tipsy maikaʻi loa i kākau ʻia e Jason Frame; ʻO twipsy kahi mana hou, ʻaʻole i hilinaʻi i nā kiʻi, hoʻohana i ka css3 no nā animation, a me nā ʻikepili-ʻano no ka mālama ʻana i nā poʻo inoa kūloko!
bootstrap-popover.js Hāʻawi ka popover plugin i kahi maʻalahi no ka hoʻohui ʻana i nā popovers i kāu noi. Hoʻonui ia i ka plugin boostrap-twipsy.js , no laila e ʻoluʻolu e hopu i kēlā faila i ka wā e hoʻokomo ai i nā popovers i kāu papahana!

Pono anei ka javascript?

ʻAʻole! Ua hoʻolālā mua ʻia ʻo Bootstrap e lilo i hale waihona CSS. Hāʻawi kēia javascript i kahi papa hana maʻamau ma luna o nā ʻano i hoʻokomo ʻia.

Eia nō naʻe, no ka poʻe makemake i ka javascript, ua hāʻawi mākou i nā plugins ma luna e kōkua iā ʻoe e hoʻomaopopo i ke ʻano o ka hoʻohui ʻana iā Bootstrap me javascript a hāʻawi iā ʻoe i kahi koho wikiwiki a māmā no ka hana kumu.

No ka ʻike hou aku a e ʻike i kekahi mau demos ola, e ʻoluʻolu e nānā i kā mākou palapala palapala plugin .

Ua kūkulu ʻia ʻo Bootstrap me Preboot , he pūʻulu open-source o mixins a me nā ʻano like ʻole e hoʻohana pū ʻia me Less , kahi preprocessor CSS no ka hoʻomohala pūnaewele wikiwiki a maʻalahi.

E nānā pehea mākou i hoʻohana ai iā Preboot ma Bootstrap a pehea ʻoe e hoʻohana ai inā koho ʻoe e holo i ka liʻiliʻi ma kāu papahana aʻe.

Pehea e hoʻohana ai

E hoʻohana i kēia koho no ka hoʻohana piha ʻana i nā ʻano liʻiliʻi liʻiliʻi o Bootstrap, mixins, a me ka nesting ma CSS ma o javascript i kāu polokalamu kele pūnaewele.

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

ʻAʻole manaʻo i ka hoʻonā .js? E ho'āʻo i ka polokalamu Less Mac a i ʻole e hoʻohana iā Node.js e hōʻuluʻulu i ka wā e kau ai ʻoe i kāu code.

He aha ka mea i komo

Eia kekahi o nā mea koʻikoʻi o ka mea i hoʻokomo ʻia ma Twitter Bootstrap ma ke ʻano o Bootstrap. E poʻo i ka pūnaewele Bootstrap a i ʻole ʻaoʻao papahana Github e hoʻoiho a aʻo hou.

Nā mea hoʻololi

He kūpono nā ʻano like ʻole i ka liʻiliʻi no ka mālama ʻana a me ka hoʻonui ʻana i kāu CSS maʻi poʻo. Ke makemake ʻoe e hoʻololi i ka waiwai kala a i ʻole ka waiwai i hoʻohana pinepine ʻia, e hoʻohou iā ia ma kahi wahi a ua hoʻonohonoho ʻoe.

  1. // Nā loulou
  2. @linkColor : #8b59c2;
  3. @linkColorHover : darken ( @linkColor , 10 );
  4.  
  5. // Nahinahina
  6. @ʻeleʻele : #000;
  7. @grayDark : māmā ( @ʻeleʻele , 25 %);
  8. @hina : māmā ( @ʻeleʻele , 50 %);
  9. @GrayLight : māmā ( @ʻeleʻele , 70 %);
  10. @grayLighter : māmā ( @ʻeleʻele , 90 %);
  11. @keokeo : #fff;
  12.  
  13. // Nā waihoʻoluʻu leo
  14. @uliuli : #08b5fb;
  15. @' ōmaʻomaʻo : #46a546;
  16. @ulaula : #9d261d;
  17. @melemele : #ffc40d;
  18. @alani : #f89406;
  19. @ʻulaʻula : #c3325f;
  20. @ʻulaʻula : #7a43b6;
  21.  
  22. // Mānoa kumu
  23. @basefont : 13px ;
  24. @kumu : 18px ;

ʻŌlelo ʻōlelo

Hāʻawi ʻo Less i kahi ʻano manaʻo ʻē aʻe me ka /* ... */syntax maʻamau o CSS.

  1. // He ʻōlelo kēia
  2. /* He ʻōlelo hoʻi kēia */

Hoʻohui i ka wazoo

Hoʻokomo maoli ʻia nā Mixins a i ʻole ʻāpana no CSS, e ʻae iā ʻoe e hoʻohui i kahi poloka o ke code i hoʻokahi. He mea maikaʻi ia no nā mea kūʻai aku i prefixed e like me box-shadow, cross-browser gradients, font stacks, a me nā mea hou aku. Aia ma lalo kahi laʻana o nā mixins i hoʻokomo ʻia me Bootstrap.

Nā waihona kikokikona

  1. #kino {
  2. . pōkole ( @kaumaha : maʻamau , @nui : 14px , @lineHeight : 20px ) {
  3. font - nui : @ka nui ;
  4. font - kaumaha : @kaumaha ;
  5. laina - kiekie : @lineHeight ;
  6. }
  7. . sans - serif ( @kaumaha : maʻamau , @nui : 14px , @lineHeight : 20px ) {
  8. font - family : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;
  9. font - nui : @ka nui ;
  10. font - kaumaha : @kaumaha ;
  11. laina - kiekie : @lineHeight ;
  12. }
  13. ...
  14. }

Nā laulima

  1. #gradient {
  2. ...
  3. . kū pololei ( @startColor : #555, @endColor: #333) {
  4. hope - kala : @endColor ;
  5. hope - hana hou : hana hou - x ;
  6. kāʻei kua - kiʻi : - khtml - gradient ( linear , hema luna , hema lalo , mai ( @startColor ), a ( @endColor )); // Naʻi aupuni
  7. hope - kiʻi : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+
  8. kāʻei kua - kiʻi : - ms - linear - gradient ( @startColor , @endColor ); // IE10
  9. hope - kiʻi : - webkit - gradient ( linear , left top , left bottom , color - stop ( 0 %, @startColor ), kala - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
  10. hope - kiʻi : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
  11. kāʻei kua - kiʻi : - o - linear - gradient ( @startColor , @endColor ); // ʻOpera 11.10
  12. hope - kiʻi : linear - gradient ( @startColor , @endColor ); // Ka maʻamau
  13. }
  14. ...
  15. }

Nā hana

E ʻoluʻolu a hana i kekahi makemakika e hoʻohua i nā mixins maʻalahi a ikaika e like me ka mea ma lalo nei.

  1. // Māmā
  2. @gridColumns : 16 ;
  3. @gridColumnWidth : 40px ;
  4. @gridGutterWidth : 20px ;
  5. @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
  6.  
  7. // Hana i kekahi mau kolamu
  8. . kolamu ( @columnSpan : 1 ) {
  9. laula : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
  10. }

Hoiliili Liilii

Ma hope o ka hoʻololi ʻana i nā .lessfaila ma /lib/, pono ʻoe e hōʻuluʻulu hou iā lākou i mea e hana hou ai i nā faila bootstrap-*.*.*.css a me bootstrap-*.*.*.min.css. Inā hoʻouna ʻoe i kahi noi huki iā GitHub, pono ʻoe e hoʻopili hou.

Nā ala e hōʻuluʻulu ai

Kaʻina hana ʻanuʻu
Node me makefile

E hoʻouka i ka mea hoʻonohonoho laina kauoha liʻiliʻi me npm ma ka holo ʻana i kēia kauoha:

$ npm hoʻokomo lessc

Ke hoʻokomo ʻia e holo wale makemai ke kumu o kāu papa kuhikuhi bootstrap a ua mākaukau ʻoe.

Eia hou, inā ua hoʻokomo ʻia ʻo watchr , hiki iā ʻoe ke holo make watche hana hou i ka bootstrap i kēlā me kēia manawa āu e hoʻoponopono ai i kahi faila ma ka bootstrap lib (ʻaʻole koi ʻia kēia, he ala maʻalahi wale nō).

Javascript

Hoʻoiho i ka Less.js hou loa a hoʻokomo i ke ala i laila (a me Bootstrap) i ka head.

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

No ka hōʻuluʻulu hou ʻana i nā faila .less, mālama wale iā lākou a hoʻouka hou i kāu ʻaoʻao. Hoʻopili ʻo Less.js iā lākou a mālama iā lākou i loko o kahi waihona kūloko.

Laina kauoha

Inā loaʻa iā ʻoe ka mea liʻiliʻi liʻiliʻi laina kauoha, e holo wale i kēia kauoha:

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

E hoʻokomo --compressi loko o kēlā kauoha inā ʻoe e hoʻāʻo e mālama i kekahi mau bytes!

ʻO ka polokalamu Mac liʻiliʻi

Nānā ka polokalamu Mac manaʻole i nā papa kuhikuhi o nā faila .less a hōʻuluʻulu i ke code i nā faila kūloko ma hope o kēlā me kēia mālama ʻana o kahi faila .less i nānā ʻia.

Inā makemake ʻoe, hiki iā ʻoe ke hoʻololi i nā makemake i ka app no ​​ka hoʻohaʻahaʻa maʻalahi a me ka papa kuhikuhi i hoʻopau ʻia nā faila i hoʻopili ʻia.