Проширете го Bootstrap за да ги искористите вклучените стилови и компоненти, како и ПОМАЛКУ променливи и мешавини.
Bootstrap е направен со LESS во неговото јадро, динамичен јазик за стилски лист создаден од нашиот добар пријател, Алексис Селиер . Го прави развојот на CSS базиран на системи побрзо, полесно и позабавно.
Еден од креаторите на Bootstrap напиша брз блог пост за ова , сумиран овде:
Како продолжување на CSS, LESS вклучува променливи, миксини за фрагменти од код што може да се користат повеќекратно, операции за едноставна математика, вгнездување, па дури и функции за боја.
Посетете ја официјалната веб-страница на http://lesscss.org/ за да дознаете повеќе.
Бидејќи нашиот CSS е напишан со Less и користи променливи и миксини, треба да се компајлира за финална имплементација на производството. Еве како.
Следете ги инструкциите во проектот readme на GitHub за компајлирање преку командната линија.
Преземете го најновиот Less.js и вклучете ја патеката до неа (и Bootstrap) во <head>
.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
За да ги прекомпајлирате датотеките .less, само зачувајте ги и повторно вчитајте ја вашата страница. Less.js ги компајлира и ги складира во локално складирање.
Неофицијалната апликација за Mac гледа директориуми со датотеки .less и го компајлира кодот во локални датотеки по секое зачувување на гледана датотека .less. Ако сакате, можете да ги префрлите параметрите во апликацијата за автоматско минимизирање и во кој директориум завршуваат компајлираните датотеки.
Crunch е извонреден уредник и компајлер за ПОМАЛКУ, изграден на Adobe Air.
Создадена од истиот човек како и неофицијалната апликација за Mac, CodeKit е апликација за Mac која компајлира LESS, SASS, Stylus и CoffeeScript.
Апликација за Mac, Linux и Windows за влечење и пушти компајлирање на ПОМАЛКУ датотеки. Плус, изворниот код е на GitHub .
Брзо стартувајте кој било веб-проект со пуштање на компајлираните или минифицираните CSS и JS. Слој на сопствени стилови одделно за лесни надградби и одржување напред.
Преземете го најновиот компајлиран Bootstrap и ставете го во вашиот проект. На пример, може да имате нешто како ова:
апликација/ распореди/ шаблони/ јавно/ css/ bootstrap.min.css js/ bootstrap.min.js img/ glyphicons-halflings.png glyphicons-halflings-white.png
Копирајте го следниов основен HTML за да започнете.
- <html>
- <глава>
- Шаблон < title> Bootstrap 101 </title>
- <!-- Bootstrap -->
- <врска href = "public/css/bootstrap.min.css" rel = "лист на стилови" >
- </head>
- <тело>
- <h1> Здраво, свет! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" </script>
- </body>
- </html>
Работете во вашите сопствени CSS, JS и повеќе колку што е потребно за да го направите Bootstrap ваш со ваши посебни CSS и JS датотеки.
- <html>
- <глава>
- Шаблон < title> Bootstrap 101 </title>
- <!-- Bootstrap -->
- <врска href = "public/css/bootstrap.min.css" rel = "лист на стилови" >
- <!-- Проект -->
- <link href = "public/css/application.css" rel = "стил лист" >
- </head>
- <тело>
- <h1> Здраво, свет! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" </script>
- <!-- Проект -->
- <script src = "public/js/application.js" </script>
- </body>
- </html>