Bootstrap pagarināšana

Paplašiniet Bootstrap, lai izmantotu iekļautos stilus un komponentus, kā arī MAZĀK mainīgo un miksu.

Uzmanību! Šie dokumenti ir paredzēti v2.3.2, kas vairs netiek oficiāli atbalstīts. Apskatiet jaunāko Bootstrap versiju!
MAZĀK CSS

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

Komandrinda

Izpildiet norādījumus projekta readme vietnē GitHub, lai kompilētu, izmantojot komandrindu.

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 lietojumprogramma, 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/
  publisks/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.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="stylesheet">
  </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="stylesheet">
    <!-- Projekts -->
    <link href="public/css/application.css" rel="stylesheet">
  </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>