Trɛw mu · Bootstrap wɔ Chwi kasa mu

Bootstrap yɛ LESS wɔ ne mu, ɛyɛ nnam stylesheet kasa a yɛn adamfo pa, Alexis Sellier ayɛ . Ɛma CSS a egyina nhyehyɛe so a wɔbɛyɛ no yɛ ntɛmntɛm, ɛyɛ mmerɛw, na ɛyɛ anigye.

Dɛn nti na LESS?

Bootstrap abɔfo no mu biako kyerɛw blog asɛm bi a ɛyɛ ntɛm faa eyi ho , a wɔabobɔ so wɔ ha:

Bootstrap boaboa ano ntɛmntɛm ~6x ntɛmntɛm ne Less sɛ wɔde toto Sass ho a
Wɔakyerɛw kakraa bi wɔ JavaScript mu, na ɛma ɛyɛ mmerɛw ma yɛn sɛ yɛbɛkɔ mu na yɛayɛ patch sɛ yɛde toto Ruby a ɛwɔ Sass ho a.
Kakraa ne pii; yɛpɛ sɛ yɛte nka sɛ yɛrekyerɛw CSS na yɛama Bootstrap no ayɛ nea obiara betumi abɛn.

Dɛn na ɛka ho?

Sɛ́ CSS ntrɛwmu no, LESS no de nsakrae ahorow, mixins a wɔde yɛ koodu no mu nsɛm nketenkete a wotumi san de di dwuma, dwumadi ahorow a wɔde yɛ akontaabu a ɛnyɛ den, nesting, ne kɔla dwumadi ahorow mpo ka ho.

Sua pii

Kɔ aban wɛbsaet hɔ wɔ http://lesscss.org/ na sua pii.

Esiane sɛ wɔde Less na ɛkyerɛw yɛn CSS no na ɛde variables ne mixins di dwuma nti, ɛsɛ sɛ wɔboaboa ano ma wɔde di dwuma wɔ adeyɛ a etwa to no mu. Sɛnea ɛte no ni.

Hyɛ no nsow: Sɛ wode twetwe adesrɛ rekɔma GitHub a CSS a wɔasesa wom a, ɛsɛ sɛ wosan boaboa CSS no ano denam akwan yi mu biara so.

Nnwinnade a wɔde boaboa nneɛma ano

Ahyɛde kwan so

Di akwankyerɛ a ɛwɔ project readme wɔ GitHub so ma compiling via command line no akyi.

JavaScript a ɛwɔ hɔ no

Twe Less.js a aba foforo no na fa ɔkwan a ɛkɔ so (ne Bootstrap) no ka ho wɔ <head>.

<link rel = "stylesheet/less" href = "/ɔkwan/kɔ/bootstrap.less" > <script src = "/kwan/kɔ/less.js" ></script>

Sɛ wopɛ sɛ wosan boaboa .less fael ahorow no ano a, sie kɛkɛ na san fa wo krataafa no hyɛ mu. Less.js boaboa wɔn ano na ɛde sie wɔ local storage mu.

Mac app a ɛnyɛ aban de

Mac app a ɛnyɛ aban de no hwɛ .less fael ahorow no kyerɛwtohɔ ahorow na ɛboaboa koodu no ano kɔ fael ahorow a ɛwɔ mpɔtam hɔ mu bere a wɔakora .less fael a wɔahwɛ so biara akyi. Sɛ wopɛ a, wubetumi asesa nea wopɛ wɔ app no mu ama woayɛ ketewaa bi ne directory a fael ahorow a wɔaboaboa ano no bɛkɔ akowie mu.

App ahorow pii

Crunch a ɛyɛ fɛ

Crunch yɛ LESS editor ne compiler a ɛyɛ fɛ a wɔasi wɔ Adobe Air so.

CodeKit a ɛwɔ hɔ

Wɔyɛɛ no guy koro no ara sɛ Mac app a ɛnyɛ aban de no, CodeKit yɛ Mac app a ɛboaboa LESS, SASS, Stylus, ne CoffeeScript ano.

Nea ɛnyɛ mmerɛw

Mac, Linux, ne Windows app a wɔde twetwe fael ahorow a wɔboaboa ano na wɔde gu fam. Nea ɛka ho no, source code no wɔ GitHub so .

Fi ase ntɛm ara wɛb adwuma biara denam CSS ne JS a wɔaboaboa ano anaa wɔayɛ no ketewaa no a wobɛtow agu so. Layer wɔ custom styles soronko ma ɛyɛ mmerɛw upgrades ne nsiesie kɔ anim.

Setup fael nhyehyɛe

Twe Bootstrap a wɔaboaboa ano a aba foforo no na fa gu wo project no mu. Sɛ nhwɛso no, ebia wowɔ biribi te sɛ eyi:

  app/ .
      nhyehyɛe ahorow/ .
      nsusuwso ahorow/ .
  dwam/
      css/ .
          bootstrap.min.css na ɛwɔ hɔ
      js/ .
          bootstrap.min.js na ɛwɔ hɔ
      img/ .
          glyphicons-afã horow.png
          glyphicons-afã-afã-fitaa.png

Fa starter template di dwuma

Kɔpi base HTML a edidi so yi na fi ase.

<html> na ɛwɔ hɔ
  <ti>
    <title> Bootstrap 101 Nhwɛsode </asɛmti>
    <!-- Bootstrap a wɔde hyɛ -->
    <link href = "ɔmanfo/css/bootstrap.min.css" rel = "kwankyerɛ krataa" >  
  </head> no
  <nipadua>
    <h1> Hello, wiase! </h1> no
    <!-- Bootstrap a wɔde hyɛ -->
    <script src = "ɔmanfo/js/bootstrap.min.js" ></script> 
  </nipadua>
</html> na ɛwɔ hɔ

Layer wɔ custom code so

Yɛ adwuma wɔ wo custom CSS, JS, ne nea ɛkeka ho mu sɛnea ɛho hia na ama Bootstrap ayɛ w’ankasa de de w’ankasa CSS ne JS fael ahorow a ɛyɛ soronko.

<html> na ɛwɔ hɔ
  <ti>
    <title> Bootstrap 101 Nhwɛsode </asɛmti>
    <!-- Bootstrap a wɔde hyɛ -->
    <link href = "ɔmanfo/css/bootstrap.min.css" rel = "kwankyerɛ krataa" >  
    <!-- Dwumadie -->
    <link href = "ɔmanfo/css/application.css" rel = "kwan so krataa" >  
  </head> no
  <nipadua>
    <h1> Hello, wiase! </h1> no
    <!-- Bootstrap a wɔde hyɛ -->
    <script src = "ɔmanfo/js/bootstrap.min.js" ></script> 
    <!-- Dwumadie -->
    <script src = "ɔmanfo/js/application.js" ></script> 
  </nipadua>
</html> na ɛwɔ hɔ

Bootstrap a Wɔtrɛw mu

Wɔde LESS na esii