Васеъ кардани Bootstrap

Bootstrap-ро васеъ кунед, то аз услубҳо ва ҷузъҳои дохилшуда, инчунин тағирёбандаҳо ва омехтаҳои LESS истифода баред.

КАМТАР CSS

Bootstrap бо LESS дар асл сохта шудааст, забони ҷадвали динамикӣ, ки аз ҷониби дӯсти хуби мо Алексис Сельер сохта шудааст. Он таҳияи CSS-ро дар асоси система тезтар, осонтар ва шавқовартар мекунад.

Чаро КАМТАР?

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

  • Bootstrap бо камтар нисбат ба Sass ~ 6 маротиба тезтар тартиб медиҳад
  • Дар JavaScript камтар навишта шудааст, ки дар муқоиса бо Ruby бо Sass ғарқ шудан ва часпакро барои мо осонтар мекунад.
  • Камтар бештар аст; мо мехоҳем эҳсос кунем, ки мо CSS менависем ва Bootstrap-ро барои ҳама дастрас мегардонем.

Чӣ дар бар мегирад?

Ҳамчун тавсеаи CSS, LESS тағирёбандаҳо, миксинҳо барои пораҳои такрории код, амалиётҳо барои математикаи оддӣ, лонасозӣ ва ҳатто функсияҳои рангро дар бар мегирад.

Бисёр омӯхтан

Барои гирифтани маълумоти бештар ба вебсайти расмии http://lesscss.org/ муроҷиат кунед.

Азбаски CSS-и мо бо Less навишта шудааст ва тағирёбандаҳо ва омехтаҳоро истифода мебарад, онро барои татбиқи ниҳоии истеҳсолот тартиб додан лозим аст. Ана ин тавр аст.

Эзоҳ: Агар шумо дархости кашиданро ба GitHub бо CSS тағирёфта ирсол кунед, шумо бояд CSS-ро тавассути яке аз ин усулҳо дубора тартиб диҳед.

Воситаҳо барои тартиб додан

Сатри фармон

Дастурҳоро дар хондани лоиҳа дар GitHub барои тартиб додан тавассути сатри фармон иҷро кунед.

JavaScript

Навтарин Less.js-ро зеркашӣ кунед ва роҳ ба он (ва Bootstrap) -ро дар <head>.

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

Барои дубора тартиб додани файлҳои .кам, танҳо онҳоро захира кунед ва саҳифаи худро аз нав бор кунед. Less.js онҳоро тартиб медиҳад ва дар анбори маҳаллӣ нигоҳ медорад.

Барномаи ғайрирасмии Mac

Барномаи ғайрирасмии Mac феҳристҳои файлҳои .lessро тамошо мекунад ва пас аз ҳар сабти файли .less тамошошуда кодро ба файлҳои маҳаллӣ тартиб медиҳад. Агар хоҳед, шумо метавонед афзалиятҳоро дар барнома барои минификатсияи худкор ва дар кадом директория файлҳои тартибдодашуда иваз кунед.

Барномаҳои бештар

Кранч

Crunch як муҳаррири зебои LESS ва компиляторест, ки дар Adobe Air сохта шудааст.

CodeKit

CodeKit аз ҷониби ҳамон бача, ки барномаи ғайрирасмии Mac сохта шудааст, як барномаи Mac мебошад, ки LESS, SASS, Stylus ва CoffeeScript-ро тартиб медиҳад.

Содда

Барномаи Mac, Linux ва Windows барои кашола карда партофтани файлҳои LESS. Илова бар ин, рамзи сарчашма дар 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>