Ընդլայնել · Bootstrap հայերեն

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-ը:

<html>
  <գլուխ>
    <title> Bootstrap 101 Կաղապար </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <մարմին>
    <h1> Բարև աշխարհ: </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" </script> 
  </body>
</html>

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

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

<html>
  <գլուխ>
    <title> Bootstrap 101 Կաղապար </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- Նախագիծ -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <մարմին>
    <h1> Բարև աշխարհ: </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" </script> 
    <!-- Նախագիծ -->
    <script src = "public/js/application.js" </script> 
  </body>
</html>

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

Կառուցվել է LESS-ով