Zgjerimi i Bootstrap

Zgjero Bootstrap për të përfituar nga stilet dhe komponentët e përfshirë, si dhe nga variablat dhe miksat LESS.

Kokat lart! Këto dokumente janë për v2.3.2, i cili nuk mbështetet më zyrtarisht. Shikoni versionin më të fundit të Bootstrap!
PAK CSS

Bootstrap është bërë me LESS në thelbin e tij, një gjuhë dinamike e fletëve të stilit e krijuar nga miku ynë i mirë, Alexis Sellier . E bën zhvillimin e CSS të bazuar në sisteme më të shpejtë, më të lehtë dhe më argëtues.

Pse PAK?

Një nga krijuesit e Bootstrap shkroi një postim të shpejtë në blog për këtë , të përmbledhur këtu:

  • Bootstrap përpilohet më shpejt ~ 6 herë më shpejt me Less në krahasim me Sass
  • Më pak është shkruar në JavaScript, duke e bërë më të lehtë për ne zhytjen dhe patch-in në krahasim me Ruby me Sass.
  • Më pak është më shumë; ne duam të ndihemi sikur po shkruajmë CSS dhe po e bëjmë Bootstrap të arritshëm për të gjithë.

Çfarë përfshihet?

Si një zgjerim i CSS, LESS përfshin variabla, miks për copa të kodit të ripërdorshme, operacione për matematikë të thjeshtë, fole, madje edhe funksione ngjyrash.

Mëso më shumë

Vizitoni faqen zyrtare në http://lesscss.org/ për të mësuar më shumë.

Meqenëse CSS-ja jonë është e shkruar me Less dhe përdor variabla dhe miks, ajo duhet të përpilohet për zbatimin përfundimtar të prodhimit. Ja si.

Shënim: Nëse po paraqisni një kërkesë tërheqjeje në GitHub me CSS të modifikuar, duhet ta ripërpiloni CSS-në nëpërmjet cilësdo prej këtyre metodave.

Mjetet për përpilim

Linja e komandës

Ndiqni udhëzimet në readme të projektit në GitHub për përpilim përmes linjës së komandës.

JavaScript

Shkarkoni Less.js më të fundit dhe përfshini shtegun drejt tij (dhe Bootstrap) në <head>.

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

Për të rikompiluar skedarët .less, thjesht ruajini ato dhe ringarkoni faqen tuaj. Less.js i përpilon ato dhe i ruan në ruajtjen lokale.

Aplikacioni jozyrtar Mac

Aplikacioni jozyrtar Mac shikon drejtoritë e skedarëve .less dhe përpilon kodin në skedarët lokalë pas çdo ruajtjeje të një skedari .less të shikuar. Nëse dëshironi, mund të ndryshoni preferencat në aplikacion për zvogëlimin automatik dhe në cilin drejtori përfundojnë skedarët e përpiluar.

Me shume aplikacione

Përtypje

Crunch është një redaktues dhe përpilues i mrekullueshëm LESS i ndërtuar në Adobe Air.

CodeKit

Krijuar nga i njëjti djalë si aplikacioni jozyrtar Mac, CodeKit është një aplikacion Mac që përpilon LESS, SASS, Stylus dhe CoffeeScript.

E thjeshte

Aplikacioni Mac, Linux dhe Windows për kompilimin me tërheqje dhe lëshim të skedarëve LESS. Plus, kodi burimor është në GitHub .

Filloni shpejt çdo projekt në ueb duke futur CSS dhe JS të përpiluar ose të minuar. Shtreso në stile të personalizuara veçmas për përmirësime dhe mirëmbajtje të lehtë duke ecur përpara.

Konfiguro strukturën e skedarit

Shkarkoni Bootstrap-in më të fundit të përpiluar dhe vendoseni në projektin tuaj. Për shembull, mund të keni diçka të tillë:

  aplikacion/
      paraqitjet/
      shabllone/
  publike/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Përdorni shabllonin fillestar

Kopjoni bazën HTML të mëposhtme për të filluar.

  1. <html>
  2. <koka>
  3. Modeli < title> Bootstrap 101 </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. </head>
  7. <trupi>
  8. <h1> Përshëndetje, botë! </h1>
  9. <!-- Bootstrap -->
  10. <script src = "public/js/bootstrap.min.js" </script>
  11. </body>
  12. </html>

Shtresa në kodin personal

Punoni në CSS, JS dhe më shumë sipas nevojës për ta bërë Bootstrap tuajin me skedarët tuaj të veçantë CSS dhe JS.

  1. <html>
  2. <koka>
  3. Modeli < title> Bootstrap 101 </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. <!-- Projekt -->
  7. <link href = "public/css/application.css" rel = "stylesheet" >
  8. </head>
  9. <trupi>
  10. <h1> Përshëndetje, botë! </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>