Oñembopukúvo Bootstrap

Embotuichave Bootstrap eipuru hag̃ua umi estilo ha componente oikevaꞌekue, avei umi mbaꞌekuaarã ha mixin LESS rehegua.

MENOS CSS rehegua

Bootstrap ojejapo LESS reheve ipype, peteĩ ñe’ẽ estilo-pegua dinámico omoheñóiva ñane angirũ porã, Alexis Sellier . Ojapo pyaꞌeve, ndahasýi ha igustove hag̃ua oñembosakoꞌi hag̃ua CSS sistema rehegua.

Mba’érepa SA’ive?

Peteĩ Bootstrap apohare ohai peteĩ kuatiañe’ẽ pya’e blog-pe ko mba’ére , oñembohysýiva ko’ápe:

  • Bootstrap ombojoaju pyaꞌeve ~6x pyaꞌeve Less ndive oñembojojávo Sass rehe
  • Sa’ive ojehai JavaScript-pe, ombohape ñandéve ñañembohysýi ha ñamoĩ parche oñembojojávo Ruby rehe Sass ndive.
  • Sa’ive ha’e hetave; roñanduse rohaiháicha CSS ha rojapo Bootstrap oñemboja hag̃ua opavavetépe.

Mba'épa oike ipype?

CSS ñembotuichave ramo, LESS oike umi mbaꞌekuaarã, mixin umi código pehẽngue ojepuru jeývape g̃uarã, tembiaporã matemática simple-pe g̃uarã, anidación ha umi función color rehegua jepe.

Eikuaave hag̃ua

Eike página web oficial-pe http://lesscss.org/-pe reikuaave haĝua.

Ñande CSS ojehai rupi Less ndive ha oipuru umi variable ha mixin, tekotevẽ oñembyaty oñemboguata hag̃ua producción paha. Péina mba'éichapa.

Ñe’ẽñemi: Emondo ramo peteĩ mba’ejerure ojeipe’a hag̃ua GitHub-pe CSS oñemoambuéva reheve, embojoaju jeyva’erã CSS oimeraẽva ko’ã mba’ekuaarã rupive.

Tembipururã oñembosako’i hag̃ua

Línea de comando rehegua

Ejapo umi ñe’ẽmondo oĩva proyecto readme -pe GitHub-pe oñemboheko hag̃ua ñe’ẽmondo rape rupive.

JavaScript rehegua

Emboguejy Less.js ipyahuvéva ha emoinge tape ohóva hese (ha Bootstrap) <head>.

<link rel = "hoja de estilo/menos" href = "/tape/a/bootstrap.less" > <script src = "/tape/a/menos.js" ></script>  
 

Oñembyaty jey hag̃ua umi .less vore, eñongatu mante ha ekarga jey nde página. Less.js ombyaty ha oñongatu ñeñongatuha tendápe.

Mac app ndaha’éiva oficial

Mac purupyrã ndaha’éiva oficial ohecha umi directorio .less vore rehegua ha ombyaty código vore local-pe opaite ñeñongatu rire peteĩ vore .less ojesarekóva rehe. Oiméramo ndegusta, ikatu emoambue umi preferencia oĩva app-pe oñemboguejy hag̃ua ijeheguiete ha mba’e directorio-pepa opa umi archivo oñembyatýva.

Hetave aplicación

Crunch rehegua

Crunch haꞌehína peteĩ editor ha compilador LESS ojehecha porãitereíva oñemopuꞌavaꞌekue Adobe Air-pe.

CódigoKit rehegua

Ojapo peteĩchagua karai Mac app ndaha’éiva oficial ndive, CodeKit ha’e peteĩ Mac app ombyatýva LESS, SASS, Stylus ha CoffeeScript.

Iporã’ỹva

Mac, Linux ha Windows purupyrã ojegueraha ha ojeity hag̃ua oñemboheko hag̃ua vore MBO’Evéva. Avei, pe código fuente oĩ GitHub -pe .

Emoñepyrũ pyaꞌe oimeraẽva tembiaporã web rehegua eitykuévo CSS ha JS oñemboheko térã oñemboguejýva. Capa umi estilo personalizado rehe por separado umi actualización ndahasýiva ha mantenimiento ohóva tenonde gotyo.

Omohenda vore ñemohenda

Emboguejy Bootstrap oñembosako’íva ipyahuvéva ha emoĩ nde proyecto-pe. Por ehémplo, ikatu reguereko peteĩ mbaʼe koʼãichagua:

  app/ rehegua.
      umi diseño rehegua/ .
      plantillas rehegua/ .
  opavavépe g̃uarã/
      css/ rehegua.
          bootstrap.min.css rehegua
      js/ rehegua.
          bootstrap.min.js rehegua
      img/ rehegua.
          glificones-halflings.png rehegua
          glificones-halflings-blanco.png rehegua

Eipuru plantilla de arranque

Emboguejy ko’ã HTML base eñepyrũ hag̃ua.

  1. <html> rehegua
  2. <akã>
  3. <title> Ñepyrũrã 101 Plantilla </título>
  4. <!-- Ñepyrũrã -->
  5. <enlace href = "public/css/bootstrap.min.css" rel = "hoja de estilo" >
  6. </head> rehegua
  7. <tete> rehegua
  8. <h1> ¡Maitei, mundo! </h1> rehegua
  9. <!-- Ñepyrũrã -->
  10. <script src = "público/js/bootstrap.min.js" </script> rehegua
  11. </body> rehegua
  12. </html> rehegua

Capa en código personalizado rehegua

Emba’apo ne CSS, JS ha hetave mba’ekuaarãme tekotevẽháicha ejapo hag̃ua Bootstrap nde mba’éva nde CSS ha JS vore añónte reheve.

  1. <html> rehegua
  2. <akã>
  3. <title> Ñepyrũrã 101 Plantilla </título>
  4. <!-- Ñepyrũrã -->
  5. <enlace href = "public/css/bootstrap.min.css" rel = "hoja de estilo" >
  6. <!-- Proyecto --> rehegua
  7. <enlace href = "public/css/aplicación.css" rel = "hoja de estilo" >
  8. </head> rehegua
  9. <tete> rehegua
  10. <h1> ¡Maitei, mundo! </h1> rehegua
  11. <!-- Ñepyrũrã -->
  12. <script src = "público/js/bootstrap.min.js" </script> rehegua
  13. <!-- Proyecto --> rehegua
  14. <script src = "público/js/aplicación.js" </script> rehegua
  15. </body> rehegua
  16. </html> rehegua