Ka yi la'akari da abin da ake kira euismod. Maecenas faucibus mollis interdum. Morbi leo risus, portac consectetur ac, vestibulum da eros.
Bootstrap kayan aiki ne daga Twitter wanda aka ƙera don fara haɓaka ayyukan yanar gizo da shafuka.
Ya haɗa da tushe CSS da HTML don rubutu, fom, maɓalli, teburi, grid, kewayawa, da ƙari.
Jijjiga Nerd: An gina Bootstrap tare da Ƙananan kuma an tsara shi don yin aiki daga ƙofar tare da masu bincike na zamani.
Don farawa mafi sauri da sauƙi, kawai kwafi wannan snippet cikin shafin yanar gizon ku.
Mai son amfani kaɗan? Babu matsala, kawai rufe repo kuma ƙara waɗannan layukan:
Zazzage, cokali mai yatsa, ja, batutuwan fayil, da ƙari tare da aikin Bootstrap repo akan Github.
A halin yanzu v1.3.0
Injiniyoyin Twitter a tarihi sun yi amfani da kusan kowane ɗakin karatu da suka saba da shi don biyan buƙatun gaba. Bootstrap ya fara a matsayin amsa ga ƙalubalen da aka gabatar. Tare da taimakon mutane masu ban mamaki da yawa, Bootstrap ya girma sosai.
Kara karantawa akan dev.twitter.com ›
Ana gwada Bootstrap kuma ana goyan bayan manyan masu bincike na zamani kamar Chrome, Safari, Internet Explorer, da Firefox.
Bootstrap ya zo cikakke tare da haɗaɗɗen CSS, waɗanda ba a tattara ba, da samfuran misali.
Tsohuwar tsarin grid da aka bayar azaman ɓangare na Bootstrap shine grid mai faɗin 940px 16. Yana da ɗanɗano na mashahurin tsarin grid 960, amma ba tare da ƙarin gefe/padding a gefen hagu da dama ba.
Kamar yadda aka nuna a nan, za a iya ƙirƙira wani tsari na asali tare da "ginshiƙai" guda biyu, kowanne ya faɗi adadin ginshiƙai 16 da muka ayyana a matsayin wani ɓangare na tsarin grid ɗin mu. Dubi misalan da ke ƙasa don ƙarin bambancin.
- <div class = "jere" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
Nesa abun cikin ku idan dole ne ku ƙirƙira .row
a cikin ginshiƙi mai wanzuwa.
- <div class = "jere" >
- <div class = "span12" >
- Mataki na 1 na shafi
- <div class = "jere" >
- <div class = "span6" >
- Mataki na 2
- </div>
- <div class = "span6" >
- Mataki na 2
- </div>
- </div>
- </div>
- </div>
Gina cikin Bootstrap kaɗan ne na masu canji don keɓance tsoffin tsarin grid 940px. Tare da ɗan gyare-gyare, zaku iya canza girman ginshiƙai, magudanar ruwa, da kwandon da suke zaune a ciki.
Masu canji da ake buƙata don gyara tsarin grid a halin yanzu duk suna cikin variables.less
.
Mai canzawa | Ƙimar ta asali | Bayani |
---|---|---|
@gridColumns |
16 | Adadin ginshiƙai a cikin grid |
@gridColumnWidth |
40px ku | Faɗin kowane ginshiƙi a cikin grid |
@gridGutterWidth |
20px ku | Wuri mara kyau tsakanin kowane shafi |
@siteWidth |
Ƙididdigar ƙididdiga na duk ginshiƙai da gutters | Muna amfani da wasu matches na asali don ƙidaya adadin ginshiƙai da gutters kuma saita faɗin .fixed-container() mahaɗin. |
Gyara grid yana nufin canza masu @grid-*
canji guda uku da sake tattara Ƙananan fayiloli.
Bootstrap ya zo sanye take don sarrafa tsarin grid mai har zuwa ginshiƙai 24; tsoho shine kawai 16. Anan ga yadda masu canjin grid ɗinku zasu yi kama da grid mai shafi 24.
- @gridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
Da zarar an sake tattarawa, za a saita ku!
Tsohuwar kuma mai sauƙi 940px-fadi, shimfidar wuri na tsakiya don kusan kowane gidan yanar gizo ko shafi da aka samar ta guda <div.container>
.
- <jiki>
- <div class = "kwantena" >
- ...
- </div>
- </ jiki>
Madadin, tsarin shafi mai sassauƙa mai sassauƙa tare da min- da max-fasa da mashigin gefen hagu. Mafi kyau ga apps da docs.
- <jiki>
- <div class = "container-fluid" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "abun ciki" >
- ...
- </div>
- </div>
- </ jiki>
Madaidaicin matsayi na rubutu don tsara shafukan yanar gizonku.
Gabaɗayan grid ɗin rubutun ya dogara ne akan ƙananan masu canji guda biyu a cikin masu canjin mu.Fayil maras kyau: @basefont
da@baseline
. Na farko shine girman font-girman da aka yi amfani da shi duka kuma na biyu shine tsayin layin tushe.
Muna amfani da waɗancan sauye-sauye, da wasu maths, don ƙirƙira margins, paddings, da tsayin layi na kowane nau'in mu da ƙari.
Nullam quis risus eget urna mollis ornare vel eu leo. Duk da haka, muna magana ne game da abin ban dariya da kuma ban mamaki. Nullam id dolor id nibh ultricies vehicula ut id elit.
Amfani da girmamawa, adireshi, & gajarta
<strong>
<em>
<address>
<abbr>
Ya kamata a yi amfani da alamun girmamawa ( <strong>
da <em>
) don nuna ƙarin mahimmanci ko jaddada kalma ko jumla dangane da kwafinta na kewaye. Yi amfani <strong>
da mahimmanci <em>
da damuwa .
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.
Lura: Har yanzu yana da kyau a yi amfani <b>
da <i>
alama a cikin HTML5 kuma ba dole ba ne a yi musu salo mai ƙarfi da rubutu ba, bi da bi (ko da yake idan akwai ƙarin ma'anar ma'anar, yi amfani da shi). <b>
ana nufin haskaka kalmomi ko jimloli ba tare da isar da ƙarin mahimmanci ba, yayin da<i>
da galibin murya ne, kalmomin fasaha, da sauransu.
Ana <address>
amfani da kashi don bayanin tuntuɓar kakansa na kusa, ko duka jikin aikin. Ga misalai guda biyu na yadda za a iya amfani da shi:
Lura: Kowane layi a cikin <address>
dole ne ya ƙare tare da karya-layi ( <br />
) ko a naɗe shi cikin alamar toshewa (misali, <p>
) don tsara abun ciki yadda ya kamata.
Don gajartawa da gajarta, yi amfani da <abbr>
tag ( <acronym>
an soke shi a cikin HTML5 ). Saka fom ɗin gajeriyar hannu a cikin alamar kuma saita take don cikakken suna.
<blockquote>
<p>
<small>
Don haɗa da blockquote, kunsa <blockquote>
kusa <p>
da <small>
alama. Yi amfani da <small>
kashi don faɗi tushen ku kuma za ku sami dash —
a gabansa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Dokta Julius Hibbert
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
- <small> Dr. Julius Hibbert </small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
Sanya lambar ku a cikin salo tare da alamun sauƙaƙan guda biyu. Don ƙarin ban mamaki ta hanyar javascript, je zuwa ɗakin karatu mai kyau na lambar Google kuma an saita ku.
Lambar, tubalan ko snippets na layi, ana iya nunawa tare da salo kawai ta hanyar nannade cikin alamar dama. Don tubalan lambar da ke faɗin layi ɗaya, yi amfani da <pre>
kashi. Don lambar layi, yi amfani da <code>
kashi.
Abun ciki | Sakamako |
---|---|
<code> |
A cikin layin rubutu kamar wannan, lambar da aka naɗe za ta yi kama da wannan <html> kashi. |
<pre> |
<div> <h1>Jigo </h1> <p>Wani abu a nan...</p> </div> Lura: Tabbatar kiyaye lamba a cikin |
<pre class="prettyprint"> |
Yin amfani da ɗakin karatu na google-code-prettify, tubalan lambar ku suna samun ɗan salo na gani daban-daban da nuna alama ta atomatik. <div> <h1> Take </h1> <p> Wani abu a nan... </p> </div> Zazzage google-code-prettify kuma duba readme don yadda ake amfani da su. |
<span class="label">
Kira hankali ga ko ba da alama ga kowane jumla a cikin rubutun jikin ku.
Ya taɓa buƙatar ɗaya daga cikin sabbin sabbin abubuwan ban sha'awa! ko Tutoci masu mahimmanci lokacin rubuta lamba? To, yanzu kuna da su. Ga abin da aka haɗa ta tsohuwa:
Lakabi | Sakamako |
---|---|
<span class="label">Default</span> |
Tsohuwar |
<span class="label success">New</span> |
Sabo |
<span class="label warning">Warning</span> |
Gargadi |
<span class="label important">Important</span> |
Muhimmanci |
<span class="label notice">Notice</span> |
Sanarwa |
Nuna manyan hotuna masu girma dabam a shafuka masu ƙarancin sawun HTML da ƙananan salo.
Thumbnails a cikin na .media-grid
iya zama kowane girman, amma suna aiki mafi kyau idan aka tsara taswirar kai tsaye zuwa tsarin grid na Bootstrap. Faɗin hoto kamar 90, 210, da 330 suna haɗuwa tare da ƴan pixels na padding don daidaita girman .span2
, .span4
, da .span6
girman shafi.
Rukunin kafofin watsa labarai suna da sauƙin amfani kuma suna da sauƙi a gefen alama. Girman su ya dogara ne kawai akan girman hotunan da aka haɗa.
- <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>
Tables suna da kyau-don abubuwa da yawa. Manyan teburi, duk da haka, suna buƙatar ɗan ƙaƙƙarfan soyayya don zama mai amfani, daidaitacce, da abin karantawa (a matakin lambar). Anan akwai 'yan shawarwari don taimakawa.
Koyaushe ku nannade rubutun ku a cikin <thead>
irin wannan matsayi shine <thead>
> <tr>
> <th>
.
Hakazalika da rubutun kan layi, duk abubuwan da ke cikin teburin ku yakamata a nannade su cikin ta <tbody>
yadda tsarinku ya kasance <tbody>
> <tr>
> <td>
.
Duk teburi za a tsara su ta atomatik tare da mahimman iyakoki kawai don tabbatar da karantawa da kiyaye tsari. Babu buƙatar ƙara ƙarin azuzuwan ko halaye.
# | Sunan rana | Sunan mahaifa | Harshe |
---|---|---|---|
1 | Wasu | Daya | Turanci |
2 | Joe | Packack | Turanci |
3 | Stu | Haushi | Lambar |
- <tebur>
- ...
- </text>
Don allunan da ke buƙatar ƙarin bayanai a cikin wurare masu maƙarƙashiya, yi amfani da ɗanɗanon ɗanɗano wanda ke yanke padding cikin rabi. Hakanan za'a iya amfani dashi tare da iyakoki da ratsin zebra, kamar yadda tsarin tebur na tsoho.
# | Sunan rana | Sunan mahaifa | Harshe |
---|---|---|---|
1 | Wasu | Daya | Turanci |
2 | Joe | Packack | Turanci |
3 | Stu | Haushi | Lambar |
Sanya tebur ɗinku su yi kama da ɗan santsi ta hanyar zagaye sasanninta da ƙara iyakoki a kowane bangare.
# | Sunan rana | Sunan mahaifa | Harshe |
---|---|---|---|
1 | Wasu | Daya | Turanci |
2 | Joe | Packack | Turanci |
3 | Stu | Haushi | Lambar |
- < class class = "bordered-tebur" >
- ...
- </text>
Samun ɗan zato tare da tebur ɗinku ta ƙara zakin zebra - ƙara .zebra-striped
aji kawai.
# | Sunan rana | Sunan mahaifa | Harshe |
---|---|---|---|
1 | Wasu | Daya | Turanci |
2 | Joe | Packack | Turanci |
3 | Stu | Haushi | Lambar |
tsawon ginshiƙai 4 | |||
tsawon ginshiƙai 2 | tsawon ginshiƙai 2 |
Lura: Zebra-striping shine haɓakawa na ci gaba da ba samuwa ga tsofaffin masu bincike kamar IE8 da ƙasa.
- < class class = "zebra-striped" >
- ...
- </text>
Ɗaukar misalin da ya gabata, muna inganta fa'idar teburin mu ta hanyar samar da aikin rarrabawa ta hanyar jQuery da plugin ɗin Tablesorter . Danna kowane ginshiƙi don canza nau'in.
# | Sunan rana | Sunan mahaifa | Harshe |
---|---|---|---|
2 | Joe | Packack | Turanci |
3 | Stu | Haushi | Lambar |
1 | Naku | Daya | Turanci |
- <script src = "js/jquery/jquery.tablesorter.min.js" > </script>
- <rubutu >
- $ ( aiki () {
- $ ( "tebur# sortTableExample" ). tablesorter ({ irinList : [[ 1 , 0 ]]] );
- });
- </script>
- < class class = "zebra-striped" >
- ...
- </text>
Ana ba da kowane nau'i nau'i na asali don gabatar da su a cikin hanyar da za a iya karantawa da kuma daidaitawa. An ba da salo don shigar da rubutu, zaɓi lissafin, wuraren rubutu, maɓallan rediyo da akwatunan rajista, da maɓalli.
Ƙara .form-stacked
zuwa HTML na fom ɗin ku kuma za ku sami lakabi a saman filayen su maimakon hagu. Wannan yana aiki da kyau idan fom ɗinku gajeru ne ko kuna da ginshiƙai biyu na abubuwan shigar da sifofi masu nauyi.
Keɓance kowane nau'i input
, select
, ko textarea
faɗi ta ƙara ƴan azuzuwan zuwa alamarku.
Tun daga v1.3.0, mun ƙara azuzuwan ma'auni na tushen grid don nau'ikan abubuwa. Da fatan za a yi amfani da waɗannan akan azuzuwan da suke .mini
, .small
, da sauransu.
A matsayin al'ada, ana amfani da maɓalli don ayyuka yayin da ake amfani da hanyoyin haɗin gwiwa don abubuwa. Misali, "Zazzagewa" na iya zama maɓalli kuma "aikin kwanan nan" na iya zama hanyar haɗi.
Duk maɓallai sun saba zuwa salon launin toka mai haske, amma ana iya amfani da nau'ikan azuzuwan aiki don nau'ikan launi daban-daban. Waɗannan azuzuwan sun haɗa da ajin shuɗi .primary
, ajin haske-blue .info
, ajin kore .success
, da kuma jan .danger
aji.
Za a iya amfani da salon maɓalli ga kowane abu tare da abin da aka .btn
yi amfani da shi. Yawanci kuna son amfani da waɗannan zuwa kawai <a>
, <button>
, kuma zaɓi <input>
abubuwa. Ga yadda abin yake:
Kuna son manyan maɓalli ko ƙarami? Ku zo da shi!
Don maɓallan da ba su aiki ko ƙa'idar ta kashe su saboda dalili ɗaya ko wani, yi amfani da yanayin nakasa. Wato .disabled
don haɗin kai da :disabled
abubuwan <button>
abubuwa.
.alert-message
Saƙonnin layi ɗaya don nuna gazawa, yuwuwar gazawa, ko nasarar aiki. Musamman amfani ga siffofin.
- <div class = "gargadin saƙon faɗakarwa" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Guacamole mai tsarki! Mafi kyawun duba yo kai, ba ka da kyau sosai. </p>
- </div>
.alert-message.block-message
Don saƙonnin da ke buƙatar ɗan bayani, muna da faɗakarwar salon sakin layi. Waɗannan cikakke ne don busa saƙonnin kuskure masu tsayi, gargaɗin mai amfani da wani mataki na jiran aiki, ko gabatar da bayanai kawai don ƙarin girmamawa akan shafin.
- <div class = "gargadin-saƙon toshe-saƙon faɗakarwa" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Guacamole mai tsarki! Wannan gargadi ne! Mafi kyawun duba yo kai, ba ka da kyau sosai. Nulla vitae elit libero, a pharetra augue. Abubuwan da suka dace da cursus magna, velsselerisque nisl consectetur et. </p>
- <div class = "ayyukan faɗakarwa" >
- <a class = "btn small" href = "#" > Ɗauki wannan mataki </a> <a class = "btn small" href = "#" > Ko yi wannan </a>
- </div>
- </div>
Modals — maganganu ko akwatunan haske — suna da kyau don ayyukan mahallin a cikin yanayi inda yana da mahimmanci a kiyaye mahallin baya.
Jiki mai kyau…
Twipsies suna da fa'ida sosai don taimaka wa mai amfani da ya ruɗe da nuna su ta hanya madaidaiciya.
Lorem ipsum dolar sit amet illo error ipsum veritatis aut 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 ne voluptam veruptam .
Yi amfani da popovers don samar da bayanan rubutu zuwa shafi ba tare da shafar shimfidar wuri ba.
Ka yi la'akari da abin da ake kira euismod. Maecenas faucibus mollis interdum. Morbi leo risus, portac consectetur ac, vestibulum da eros.
Haɗa javascript tare da ɗakin karatu na Bootstrap abu ne mai sauqi sosai. A ƙasa mun wuce abubuwan yau da kullun kuma muna samar muku da wasu abubuwan plugins masu ban sha'awa don farawa!
Kawo wasu abubuwan farko na Bootstrap zuwa rayuwa tare da sabbin plugins na al'ada waɗanda ke aiki tare da jQuery da Ender . Muna ƙarfafa ku don ƙarawa da gyara su don dacewa da takamaiman bukatun ku na ci gaba.
Fayil | Bayani |
---|---|
bootstrap-modal.js | Modal plugin ɗin mu shine babban slim ɗauka akan kayan aikin modal js na gargajiya! Mun ba da kulawa ta musamman don haɗa kawai ayyukan da muke buƙata a twitter. |
faɗakarwar bootstrap.js | Plugin faɗakarwa babban ƙaramin aji ne don ƙara ayyuka na kusa zuwa faɗakarwa. |
bootstrap-dropdown.js | Wannan plugin ɗin shine don ƙara hulɗar zazzagewa zuwa mashaya na bootstrap ko kewayawa da aka buga. |
bootstrap-scrollspy.js | The ScrollSpy plugin shine don ƙara nav mai ɗaukakawa ta atomatik dangane da matsayin gungurawa zuwa saman sandar bootstrap. |
bootstrap-buttons.js | The ScrollSpy plugin shine don ƙara nav mai ɗaukakawa ta atomatik dangane da matsayin gungurawa zuwa saman sandar bootstrap. |
bootstrap-tabs.js | Wannan plugin ɗin yana ƙara sauri, shafi mai ƙarfi da aikin kwaya don yin keke ta hanyar abun ciki na gida. |
bootstrap-twipsy.js | Dangane da kyakkyawan jQuery.tipsy plugin wanda Jason Frame ya rubuta; twipsy wani sigar da aka sabunta ne, wanda baya dogaro da hotuna, yana amfani da css3 don rayarwa, da sifofin bayanai don ajiyar taken gida! |
bootstrap-popover.js | Plugin ɗin popover yana ba da sauƙi mai sauƙi don ƙara popovers zuwa aikace-aikacen ku. Yana haɓaka plugin ɗin boostrap-twipsy.js , don haka tabbatar da ɗaukar wannan fayil ɗin kuma lokacin haɗawa da fa'ida a cikin aikin ku! |
A'a! An tsara Bootstrap da farko don zama ɗakin karatu na CSS. Wannan javascript yana ba da tushe na mu'amala na asali a saman salon da aka haɗa.
Koyaya, ga waɗanda suke buƙatar javascript, mun samar da plugins ɗin da ke sama don taimaka muku fahimtar yadda ake haɗa Bootstrap tare da javascript kuma don ba ku zaɓi mai sauri, mara nauyi don ainihin aikin nan take.
Don ƙarin bayani da don ganin wasu nunin raye-raye, da fatan za a koma zuwa shafin takaddun kayan aikin mu .
An gina Bootstrap daga Preboot , buɗaɗɗen tushen fakitin mixins da masu canji da za a yi amfani da su tare da Kadan , mai aiwatar da CSS don ci gaban yanar gizo cikin sauri da sauƙi.
Duba yadda muka yi amfani da Preboot a Bootstrap da kuma yadda za ku iya amfani da shi idan kun zaɓi gudanar da ƙasa akan aikinku na gaba.
Yi amfani da wannan zaɓi don yin cikakken amfani da Bootstrap's Ƙananan masu canji, mixins, da gida a cikin CSS ta hanyar javascript a cikin burauzar ku.
- <link rel = "stylesheet/less" href = "kasa/bootstrap.less" kafofin watsa labarai = "duk" />
- <script src = "js/less-1.1.3.min.js" > </script>
Ba jin maganin .js? Gwada ƙarancin Mac app ko amfani da Node.js don haɗawa lokacin da kuka tura lambar ku.
Anan akwai wasu mahimman abubuwan abubuwan da aka haɗa a cikin Bootstrap na Twitter a matsayin wani ɓangare na Bootstrap. Jeka zuwa gidan yanar gizon Bootstrap ko shafin aikin Github don saukewa da ƙarin koyo.
Maɓalli a Ƙananan sun dace don kiyayewa da sabunta ciwon kai na CSS kyauta. Lokacin da kake son canza ƙimar launi ko ƙimar da ake yawan amfani da ita, sabunta shi a wuri ɗaya kuma an saita ku.
- // Hanyoyin haɗi
- @linkColor : #8b59c2;
- @linkColorHover : duhu ( @linkColor , 10 );
- // Gwarzo
- @baki : #000;
- @grayDark : haske ( @black , 25 %);
- @ launin toka : haske ( @black , 50 %);
- @GreyLight : haske ( @black , 70 %);
- @grayLighter : haske ( @black , 90 %);
- @farar : #ff;
- // Launukan lafazi
- @blue : #08b5fb;
- @ kore : #46a546;
- @ja : #9d261d;
- @rawaya : #ffc40d;
- @orange : #f89406;
- @ruwan ruwa : #c3325f;
- @m : #7a43b6;
- // Gishiri na Baseline
- @bawant : 13px ;
- @batun : 18px ;
Kadan kuma yana ba da wani salon sharhi ban da ma'auni na al'ada na CSS /* ... */
.
- // Wannan sharhi ne
- /* Wannan kuma comment ne */
Mixins sun haɗa da asali ko ɓangarori don CSS, yana ba ku damar haɗa toshe na lamba zuwa ɗaya. Suna da kyau don ƙayyadaddun kaddarorin masu siyarwa kamar box-shadow
, ginshiƙan mai binciken giciye, tarin rubutu, da ƙari. A ƙasa akwai samfurin mixins waɗanda aka haɗa tare da Bootstrap.
- # font {
- . shorthand ( @nauyi : al'ada , @ size : 14px , @lineHeight : 20px ) {
- font - girman : @ size ;
- font - nauyi : @nauyi ;
- layi - tsawo : @lineHeight ;
- }
- . sans - serif ( @weight : al'ada , @ size : 14px , @lineHeight : 20px ) {
- font - iyali : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- font - girman : @ size ;
- font - nauyi : @nauyi ;
- layi - tsawo : @lineHeight ;
- }
- ...
- }
- #gradient {
- ...
- . a tsaye ( @startColor : #555, @endColor: #333) {
- bango - launi : @endColor ;
- baya - maimaita : maimaita - x ;
- baya - hoto : - khtml - gradient ( mikakke , saman hagu , hagu kasa , daga ( @startColor ), zuwa ( @endColor )); // Konqueror
- baya - hoto : - moz - layi - gradient ( @startColor , @endColor ); // FF 3.6+
- baya - hoto : - ms - layi - gradient ( @startColor , @endColor ); // IE10
- baya - hoto : - webkit - gradient ( mikakke , saman hagu , hagu kasa , launi - tsayawa ( 0 % , @startColor ), launi - tsayawa ( 100 % , @endColor )); // Safari 4+, Chrome 2+
- baya - hoto : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- baya - hoto : - o - madaidaiciya - gradient ( @startColor , @endColor ); // Opera 11.10
- baya - hoto : madaidaiciya - gradient ( @startColor , @endColor ); // Ma'auni
- }
- ...
- }
Yi zato kuma yi wasu lissafi don samar da sassauƙa da haɗaɗɗun haɗaɗɗiya kamar na ƙasa.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Yi wasu ginshiƙai
- . ginshiƙai ( @columnSpan : 1 ) {
- nisa : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
Bayan gyaggyara .less
fayilolin a /lib/, za ku buƙaci sake tattara su don sake farfado da bootstrap-*.*.*.css da bootstrap-*.*.*.min.css files. Idan kuna ƙaddamar da buƙatar ja ga GitHub, dole ne ku sake tattarawa koyaushe.
Hanya | Matakai |
---|---|
Node tare da makefile | Shigar da ƙaramin layin umarni tare da npm ta hanyar aiwatar da umarni mai zuwa: $ npm shigar lessc Da zarar an shigar, kawai gudu Bugu da ƙari, idan kun shigar da mai tsaro , za ku iya gudu |
Javascript | Zazzage sabuwar Less.js kuma haɗa hanyar zuwa gare ta (da Bootstrap) a cikin
Don sake tattara fayilolin .ƙasassun, kawai ajiye su kuma sake loda shafinku. Less.js yana tattara su kuma yana adana su a ma'ajiyar gida. |
Layin umarni | Idan kun riga kun shigar da ƙarancin kayan aikin layin umarni, kawai gudanar da umarni mai zuwa: $ lessc ./lib/bootstrap.less > bootstrap.css Tabbatar kun haɗa |
Ƙananan Mac app | Aikace-aikacen Mac wanda ba na hukuma ba yana kallon kundayen adireshi na .ƙasassun fayiloli kuma yana tattara lambar zuwa fayilolin gida bayan kowane ajiyar fayil maras kallo. Idan kuna so, zaku iya jujjuya abubuwan da aka zaɓa a cikin ƙa'idar don ragewa ta atomatik da waɗanne kundin adireshi fayilolin da aka haɗa suka ƙare. |