Kwagura · Bootstrap mu Rwanda

Bootstrap ikozwe na LESS kumurongo wacyo, imvugo yimiterere yimiterere yakozwe ninshuti yacu nziza, Alexis Sellier . Bituma iterambere rya sisitemu ishingiye kuri CSS byihuse, byoroshye, kandi birashimishije.

Kuki KUBESHYA?

Umwe mu baremye Bootstrap yanditse blog yihuse kuriyi ngingo , muri make hano:

Bootstrap ikusanya byihuse ~ 6x byihuse hamwe na bike ugereranije na Sass
Bike byanditse muri JavaScript, bitworohera kwibira no gutobora ugereranije na Ruby hamwe na Sass.
Guto ni byinshi; turashaka kumva ko twandika CSS kandi bigatuma Bootstrap yegera bose.

Harimo iki?

Nukwagura CSS, LESS ikubiyemo impinduka, ivanga kubice byongeye gukoreshwa bya code, ibikorwa kubiharuro byoroheje, ibyari, ndetse nibikorwa byamabara.

Wige byinshi

Sura urubuga rwemewe kuri http://lesscss.org/ kugirango umenye byinshi.

Kubera ko CSS yacu yanditse hamwe na bike kandi ikoresha impinduka na mixin, igomba gukusanywa kugirango ishyirwe mubikorwa byanyuma. Dore uko.

Icyitonderwa: Niba utanze icyifuzo cyo gukurura GitHub hamwe na CSS yahinduwe, ugomba gusubiramo CSS ukoresheje bumwe murubwo buryo.

Ibikoresho byo gukusanya

Node hamwe na makefile

Shyiramo LESS command umurongo utegura, JSHint, Ikiruhuko, na uglify-js kwisi yose hamwe npm ukoresheje itegeko rikurikira:

$ npm shyiramo -g gake jshint ikiruhuko uglify-js

Iyo umaze kwinjizamo gusa ukore makemumuzi yububiko bwa bootstrap kandi urashizeho.

Byongeye kandi, niba ufite watchr yashizwemo, urashobora kwiruka make watchkugirango bootstrap ihite yubaka burigihe burigihe uhinduye dosiye muri bootstrap lib (ibi ntibisabwa, gusa uburyo bworoshye).

Umurongo

Shyiramo igikoresho cya LESS umurongo ukoresheje Node hanyuma ukore itegeko rikurikira:

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

Wemeze gushyiramo --compressiryo tegeko niba ugerageza kubika byite!

JavaScript

Kuramo ibishya Less.js hanyuma ushiremo inzira igana (na Bootstrap) muri <head>.

<ihuza rel = "urupapuro rwerekana / ruto" href = "/ inzira/to/bootstrap.less" > <inyandiko src = " / inzira /

Kugirango usubiremo dosiye .idafite, gusa uzigame hanyuma wongere usubiremo page yawe. Gito.js irabakusanya ikabika mububiko bwaho.

Porogaramu idasanzwe ya Mac

Porogaramu idasanzwe ya Mac ireba ububiko bwamadosiye adafite kandi ikusanya kode kumadosiye yaho nyuma yo kubika dosiye ireba. Idafite. Niba ubishaka, urashobora guhinduranya ibyo ukunda muri porogaramu yo kugabanya mu buryo bwikora kandi ni ubuhe bubiko dosiye zakozwe zirangirira.

Porogaramu nyinshi

Crunch

Crunch is a great looking LESS editor and compiler built on Adobe Air.

CodeKit

Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.

Simpless

Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.

Quickly start any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.

Setup file structure

Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:

   app/
       layouts/
       templates/
   public/
       css/
           bootstrap.min.css
       js/
           bootstrap.min.js
       img/
           glyphicons-halflings.png
           glyphicons-halflings-white.png

Utilize starter template

Copy the following base HTML to get started.

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

Layer on custom code

Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.

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

Kwagura Bootstrap

Yubatswe na LESS