Tesiwaju · Twitter Bootstrap ni Yorùbá

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ọ

Node pẹlu makefile

Fi sori ẹrọ alakojọ laini aṣẹ LESS, JSHint, Recess, ati uglify-js agbaye pẹlu npm nipa ṣiṣe pipaṣẹ atẹle:

$ npm fi sori ẹrọ -g kere jshint recess uglify-js

Ni kete ti fi sori ẹrọ kan ṣiṣe makelati gbongbo ti itọsọna bootstrap rẹ ati pe o ti ṣeto gbogbo rẹ.

Ni afikun, ti o ba ni oluṣọ ti fi sori ẹrọ, o le ṣiṣẹ make watchlati ni atunṣe bootstrap laifọwọyi ni gbogbo igba ti o ṣatunkọ faili kan ninu lib bootstrap (eyi ko nilo, ọna irọrun nikan).

Laini aṣẹ

Fi ọpa laini aṣẹ LESS sori ẹrọ nipasẹ Node ati ṣiṣe aṣẹ wọnyi:

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

Rii daju lati ṣafikun --compressninu aṣẹ yẹn ti o ba n gbiyanju lati fipamọ diẹ ninu awọn baiti!

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 / gbogbo eniyan / ├── css / │ ├── bata bata . min . css
   ├── js / │ ├── bata bata . min . js
   └── img / ├── glyphicons - idaji . png
       └── glyphicons - idaji - funfun . png

Lo awoṣe ibẹrẹ

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

<html>
  <ori>
    <akọle> Bootstrap 101 Àdàkọ </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </i>ori>
  <ara>
    <h1> Kaabo, agbaye! </h1>
    <!-- Bootstrap -->
    <script src = "gbangba/js/bootstrap.min.js" </script> 
  </ ara>
</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ẹ.

<html>
  <ori>
    <akọle> Bootstrap 101 Àdàkọ </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- Project -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </i>ori>
  <ara>
    <h1> Kaabo, agbaye! </h1>
    <!-- Bootstrap -->
    <script src = "gbangba/js/bootstrap.min.js" </script> 
    <!-- Project -->
    <script src = "gbangba/js/application.js" </script> 
  </ ara>
</html>

Itẹsiwaju Bootstrap

Ti a ṣe pẹlu KERE