Bootstrap-ի ընդլայնում

Ընդլայնեք Bootstrap-ը, որպեսզի օգտվեք ներառված ոճերից և բաղադրիչներից, ինչպես նաև LESS փոփոխականներից և խառնուրդներից:

Քիչ CSS

Bootstrap-ը պատրաստված է LESS-ի հիմքում, դինամիկ ոճի լեզվով, որը ստեղծվել է մեր լավ ընկեր Ալեքսիս Սելլիերի կողմից : Այն դարձնում է համակարգերի վրա հիմնված CSS-ի մշակումն ավելի արագ, հեշտ և ավելի զվարճալի:

Ինչու՞ ՔԻՉ

Bootstrap-ի ստեղծողներից մեկը արագ բլոգային գրառում է գրել այս մասին , որն ամփոփված է այստեղ.

  • Bootstrap-ը հավաքում է ավելի արագ ~ 6 անգամ ավելի արագ Less-ով Sass-ի համեմատ
  • Ավելի քիչ է գրված JavaScript-ում, ինչը մեզ համար հեշտացնում է սուզվելը և կարկատելը Ruby-ի համեմատ Sass-ով:
  • Քիչն ավելին է; մենք ուզում ենք զգալ, որ գրում ենք CSS և Bootstrap-ը հասանելի դարձնում բոլորին:

Ի՞նչ է ներառված:

Որպես CSS-ի ընդլայնում, LESS-ը ներառում է փոփոխականներ, միքսներ կոդի վերօգտագործելի հատվածների համար, գործողություններ պարզ մաթեմատիկայի, բնադրման և նույնիսկ գունային ֆունկցիաների համար:

Իմացեք ավելին

Այցելեք պաշտոնական կայքը՝ http://lesscss.org/ ՝ ավելին իմանալու համար:

Քանի որ մեր CSS-ը գրված է Less-ով և օգտագործում է փոփոխականներ և խառնուրդներ, այն պետք է կազմվի վերջնական արտադրության իրականացման համար: Ահա թե ինչպես.

Նշում ․ _ _

Կազմելու գործիքներ

Հրամանի տող

Հետևեք GitHub-ում ներկայացված readme-ի հրահանգներին՝ հրամանի տողի միջոցով կոմպիլյացիայի համար:

JavaScript

Ներբեռնեք վերջին Less.js-ը և ներառեք դրա ուղին (և Bootstrap-ը) ներդիրում <head>:

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

.less ֆայլերը վերակազմավորելու համար պարզապես պահեք դրանք և վերաբեռնեք ձեր էջը: Less.js-ը դրանք հավաքում և պահում է տեղական պահեստում:

Ոչ պաշտոնական Mac հավելված

Mac-ի ոչ պաշտոնական հավելվածը դիտում է .less ֆայլերի դիրեկտորիաներ և հավաքում կոդը տեղական ֆայլերում դիտված .less ֆայլի յուրաքանչյուր պահումից հետո: Եթե ​​ցանկանում եք, կարող եք փոխարկել հավելվածի նախապատվությունները՝ ավտոմատ նվազագույնի հասցնելու համար, և թե որ գրացուցակում են հայտնվում կազմված ֆայլերը:

Ավելի շատ ծրագրեր

Ճռճռոց

Crunch-ը հիանալի տեսք ունեցող LESS խմբագիր և կոմպիլյատոր է՝ կառուցված Adobe Air-ի վրա:

CodeKit

Ստեղծվել է նույն անձի կողմից, ինչ ոչ պաշտոնական Mac հավելվածը, CodeKit-ը Mac հավելված է, որը կազմում է LESS, SASS, Stylus և CoffeeScript:

Պարզ

Mac, Linux և Windows հավելված՝ ՔԱՂԱՔ ֆայլեր քաշելու և թողնելու համար: Բացի այդ, աղբյուրի կոդը գտնվում է GitHub-ում :

Արագորեն սկսեք ցանկացած վեբ նախագիծ՝ թողնելով կազմված կամ փոքրացված CSS-ը և JS-ը: Շերտավորեք հատուկ ոճերի վրա առանձին՝ հեշտ արդիականացման և սպասարկման համար առաջ շարժվելու համար:

Կարգավորեք ֆայլի կառուցվածքը

Ներբեռնեք վերջին կազմված Bootstrap-ը և տեղադրեք ձեր նախագծում: Օրինակ, դուք կարող եք ունենալ նման բան.

  հավելված/
      դասավորություններ/
      կաղապարներ/
  հանրային/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Օգտագործեք մեկնարկային ձևանմուշ

Սկսելու համար պատճենեք հետևյալ բազային HTML-ը:

  1. <html>
  2. <գլուխ>
  3. <title> Bootstrap 101 Կաղապար </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. </head>
  7. <մարմին>
  8. <h1> Բարև աշխարհ: </h1>
  9. <!-- Bootstrap -->
  10. <script src = "public/js/bootstrap.min.js" </script>
  11. </body>
  12. </html>

Շերտ մաքսային կոդի վրա

Աշխատեք ձեր հատուկ CSS-ում, JS-ում և անհրաժեշտության դեպքում՝ Bootstrap-ը ձեր սեփականը դարձնելու համար ձեր առանձին CSS և JS ֆայլերով:

  1. <html>
  2. <գլուխ>
  3. <title> Bootstrap 101 Կաղապար </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. <!-- Նախագիծ -->
  7. <link href = "public/css/application.css" rel = "stylesheet" >
  8. </head>
  9. <մարմին>
  10. <h1> Բարև աշխարհ: </h1>
  11. <!-- Bootstrap -->
  12. <script src = "public/js/bootstrap.min.js" </script>
  13. <!-- Նախագիծ -->
  14. <script src = "public/js/application.js" </script>
  15. </body>
  16. </html>