Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Ang Bootstrap ay isang toolkit mula sa Twitter na idinisenyo upang simulan ang pagbuo ng mga webapp at site.
Kabilang dito ang base CSS at HTML para sa typography, form, button, table, grids, navigation, at higit pa.
Nerd alert: Ang Bootstrap ay binuo gamit ang Less at idinisenyo upang gumana sa labas ng gate na may mga modernong browser sa isip.
Para sa pinakamabilis at pinakamadaling pagsisimula, kopyahin lang ang snippet na ito sa iyong webpage.
Isang tagahanga ng paggamit ng Mas Kaunti? Walang problema, i-clone lang ang repo at idagdag ang mga linyang ito:
I-download, tinidor, hilahin, mga isyu sa file, at higit pa gamit ang opisyal na Bootstrap repo sa Github.
Kasalukuyang v1.3.0
Ang mga inhinyero sa Twitter ay ginamit sa kasaysayan ang halos anumang library na pamilyar sa kanila upang matugunan ang mga kinakailangan sa front-end. Nagsimula ang Bootstrap bilang sagot sa mga hamong ipinakita. Sa tulong ng maraming kahanga-hangang tao, ang Bootstrap ay lumago nang malaki.
Magbasa pa sa dev.twitter.com ›
Ang Bootstrap ay sinubukan at sinusuportahan sa mga pangunahing modernong browser tulad ng Chrome, Safari, Internet Explorer, at Firefox.
Kumpleto ang Bootstrap sa pinagsama-samang CSS, hindi na-compile, at mga halimbawang template.
Ang default na grid system na ibinigay bilang bahagi ng Bootstrap ay isang 940px na lapad na 16-column na grid. Isa itong lasa ng sikat na 960 grid system, ngunit walang karagdagang margin/padding sa kaliwa at kanang bahagi.
Gaya ng ipinapakita dito, maaaring gumawa ng pangunahing layout gamit ang dalawang "column," bawat isa ay sumasaklaw sa isang bilang ng 16 na pundasyong column na tinukoy namin bilang bahagi ng aming grid system. Tingnan ang mga halimbawa sa ibaba para sa higit pang mga variation.
- <div class = "row" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
I-nest ang iyong content kung kailangan mo sa pamamagitan ng paggawa ng .row
nasa loob ng kasalukuyang column.
- <div class = "row" >
- <div class = "span12" >
- Level 1 ng column
- <div class = "row" >
- <div class = "span6" >
- Level 2
- </div>
- <div class = "span6" >
- Level 2
- </div>
- </div>
- </div>
- </div>
Ang built in na Bootstrap ay isang maliit na variable para sa pag-customize ng default na 940px grid system. Sa kaunting pag-customize, maaari mong baguhin ang laki ng mga column, ang kanilang mga gutter, at ang container kung saan sila nakatira.
Ang mga variable na kailangan upang baguhin ang grid system na kasalukuyang naninirahan lahat sa variables.less
.
Variable | Default na halaga | Paglalarawan |
---|---|---|
@gridColumns |
16 | Ang bilang ng mga column sa loob ng grid |
@gridColumnWidth |
40px | Ang lapad ng bawat column sa loob ng grid |
@gridGutterWidth |
20px | Ang negatibong espasyo sa pagitan ng bawat column |
@siteWidth |
Computed sum ng lahat ng column at gutters | Gumagamit kami ng ilang pangunahing tugma upang mabilang ang bilang ng mga column at gutters at itakda ang lapad ng .fixed-container() mixin. |
Ang pagbabago sa grid ay nangangahulugan ng pagbabago sa tatlong @grid-*
variable at muling pagsasama-sama ng Mas kaunting mga file.
Ang Bootstrap ay nilagyan upang mahawakan ang isang grid system na may hanggang 24 na column; ang default ay 16 lang. Narito kung paano magiging customized ang iyong mga variable ng grid sa isang 24 na column na grid.
- @gridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
Kapag na-recompile na, itatakda ka!
Ang default at simpleng 940px-wide, nakasentro na layout para sa halos anumang website o page na ibinigay ng iisang <div.container>
.
- <katawan>
- <div class = "lalagyan" >
- ...
- </div>
- </body>
Isang alternatibo, nababaluktot na istraktura ng tuluy-tuloy na pahina na may min- at max-width at isang kaliwang sidebar. Mahusay para sa mga app at doc.
- <katawan>
- <div class = "container-fluid" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "nilalaman" >
- ...
- </div>
- </div>
- </body>
Isang karaniwang typographic hierarchy para sa pagbubuo ng iyong mga webpage.
Ang buong typographic grid ay batay sa dalawang Less variables sa aming variables.less file: @basefont
at @baseline
. Ang una ay ang base font-size na ginamit sa kabuuan at ang pangalawa ay ang base line-height.
Ginagamit namin ang mga variable na iyon, at ilang matematika, upang gawin ang mga margin, padding, at line-height ng lahat ng aming uri at higit pa.
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.
Paggamit ng diin, mga address, at mga pagdadaglat
<strong>
<em>
<address>
<abbr>
Dapat gamitin ang mga emphasis tag ( <strong>
at <em>
) upang ipahiwatig ang karagdagang kahalagahan o diin ng isang salita o parirala na nauugnay sa nakapaligid na kopya nito. Gamitin <strong>
para sa kahalagahan at <em>
para sa diin na diin.
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.
Tandaan: Okay pa rin ang paggamit <b>
at mga <i>
tag sa HTML5 at hindi kailangang i-istilong bold at italic ang mga ito, ayon sa pagkakabanggit (bagaman kung mayroong mas semantic na elemento, gamitin ito). <b>
ay nilalayong i-highlight ang mga salita o parirala nang hindi nagbibigay ng karagdagang kahalagahan, habang <i>
kadalasan ay para sa boses, teknikal na termino, atbp.
Ginagamit ang <address>
elemento para sa impormasyon sa pakikipag-ugnayan para sa pinakamalapit na ninuno nito, o ang buong katawan ng trabaho. Narito ang dalawang halimbawa kung paano ito magagamit:
Tandaan: Ang bawat linya sa isang <address>
ay dapat magtapos sa isang line-break ( <br />
) o balot sa isang block-level na tag (hal., <p>
) upang maayos na buuin ang nilalaman.
Para sa mga pagdadaglat at acronym, gamitin ang <abbr>
tag ( <acronym>
ay hindi na ginagamit sa HTML5 ). Ilagay ang shorthand form sa loob ng tag at magtakda ng pamagat para sa kumpletong pangalan.
<blockquote>
<p>
<small>
Upang magsama ng blockquote, balutin at <blockquote>
mga tag. Gamitin ang elemento upang banggitin ang iyong pinagmulan at makakakuha ka ng em dash bago ito.<p>
<small>
<small>
—
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Dr. Julius Hibbert
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
- <maliit> Dr. Julius Hibbert </maliit>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
Mambugaw sa iyong code sa istilo gamit ang dalawang simpleng tag. Para sa higit pang kahanga-hanga sa pamamagitan ng javascript, ilagay ang code ng Google prettify library at handa ka na.
Ang code, mga bloke ng o mga snippet lang na inline, ay maaaring ipakita nang may istilo sa pamamagitan lamang ng pagbalot sa tamang tag. Para sa mga bloke ng code na sumasaklaw sa maraming linya, gamitin ang <pre>
elemento. Para sa inline na code, gamitin ang <code>
elemento.
Elemento | Resulta |
---|---|
<code> |
Sa isang linya ng text na tulad nito, ang iyong nakabalot na code ay magiging katulad ng <html> elementong ito. |
<pre> |
<div> <h1>heading</h1> <p>Isang bagay dito...</p> </div> Tandaan: Tiyaking panatilihin ang code sa loob |
<pre class="prettyprint"> |
Gamit ang library ng google-code-prettify, ang iyong mga bloke ng code ay nakakakuha ng bahagyang naiibang visual na istilo at awtomatikong pag-highlight ng syntax. <div> <h1> Heading </h1> <p> Isang bagay dito mismo... </p> </div> I-download ang google-code-prettify at tingnan ang readme kung paano gamitin. |
<span class="label">
Tawagan ang pansin o i-flag ang anumang parirala sa iyong body text.
Kailanman kailangan ng isa sa mga magarbong Bago! o Mahalagang mga flag kapag nagsusulat ng code? Well, ngayon mayroon ka na sa kanila. Narito kung ano ang kasama bilang default:
Label | Resulta |
---|---|
<span class="label">Default</span> |
Default |
<span class="label success">New</span> |
Bago |
<span class="label warning">Warning</span> |
Babala |
<span class="label important">Important</span> |
Mahalaga |
<span class="label notice">Notice</span> |
Pansinin |
Magpakita ng mga thumbnail na may iba't ibang laki sa mga pahina na may mababang HTML na bakas ng paa at kaunting mga estilo.
Ang mga thumbnail sa .media-grid
ay maaaring maging anumang laki, ngunit pinakamahusay na gumagana ang mga ito kapag direktang nakamapa sa built-in na Bootstrap grid system. Ang mga lapad ng larawan tulad ng 90, 210, at 330 ay pinagsama sa ilang pixel ng padding upang katumbas ng .span2
, .span4
, at mga .span6
laki ng column.
Ang mga media grid ay madaling gamitin at medyo simple sa markup side. Ang kanilang mga sukat ay batay lamang sa laki ng mga larawang kasama.
- <ul klase = "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>
Mahusay ang mga mesa—para sa maraming bagay. Gayunpaman, ang magagandang talahanayan ay nangangailangan ng kaunting pag-ibig sa markup upang maging kapaki-pakinabang, nasusukat, at nababasa (sa antas ng code). Narito ang ilang mga tip upang makatulong.
Palaging balutin ang iyong mga header ng column sa isang <thead>
tulad na hierarchy ay <thead>
><tr>
> <th>
.
Katulad ng mga header ng column, ang lahat ng nilalaman ng katawan ng iyong talahanayan ay dapat na nakabalot sa isang <tbody>
upang ang iyong hierarchy ay <tbody>
> <tr>
> <td>
.
Ang lahat ng mga talahanayan ay awtomatikong mai-istilo na may mga mahahalagang hangganan lamang upang matiyak ang pagiging madaling mabasa at mapanatili ang istraktura. Hindi na kailangang magdagdag ng mga karagdagang klase o katangian.
# | Pangalan | Huling pangalan | Wika |
---|---|---|---|
1 | Ang ilan | Isa | Ingles |
2 | Joe | Anim na pack | Ingles |
3 | Stu | Dent | Code |
- <talahanayan>
- ...
- </table>
Para sa mga talahanayan na nangangailangan ng higit pang data sa mas mahigpit na espasyo, gamitin ang condensed flavor na humahati sa padding. Maaari din itong gamitin kasabay ng mga hangganan at zebra-stripe, tulad ng mga default na istilo ng talahanayan.
# | Pangalan | Huling pangalan | Wika |
---|---|---|---|
1 | Ang ilan | Isa | Ingles |
2 | Joe | Anim na pack | Ingles |
3 | Stu | Dent | Code |
Gawing mas makinis ang iyong mga talahanayan sa pamamagitan ng pagbilog sa mga sulok nito at pagdaragdag ng mga hangganan sa lahat ng panig.
# | Pangalan | Huling pangalan | Wika |
---|---|---|---|
1 | Ang ilan | Isa | Ingles |
2 | Joe | Anim na pack | Ingles |
3 | Stu | Dent | Code |
- <table class = "bordered-table" >
- ...
- </table>
Maging medyo magarbo sa iyong mga talahanayan sa pamamagitan ng pagdaragdag ng zebra-striping—idagdag lang ang .zebra-striped
klase.
# | Pangalan | Huling pangalan | Wika |
---|---|---|---|
1 | Ang ilan | Isa | Ingles |
2 | Joe | Anim na pack | Ingles |
3 | Stu | Dent | Code |
sumasaklaw sa 4 na hanay | |||
sumasaklaw ng 2 column | sumasaklaw ng 2 column |
Tandaan: Ang zebra-striping ay isang progresibong pagpapahusay na hindi available para sa mga mas lumang browser tulad ng IE8 at mas mababa.
- <table class = "zebra-striped" >
- ...
- </table>
Sa pagkuha sa nakaraang halimbawa, pinapabuti namin ang pagiging kapaki-pakinabang ng aming mga talahanayan sa pamamagitan ng pagbibigay ng pag-uuri ng functionality sa pamamagitan ng jQuery at ang Tablesorter plugin. I-click ang anumang header ng column upang baguhin ang pag-uuri.
# | Pangalan | Huling pangalan | Wika |
---|---|---|---|
2 | Joe | Anim na pack | Ingles |
3 | Stu | Dent | Code |
1 | Iyong | Isa | Ingles |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( function () {
- $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "zebra-striped" >
- ...
- </table>
Ang lahat ng mga form ay binibigyan ng mga default na istilo upang ipakita ang mga ito sa isang nababasa at nasusukat na paraan. Ibinibigay ang mga istilo para sa mga text input, mga piling listahan, mga textarea, mga radio button at checkbox, at mga button.
Idagdag .form-stacked
sa HTML ng iyong form at magkakaroon ka ng mga label sa ibabaw ng kanilang mga field sa halip na sa kanilang kaliwa. Mahusay itong gumagana kung maikli ang iyong mga form o mayroon kang dalawang column ng mga input para sa mas mabibigat na form.
I-customize ang anumang form input
, select
, o textarea
lapad sa pamamagitan ng pagdaragdag lamang ng ilang klase sa iyong markup.
Simula sa v1.3.0, idinagdag namin ang mga klase ng sizing batay sa grid para sa mga elemento ng form. Mangyaring gamitin ang mga ito sa mga kasalukuyang klase na .mini
, .small
, atbp.
Bilang isang convention, ang mga button ay ginagamit para sa mga aksyon habang ang mga link ay ginagamit para sa mga bagay. Halimbawa, ang "I-download" ay maaaring isang button at ang "kamakailang aktibidad" ay maaaring isang link.
Default ang lahat ng button sa isang light grey na istilo, ngunit maaaring ilapat ang ilang functional class para sa iba't ibang istilo ng kulay. Kasama sa mga klaseng ito ang isang asul .primary
na klase, isang mapusyaw na asul na .info
klase, isang berdeng .success
klase, at isang pulang .danger
klase.
Maaaring ilapat ang mga istilo ng button sa anumang bagay na may .btn
inilapat. Karaniwang gugustuhin mong ilapat ang mga ito sa <a>
, <button>
, at mga piling <input>
elemento lamang. Narito ang hitsura nito:
Gusto mo ba ng mas malaki o mas maliit na mga pindutan? Gawin mo ito!
Para sa mga button na hindi aktibo o hindi pinagana ng app para sa isang dahilan o iba pa, gamitin ang disabled na estado. Iyon ay .disabled
para sa mga link at :disabled
para sa mga <button>
elemento.
.alert-message
Isang linyang mensahe para sa pag-highlight ng kabiguan, posibleng pagkabigo, o tagumpay ng isang aksyon. Lalo na kapaki-pakinabang para sa mga form.
- <div class = "babala ng alerto sa mensahe" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Banal na guacamole! </strong> Tingnan mo ang sarili mo, hindi ka masyadong maganda. </p>
- </div>
.alert-message.block-message
Para sa mga mensaheng nangangailangan ng kaunting paliwanag, mayroon kaming mga alerto sa istilo ng talata. Ang mga ito ay perpekto para sa pagbubula ng mas mahabang mga mensahe ng error, babala sa isang gumagamit ng isang nakabinbing aksyon, o pagpapakita lamang ng impormasyon para sa higit na diin sa pahina.
- <div class = "alerto-message block-message warning" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Banal na guacamole! Ito ay isang babala! </strong> Tingnan mo ang sarili mo, hindi ka masyadong maganda. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
- <div class = "alerto-actions" >
- <a class = "btn small" href = "#" > Gawin ang pagkilos na ito </a> <a class = "btn small" href = "#" > O gawin ito </a>
- </div>
- </div>
Ang mga modal—mga dialog o lightbox—ay mahusay para sa mga aksyong ayon sa konteksto sa mga sitwasyon kung saan mahalagang mapanatili ang konteksto ng background.
Isang magandang katawan...
Ang Twipsies ay sobrang kapaki-pakinabang para sa pagtulong sa isang nalilitong user at pagturo sa kanila sa tamang direksyon.
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 volupremtas quasi fugit fugit
Gumamit ng mga popover upang magbigay ng subtextuwal na impormasyon sa isang pahina nang hindi naaapektuhan ang layout.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Ang pagsasama ng javascript sa Bootstrap library ay napakadali. Sa ibaba ay tatalakayin namin ang mga pangunahing kaalaman at bibigyan ka ng ilang kahanga-hangang mga plugin upang makapagsimula ka!
Buhayin ang ilan sa mga pangunahing bahagi ng Bootstrap gamit ang mga bagong custom na plugin na gumagana sa jQuery at Ender . Hinihikayat ka naming palawigin at baguhin ang mga ito upang umangkop sa iyong mga partikular na pangangailangan sa pag-unlad.
file | Paglalarawan |
---|---|
bootstrap-modal.js | Ang aming Modal plugin ay isang napakaliit na pagkuha sa tradisyonal na modal js plugin! Naging espesyal ang aming pangangalaga upang isama lamang ang hubad na pag-andar na kailangan namin sa twitter. |
bootstrap-alerts.js | Ang alerto plugin ay isang napakaliit na klase para sa pagdaragdag ng malapit na pag-andar sa mga alerto. |
bootstrap-dropdown.js | Ang plugin na ito ay para sa pagdaragdag ng dropdown na pakikipag-ugnayan sa bootstrap topbar o mga tab na nabigasyon. |
bootstrap-scrollspy.js | Ang ScrollSpy plugin ay para sa pagdaragdag ng isang awtomatikong pag-update nav batay sa posisyon ng pag-scroll sa bootstrap topbar. |
bootstrap-buttons.js | Ang ScrollSpy plugin ay para sa pagdaragdag ng isang awtomatikong pag-update nav batay sa posisyon ng pag-scroll sa bootstrap topbar. |
bootstrap-tabs.js | Ang plugin na ito ay nagdaragdag ng mabilis, dynamic na tab at pill functionality para sa pagbibisikleta sa pamamagitan ng lokal na nilalaman. |
bootstrap-twipsy.js | Batay sa mahusay na jQuery.tipsy plugin na isinulat ni Jason Frame; Ang twipsy ay isang na-update na bersyon, na hindi umaasa sa mga larawan, gumagamit ng css3 para sa mga animation, at data-attribute para sa lokal na imbakan ng pamagat! |
bootstrap-popover.js | Ang popover plugin ay nagbibigay ng isang simpleng interface para sa pagdaragdag ng mga popover sa iyong application. Pinapalawak nito ang boostrap-twipsy.js plugin, kaya siguraduhing kunin din ang file na iyon kapag nagsasama ng mga popover sa iyong proyekto! |
Hindi! Ang Bootstrap ay unang-una at pangunahin na idinisenyo upang maging isang CSS library. Nagbibigay ang javascript na ito ng pangunahing interactive na layer sa ibabaw ng mga kasamang istilo.
Gayunpaman, para sa mga nangangailangan ng javascript, ibinigay namin ang mga plugin sa itaas upang matulungan kang maunawaan kung paano isama ang Bootstrap sa javascript at upang bigyan ka kaagad ng mabilis, magaan na opsyon para sa pangunahing pagpapagana.
Para sa higit pang impormasyon at upang makita ang ilang mga live na demo, mangyaring sumangguni sa aming pahina ng dokumentasyon ng plugin .
Binuo ang Bootstrap mula sa Preboot , isang open-source pack ng mga mixin at variable na gagamitin kasabay ng Less , isang CSS preprocessor para sa mas mabilis at mas madaling web development.
Tingnan kung paano namin ginamit ang Preboot sa Bootstrap at kung paano mo ito magagamit kung pipiliin mong magpatakbo ng Mas kaunti sa iyong susunod na proyekto.
Gamitin ang opsyong ito upang lubos na magamit ang Mga Mas kaunting variable, mixin, at nesting ng Bootstrap sa CSS sa pamamagitan ng javascript sa iyong browser.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />
- <script src = "js/less-1.1.3.min.js" ></script>
Hindi nararamdaman ang .js na solusyon? Subukan ang Less Mac app o gamitin ang Node.js para mag-compile kapag na-deploy mo ang iyong code.
Narito ang ilan sa mga highlight ng kung ano ang kasama sa Twitter Bootstrap bilang bahagi ng Bootstrap. Tumungo sa website ng Bootstrap o pahina ng proyekto ng Github para mag-download at matuto pa.
Ang mga variable sa Less ay perpekto para sa pagpapanatili at pag-update ng iyong CSS nang walang sakit sa ulo. Kapag gusto mong baguhin ang value ng kulay o value na madalas gamitin, i-update ito sa isang lugar at nakatakda ka na.
- // Mga link
- @linkColor : #8b59c2;
- @linkColorHover : darken ( @linkColor , 10 );
- // Mga Gray
- @black : #000;
- @grayDark : gumaan ( @black , 25 %);
- @gray : lumiwanag ( @black , 50 %);
- @grayLight : gumaan ( @black , 70 %);
- @grayLighter : gumaan ( @black , 90 %);
- @white : #fff;
- // Mga Kulay ng Accent
- @blue : #08b5fb;
- @berde : #46a546;
- @pula : #9d261d;
- @dilaw : #ffc40d;
- @orange : #f89406;
- @pink : #c3325f;
- @purple : #7a43b6;
- // Baseline grid
- @basefont : 13px ;
- @baseline : 18px ;
Nagbibigay din ang Less ng isa pang istilo ng pagkomento bilang karagdagan sa normal na /* ... */
syntax ng CSS.
- // Ito ay isang komento
- /* Comment din ito */
Ang mga mixin ay karaniwang kasama o mga partial para sa CSS, na nagbibigay-daan sa iyong pagsamahin ang isang bloke ng code sa isa. Mahusay ang mga ito para sa mga prefix na katangian ng vendor tulad ng box-shadow
, mga cross-browser gradient, font stack, at higit pa. Nasa ibaba ang isang sample ng mga mixin na kasama sa Bootstrap.
- #font {
- . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- laki ng font : @size ;
- font - timbang : @timbang ;
- linya - taas : @lineHeight ;
- }
- . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- font - pamilya : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- laki ng font : @size ;
- font - timbang : @timbang ;
- linya - taas : @lineHeight ;
- }
- ...
- }
- #gradient {
- ...
- . patayo ( @startColor : #555, @endColor: #333) {
- background - kulay : @endColor ;
- background - ulitin : ulitin - x ;
- background - image : - khtml - gradient ( linear , left top , left bottom , from ( @startColor ), to ( @endColor )); // Mananakop
- background - imahe : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+
- background - larawan : - ms - linear - gradient ( @startColor , @endColor ); // IE10
- background - imahe : - webkit - gradient ( linear , left top , left bottom , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- background - imahe : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- background - larawan : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10
- background - larawan : linear - gradient ( @startColor , @endColor ); // Ang pamantayan
- }
- ...
- }
Maging magarbo at magsagawa ng ilang matematika upang makabuo ng nababaluktot at makapangyarihang mga mix tulad ng nasa ibaba.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Gumawa ng ilang column
- . mga hanay ( @columnSpan : 1 ) {
- lapad : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
Pagkatapos baguhin ang mga .less
file sa /lib/, kakailanganin mong i-compile muli ang mga ito upang mabuo muli ang bootstrap-*.*.*.css at bootstrap-*.*.*.min.css file. Kung nagsusumite ka ng pull request sa GitHub, dapat palagi kang mag-recompile.
Pamamaraan | Mga hakbang |
---|---|
Node na may makefile | I-install ang less command line compiler na may npm sa pamamagitan ng pagpapatakbo ng sumusunod na command: $ npm install lessc Kapag na-install na, tumakbo lang Bukod pa rito, kung mayroon kang naka-install na watchr , maaari kang tumakbo |
JavaScript | I-download ang pinakabagong Less.js at isama ang path dito (at Bootstrap) sa
Upang muling i-compile ang mga .less na file, i-save lang ang mga ito at i-reload ang iyong page. Kino-compile sila ng Less.js at iniimbak ang mga ito sa lokal na storage. |
Command line | Kung mayroon ka nang mas kaunting command line tool na naka-install, patakbuhin lang ang sumusunod na command: $ lessc ./lib/bootstrap.less > bootstrap.css Tiyaking isama |
Mas kaunting Mac app | Ang hindi opisyal na Mac app ay nanonood ng mga direktoryo ng .less na mga file at kino-compile ang code sa mga lokal na file pagkatapos ng bawat pag-save ng isang pinanood na .less na file. Kung gusto mo, maaari mong i-toggle ang mga kagustuhan sa app para sa awtomatikong pagpapaliit at kung saang direktoryo napupunta ang mga pinagsama-samang file. |