Pagarināt · Twitter Bootstrap latviešu valodā

Bootstrap pamatā ir LESS — dinamiska stila lapu valoda, ko izveidojis mūsu labs draugs Aleksis Seljē . Tas padara uz sistēmām balstītu CSS izstrādi ātrāku, vienkāršāku un jautrāku.

Kāpēc MAZĀK?

Viens no Bootstrap veidotājiem par to uzrakstīja ātru emuāra ierakstu , kas apkopots šeit:

Bootstrap kompilē ātrāk ~6x ātrāk ar Less, salīdzinot ar Sass
JavaScript valodā ir rakstīts mazāk, tāpēc mums ir vieglāk ienirt un labot, salīdzinot ar Ruby ar Sass.
Mazāk ir vairāk; mēs vēlamies justies kā rakstām CSS un padarām Bootstrap pieejamu visiem.

Kas ir iekļauts?

Kā CSS paplašinājums, LESS ietver mainīgos lielumus, miksus atkārtoti lietojamiem koda fragmentiem, operācijas vienkāršai matemātikai, ligzdošanu un pat krāsu funkcijas.

Uzzināt vairāk

Apmeklējiet oficiālo vietni http://lesscss.org/ , lai uzzinātu vairāk.

Tā kā mūsu CSS ir rakstīts ar Less un izmanto mainīgos un mixins, tas ir jāapkopo galīgajai ražošanas ieviešanai. Lūk, kā.

Piezīme. Ja iesniedzat izvilkšanas pieprasījumu GitHub ar modificētu CSS, jums ir jāpārkompilē CSS, izmantojot kādu no šīm metodēm.

Rīki kompilēšanai

Mezgls ar makefile

Instalējiet LESS komandrindas kompilatoru, JSHint, Recess un uglify-js globāli ar npm, izpildot šo komandu:

$ npm instalēt -g mazāk jshint padziļinājums uglify-js

Pēc instalēšanas vienkārši palaidiet makeno sāknēšanas direktorija saknes, un viss ir gatavs.

Turklāt, ja jums ir instalēta programma Watchr , varat palaist make watch, lai bootstrap tiktu automātiski pārbūvēts ikreiz, kad rediģējat failu bootstrap lib (tas nav nepieciešams, tas ir tikai ērtību metode).

Komandrinda

Instalējiet komandrindas rīku LESS, izmantojot Node, un palaidiet šādu komandu:

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

Noteikti iekļaujiet --compressšo komandu, ja mēģināt saglabāt dažus baitus!

Javascript

Lejupielādējiet jaunāko Less.js un iekļaujiet ceļu uz to (un Bootstrap) mapē <head>.

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

Lai atkārtoti kompilētu .less failus, vienkārši saglabājiet tos un atkārtoti ielādējiet savu lapu. Less.js tos apkopo un saglabā vietējā krātuvē.

Neoficiāla Mac lietotne

Neoficiālā Mac lietotne skatās .less failu direktorijus un apkopo kodu vietējos failos pēc katras skatītā .less faila saglabāšanas. Ja vēlaties, lietotnē varat pārslēgt preferences, lai automātiski samazinātu un kurā direktorijā nonāk apkopotie faili.

Vairāk lietotņu

Crunch

Crunch ir lieliska izskata LESS redaktors un kompilators, kas balstīts uz Adobe Air.

CodeKit

CodeKit ir Mac lietotne, ko izveidojis tas pats puisis, kas ir neoficiālā Mac lietotne, kas apkopo LESS, SASS, Stylus un CoffeeScript.

Vienkāršs

Mac, Linux un Windows lietotne MAZĀK failu kompilēšanai, velkot un nometot. Turklāt pirmkods atrodas vietnē GitHub .

Ātri sāciet jebkuru tīmekļa projektu, ievietojot apkopoto vai samazināto CSS un JS. Atsevišķi uzklājiet pielāgotos stilus, lai atvieglotu jaunināšanu un apkopi.

Iestatīšanas faila struktūra

Lejupielādējiet jaunāko kompilēto Bootstrap un ievietojiet to savā projektā. Piemēram, jums varētu būt kaut kas līdzīgs šim:

  lietotne / ├── izkārtojumi / └── veidnes / publiska / ├── css / │ ├── bootstrap . min . css
   ├── js / │ ├── bootstrap . min . js
   └── img / ├── glyphicons - halflings . png
       └── glifikoni - pusmēneši - balts . png

Izmantojiet startera veidni

Lai sāktu, nokopējiet tālāk norādīto pamata HTML.

<html>
  <galva>
    <title> Bootstrap 101 veidne </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stila lapa" >  
  </head>
  <body>
    <h1> Sveika, pasaule! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</html>

Slānis uz pielāgota koda

Strādājiet ar savu pielāgoto CSS, JS un citu, ja nepieciešams, lai padarītu Bootstrap savu ar saviem atsevišķiem CSS un JS failiem.

<html>
  <galva>
    <title> Bootstrap 101 veidne </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stila lapa" >  
    <!-- Projekts -->
    <link href = "public/css/application.css" rel = "stila lapa" >  
  </head>
  <body>
    <h1> Sveika, pasaule! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Projekts -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

Bootstrap pagarināšana

Būvēts ar LESS