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 gbanwetụrụ, ị ga-emerịrị usoro CSS ọ bụla.

Ngwa maka ịchịkọta

Ahịrị iwu

Soro ntuziaka dị n'ime ọrụ ahụ readme na GitHub maka ịchịkọta site na ahịrị iwu.

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-enweghị atụ 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 -->
    <njikọ href = "ọha/css/application.css" rel = "stylesheet" >  
  </ isi>
  <ahụ>
    <h1> Ndewo, ụwa! </h1>
    <!-- Bootstrap -->
    <script src = "ọha/js/bootstrap.min.js" </script> 
    <!-- Project -->
    <script src = "public/js/application.js" </script> 
  </ ahu>
</html>

Na-agbatị Bootstrap

Ejiri obere obere wuo ya