Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum and eros.
ʻ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.
No ka hoʻomaka wikiwiki a me ka maʻalahi, e kope wale i kēia snippet i kāu ʻaoʻao pūnaewele.
He mea hoʻohana i ka Less? ʻAʻohe pilikia, hoʻopili wale i ka repo a hoʻohui i kēia mau laina:
Hoʻoiho, ʻoki, huki, faila i nā pilikia, a me nā mea hou aʻe me ka mana Bootstrap repo ma Github.
I kēia manawa v1.3.0
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 ›
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ʻopiha piha ʻia ʻo Bootstrap me CSS i hōʻuluʻulu ʻia, uncompiled, a me nā kumu hoʻohālike.
ʻ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.
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.
- <div class = "lālani" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
E hoʻopaʻa i kāu ʻike inā pono ʻoe ma ka hana ʻana i .row
kahi kolamu i loaʻa.
- <div class = "lālani" >
- <div class = "span12" >
- Papa 1 o ke kolamu
- <div class = "lālani" >
- <div class = "span6" >
- Papa 2
- </div>
- <div class = "span6" >
- Papa 2
- </div>
- </div>
- </div>
- </div>
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.
ʻ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. |
ʻ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.
- @gridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
Ke hoʻopili hou ʻia, e hoʻonohonoho ʻia ʻoe!
ʻ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>
.
- <kino>
- <div class = "container" >
- ...
- </div>
- </kino>
ʻ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.
- <kino>
- <div class = "container-fluid" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "maʻiʻo" >
- ...
- </div>
- </div>
- </kino>
ʻ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: @basefont
a@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.
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 hoʻohana nei i ka manaʻo nui, nā ʻōlelo a me nā pōkole
<strong>
<em>
<address>
<abbr>
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.
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.
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:
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.
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.
<blockquote>
<p>
<small>
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>
—
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Kauka Julius Hibbert
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
- <liʻiliʻi> Kauka Julius Hibbert </liʻiliʻi>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<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.
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 |
<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. |
<span class="label">
Kāhea i ka manaʻo a i ʻole ka hae i kekahi huaʻōlelo ma kāu kikokikona kino.
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 |
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.
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 .span6
nā kolamu.
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.
- <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>
<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>
.
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 |
- <papa>
- ...
- </papa>
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-striped
papa.
# | 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.
- <papa papa = "zebra-striped" >
- ...
- </papa>
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 |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( hana () {
- $ ( "papa#sortTableExample" ). papa kuhikuhi papa ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <papa papa = "zebra-striped" >
- ...
- </papa>
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.
Hoʻohui .form-stacked
i 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.
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.
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 .primary
papa uliuli , he papa ʻulaʻula .info
, he ʻōmaʻomaʻo .success
, a he ʻulaʻula .danger
.
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:
Makemake i nā pihi nui a liʻiliʻi paha? Loaʻa iā ia!
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 .disabled
no nā loulou a me :disabled
nā <button>
mea.
.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.
- <div class = "ʻōlelo aʻoaʻo aʻoaʻo" >
- <a papa = "kokoke" href = "#" > × </a>
- <p><strong> Guacamole hemolele! </strong> ʻO ka nānā maikaʻi loa iā ʻoe iho, ʻaʻole ʻoe maikaʻi loa. </p>
- </div>
.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.
- <div class = "ʻōlelo aʻoaʻo block-message alert" >
- <a papa = "kokoke" href = "#" > × </a>
- <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>
- <div class = "nā hana makaʻala" >
- <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>
- </div>
- </div>
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.
Hoʻokahi kino maikaʻi…
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.
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 .
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ā.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum and eros.
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!
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! |
ʻ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.
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.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />
- <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.
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.
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.
- // Nā loulou
- @linkColor : #8b59c2;
- @linkColorHover : darken ( @linkColor , 10 );
- // Nahinahina
- @ʻeleʻele : #000;
- @grayDark : māmā ( @ʻeleʻele , 25 %);
- @hina : māmā ( @ʻeleʻele , 50 %);
- @GrayLight : māmā ( @ʻeleʻele , 70 %);
- @grayLighter : māmā ( @ʻeleʻele , 90 %);
- @keokeo : #fff;
- // Nā waihoʻoluʻu leo
- @uliuli : #08b5fb;
- @' ōmaʻomaʻo : #46a546;
- @ulaula : #9d261d;
- @melemele : #ffc40d;
- @alani : #f89406;
- @ʻulaʻula : #c3325f;
- @ʻulaʻula : #7a43b6;
- // Mānoa kumu
- @basefont : 13px ;
- @kumu : 18px ;
Hāʻawi ʻo Less i kahi ʻano manaʻo ʻē aʻe me ka /* ... */
syntax maʻamau o CSS.
- // He ʻōlelo kēia
- /* He ʻōlelo hoʻi kēia */
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.
- #kino {
- . pōkole ( @kaumaha : maʻamau , @nui : 14px , @lineHeight : 20px ) {
- font - nui : @ka nui ;
- font - kaumaha : @kaumaha ;
- laina - kiekie : @lineHeight ;
- }
- . sans - serif ( @kaumaha : maʻamau , @nui : 14px , @lineHeight : 20px ) {
- font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- font - nui : @ka nui ;
- font - kaumaha : @kaumaha ;
- laina - kiekie : @lineHeight ;
- }
- ...
- }
- #gradient {
- ...
- . kū pololei ( @startColor : #555, @endColor: #333) {
- hope - kala : @endColor ;
- hope - hana hou : hana hou - x ;
- kāʻei kua - kiʻi : - khtml - gradient ( linear , hema luna , hema lalo , mai ( @startColor ), a ( @endColor )); // Naʻi aupuni
- hope - kiʻi : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+
- kāʻei kua - kiʻi : - ms - linear - gradient ( @startColor , @endColor ); // IE10
- hope - kiʻi : - webkit - gradient ( linear , left top , left bottom , color - stop ( 0 %, @startColor ), kala - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- hope - kiʻi : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- kāʻei kua - kiʻi : - o - linear - gradient ( @startColor , @endColor ); // ʻOpera 11.10
- hope - kiʻi : linear - gradient ( @startColor , @endColor ); // Ka maʻamau
- }
- ...
- }
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.
- // Māmā
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Hana i kekahi mau kolamu
- . kolamu ( @columnSpan : 1 ) {
- laula : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
Ma hope o ka hoʻololi ʻana i nā .less
faila 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.
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 Eia hou, inā ua hoʻokomo ʻia ʻo watchr , hiki iā ʻoe ke holo |
Javascript | Hoʻoiho i ka Less.js hou loa a hoʻokomo i ke ala i laila (a me Bootstrap) i ka
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 |
ʻ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. |