Etiam porta sem malesuada nga agtagibalay nga euismod. Maecenas nga faucibus nga mollis nga interdum. Morbi leo risus, porta ac consectetur ac, vestibulum iti eros.
Ti Bootstrap ket maysa a toolkit manipud iti Twitter a nadisenio a mangkickstart iti panagdur-as dagiti webapps ken sites.
Daytoy ket mangiraman ti batayan a CSS ken HTML para iti tipograpia, porma, buton, lamisaan, grid, nabigasion, ken dadduma pay.
Nerd alert: Ti Bootstrap ket naaramid babaen ti Less ken nadisenio nga agtrabaho iti ruar ti ruangan nga addaan kadagiti moderno a browser iti panunot.
Para iti kapartakan ken kalalakaan a panangrugi, kopiaem laeng daytoy a snippet iti webpage-mo.
Maysa a fan ti panagusar iti Less? Awan ti problema, basta i-clone ti repo ken inayon dagitoy a linia:
I-download, tinidor, guyoden, dagiti isyu ti file, ken dadduma pay babaen ti opisial a Bootstrap repo iti Github.
Iti agdama v1.3.0
Dagiti inheniero iti Twitter ket historikal nga inus-usarda ti dandani ania man a libraria a pamiliar kadakuada tapno matungpal dagiti kasapulan ti front-end. Nangrugi ti bootstrap kas sungbat kadagiti karit a naiparang. Babaen ti tulong ti adu a nakaam-amak a tattao, dakkel ti dimmakkel ti Bootstrap.
Basaen ti ad-adu pay iti dev.twitter.com ›
Nasubok ken nasuportaran ti Bootstrap kadagiti kangrunaan a moderno a browser a kas iti Chrome, Safari, Internet Explorer, ken Firefox.
Ti Bootstrap ket umay a kompleto kadagiti naurnong a CSS, saan a naurnong, ken dagiti pagarigan a plantilia.
Ti kasisigud a sistema ti grid a naited a kas paset ti Bootstrap ket ti 940px a kalawa a 16-kolum a grid. Daytat’ raman ti nalatak a 960 grid system, ngem awan ti kanayonan a margin/padding iti kannigid ken kannawan a sikigan.
Kas naipakita ditoy, ti batayan a layout ket mabalin a maparsua babaen ti dua a "kolum," tunggal maysa ket mangsaklaw ti bilang dagiti 16 a pundasional nga adigi nga inkeddengmi a kas paset ti sistema ti gridmi. Kitaen dagiti pagarigan iti baba para kadagiti ad-adu pay a panagduduma.
- <div klase = "hilera" >
- < klase ti div = "span6" >
- ...
- </div>
- < klase ti div = "span10" >
- ...
- </div>
- </div>
I-nest ti linaonmo no masapul babaen ti panagpartuat ti maysa iti .row
uneg ti addan a kolum.
- <div klase = "hilera" >
- < klase ti div = "span12" >
- Level 1 ti kolum
- <div klase = "hilera" >
- < klase ti div = "span6" >
- Lebel 2
- </div>
- < klase ti div = "span6" >
- Lebel 2
- </div>
- </div>
- </div>
- </div>
Naibangon iti Bootstrap ket sumagmamano a variable para iti panagpasayaat ti default a 940px a sistema ti grid. Babaen ti sangkabassit a panangpasayaat, mabalinmo a baliwan ti kadakkel dagiti adigi, dagiti kanalda, ken ti pagkargaan a pagnanaedanda.
Dagiti variable a kasapulan a mangbalbaliw ti sistema ti grid nga agdama nga agtataeng amin iti variables.less
.
Variable nga | Default nga pateg | Panangiladawan |
---|---|---|
@gridColumns |
16 nga | Ti bilang dagiti adigi iti uneg ti grid |
@gridColumnWidth |
40px nga | Ti kalawa ti tunggal adigi iti uneg ti grid |
@gridGutterWidth |
20px nga | Ti negatibo nga espasio iti nagbaetan ti tunggal kolum |
@siteWidth |
Nakuenta a kaadu ti amin nga adigi ken kanal | Usarenmi ti sumagmamano a kangrunaan a panagtunos tapno bilangen ti bilang dagiti adigi ken kanal ken ikeddeng ti kalawa ti .fixed-container() mixin. |
Ti panangbalbaliw ti grid ket kayatna a sawen ti panagbalbaliw kadagiti tallo @grid-*
a variable ken panagtipon manen kadagiti Less a papeles.
Ti bootstrap ket umay a naikkan iti alikamen a mangasikaso iti grid system nga addaan agingga iti 24 a kolum; ti default ket 16 laeng. Adtoy no kasano a dagiti grid variable-mo ket agparang koma a napasadaan iti 24-kolum a grid.
- @gridDagiti Kolum : 24 ;
- @gridKalawa ti Kolum : 20px ;
- @gridKalawa ti Kanal : 20px ;
Apaman a na-recompile, mai-set-ka!
Ti default ken simple a 940px-a kalawa, naisentro a layout para iti dandani laeng ania man a website wenno panid nga inted babaen ti maymaysa <div.container>
.
- <bagi> nga
- <div klase = "laon" >
- ...
- </div>
- </bagi>
Maysa nga alternatibo, nalaka a maibagay nga estruktura ti panid ti pluido nga addaan kadagiti min- ken max-a kalawa ken ti kannigid a sidebar. Nasayaat para kadagiti apps ken docs.
- <bagi> nga
- <div klase = "paglaon-a-pluido" >
- <div klase = "bara ti sikigan" >
- ...
- </div>
- <div klase = "linaon" >
- ...
- </div>
- </div>
- </bagi>
Ti maysa a pagalagadan a tipograpiko a hirarkia para iti panangistruktura kadagiti panidmo iti web.
Ti sibubukel a grid ti tipograpiko ket naibatay iti dua a Basbassit a variable iti variables.less file-tayo: @basefont
ken @baseline
. Ti umuna ket ti base font-size a nausar iti intero ken ti maikadua ket ti base line-height.
Usarenmi dagita a variable, ken sumagmamano a matematika, tapno mangpartuat kadagiti margin, padding, ken line-heights ti amin a kitami ken dadduma pay.
Nullam quis risus eget urna mollis nga arkos nga vel eu leo. Cum sociis natoque penatibus ken magnis ti panagpasngay a montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies lugan ut id elit.
Panangusar iti panangipaganetget, adres, & abbreviation
<strong>
<em>
<address>
<abbr>
Rumbeng a mausar dagiti emphasis tag ( <strong>
ken <em>
) a mangipakita iti kanayonan a kinapateg wenno panangipaganetget iti maysa a sao wenno ragup ti sasao no maidilig iti aglawlawna a kopia. Usaren <strong>
para iti kinapateg ken <em>
para iti panangipaganetget iti stress .
Fusce dapibus , tellus ac cursus commodo , tortor mauris kondimento nibh , ut fermentum masa justo agtugaw amet risus. Maecenas nga faucibus nga mollis nga interdum. Nulla vitae elit libero, maysa a pharetra nga augue.
Pakaammo: Okey pay laeng ti agusar <b>
ken <i>
dagiti etiketa iti HTML5 ken saan a kasapulan nga estilo a bold ken italic, a nagsasaruno (nupay no adda ti ad-adu a semantiko nga elemento, usaren daytoy). <b>
ket nairanta a mangitag-ay kadagiti balikas wenno ragup ti sasao a saan a mangipaay iti kanayonan a kinapateg, idinto <i>
a kaaduanna ket para iti timek, teknikal a termino, kdpy.
Ti <address>
elemento ket naus-usar para iti impormasion ti pannakiuman para iti kaasitgan nga inapona, wenno ti sibubukel a bagi ti trabaho. Adtoy ti dua a pagarigan no kasano a mabalin a mausar dayta:
Pakaammo: Tunggal linia iti maysa <address>
ket masapul nga agpatingga iti line-break ( <br />
) wenno mabalkot iti maysa a block-level tag (kas pagarigan, <p>
) tapno umno nga istruktura ti linaon.
Para kadagiti abbreviation ken acronym, usaren ti <abbr>
tag ( <acronym>
ket saanen a maus-usar iti HTML5 ). Ikabil ti porma ti shorthand iti uneg ti tag ken mangikeddeng iti paulo para iti kompleto a nagan.
<blockquote>
<p>
<small>
Tapno mairaman ti blockquote, ibalkot <blockquote>
ken <p>
tag <small>
. Usaren ti <small>
elemento a mangidatag ti taudanmo ket makagun-odka iti em dash —
sakbay daytoy.
Lorem ipsum dolor agtugaw amet, consectetur adipiscing elit. Integer a posuere erat maysa nga ante venenatis dapibus a posuere velit aliquet.
Ni Julius Hibbert ni Dr
- <blockquote ti panag-block>
- <p> Lorem ipsum dolor agtugaw nga amet, consectetur adipiscing elit. Integer a posuere erat ti maysa nga ante venenatis dapibus a posuere velit aliquet. </p>
- <bassit> Ni Dr. Julius Hibbert </bassit>
- </blockquote ti panagsurat>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
Pimp ti code mo iti estilo babaen ti dua a simple nga tag. Para iti ad-adu pay a nakaam-amak babaen ti javascript, i-drop-mo ti code prettify library ti Google ket naka-set-ka.
Ti kodigo, dagiti bloke ti wenno dagiti laeng snippet iti inline, ket mabalin a maiparang nga addaan iti estilo babaen laeng ti panangbalkot iti umno nga etiketa. Para kadagiti bloke ti kodigo a mangsaklaw kadagiti adu a linia, usaren ti <pre>
elemento. Para iti inline code, usaren ti <code>
elemento.
Elemento | Resulta |
---|---|
<code> |
Iti linia ti teksto a kas iti daytoy, ti nabalkot a kodigom ket kasla daytoy <html> nga elemento. |
<pre> |
<div> nga <h1>Paulo</h1> <p>Adda ditoy mismo...</p> </div> Pakaammo: Siguraduen nga pagtalinaeden ti kodigo iti uneg |
<pre class="prettyprint"> |
Babaen ti panagusar ti google-code-prettify a biblioteka, dagiti bloke ti kodigom ket makagun-od ti naiduma bassit a biswal nga estilo ken automatiko a panagi-highlight ti sintaksis. <div> <h1> Paulo </h1> <p> Maysa a banag ditoy mismo... </p> </div> I-download ti google-code-prettify ken kitaen ti readme no kasano nga usaren. |
<span class="label">
Awagan ti atension wenno i-flag ti aniaman a ragup ti sasao iti teksto ti bagim.
Ever needed maysa kadagita a magarbo a Baro! wenno Napateg a bandera no agsurat iti kodigo? Bueno, ita addan kenka dagitoy. Ania ti nairaman babaen ti default:
Marka | Resulta |
---|---|
<span class="label">Default</span> |
Default |
<span class="label success">New</span> |
Baro |
<span class="label warning">Warning</span> |
Pakdaar |
<span class="label important">Important</span> |
Napateg |
<span class="label notice">Notice</span> |
Pakaammo |
Ipakita dagiti thumbnail ti nadumaduma a kadakkel kadagiti panid nga addaan iti nababa a HTML footprint ken bassit nga estilo.
Dagiti thumbnail iti .media-grid
mabalin nga ania man a kadakkel, ngem dagitoy ket kasayaatan nga agtrabaho no direkta a maimapa iti naibangon a sistema ti grid ti Bootstrap. Dagiti kalawa ti ladawan a kas ti 90, 210, ken 330 ket agtipon kadagiti sumagmamano a pixel ti padding tapno agpapada dagiti kadakkel ti .span2
, .span4
, ken .span6
adigi.
Nalaka nga usaren dagiti media grid ken imbes ketdi simple iti markup side. Dagiti rukodda ket puro a naibatay iti kadakkel dagiti ladawan a nairaman.
- <ul klase = "midia-grid" >
- <li> nga
- <a href = "#" >
- <img class = "pabassit a ladawan" src = "https://lugar.it/330x230" alt = "" >
- </a>
- </li>
- <li> nga
- <a href = "#" >
- <img class = "pabassit a ladawan" src = "https://lugar.it/330x230" alt = "" >
- </a>
- </li>
- </ul>
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Nasayaat dagiti lamisaan—para iti adu a banag. Dagiti naindaklan a lamisaan, nupay kasta, kasapulanda ti sangkabassit a panagayat ti panagmarka tapno makatulong, maipadakkel, ken mabasa (iti lebel ti kodigo). Adtoy ti sumagmamano a tips a makatulong.
Kanayon a baluten dagiti ulo ti kolummo iti <thead>
kastoy a ti hirarkia ket <thead>
> <tr>
> <th>
.
Kasla dagiti ulo ti kolum, amin a linaon ti bagi ti lamisaanmo ket rumbeng a nabalkot iti maysa <tbody>
isu a ti hirarkiam ket <tbody>
> <tr>
> <td>
.
Amin a lamisaan ket automatiko nga estilo nga addaan laeng kadagiti nasken a beddeng tapno masigurado ti pannakabasa ken mataginayon ti estruktura. Saan a kasapulan ti mangnayon kadagiti ekstra a klase wenno attribute.
# | Nagan | Apelyido | Lengguahe |
---|---|---|---|
1 nga | Sumagmamano | Maysa | Ingles |
2. 2 | Joe nga | Sixpack nga | Ingles |
3. | Stu nga | Dent nga | Kodigo nga |
- <lamisaan>
- ...
- </table>
Para kadagiti lamisaan a kasapulan ti ad-adu a datos kadagiti naing-ingpis nga espasio, usaren ti condensed flavor a mangputed iti padding iti kagudua. Daytoy ket mabalin pay nga usaren a maikuyog kadagiti beddeng ken dagiti zebra-stripe, a kas met laeng dagiti default nga estilo ti lamisaan.
# | Nagan | Apelyido | Lengguahe |
---|---|---|---|
1 nga | Sumagmamano | Maysa | Ingles |
2. 2 | Joe nga | Sixpack nga | Ingles |
3. | Stu nga | Dent nga | Kodigo nga |
Pagbalinem dagiti lamisaanmo a kasla bassit laeng a nalamuyot babaen ti panangtimbukel kadagiti sulida ken pananginayon kadagiti beddeng iti amin a sikigan.
# | Nagan | Apelyido | Lengguahe |
---|---|---|---|
1 nga | Sumagmamano | Maysa | Ingles |
2. 2 | Joe nga | Sixpack nga | Ingles |
3. | Stu nga | Dent nga | Kodigo nga |
- < klase ti lamisaan = "nabeddengan-a-lamisaan" >
- ...
- </table>
Agbalinka a magarbo bassit kadagiti lamisaanmo babaen ti pananginayon iti zebra-striping—inayonmo laeng ti .zebra-striped
klase.
# | Nagan | Apelyido | Lengguahe |
---|---|---|---|
1 nga | Sumagmamano | Maysa | Ingles |
2. 2 | Joe nga | Sixpack nga | Ingles |
3. | Stu nga | Dent nga | Kodigo nga |
span 4 nga adigi | |||
span 2 nga adigi | span 2 nga adigi |
Pakaammo: Ti Zebra-striping ket maysa a progresibo a panagpasayaat a saan a magun-od para kadagiti daan a browser a kas ti IE8 ken iti baba.
- < klase ti lamisaan = "zebra-striped" >
- ...
- </table>
Iti panangala ti napalabas a pagarigan, pasayaatenmi ti pakausaran dagiti lamisaanmi babaen ti panangipaay ti panagusar ti panagurnos babaen ti jQuery ken ti plugin ti Tablesorter . I-click ti header ti ania man a kolum tapno baliwan ti panagurnos.
# | Nagan | Apelyido | Lengguahe |
---|---|---|---|
2. 2 | Joe nga | Sixpack nga | Ingles |
3. | Stu nga | Dent nga | Kodigo nga |
1 nga | Bukod mo | Maysa | Ingles |
- <script src = "js/jsaludsod/jsaludsod.tablesorter.min.js" ></script>
- <iskrip >
- $ ( trabaho () { .
- $ ( "table#sortPagarigan ti Lamisaan" ). tablesorter ({ Listaan ti panagurnos : [[ 1 , 0 ]] });
- });
- </script>
- < klase ti lamisaan = "zebra-striped" >
- ...
- </table>
Amin a porma ket naikkan kadagiti default nga estilo tapno maipresenta dagitoy iti mabasa ken maipadakkel a wagas. Dagiti estilo ket naited para kadagiti panagserrek ti teksto, dagiti listaan ti panagpili, dagiti lugar ti teksto, dagiti buton ti radio ken dagiti kahon ti tsek, ken dagiti buton.
Inayonmo .form-stacked
iti HTML ti pormam ket maaddaanka kadagiti etiketa iti rabaw dagiti tay-akda imbes nga iti kannigidda. Daytoy ket agtrabaho a nasayaat no dagiti pormam ket ababa wenno addaanka iti dua a kolum dagiti input para kadagiti nadagdagsen a porma.
Ipasayaat ti ania man a porma input
, select
, wenno textarea
kalawa babaen ti pananginayon laeng iti sumagmamano a klase iti markup-mo.
Manipud iti v1.3.0, innayonmi dagiti grid-based a klase ti panagdakkel para kadagiti elemento ti porma. Pangngaasi nga usaren dagiti dagitoy iti rabaw dagiti addan a .mini
, .small
, etc a klase.
Kas maysa a konbension, dagiti buton ket maus-usar para kadagiti tignay bayat a dagiti silpo ket maus-usar para kadagiti banag. Kas pagarigan, ti "I-download" ket mabalin a maysa a buton ken ti "nabiit pay nga aktibidad" ket mabalin a maysa a silpo.
Amin a buton ket agdefault iti nalawag nga abuabu nga estilo, ngem ti bilang dagiti klase ti panagandar ket mabalin a mayaplikar para kadagiti nadumaduma nga estilo ti kolor. Dagitoy a klase iramanna ti maysa nga asul a .primary
klase, maysa a nalawag-asul a .info
klase, maysa a berde a .success
klase, ken maysa a nalabaga a .danger
klase.
Mabalin nga iyaplikar dagiti estilo ti buton iti aniaman nga addaan iti .btn
naipakat. Gagangay a kayatmo nga iyaplikar dagitoy kadagiti laeng <a>
, , ken dagiti elemento a <button>
mangpili . <input>
Kastoy ti langana:
Magarbo a dakdakkel wenno babbabassit a butones? Adda koma iti dayta!
Para kadagiti buton a saan nga aktibo wenno baldado ti app gapu iti maysa wenno sabali a rason, usarem ti disabled state. Dayta ket .disabled
para kadagiti silpo ken :disabled
para kadagiti <button>
elemento.
.alert-message
Dagiti maysa a linia a mensahe para iti panangitampok iti pannakapaay, posible a pannakapaay, wenno balligi ti maysa nga aramid. Nangnangruna a makatulong kadagiti porma.
- <div class = "pakdaar ti mensahe-alerto" >
- <a klase = "serraan" href = "#" > × </a>
- <p><strong> Nasantuan a guacamole! </strong> Best check yo self, saan ka nga nasayaat unay ti langam. </p>
- </div>
.alert-message.block-message
Para kadagiti mensahe a kasapulan ti sangkabassit a panangilawlawag, addaantayo kadagiti alerto ti estilo ti parapo. Dagitoy ket perpekto para iti panagbubbling kadagiti at-atiddog a mensahe ti biddut, mangpakdaar iti maysa nga agar-aramat iti maysa a nakasagana nga aramid, wenno basta panangidatag ti impormasion para iti ad-adu a panangipaganetget iti panid.
- <div class = "pakdaar ti bloke-mensahe ti alerto-mensahe" >
- <a klase = "serraan" href = "#" > × </a>
- <p><strong> Nasantuan a guacamole! Pakdaar daytoy! </strong> Best check yo self, saan ka nga nasayaat unay ti langam. Nulla vitae elit libero, maysa a pharetra nga augue. Praesent a komodo a kursus magna, vel scelerisko a nisl a consectetur ken. </p>
- <div class = "dagiti-aramid-alerto" >
- <a class = "btn bassit" href = "#" > Alaen daytoy nga aramid </a> <a class = "btn bassit" href = "#" > Wenno aramiden daytoy </a>
- </div>
- </div>
Dagiti modal—dagiti dialogo wenno dagiti lightbox—ket nasayaat para kadagiti konteksto a panagtignay kadagiti kasasaad a napateg a mataginayon ti konteksto ti likudan.
Maysa a napino a bagi...
Dagiti Twipsies ket super makatulong para iti panangtulong iti maysa a nariribuk nga agus-usar ken panangiturong kadakuada iti umno a direksion.
Lorem ipsum dolar sit amet illo biddut ipsum veritatis aut isiste perspiciatis iste voluptas natus illo quasi odit aut natus a pagbanagan, 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 arkitekto eksplicabo agtugaw a kasla agtalaw, totam doloremque unde sunt sed dikta quae akusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae.
Usaren dagiti popovers tapno mangipaay ti subtekstual nga impormasion iti maysa a panid a saan a mangapektar iti layout.
Etiam porta sem malesuada nga agtagibalay nga euismod. Maecenas nga faucibus nga mollis nga interdum. Morbi leo risus, porta ac consectetur ac, vestibulum iti eros.
Ti panangikapet ti javascript iti Bootstrap library ket super nalaka. Iti baba ket mapankami kadagiti kangrunaan ken mangipaay kenka iti sumagmamano a nakaam-amak a plugin tapno mangrugika!
Iyeg ti sumagmamano kadagiti kangrunaan a paset ti Bootstrap iti biag babaen dagiti baro a kostumbre a plugin nga agtrabaho iti jQuery ken Ender . Paregtaenmikayo a mangpalawa ken mangbalbaliw kadagitoy tapno maibagay kadagiti espesipiko a kasapulanyo iti panagdur-as.
Urnosen | Panangiladawan |
---|---|
bootstrap-modal.js nga bootstrap | Ti Modal plugin mi ket maysa a super slim nga alaen ti tradisional a modal js plugin! Inaramidmi ti naisangsangayan a panangaywan tapno iramanmi laeng ti lamolamo a panagandar a kasapulanmi iti twitter. |
bootstrap-dagiti alerto.js | Ti plugin ti alerto ket maysa a super bassit a klase para iti pananginayon ti asideg a panagusar kadagiti alerto. |
bootstrap-a-panagbaba.js | Daytoy a plugin ket para iti pananginayon ti dropdown a panagtitinnulong iti bootstrap topbar wenno dagiti tabbed a nabigasion. |
bootstrap-ag-scrollspy.js nga bootstrap | Ti plugin ti ScrollSpy ket para iti pananginayon ti auto updating nav a naibatay iti posision ti panag-scroll iti bootstrap topbar. |
bootstrap-dagiti buton.js | Ti plugin ti ScrollSpy ket para iti pananginayon ti auto updating nav a naibatay iti posision ti panag-scroll iti bootstrap topbar. |
bootstrap-dagiti tabs.js | Daytoy a plugin ket manginayon ti napardas, dinamiko a panagandar ti tab ken pildoras para iti panagbisikleta babaen ti lokal a linaon. |
bootstrap-twipsy.js nga bootstrap | Maibatay iti nagsayaat a jQuery.tipsy plugin nga insurat ni Jason Frame; Ti twipsy ket maysa a napabaro a bersion, a saan nga agpannuray kadagiti ladawan, agus-usar ti css3 para kadagiti animasion, ken dagiti data-attribute para iti lokal a pagipempenan ti paulo! |
bootstrap-popover.js nga bootstrap | Ti popover plugin ket mangipaay ti simple nga interface para iti pananginayon kadagiti popovers iti aplikasionmo. Daytoy ket mangpalawa ti boostrap-twipsy.js a plugin, isu a siguraduem a mangala met iti dayta a file no iraman dagiti popovers iti proyektom! |
Saan! Ti Bootstrap ket nadisenio nga umuna ken kangrunaan nga agbalin a maysa a biblioteka ti CSS. Daytoy a javascript ket mangipaay ti batayan nga interaktibo a suson iti rabaw dagiti nairaman nga estilo.
Nupay kasta, para kadagidiay agkasapulan iti javascript, intedmi dagiti plugin iti ngato tapno matulongannaka a makaawat no kasano nga isilpo ti Bootstrap iti javascript ken tapno maited kenka ti napardas, nalag-an a pagpilian para iti kangrunaan a panagandar a dagus.
Para iti ad-adu pay nga impormasion ken tapno makita ti sumagmamano a sibibiag a demo, pangngaasi a kitaen ti panid ti dokumentasion ti pluginmi .
Ti Bootstrap ket naibangon manipud iti Preboot , ti maysa nga open-source a pakete dagiti mixin ken dagiti variable a mausar a maikuyog iti Less , ti maysa a CSS a preprosesor para iti naparpartak ken nalaklaka a panagrang-ay ti web.
Kitaen no kasano nga inusarmi ti Preboot iti Bootstrap ken no kasano a mausarmo daytoy no piliem nga ipatarayen ti Less iti sumaruno a proyektom.
Usaren daytoy a pagpilian tapno naan-anay nga usaren dagiti Less variables, mixins, ken panagumok ti Bootstrap iti CSS babaen ti javascript iti browsermo.
- <link rel = "estilo a panid/basbassit" href = "basbassit/bootstrap.basbassit" media = "amin" />
- <script src = "js/basbassit-1.1.3.min.js" ></script>
Saan kadi a marikna ti .js a solusion? Padasem ti Less Mac app wenno usarem ti Node.js tapno ag-compile no i-deploy-mo ti code-mo.
Adtoy ti sumagmamano kadagiti highlights ti nairaman iti Twitter Bootstrap kas paset ti Bootstrap. Agturongka iti website ti Bootstrap wenno panid ti proyekto ti Github tapno mai-download ken maammuan ti ad-adu pay.
Dagiti variable iti Less ket perpekto para iti panangmantener ken panangpabaro iti CSS headache free. No kayatmo a baliwan ti pateg ti kolor wenno masansan a maus-usar a pateg, i-update dayta iti maysa a lugar ket naikabilka.
- // Dagiti silpo
- @silpo nga Kolor : # 8b59c2;
- @linkColorHover : agsipnget ( @Kolor ti silpo , 10 );
- // Dagiti abuabu
- @nangisit : # 000;
- @grayDark : palag-an ( @nangisit , 25 %);
- @gray : palag-an ( @itim , 50 %);
- @grayLight : palag-an ( @itim , 70 %);
- @grayLighter : palag-an ( @nangisit , 90 %);
- @puraw : #fff;
- // Dagiti Kolor ti Aksento
- @asul nga : # 08b5fb;
- @berde nga : # 46a546;
- @nalabaga : # 9d261d;
- @duyaw : # ffc40d nga;
- @ kahel : # f89406 nga;
- @rosas nga : # c3325f;
- @lila nga : # 7a43b6;
- // Grid ti batayan
- @base nga letra : 13px ;
- @baseline : 18px nga ;
Ti Less ket mangipaay pay ti sabali nga estilo ti panagkomento malaksid ti gagangay a /* ... */
sintaksis ti CSS.
- // Daytoy ket maysa a komento
- /* Daytoy met ti komento */
Dagiti mixin ket kangrunaan a mairaman wenno dagiti paset para iti CSS, a mangipalubos kenka a mangtipon ti maysa a bloke ti kodigo iti maysa. Nasayaat dagitoy para kadagiti tagikua ti prefixed ti aglaklako a kas ti box-shadow
, cross-browser gradients, font stacks, ken dadduma pay. Iti baba ket ti sample dagiti mixins a nairaman iti Bootstrap.
- # nga letra { .
- . shorthand ( @timbang : normal , @kadakkel : 14px , @lineHeight : 20px ) {
- kadakkel ti letra : @size ;
- font - timbang : @timbang ;
- kangato ti linia : @lineHeight ;
- } nga
- . sans - serif ( @timbang : normal , @kadakkel : 14px , @lineHeight : 20px ) {
- pamilia ti letra : " Helvetica Neue" , Helvetica , Arial , sans - serif ;
- kadakkel ti letra : @size ;
- font - timbang : @timbang ;
- kangato ti linia : @lineHeight ;
- } nga
- ...
- } nga
- #gradient nga { .
- ...
- . bertikal ( @Kolor ti pangrugian : # 555, @Kolor ti panagpatingga: # 333) {
- kolor ti likudan : @endColor ;
- background - ulit : ulit - x ;
- background - image : - khtml - gradient ( linear , kannigid nga ngato , kannigid nga baba , manipud iti ( @startColor ), agingga iti ( @endColor )); // Konqueror nga
- likudan - ladawan : -moz - linear - gradient ( @mangrugi a Kolor , @patingga a Kolor ); // FF nga 3.6+
- background - imahe : - ms - linear - gradient ( @mangrugi nga Kolor , @ ngudo nga Kolor ); // IE10 nga
- likudan - ladawan : - webkit - gradient ( linear , kannigid nga ngato , kannigid nga baba , kolor - panagsardeng ( 0 %, @startColor ), kolor - panagsardeng ( 100 %, @endColor )); // Safari nga 4+, Kromo 2+
- likudan - ladawan : - webkit - linear - gradient ( @mangrugi nga Kolor , @ ngudo nga Kolor ); // Safari nga 5.1+, Kromo nga 10+
- background - imahe : - o - linear - gradient ( @mangrugi nga Kolor , @ ngudo nga Kolor ); // Opera nga 11.10
- background - imahe : linear - gradient ( @mangrugi nga Kolor , @ ngudo nga Kolor ); // Ti pagalagadan
- } nga
- ...
- } nga
Agbalinka a magarbo ken mangaramid iti sumagmamano a matematika tapno makapataud kadagiti nalaka a maibagay ken nabileg a mixin a kas iti adda iti baba.
- // Griditude nga
- @gridDagiti Kolum : 16 ;
- @gridKalawa ti Kolum : 40px ;
- @gridKalawa ti Kanal : 20px ;
- @siteWidth : ( @gridColumns * @gridAlawa ti kolum ) + ( @gridGutterWidth * ( @gridKolum - 1 ));
- // Mangaramid ti sumagmamano a kolum
- . dagiti kolum ( @columnSpan : 1 ) { .
- width : ( @gridKlawa ti Kolum * @KolumnSpan ) + ( @gridGutterWidth * ( @KolumnSpan - 1 ));
- } nga
Kalpasan ti panangbalbaliw kadagiti .less
papeles iti /lib/, kasapulam a pagtitiponen manen dagitoy tapno mapabaro dagiti papeles ti bootstrap-*.*.*.css ken bootstrap-*.*.*.min.css. No mangisubmitir ka ti kiddaw ti panagguyod iti GitHub, masapul a kanayon nga ag-recompile ka.
Wagas | Addang nga addang |
---|---|
Nodo nga addaan iti makefile | I-install ti less command line compiler nga addaan iti npm babaen ti panangipataray ti sumaganad a bilin: $ npm i-install ti lessc Apaman a nai-install ket agtarayka laeng Mainayon pay, no addaanka iti watchr a naikabil, mabalinmo ti agtaray |
Javascript nga isurat | I-download ti kaudian a Less.js ken iraman ti dalan nga agturong iti dayta (ken Bootstrap) iti
Tapno maurnong manen dagiti .less a file, i-save laeng dagitoy ken ikarga manen ti panidmo. Ti Less.js ket mangtipon kadagitoy ken mangidulin kadagitoy iti lokal a pagipempenan. |
Linya ti bilin | No addaankayon iti less command line tool a naikabil, basta ipatarayen ti sumaganad a bilin: $ basbassitc ./lib/bootstrap.less > bootstrap.css Siguraduenyo nga iraman |
Basbassit ti Mac app | Ti saan nga opisial a Mac app ket mangbuybuya kadagiti direktorio dagiti .less a file ken mangtipon iti kodigo kadagiti lokal a file kalpasan ti tunggal panagidulin ti nabuya a .less a file. No kayatmo, mabalinmo nga i-toggle dagiti preferences iti app para iti automatic minifying ken no ania a direktorio ti pagtungpalan dagiti naurnong a file. |