Bootstrap

Framlengir Bootstrap

Framlengdu Bootstrap til að nýta meðfylgjandi stíla og íhluti, sem og MINNI breytur og blöndun.

Byggt með MINNA

MINNA CSS

Bootstrap er búið til með MESS í kjarnanum, kraftmiklu stílblaðsmáli búið til af góðum vini okkar, Alexis Sellier . Það gerir þróun kerfisbundins CSS hraðari, auðveldari og skemmtilegri.

Hvers vegna MINNA?

Einn af höfundum Bootstrap skrifaði stutta bloggfærslu um þetta , dregin saman hér:

  • Bootstrap safnar saman hraðar ~6x hraðar með minna samanborið við Sass
  • Minna er skrifað í JavaScript, sem gerir það auðveldara fyrir okkur að kafa inn og plástra samanborið við Ruby með Sass.
  • Minna er meira; við viljum líða eins og við séum að skrifa CSS og gera Bootstrap aðgengilegan fyrir alla.

Hvað er innifalið?

Sem framlenging á CSS inniheldur LESS breytur, blöndun fyrir endurnotanlega kóðabúta, aðgerðir fyrir einfalda stærðfræði, hreiður og jafnvel litaaðgerðir.

Læra meira

Farðu á opinberu vefsíðuna á http://lesscss.org/ til að læra meira.

Að setja saman Bootstrap með minna

Þar sem CSS okkar er skrifað með Less og notar breytur og blöndun, þarf að setja það saman fyrir endanlega framleiðsluútfærslu. Hér er hvernig.

Athugið: Ef þú ert að senda inn dráttarbeiðni til GitHub með breyttum CSS, verður þú að setja saman CSS aftur með einhverjum af þessum aðferðum.

Verkfæri til að safna saman

Hnútur með makefile

Settu upp MESS skipanalínuþýðandann, JSHint, Recess og uglify-js á heimsvísu með npm með því að keyra eftirfarandi skipun:

$ npm setja upp -g minna jshint recess uglify-js

Þegar það hefur verið sett upp skaltu bara keyra makefrá rót ræsiskrárinnar og þú ert tilbúinn.

Að auki, ef þú ert með watchr uppsett, gætirðu keyrt make watchtil að láta bootstrap endurbyggja sjálfkrafa í hvert skipti sem þú breytir skrá í bootstrap lib (þetta er ekki nauðsynlegt, bara þægindaaðferð).

Skipanalína

Settu upp MESS skipanalínutólið í gegnum Node og keyrðu eftirfarandi skipun:

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

Vertu viss um að --compresshafa í þeirri skipun ef þú ert að reyna að vista nokkur bæti!

Javascript

Sæktu nýjasta Less.js og taktu leiðina að því (og Bootstrap) inn í <head>.

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

Til að setja saman .less skrárnar aftur skaltu bara vista þær og endurhlaða síðuna þína. Less.js safnar þeim saman og geymir í staðbundinni geymslu.

Óopinbert Mac app

Óopinbera Mac appið horfir á möppur yfir .less skrár og safnar kóðanum saman í staðbundnar skrár eftir hverja vistun á .less skrá sem horft er á. Ef þú vilt geturðu skipt um kjörstillingar í appinu fyrir sjálfvirka minnkun og í hvaða möppu söfnuðu skrárnar enda í.

Fleiri forrit

Marr

Marr er frábær útlítandi MINNA ritstjóri og þýðandi byggður á Adobe Air.

CodeKit

Búið til af sama gaur og óopinbera Mac appið, CodeKit er Mac app sem setur saman LESS, SASS, Stylus og CoffeeScript.

Einfalt

Mac, Linux og Windows app til að draga og sleppa samantekt á MÆRI skrám. Auk þess er frumkóði á GitHub .

Notaðu sem fastar eignir

Byrjaðu fljótt hvaða vefverkefni sem er með því að sleppa inn samansettum eða minnkaðri CSS og JS. Leggðu á sérsniðna stíla sérstaklega til að auðvelda uppfærslur og viðhald áfram.

Uppsetning skráarskipulags

Sæktu nýjustu samansettu Bootstrap og settu inn í verkefnið þitt. Til dæmis gætirðu haft eitthvað eins og þetta:

  app / ├── skipulag / └── sniðmát / opinbert / ├── css / │ ├── ræsiband . mín . css
   ├── js / │ ├── ræsiband . mín . js
   └── img / ├── glyphicons - halflings . png
       └── glyphicons - halflings - hvítt . png

Notaðu byrjunarsniðmát

Afritaðu eftirfarandi grunn HTML til að byrja.

  1. <html>
  2.   <haus>
  3.     <title> Bootstrap 101 sniðmát </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "stílblað" >  
  6.   </head>
  7.   <líkami>
  8.     <h1> Halló, heimur! </h1>
  9.     <!-- Bootstrap -->
  10.     <script src = "public/js/bootstrap.min.js" ></script> 
  11.   </body>
  12. </html>

Lag á sérsniðinn kóða

Vinndu í sérsniðnu CSS, JS og fleira eftir þörfum til að gera Bootstrap að þínu eigin með þínum eigin aðskildum CSS og JS skrám.

  1. <html>
  2.   <haus>
  3.     <title> Bootstrap 101 sniðmát </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "stílblað" >  
  6.     <!-- Verkefni -->
  7.     <link href = "public/css/application.css" rel = "stílblað" >  
  8.   </head>
  9.   <líkami>
  10.     <h1> Halló, heimur! </h1>
  11.     <!-- Bootstrap -->
  12.     <script src = "public/js/bootstrap.min.js" ></script> 
  13.     <!-- Verkefni -->
  14.     <script src = "public/js/application.js" ></script> 
  15.   </body>
  16. </html>