Ƙara Bootstrap

Ƙaddamar Bootstrap don cin gajiyar haɗe-haɗen salo da abubuwan haɗin gwiwa, da KARANCIN masu canji da mahaɗa.

KARANCIN CSS

Ana yin Bootstrap tare da LESS a ainihin sa, harshe mai ƙarfi mai ƙarfi wanda abokinmu na kirki, Alexis Sellier ya kirkira . Yana sa CSS na tushen tsarin haɓaka sauri, sauƙi, kuma mafi daɗi.

Me yasa RASHI?

Ɗaya daga cikin mahaliccin Bootstrap ya rubuta wani wuri mai sauri game da wannan , an taƙaita a nan:

  • Bootstrap yana tattara sauri ~ 6x sauri tare da Kadan idan aka kwatanta da Sass
  • Kadan an rubuta shi cikin JavaScript, yana sauƙaƙa mana mu nutsewa da faci idan aka kwatanta da Ruby tare da Sass.
  • Kadan shine ƙari; muna so mu ji kamar muna rubuta CSS kuma muna sa Bootstrap ya zama mai kusanci ga kowa.

Me ya hada?

A matsayin tsawo na CSS, LESS ya haɗa da masu canji, masu gauraya don sake amfani da snippets na lamba, ayyuka don sauƙi na lissafi, gida, har ma da ayyukan launi.

Ƙara koyo

Ziyarci gidan yanar gizon hukuma a http://lesscss.org/ don ƙarin koyo.

Tun da CSS ɗin mu an rubuta shi da ƙasa kuma yana amfani da masu canji da mahaɗa, yana buƙatar haɗa shi don aiwatar da samarwa na ƙarshe. Ga yadda.

Lura: Idan kuna ƙaddamar da buƙatun ja ga GitHub tare da ingantaccen CSS, dole ne ku sake tattara CSS ta kowane ɗayan waɗannan hanyoyin.

Kayan aikin harhadawa

Layin umarni

Bi umarnin a cikin karatun aikin akan GitHub don haɗawa ta layin umarni.

JavaScript

Zazzage sabuwar Less.js kuma haɗa hanyar zuwa gare ta (da Bootstrap) a cikin <head>.

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

Don sake tattara fayilolin .ƙasassun, kawai ajiye su kuma sake loda shafinku. Less.js yana tattara su kuma yana adana su a ma'ajiyar gida.

Mac app mara izini

Aikace-aikacen Mac wanda ba na hukuma ba yana kallon kundayen adireshi na .ƙasassun fayiloli kuma yana tattara lambar zuwa fayilolin gida bayan kowane ajiyar fayil maras kallo. Idan kuna so, zaku iya jujjuya abubuwan da aka zaɓa a cikin ƙa'idar don ragewa ta atomatik da kuma wace jagorar fayilolin da aka haɗa suka ƙare.

Ƙarin apps

Crunch

Crunch babban edita ne mai ƙanƙanta da mai tarawa wanda aka gina akan Adobe Air.

CodeKit

Mutum ɗaya ne ya ƙirƙira shi da ƙa'idar Mac ɗin da ba na hukuma ba, CodeKit aikace-aikacen Mac ne wanda ke haɗa LESS, SASS, Stylus, da CoffeeScript.

Mai Sauƙi

Mac, Linux, da Windows app don ja da jujjuya harhada fayilolin LESS. Ƙari, lambar tushe tana kan GitHub .

Da sauri fara kowane aikin gidan yanar gizo ta hanyar jefawa cikin hadaddun ko rage girman CSS da JS. Layer akan salo na al'ada daban don haɓakawa mai sauƙi da kulawa da ci gaba.

Saita tsarin fayil

Zazzage sabuwar Bootstrap da aka haɗa kuma sanya cikin aikin ku. Misali, kuna iya samun wani abu kamar haka:

  app/
      shimfidu/
      samfuri/
  jama'a/
      css/
          bootstrap.min.css
      js/
          takalma.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-fari.png

Yi amfani da samfurin farawa

Kwafi tushen HTML mai zuwa don farawa.

  1. <html>
  2. <kafi>
  3. <title> Bootstrap 101 Samfura </title>
  4. <!-- Bootstrap -->
  5. <link href = "jama'a/css/bootstrap.min.css" rel = "stylesheet" >
  6. </head>
  7. <jiki>
  8. <h1> Sannu, duniya! </h1> ku
  9. <!-- Bootstrap -->
  10. <script src = "jama'a/js/bootstrap.min.js" </script>
  11. </ jiki>
  12. </html>

Layer a kan al'ada code

Yi aiki a cikin CSS ɗinku na al'ada, JS, da ƙari kamar yadda ya cancanta don sanya Bootstrap naku tare da fayilolin CSS da JS daban na ku.

  1. <html>
  2. <kafi>
  3. <title> Bootstrap 101 Samfura </title>
  4. <!-- Bootstrap -->
  5. <link href = "jama'a/css/bootstrap.min.css" rel = "stylesheet" >
  6. <!-- Project -->
  7. <link href = "jama'a/css/application.css" rel = "stylesheet" >
  8. </head>
  9. <jiki>
  10. <h1> Sannu, duniya! </h1> ku
  11. <!-- Bootstrap -->
  12. <script src = "jama'a/js/bootstrap.min.js" </script>
  13. <!-- Project -->
  14. <script src = "jama'a/js/application.js" > </script>
  15. </ jiki>
  16. </html>