Bootstrap

Bootstrap útwreidzje

Wreidzje Bootstrap út om te profitearjen fan opnommen stilen en komponinten, lykas MINDER fariabelen en mixins.

Heads up! Dizze dokuminten binne foar v2.3.2, dy't net langer offisjeel stipe wurdt. Besjoch de lêste ferzje fan Bootstrap!

Boud mei MINDER

MINDER CSS

Bootstrap is makke mei LESS yn har kearn, in dynamyske stylblêdtaal makke troch ús goede freon, Alexis Sellier . It makket it ûntwikkeljen fan systemen-basearre CSS flugger, makliker en leuker.

Wêrom MINDER?

Ien fan Bootstrap's makkers skreau in rappe blogpost oer dit , hjir gearfette:

  • Bootstrap kompilearret rapper ~ 6x rapper mei Minder yn ferliking mei Sass
  • Minder is skreaun yn JavaScript, wêrtroch it ús makliker is om yn te dûken en te patchjen yn ferliking mei Ruby mei Sass.
  • Minder is mear; wy wolle fiele dat wy CSS skriuwe en Bootstrap foar elkenien tagonklik meitsje.

Wat is ynbegrepen?

As útwreiding fan CSS omfettet LESS fariabelen, mixins foar werbrûkbere snippets fan koade, operaasjes foar ienfâldige wiskunde, nesting, en sels kleurfunksjes.

Lear mear

Besykje de offisjele webside op http://lesscss.org/ om mear te learen.

Bootstrap kompilearje mei Minder

Sûnt ús CSS is skreaun mei Minder en brûkt fariabelen en mixins, it moat wurde kompilearre foar definitive produksje ymplemintaasje. Hjir is hoe.

Opmerking: as jo in pull-fersyk yntsjinje by GitHub mei wizige CSS, moatte jo de CSS opnij kompilearje fia ien fan dizze metoaden.

Tools foar kompilaasje

Kommandorigel

Folgje de ynstruksjes yn it projekt readme op GitHub foar kompilaasje fia kommandorigel.

JavaSkript

Download de lêste Less.js en befetsje it paad dernei (en Bootstrap) yn 'e <head>.

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

Om de .less-bestannen opnij te kompilearjen, bewarje se gewoan en laden jo side opnij. Less.js kompilearret se en bewarret se yn lokale opslach.

Unoffisjele Mac-app

De net-offisjele Mac-app besjocht mappen fan .less-bestannen en kompilearret de koade nei lokale bestannen nei elke opslach fan in besjoen .less-bestân. As jo ​​​​wolle, kinne jo foarkar yn 'e app wikselje foar automatysk minifysjen en yn hokker map de kompilearre bestannen einigje.

Mear apps

Crunch

Crunch is in geweldige útsjocht LESS bewurker en kompilator boud op Adobe Air.

CodeKit

Makke troch deselde man as de net-offisjele Mac-app, CodeKit is in Mac-app dy't LESS, SASS, Stylus en CoffeeScript kompilearret.

Ienfâldich

Mac-, Linux- en Windows-app foar slepe-en-drop kompilaasje fan MINDER bestannen. Plus, de boarnekoade is op GitHub .

Brûk as statyske aktiva

Begjin elk webprojekt fluch troch de kompilearre of minifisearre CSS en JS yn te fallen. Laach op oanpaste stilen apart foar maklike upgrades en ûnderhâld foarút.

Setup triemstruktuer

Download de lêste kompilearre Bootstrap en plak yn jo projekt. Jo kinne bygelyks wat hawwe as dit:

  app/
      layouts/
      sjabloanen/
  iepenbier/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Brûk startersjabloan

Kopiearje de folgjende basis HTML om te begjinnen.

  1. <html>
  2.   <kop>
  3.     <title> Bootstrap 101-sjabloan </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "stylblêd" >  
  6.   </head>
  7.   <body>
  8.     <h1> Hallo, wrâld! </h1>
  9.     <!-- Bootstrap -->
  10.     <script src = "public/js/bootstrap.min.js" ></script> 
  11.   </body>
  12. </html>

Laach op oanpaste koade

Wurkje yn jo oanpaste CSS, JS, en mear as nedich om Bootstrap jo eigen te meitsjen mei jo eigen aparte CSS- en JS-bestannen.

  1. <html>
  2.   <kop>
  3.     <title> Bootstrap 101-sjabloan </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "stylblêd" >  
  6.     <!-- Projekt -->
  7.     <link href = "public/css/application.css" rel = "stylblêd" >  
  8.   </head>
  9.   <body>
  10.     <h1> Hallo, wrâld! </h1>
  11.     <!-- Bootstrap -->
  12.     <script src = "public/js/bootstrap.min.js" ></script> 
  13.     <!-- Projekt -->
  14.     <script src = "public/js/application.js" ></script> 
  15.   </body>
  16. </html>