Gbatịa · Bootstrap n'asusu Igbo

A na-eme Bootstrap na LESS n'isi ya, asụsụ ụdịdị ike nke ezigbo enyi anyị, Alexis Sellier kere . Ọ na-eme mmepe CSS dabere na sistemu ngwa ngwa, dị mfe na ihe ọchị karịa.

Gịnị kpatara erughị ala?

Otu n'ime ndị okike Bootstrap dere blọgụ ngwa ngwa gbasara nke a , chịkọtara ebe a:

Bootstrap na-achịkọta ngwa ngwa ~ 6x ngwa ngwa yana obere obere atụnyere Sass
Edere obere ihe na Javascript, na-eme ka ọ dịrị anyị mfe ịbanye na patch ma e jiri ya tụnyere Ruby with Sass.
Nke nta bụ karịa; anyị chọrọ ka ọ dị anyị ka anyị na-ede CSS ma na-eme ka Bootstrap dịrị mmadụ niile nso.

Kedu ihe gụnyere?

Dị ka ndọtị nke CSS, obere na-agụnye mgbanwe, mixins maka reusable snippets nke koodu, arụmọrụ maka mfe mgbakọ na mwepụ, nesting, na ọbụna agba ọrụ.

Mụtakwuo

Gaa na webụsaịtị gọọmentị na http://lesscss.org/ ka ịmatakwu ihe.

Ebe ọ bụ na e dere CSS anyị na obere ma na-eji mgbanwe na mixins, ọ dị mkpa ka achịkọta ya maka mmejuputa mmepụta ikpeazụ. Nke a bụ ka.

Mara: Ọ bụrụ na ị na-enye GitHub arịrịọ ịdọrọ site na iji CSS emezigharịrị, ị ga-emerịrị usoro ndị a iji chịkọta CSS ahụ.

Ngwa maka ịchịkọta

Ọnụ nwere makefile

Wụnye nchịkọta iwu LESS, JSHint, Recess, na ugify-js zuru ụwa ọnụ na npm site na iji iwu na-esonụ:

$ npm install -g obere ezumike jshint uglify-js

Ozugbo etinyere ya, gba ọsọ makesite na mgbọrọgwụ nke ndekọ ndekọ bootstrap gị ma edobela gị niile.

Na mgbakwunye, ọ bụrụ na etinyere onye nche , ị nwere ike ịgba ọsọ make watchka eweghachi bootstrap na-akpaghị aka oge ọ bụla ị dezie faịlụ na bootstrap lib (nke a anaghị achọ, naanị usoro dị mma).

Ahịrị iwu

Wụnye ngwa ahịrị ahịrị LESS site na Node wee mee iwu a:

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

Jide n'aka na itinye --compressn'iwu ahụ ma ọ bụrụ na ị na-agbalị ichekwa ụfọdụ bytes!

Javascript

Budata Less.js kacha ọhụrụ wee tinye ụzọ ya (na Bootstrap) na faịlụ <head>.

<njikọ rel = "stylesheet/less" href = "/ụzọ/to/bootstrap.less" > <script src = "/ụzọ/to/less.js" ></script>

Iji chịkọta faịlụ ndị na-erughị obere, naanị chekwaa ha wee bugharịa ibe gị. Less.js na-achịkọta ha ma na-echekwa ha na nchekwa mpaghara.

Ngwa Mac na-akwadoghị

Ngwa Mac na-akwadoghị na- elele akwụkwọ ndekọ aha nke faịlụ ndị na-enweghị obere ma na-achịkọta koodu ahụ na faịlụ mpaghara mgbe nchekwa ọ bụla nke faịlụ na-enweghị . Ọ bụrụ na-amasị gị, ị nwere ike ịgbanwe mmasị na ngwa ahụ maka iwetulata akpaaka na akwụkwọ ndekọ aha faịlụ ndị achịkọtara na-ejedebe.

Ngwa ndị ọzọ

Crunch

Crunch bụ ezigbo onye na-edezi ihe na-agụkọta ihe na-ele obere anya nke e wuru na Adobe Air.

CodeKit

Otu nwoke mebere ya dị ka ngwa Mac na-akwadoghị, CodeKit bụ ngwa Mac na-achịkọta LESS, SASS, Stylus na CoffeeScript.

Dị mfe

Mac, Linux, na ngwa Windows maka ịdọrọ na dobe nchịkọta faịlụ ndị dị obere. Ọzọkwa, koodu isi mmalite dị na GitHub .

Bido ngwa webụ ọ bụla ngwa ngwa site n'itinye CSS na JS chịkọtara ma ọ bụ nke pere mpe. Debe na ụdị omenala iche iche maka nkwalite dị mfe na mmezi na-aga n'ihu.

Nhazi faịlụ nhazi

Budata Bootstrap kacha ọhụrụ wee tinye n'ime ọrụ gị. Dịka ọmụmaatụ, ị nwere ike ịnwe ihe dịka nke a:

  ngwa/
      okirikiri nhọrọ ukwuu/
      ndebiri/
  ọha/
      css/
          akpụkpọ ụkwụ.min.css
      js/
          akpụkpọ ụkwụ.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-ọcha.png

Jiri template mmalite

Detuo isi HTML ndị a ka ịmalite.

<html>
  <isi>
    <title> Bootstrap 101 Template </title>
    <!-- Bootstrap -->
    <njikọ href = "ọha/css/bootstrap.min.css" rel = "stylesheet" >  
  </ isi>
  <ahụ>
    <h1> Ndewo, ụwa! </h1>
    <!-- Bootstrap -->
    <script src = "ọha/js/bootstrap.min.js" </script> 
  </ ahu>
</html>

Debe na koodu omenala

Na-arụ ọrụ na omenala CSS, JS na ndị ọzọ dị mkpa iji mee Bootstrap nke gị na faịlụ CSS na JS nke gị.

<html>
  <isi>
    <title> Bootstrap 101 Template </title>
    <!-- Bootstrap -->
    <njikọ href = "ọha/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>

Na-agbatị Bootstrap

Ejiri obere obere wuo ya