Itẹsiwaju Bootstrap

Faagun Bootstrap lati lo anfani ti awọn aza ati awọn paati ti o wa, bakanna bi awọn oniyipada KERE ati awọn alapọpo.

CSS KERE

Bootstrap ni a ṣe pẹlu KERE ni ipilẹ rẹ, ede aṣa aṣa ti o ni agbara ti a ṣẹda nipasẹ ọrẹ wa to dara, Alexis Sellier . O jẹ ki CSS ti o da lori awọn eto ṣiṣe ni iyara, rọrun, ati igbadun diẹ sii.

Kini idi ti KERE?

Ọkan ninu awọn olupilẹṣẹ Bootstrap kowe ifiweranṣẹ bulọọgi ni iyara nipa eyi , ni akopọ nibi:

  • Bootstrap ṣe akopọ yiyara ~ 6x yiyara pẹlu Kere ni akawe si Sass
  • Kere ti wa ni kikọ ni JavaScript, ṣiṣe awọn ti o rọrun lati a besomi ni ati alemo akawe si Ruby pẹlu Sass.
  • Kere jẹ diẹ sii; a fẹ lati lero bi a ti nkọ CSS ati ṣiṣe Bootstrap isunmọ si gbogbo.

Kini o wa ninu?

Gẹgẹbi itẹsiwaju ti CSS, KERE pẹlu awọn oniyipada, awọn apopọ fun awọn snippets koodu atunlo, awọn iṣẹ ṣiṣe fun mathematiki rọrun, itẹ-ẹiyẹ, ati paapaa awọn iṣẹ awọ.

Kọ ẹkọ diẹ si

Ṣabẹwo oju opo wẹẹbu osise ni http://lesscss.org/ lati kọ ẹkọ diẹ sii.

Niwọn bi a ti kọ CSS wa pẹlu Kere ati pe o lo awọn oniyipada ati awọn alapọpọ, o nilo lati ṣajọ fun imuse iṣelọpọ ikẹhin. Eyi ni bii.

Akiyesi: Ti o ba n fi ibeere fifa silẹ si GitHub pẹlu CSS ti a ṣe atunṣe, o gbọdọ tun CSS ṣe nipasẹ eyikeyi awọn ọna wọnyi.

Awọn irinṣẹ fun akopọ

Laini aṣẹ

Tẹle awọn ilana ti o wa ninu iwe kika iṣẹ akanṣe lori GitHub fun ikojọpọ nipasẹ laini aṣẹ.

JavaScript

Ṣe igbasilẹ Less.js tuntun ki o pẹlu ọna si (ati Bootstrap) ninu faili <head>.

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

Lati tun awọn faili ti ko kere si, kan fi wọn pamọ ki o tun gbee si oju-iwe rẹ. Less.js ṣe akopọ wọn ati tọju wọn ni ibi ipamọ agbegbe.

Laigba aṣẹ Mac app

Ohun elo Mac laigba aṣẹ n wo awọn ilana ti .less awọn faili ati ṣe akopọ koodu si awọn faili agbegbe lẹhin gbogbo fifipamọ faili .less ti wiwo. Ti o ba fẹ, o le yi awọn ayanfẹ pada ninu ohun elo naa fun idinku aifọwọyi ati itọsọna wo ni awọn faili ti o ṣajọ pari ni.

Awọn ohun elo diẹ sii

Crunch

Crunch jẹ olootu KEKERE ti o n wo nla ati akopọ ti a ṣe lori Adobe Air.

CodeKit

Ti a ṣẹda nipasẹ eniyan kanna gẹgẹbi ohun elo Mac laigba aṣẹ, CodeKit jẹ ohun elo Mac kan ti o ṣajọ KERE, SASS, Stylus, ati CoffeeScript.

Rọrun

Mac, Lainos, ati Windows app fun fifa ati ju silẹ akopọ ti awọn faili KERE. Pẹlupẹlu, koodu orisun wa lori GitHub .

Ni kiakia bẹrẹ iṣẹ wẹẹbu eyikeyi nipa sisọ sinu akopọ tabi minisita CSS ati JS. Layer lori awọn aṣa aṣa lọtọ fun awọn iṣagbega irọrun ati itọju gbigbe siwaju.

Eto faili iṣeto

Ṣe igbasilẹ Bootstrap tuntun ti a ṣajọpọ ati gbe sinu iṣẹ akanṣe rẹ. Fun apẹẹrẹ, o le ni nkan bii eyi:

  app/
      awọn ipilẹ /
      awọn awoṣe /
  gbangba/
      css/
          bata bata.min.css
      js/
          bata orunkun.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-funfun.png

Lo awoṣe ibẹrẹ

Daakọ ipilẹ HTML atẹle lati bẹrẹ.

  1. <html>
  2. <ori>
  3. <akọle> Bootstrap 101 Àdàkọ </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. </i>ori>
  7. <ara>
  8. <h1> Kaabo, agbaye! </h1>
  9. <!-- Bootstrap -->
  10. <script src = "gbangba/js/bootstrap.min.js" </script>
  11. </ ara>
  12. </html>

Layer on aṣa koodu

Ṣiṣẹ ninu aṣa CSS rẹ, JS, ati diẹ sii bi o ṣe pataki lati jẹ ki Bootstrap tirẹ pẹlu awọn faili CSS lọtọ ati awọn faili JS tirẹ.

  1. <html>
  2. <ori>
  3. <akọle> Bootstrap 101 Àdàkọ </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. <!-- Project -->
  7. <link href = "public/css/application.css" rel = "stylesheet" >
  8. </i>ori>
  9. <ara>
  10. <h1> Kaabo, agbaye! </h1>
  11. <!-- Bootstrap -->
  12. <script src = "gbangba/js/bootstrap.min.js" </script>
  13. <!-- Project -->
  14. <script src = "gbangba/js/application.js" </script>
  15. </ ara>
  16. </html>