Проширување на Bootstrap

Проширете го Bootstrap за да ги искористите вклучените стилови и компоненти, како и ПОМАЛКУ променливи и мешавини.

ПОМАЛКУ CSS

Bootstrap е направен со LESS во неговото јадро, динамичен јазик за стилски лист создаден од нашиот добар пријател, Алексис Селиер . Го прави развојот на CSS базиран на системи побрзо, полесно и позабавно.

Зошто ПОМАЛКУ?

Еден од креаторите на Bootstrap напиша брз блог пост за ова , сумиран овде:

  • Bootstrap се компајлира побрзо ~ 6x побрзо со Less во споредба со Sass
  • Помалку е напишано во JavaScript, што ни го олеснува нуркањето и закрпи во споредба со Ruby со Sass.
  • Помалку е повеќе; сакаме да се чувствуваме како да пишуваме CSS и го правиме Bootstrap достапен за сите.

Што е вклучено?

Како продолжување на CSS, LESS вклучува променливи, миксини за фрагменти од код што може да се користат повеќекратно, операции за едноставна математика, вгнездување, па дури и функции за боја.

Научи повеќе

Посетете ја официјалната веб-страница на http://lesscss.org/ за да дознаете повеќе.

Бидејќи нашиот CSS е напишан со Less и користи променливи и миксини, треба да се компајлира за финална имплементација на производството. Еве како.

Забелешка: Ако поднесувате барање за повлекување до GitHub со изменет CSS, мора повторно да го компајлирате CSS преку кој било од овие методи.

Алатки за составување

Командна линија

Следете ги инструкциите во проектот readme на GitHub за компајлирање преку командната линија.

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 е извонреден уредник и компајлер за ПОМАЛКУ, изграден на 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. <врска href = "public/css/bootstrap.min.css" rel = "лист на стилови" >
  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. <врска href = "public/css/bootstrap.min.css" rel = "лист на стилови" >
  6. <!-- Проект -->
  7. <link href = "public/css/application.css" rel = "стил лист" >
  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>