Bootstrap

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

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

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

Քիչ CSS

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

Ինչու՞ ՔԻՉ

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

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

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

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

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

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

Bootstrap-ի կազմում Less-ով

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

Նշում ․ _ _

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

Հանգույց՝ makefile-ով

Տեղադրեք LESS հրամանի տողի կոմպիլյատորը, JSHint-ը, Recess-ը և uglify-js-ը գլոբալ npm-ով` գործարկելով հետևյալ հրամանը.

$ npm install -g պակաս jshint ընդմիջում uglify-js

Տեղադրվելուց հետո պարզապես գործարկեք makeձեր bootstrap գրացուցակի արմատից և ամեն ինչ պատրաստ է:

Բացի այդ, եթե դուք տեղադրել եք watchr , դուք կարող եք վազել make watch, որպեսզի bootstrap-ը ավտոմատ կերպով վերակառուցվի ամեն անգամ, երբ ֆայլը խմբագրում եք bootstrap lib-ում (սա պարտադիր չէ, պարզապես հարմար մեթոդ է):

Հրամանի տող

Տեղադրեք LESS հրամանի տող գործիքը Node-ի միջոցով և գործարկեք հետևյալ հրամանը.

$ lessc ./less/bootstrap.less > bootstrap.css

Համոզվեք, որ ներառեք --compressայդ հրամանի մեջ, եթե փորձում եք պահպանել որոշ բայթեր:

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>