Ƙaddamarwa · Tufafi Bootstrap in Hausa

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

Node tare da makefile

Shigar da mai tara layin umarni na LESS, JSHint, Recess, da ugify-js a duniya tare da npm ta hanyar aiwatar da umarni mai zuwa:

$ npm shigar -g kasa jashint recess uglify-js

Da zarar an shigar, kawai gudu makedaga tushen kundin kundin bootstrap ɗin ku kuma an saita ku duka.

Bugu da ƙari, idan kun shigar da mai tsaro , za ku iya gudu make watchdon sake gina bootstrap ta atomatik duk lokacin da kuka gyara fayil a cikin bootstrap lib (wannan ba a buƙata ba, kawai hanyar dacewa).

Layin umarni

Shigar da kayan aikin LESS na umarni ta hanyar Node kuma gudanar da umarni mai zuwa:

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

Tabbatar kun haɗa --compresscikin wannan umarni idan kuna ƙoƙarin adana wasu bytes!

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 / │ ├── bootstrap . min . js
   └── img / ├── glyphicons - halflings . png └── glyphicons
       - rabin - farar fata . png

Yi amfani da samfurin farawa

Kwafi tushen HTML mai zuwa don farawa.

<html>
  <kafi>
    <title> Bootstrap 101 Samfura </title>
    <!-- Bootstrap -->
    <link href = "jama'a/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <jiki>
    <h1> Sannu, duniya! </h1> ku
    <!-- Bootstrap -->
    <script src = "jama'a/js/bootstrap.min.js" </script> 
  </ jiki>
</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.

<html>
  <kafi>
    <title> Bootstrap 101 Samfura </title>
    <!-- Bootstrap -->
    <link href = "jama'a/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- Project -->
    <link href = "jama'a/css/application.css" rel = "stylesheet" >  
  </head>
  <jiki>
    <h1> Sannu, duniya! </h1> ku
    <!-- Bootstrap -->
    <script src = "jama'a/js/bootstrap.min.js" </script> 
    <!-- Project -->
    <script src = "jama'a/js/application.js" > </script> 
  </ jiki>
</html>

Ƙara Bootstrap

Gina tare da KASA