Leathnaigh · Bootstrap as Gaeilge

Déantar Bootstrap le LESS ina chroílár, teanga stílbhileog dhinimiciúil cruthaithe ag ár gcara maith, Alexis Sellier . Déanann sé CSS atá bunaithe ar chórais a fhorbairt níos tapúla, níos éasca agus níos spraoi.

Cén fáth NÍOS LÚ?

Scríobh duine de chruthaitheoirí Bootstrap blagphost tapa faoi seo , a bhfuil achoimre air anseo:

Tiomsaíonn Bootstrap níos tapúla ~6x níos tapúla le Níos lú i gcomparáid le Sass
Tá níos lú scríofa i JavaScript, rud a fhágann go bhfuil sé níos éasca dúinn tumadh isteach agus paiste a dhéanamh i gcomparáid le Ruby le Sass.
Níos lú tá níos mó; ba mhaith linn a bhraitheann go bhfuil muid ag scríobh CSS agus ag déanamh Bootstrap sochaideartha do chách.

Cad atá san áireamh?

Mar shíneadh ar CSS, folaíonn LESS athróga, meascáin le haghaidh gearrthóga cód ath-inúsáidte, oibríochtaí le haghaidh mata simplí, neadú, agus fiú feidhmeanna datha.

Foghlaim níos mó

Tabhair cuairt ar an láithreán gréasáin oifigiúil ag http://lesscss.org/ chun tuilleadh a fhoghlaim.

Ós rud é go bhfuil ár CSS scríofa le Níos lú agus go n-úsáideann sé athróga agus meascáin, ní mór é a thiomsú le haghaidh cur i bhfeidhm táirgeachta deiridh. Seo é an chaoi.

Nóta: Má tá iarratas tarraingthe á chur isteach agat chuig GitHub le CSS modhnaithe, ní mór duit an CSS a ath-thiomsú trí aon cheann de na modhanna seo.

Uirlisí le haghaidh tiomsú

Nód le makefile

Suiteáil an tiomsaitheoir líne ordaithe LESS, JSHint, Recess, agus uglify-js ar fud an domhain le npm tríd an ordú seo a leanas a rith:

$npm suiteáil -g níos lú jshint sos uglify-js

Nuair a bheidh tú suiteáilte, rith makeó fhréamh do eolaire bootstrap agus tá tú réidh.

Ina theannta sin, má tá faireoir suiteáilte agat, is féidir go n-athróidh tú make watchbootstrap go huathoibríoch gach uair a chuireann tú comhad in eagar sa lib bootstrap (níl sé seo ag teastáil, níl de dhíth ach modh áise).

Líne ordaithe

Suiteáil an uirlis líne ordaithe LESS trí Nód agus rith an t-ordú seo a leanas:

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

Bí cinnte a chur --compresssan ordú sin má tá tú ag iarraidh roinnt beart a shábháil!

JavaScript

Íoslódáil na Less.js is déanaí agus cuir an cosán chuige (agus Bootstrap) san áireamh sa <head>.

<link rel = "stílbhileog/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

Chun na comhaid .less a ath-thiomsú, níl le déanamh ach iad a shábháil agus do leathanach a athlódáil. Déanann Less.js iad a thiomsú agus a stóráil i stóráil áitiúil.

Aip neamhoifigiúil Mac

Féachann an aip neamhoifigiúil Mac ar eolairí de chomhaid .less agus tiomsaíonn sé an cód chuig comhaid áitiúla tar éis gach sábháil ar chomhad .less faire. Más mian leat, is féidir leat sainroghanna a scoránaigh san aip le haghaidh mionú uathoibríoch agus cén t-eolaire a chríochnaíonn na comhaid tiomsaithe.

Tuilleadh apps

Géarchor

Is eagarthóir agus tiomsaitheoir NÍOS chosúil é Crunch a tógadh ar Adobe Air.

CodeKit

Cruthaithe ag an bhfear céanna leis an app Mac neamhoifigiúil, is app Mac é CodeKit a thiomsaíonn LESS, SASS, Stylus, agus CoffeeScript.

Simplí

Aip Mac, Linux agus Windows chun comhaid NÍOS LÚ a thiomsú agus a tharraingt. Ina theannta sin, tá an cód foinse ar GitHub .

Cuir tús le haon tionscadal gréasáin go tapa trí CSS agus JS tiomsaithe nó mionghearrtha a chur isteach. Ciseal ar stíleanna saincheaptha ar leithligh le haghaidh uasghrádú agus cothabháil éasca ag dul ar aghaidh.

Socrú struchtúr comhaid

Íoslódáil an Bootstrap tiomsaithe is déanaí agus cuir isteach i do thionscadal. Mar shampla, b'fhéidir go mbeadh rud éigin mar seo agat:

  aip/
      leagan amach/
      teimpléid/
  poiblí/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halfings.png
          glyphicons-halfings-white.png

Bain úsáid as teimpléad tosaithe

Cóipeáil an bonn HTML seo a leanas le tosú.

<html>
  <ceann>
    <title> Teimpléad Bootstrap 101 </title>
    <!-- Bootstrap -->
    <nasc href = "public/css/bootstrap.min.css" rel = "stílbhileog" >  
  </ceann>
  <comhlacht>
    <h1> Dia duit, ar domhan! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </corp>
</html>

Sraith ar chód saincheaptha

Oibrigh i do CSS saincheaptha, JS, agus níos mó de réir mar is gá chun do chuid féin a dhéanamh do Bootstrap le do chomhaid CSS agus JS ar leith féin.

<html>
  <ceann>
    <title> Teimpléad Bootstrap 101 </title>
    <!-- Bootstrap -->
    <nasc href = "public/css/bootstrap.min.css" rel = "stílbhileog" >  
    <!-- Tionscadal -->
    <link href = "public/css/application.css" rel = "stílbhileog" >  
  </ceann>
  <comhlacht>
    <h1> Dia duit, ar domhan! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Tionscadal -->
    <script src = "public/js/application.js" ></script> 
  </corp>
</html>

Bootstrap á leathnú

Tógtha le LÚIDE