Bootstrap-y giňeltmek

Goşulan stillerden we komponentlerden, şeýle hem az üýtgeýänlerden we garyndylardan peýdalanmak üçin Bootstrap-y giňeldiň.

Kiçijik CSS

“Bootstrap” öz dostumyz Aleksis Sellier tarapyndan döredilen dinamiki stil sahypasy bolan LESS bilen ýasalýar . Ulgam esasly CSS-ni ösdürmegi has çalt, aňsat we has gyzykly edýär.

Näme üçin az?

“Bootstrap” -yň döredijilerinden biri bu barada gysgaça blog ýazdy:

  • “Bootstrap”, “Sass” bilen deňeşdirilende “Less” bilen has çalt ~ 6x çalt düzýär
  • Has az JavaScript-de ýazylýar, bu bolsa Ruby bilen Sass bilen deňeşdirilende çümmegi we ýamany aňsatlaşdyrýar.
  • Az zat köp; CSS ýazýan we Bootstrap-y hemmelere ýakynlaşdyrýan ýaly duýmak isleýäris.

Näme girýär?

CSS-iň giňelmesi hökmünde LESS üýtgeýjileri, gaýtadan ulanylýan kod bölekleri üçin garyndylary, ýönekeý matematika amallary, höwürtge we hatda reňk funksiýalaryny öz içine alýar.

Köpräk oka

Has giňişleýin maglumat üçin http://lesscss.org/ resmi web sahypasyna giriň .

CSS-iňiz “Az” bilen ýazylandygy we üýtgeýänleri we garyndylary ulanýandygy sebäpli, önümçiligiň ahyrky durmuşa geçirilmegi üçin düzülmeli. Ine, nähili.

Bellik: Üýtgedilen CSS bilen GitHub-a çekmek haýyşyny iberýän bolsaňyz , CSS-ni şu usullaryň haýsydyr biriniň üsti bilen täzeden düzmeli .

Toplamak üçin gurallar

Buýruk setiri

Buýruk setiriniň üsti bilen düzmek üçin GitHub -daky taslama okamasyndaky görkezmelere eýeriň .

JavaScript

Iň soňky Less.js-i göçürip alyň we oňa barýan ýoly (we Bootstrap) goşuň <head>.

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

.Faýlsyz faýllary täzeden düzmek üçin olary ýatda saklaň we sahypaňyzy täzeden ýükläň. Less.js olary düzýär we ýerli ammarda saklaýar.

Resmi däl Mac programmasy

Resmi däl Mac programmasy .less faýllaryň kataloglaryna tomaşa edýär we synlanan .less faýly ýatda saklandan soň kody ýerli faýllara düzýär. Isleseňiz, awtomatiki kiçeltmek üçin programmada ileri tutmalary üýtgedip bilersiňiz we düzülen faýllaryň haýsy bukjasy gutarýar.

Has köp programma

Gyryş

Crunch, Adobe Air-da gurlan ajaýyp görünýän LESS redaktory we düzüjisi.

CodeKit

Resmi däl Mac programmasy bilen bir adam tarapyndan döredilen CodeKit, LESS, SASS, Stylus we CoffeeScript-i düzýän Mac programmasydyr.

Pleönekeý

LESS faýllaryny süýräp çekmek üçin Mac, Linux we Windows programmasy. Mundan başga-da, deslapky kod GitHub-da .

Toplanan ýa-da kiçeldilen CSS we JS-ni taşlap, islendik web taslamasyny çalt başlaň . Öňe gitmek üçin aňsat täzelenmeler we tehniki hyzmat üçin aýratyn stillerde gatlak.

Faýl gurluşyny gurmak

Iň soňky düzülen “Bootstrap” -y göçürip alyň we taslamaňyza ýerleşdiriň. Mysal üçin, sizde şuňa meňzeş bir zat bolup biler:

  programma /
      düzülişler /
      galyplar /
  köpçülik /
      css /
          bootstrap.min.css
      js /
          bootstrap.min.js
      img /
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Başlangyç şablonyny ulanyň

Başlamak üçin aşakdaky esasy HTML-i göçüriň.

  1. <html>
  2. <head>
  3. <title> Bootstrap 101 Şablon </title>
  4. <! - Bootstrap ->
  5. <link href = "public / css / bootstrap.min.css" rel = "stil sahypasy" >
  6. </head>
  7. <body>
  8. <h1> Salam, dünýä! </h1>
  9. <! - Bootstrap ->
  10. <script src = "public / js / bootstrap.min.js" > </script>
  11. </body>
  12. </html>

Customörite kody boýunça gatlak

“Bootstrap” -y aýratyn CSS we JS faýllaryňyz bilen özüňiz etmek üçin zerur CSS, JS we başga-da köp işläň.

  1. <html>
  2. <head>
  3. <title> Bootstrap 101 Şablon </title>
  4. <! - Bootstrap ->
  5. <link href = "public / css / bootstrap.min.css" rel = "stil sahypasy" >
  6. <! - Taslama ->
  7. <link href = "public / css / application.css" rel = "stil sahypasy" >
  8. </head>
  9. <body>
  10. <h1> Salam, dünýä! </h1>
  11. <! - Bootstrap ->
  12. <script src = "public / js / bootstrap.min.js" > </script>
  13. <! - Taslama ->
  14. <script src = "public / js / application.js" > </script>
  15. </body>
  16. </html>