Kordhi · Bootstrap af soomaali

Bootstrap waxaa lagu sameeyay LESS asalkeeda, luqad qaabaysan oo firfircoon oo uu abuuray saaxiibkeena wanaagsan, Alexis Sellier . Waxay ka dhigtaa horumarinta nidaamyada ku salaysan CSS mid dhakhso badan, fudud oo xiiso badan.

Waa maxay sababta YAR?

Mid ka mid ah hal-abuurayaasha Bootstrap ayaa qoray qoraal deg -deg ah oo ku saabsan arrintan , halkan lagu soo koobay:

Bootstrap waxay soo uruurisaa si dhakhso leh ~ 6x si dhakhsiyo leh oo ka yar marka la barbar dhigo Sass
In ka yar ayaa ku qoran JavaScript, taasoo noo sahlaysa inaan quusinno oo aan balastar la barbar dhigno Ruby with Sass.
In yar ayaa ka badan; Waxaan rabnaa inaan dareemno inaan qorayno CSS oo aan samaynayno Bootstrap mid loo dhowaan karo dhammaan.

Maxaa ka mid ah?

Sida kordhinta CSS, YAR waxaa ku jira doorsoomayaal, iskudhafyada dib loo isticmaali karo qaybo kood ah, hawlgallada xisaabta fudud, buul, iyo xitaa shaqooyinka midabka.

Wax dheeri ah baro

Booqo degelka rasmiga ah ee http://lesscss.org/ si aad wax badan uga barato.

Mar haddii CSS-kayaga lagu qoray wax ka yar oo uu isticmaalo doorsoomayaasha iyo isku-dhafka, waxay u baahan tahay in la soo ururiyo si loo hirgeliyo wax-soo-saar kama dambays ah. Waa kan sida.

Fiiro gaar ah: Haddii aad u gudbinayso codsiga jiidista GitHub oo wata CSS wax laga beddelay, waa inaad dib u soo ururisaa CSS iyada oo loo marayo mid ka mid ah hababkan.

Qalabka lagu ururiyo

Node leh makefile

Ku rakib khadka taliska LESS, JSHint, Recess, iyo ugify-js caalami ahaan npm adoo socodsiinaya amarka soo socda:

$ npm ku rakib -g yar nasasho jshint ugify-js

Marka la rakibo kaliya ka orod makexididka buugga bootstrap-kaaga oo waad wada diyaarsan tahay.

Intaa waxaa dheer, haddii aad ku rakibtay ilaaliye , waxaa laga yaabaa inaad u ordo make watchin bootstrap si toos ah dib loogu dhiso mar kasta oo aad wax ka beddesho faylka bootstrap lib (tani looma baahna, kaliya hab ku habboon).

Khadka taliska

Ku rakib qalabka khadka taliska LESS adoo adeegsanaya Node oo socodsii amarka soo socda:

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

U hubso inaad ku darto --compressamarkaas haddii aad isku dayayso inaad kaydiso xoogaa bytes ah!

JavaScript

Soo deji Less.js kii ugu dambeeyay oo ku dar dariiqa loo marayo (iyo Bootstrap) gudaha <head>.

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

Si aad dib ugu soo ururiso faylasha .kayar, kaliya kaydi oo dib u soo geli boggaaga. Less.js ayaa ururisa oo ku kaydisa kaydinta deegaanka.

Mac App-ka aan rasmiga ahayn

App-ka aan rasmiga ahayn ee Mac waxa uu daawadaa tusaha faylalka .less oo waxa uu ku ururiyaa koodka faylalka maxaliga ah ka dib kayd kasta oo faylka .yar ee la daawado. Haddii aad rabto, waxaad bedeli kartaa dookhyada abka si si toos ah loo yareeyo iyo tusaha faylalka la soo ururiyey ay ku dambeeyaan.

apps ka badan

Burburid

Crunch waa tifaftire YAR oo muuqaal ah oo lagu dhisay Adobe Air.

CodeKit

Waxaa sameeyay isla nin ka mid ah abka Mac ee aan rasmiga ahayn, CodeKit waa Mac App kaas oo uruuriya LESS, SASS, Stylus, iyo CoffeeScript.

Fudud

Mac, Linux, iyo App-ka Windows ee jiidida iyo tuurista ururinta faylasha YAR. Intaa waxaa dheer, koodhka isha ayaa ku yaal GitHub .

Si dhakhso leh u billow mashruuc kasta oo shabakad ah adiga oo ku ridaya CSS-ga la soo ururiyey ama la yareeyey. Lakab ku saabsan qaababka gaarka ah si gooni gooni ah u hagaajinta fudud iyo dayactirka horay loogu socdo.

Dejinta qaab dhismeedka faylka

Soo deji Bootstrap-kii ugu dambeeyay oo la soo ururiyey oo geli mashruucaaga. Tusaale ahaan, waxaa laga yaabaa inaad leedahay wax sidan oo kale ah:

  app/
      nashqadaynta/
      moodallo/
  dadweyne/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-cad.png

Isticmaal template bilowga

Nuqul ka samee HTML-ka saldhigga ah si aad u bilowdo.

<html>
  <madax>
    <title> Bootstrap 101 Template </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </madax>
  <jir>
    <h1> Hello, adduunyo! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" </script> 
  </body>
</html>

Lakab on code caadadii

Ka shaqee CSS kaaga, JS, iyo in ka badan sida lagama maarmaanka u ah si aad Bootstrap ka dhigto mid kuu gaar ah faylashaada CSS iyo JS ee gaarka ah.

<html>
  <madax>
    <title> Bootstrap 101 Template </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- Mashruuca -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </madax>
  <jir>
    <h1> Hello, adduunyo! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" </script> 
    <!-- Mashruuca -->
    <script src = "public/js/application.js" </script> 
  </body>
</html>

Kordhinta Bootstrap

Lagu dhisay YAR