Пашырэнне Bootstrap

Пашырыце Bootstrap, каб скарыстацца перавагамі ўключаных стыляў і кампанентаў, а таксама МЕНШЫХ зменных і міксінаў.

МЕНШ CSS

У аснове Bootstrap ляжыць LESS, дынамічная мова табліц стыляў, створаная нашым добрым сябрам Алексісам Селье . Гэта робіць распрацоўку сістэмнага CSS больш хуткай, прасцейшай і весялейшай.

Чаму МЕНШ?

Адзін са стваральнікаў Bootstrap напісаў кароткае паведамленне ў блогу пра гэта , абагульненае тут:

  • Bootstrap кампілюецца хутчэй ~у 6 разоў хутчэй з 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 - выдатны рэдактар ​​і кампілятар LESS, створаны на аснове Adobe Air.

CodeKit

Створаны тым жа чалавекам, што і неафіцыйнае прыкладанне для Mac, CodeKit - гэта дадатак для Mac, якое кампілюе LESS, SASS, Stylus і CoffeeScript.

Бяспроста

Прыкладанне для Mac, Linux і Windows для кампіляцыі LESS файлаў перацягваннем. Акрамя таго, зыходны код знаходзіцца на GitHub .

Хутка запусціце любы вэб-праект, дадаўшы скампіляваны або скарочаны CSS і JS. Накладвайце індывідуальныя стылі асобна для лёгкага абнаўлення і далейшага абслугоўвання.

Налада структуры файла

Спампуйце апошнюю скампіляваную версію Bootstrap і змясціце яе ў свой праект. Напрыклад, у вас можа быць нешта накшталт гэтага:

  дадатак/
      макеты/
      шаблоны/
  грамадскасць/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      малюнак/
          glyphicons-halflings.png
          glyphicons-halfings-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. <спасылка 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>