Пашырыце 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 - выдатны рэдактар і кампілятар LESS, створаны на аснове Adobe Air.
Створаны тым жа чалавекам, што і неафіцыйнае прыкладанне для Mac, CodeKit - гэта дадатак для Mac, якое кампілюе LESS, SASS, Stylus і CoffeeScript.
Прыкладанне для Mac, Linux і Windows для кампіляцыі LESS файлаў перацягваннем. Акрамя таго, зыходны код знаходзіцца на GitHub .
Хутка запусціце любы вэб-праект, дадаўшы скампіляваны або скарочаны CSS і JS. Накладвайце індывідуальныя стылі асобна для лёгкага абнаўлення і далейшага абслугоўвання.
Спампуйце апошнюю скампіляваную версію Bootstrap і змясціце яе ў свой праект. Напрыклад, у вас можа быць нешта накшталт гэтага:
дадатак/ макеты/ шаблоны/ грамадскасць/ css/ bootstrap.min.css js/ bootstrap.min.js малюнак/ glyphicons-halflings.png glyphicons-halfings-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 = "табліца стыляў" >
- <!-- Праект -->
- <спасылка 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>