Etiam porta sem malesuada magna mollis euismod. Mecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum і eros.
Bootstrap - гэта набор інструментаў ад Twitter, прызначаны для пачатку распрацоўкі вэб-праграм і сайтаў.
Ён уключае базавы CSS і HTML для тыпаграфікі, формаў, кнопак, табліц, сетак, навігацыі і г.д.
Папярэджанне для батанікаў: Bootstrap створаны з выкарыстаннем Less і распрацаваны, каб працаваць адразу з улікам сучасных браўзераў.
Для самага хуткага і простага пачатку проста скапіруйце гэты фрагмент на сваю вэб-старонку.
Прыхільнік выкарыстання Less? Няма праблем, проста клануйце рэпазітар і дадайце гэтыя радкі:
Спампоўка, разгалінаванне, выцягванне, праблемы з файлам і многае іншае з афіцыйным рэпазітарам Bootstrap на Github.
У цяперашні час v1.3.0
Інжынеры Twitter гістарычна выкарыстоўвалі практычна любую бібліятэку, з якой яны былі знаёмыя, каб адпавядаць патрабаванням інтэрфейсу. Bootstrap пачаўся як адказ на выклікі, якія паўсталі. Дзякуючы дапамозе многіх выдатных людзей, Bootstrap значна вырас.
Больш падрабязна на dev.twitter.com ›
Bootstrap пратэставаны і падтрымліваецца ў асноўных сучасных браўзерах, такіх як Chrome, Safari, Internet Explorer і Firefox.
Bootstrap пастаўляецца ў камплекце са скампіляваным CSS, нескампіляваным і прыкладамі шаблонаў.
Сістэма сеткі па змаўчанні, прадстаўленая як частка Bootstrap, - гэта сетка з 16 слупкоў шырынёй 940 пікселяў. Гэта разнавіднасць папулярнай сістэмы сеткі 960, але без дадатковых палёў/запаўнення злева і справа.
Як паказана тут, базавы макет можа быць створаны з двума "слупкамі", кожны з якіх ахоплівае некалькі з 16 асноўных слупкоў, якія мы вызначылі як частку нашай сістэмы сеткі. Больш варыянтаў глядзіце ў прыкладах ніжэй.
- <div class = "row" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
Пры неабходнасці ўкладзіце свой кантэнт, стварыўшы ў .row
існуючым слупку.
- <div class = "row" >
- <div class = "span12" >
- Узровень 1 слупка
- <div class = "row" >
- <div class = "span6" >
- Узровень 2
- </div>
- <div class = "span6" >
- Узровень 2
- </div>
- </div>
- </div>
- </div>
У Bootstrap убудавана некалькі зменных для наладжвання сістэмы сеткі па змаўчанні 940 пікселяў. Трохі наладзіўшы, вы можаце змяніць памер калон, іх жолабы і кантэйнер, у якім яны знаходзяцца.
Усе зменныя, неабходныя для мадыфікацыі сістэмы сеткі, знаходзяцца ў preboot.less
.
Пераменная | Значэнне па змаўчанні | Апісанне |
---|---|---|
@gridColumns |
16 | Колькасць слупкоў у сетцы |
@gridColumnWidth |
40 пікселяў | Шырыня кожнага слупка ў сетцы |
@gridGutterWidth |
20 пікселяў | Адмоўны прабел паміж кожным слупком |
@siteWidth |
Вылічаная сума ўсіх калон і жолабаў | Мы выкарыстоўваем некаторую базавую адпаведнасць, каб падлічыць колькасць калон і жолабаў і ўсталяваць шырыню .fixed-container() міксіна. |
Змяненне сеткі азначае змяненне трох @grid-*
зменных і паўторную кампіляцыю файлаў Less.
Bootstrap абсталяваны для працы з сістэмай сеткі да 24 слупкоў; па змаўчанні проста 16. Вось як будуць выглядаць вашыя зменныя сеткі, настроеныя на сетку з 24 слупкоў.
- @gridColumns : 24 ;
- @gridColumnWidth : 20 пікселяў ;
- @gridGutterWidth : 20 пікселяў ;
Пасля перакампіляцыі вы будзеце гатовыя!
Стандартны і просты макет шырынёй 940 пікселяў, размешчаны па цэнтры практычна для любога вэб-сайта або старонкі, прадстаўлены адным <div.container>
.
- <цела>
- <div class = "кантэйнер" >
- ...
- </div>
- </body>
Альтэрнатыўная гнуткая плыўная структура старонкі з мінімальнай і максімальнай шырынёй і левай бакавой панэллю. Выдатна падыходзіць для праграм і дакументаў.
- <цела>
- <div class = "container-fluid" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "content" >
- ...
- </div>
- </div>
- </body>
Стандартная друкарская іерархія для структуравання вашых вэб-старонак.
Уся друкарская сетка заснавана на дзвюх зменных Less у нашым файле preboot.less: @basefont
і @baseline
. Першы - гэта базавы памер шрыфта, які выкарыстоўваецца паўсюль, а другі - базавая вышыня лініі.
Мы выкарыстоўваем гэтыя зменныя і некаторую матэматыку, каб стварыць палі, запаўненні і вышыню радкоў для ўсіх нашых тыпаў і шмат іншага.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Выкарыстанне націску, зваротаў і скарачэнняў
<strong>
<em>
<address>
<abbr>
Тэгі акцэнту ( <strong>
і <em>
) павінны выкарыстоўвацца для пазначэння дадатковай важнасці або акцэнту слова ці фразы ў параўнанні з яго копіяй. Выкарыстоўвайце <strong>
для важнасці і <em>
для падкрэслення .
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Mecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
Заўвага: усё яшчэ можна выкарыстоўваць тэгі <b>
і <i>
ў HTML5, і іх неабавязкова выдзяляць тлустым шрыфтам і курсівам адпаведна (хаця, калі ёсць больш семантычны элемент, выкарыстоўвайце яго). <b>
прызначана для вылучэння слоў або фраз без перадачы дадатковай важнасці, у той час як <i>
у асноўным для голасу, тэхнічных тэрмінаў і г.д.
Элемент <address>
выкарыстоўваецца для атрымання кантактнай інфармацыі для яго бліжэйшага продка або ўсёй працы. Вось два прыклады таго, як гэта можна выкарыстоўваць:
Заўвага: кожны радок <address>
павінен заканчвацца разрывам радка ( <br />
) або быць загорнуты ў тэг на ўзроўні блока (напрыклад, <p>
), каб правільна структураваць змест.
Для скарачэнняў і абрэвіятур выкарыстоўвайце <abbr>
тэг ( <acronym>
састарэў у HTML5 ). Змесціце скарочаную форму ў тэг і задайце назву для поўнага імя.
<blockquote>
<p>
<small>
Каб уключыць цытату, абгарніце <blockquote>
вакол <p>
і <small>
тэгі. Выкарыстоўвайце <small>
элемент, каб спасылацца на крыніцу, і вы атрымаеце працяжнік —
перад ім.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Доктар Юліус Хіберт
- <цытата>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
- <small> Доктар Юліюс Хіберт </small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
Стылёва аформіце свой код з дапамогай двух простых тэгаў. Для яшчэ большага ўзрушэння праз javascript запусціце бібліятэку Google code prettify і ўсё гатова.
Код, блокі або проста ўбудаваныя фрагменты могуць быць адлюстраваны са стылем, проста змясціўшы патрэбны тэг. Для блокаў кода, якія ахопліваюць некалькі радкоў, выкарыстоўвайце <pre>
элемент. Для ўбудаванага кода выкарыстоўвайце <code>
элемент.
элемент | Вынік |
---|---|
<code> |
У такім радку тэксту ваш абгорнуты код будзе выглядаць як гэты >html< элемент. |
<pre> |
<div> <h1>Загаловак</h1> <p>Нешта тут...</p> </div> Заўвага: пераканайцеся, што код знаходзіцца ў |
<pre class="prettyprint"> |
Выкарыстоўваючы бібліятэку google-code-prettify, вашы блокі кода атрымліваюць крыху іншы візуальны стыль і аўтаматычнае падсвятленне сінтаксісу. <div> <h1> Загаловак </h1> <p> Нешта тут... </p> </div> Спампуйце google-code-prettify і праглядзіце readme, каб даведацца, як карыстацца. |
<span class="label">
Прыцягніце ўвагу або пазначце любую фразу ў асноўным тэксце.
Калі-небудзь патрэбны быў адзін з тых шыкоўных навінак! або Важныя сцягі пры напісанні кода? Ну, цяпер яны ў вас ёсць. Вось што ўключана па змаўчанні:
Этыкетка | Вынік |
---|---|
<span class="label">Default</span> |
Па змаўчанні |
<span class="label success">New</span> |
Новы |
<span class="label warning">Warning</span> |
Папярэджанне |
<span class="label important">Important</span> |
Важны |
<span class="label notice">Notice</span> |
Заўвага |
Адлюстроўвайце мініяцюры рознага памеру на старонках з нізкім утрыманнем HTML і мінімальнымі стылямі.
Эскізы .media-grid
могуць быць любога памеру, але лепш за ўсё яны працуюць, калі супастаўляюцца непасрэдна з убудаванай сістэмай сеткі Bootstrap. Шырыня выявы, напрыклад 90, 210 і 330, спалучаецца з некалькімі пікселямі запаўнення, каб адпавядаць памерам .span2
, .span4
і .span6
слупкоў.
Медыясеткі простыя ў выкарыстанні і даволі простыя з боку разметкі. Іх памеры цалкам залежаць ад памеру ўключаных малюнкаў.
- <ul class = "media-grid" >
- <li>
- <a href = "#" >
- <img class = "мініяцюра" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- <li>
- <a href = "#" >
- <img class = "мініяцюра" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- </ul>
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Сталы выдатныя - для многіх рэчаў. Вялікія табліцы, аднак, патрабуюць крыху любові да разметкі, каб быць карыснымі, маштабаванымі і чытэльнымі (на ўзроўні кода). Вось некалькі парад, якія дапамогуць.
Заўсёды складвайце загалоўкі слупкоў <thead>
такім чынам, каб іерархія была <thead>
> <tr>
> <th>
.
Падобна загалоўкам слупкоў, усё змесціва вашай табліцы павінна быць загорнута ў , <tbody>
каб ваша іерархія была <tbody>
> <tr>
> <td>
.
Усе табліцы будуць аўтаматычна стылізаваны толькі з асноўнымі межамі для забеспячэння чытальнасці і захавання структуры. Няма неабходнасці дадаваць дадатковыя класы або атрыбуты.
# | Імя | Прозвішча | мова |
---|---|---|---|
1 | Некаторыя | адзін | англійская |
2 | Джо | Sixpack | англійская |
3 | Сцю | Дэнт | Код |
- <табліца>
- ...
- </table>
Пафантазіруйце са сваімі сталамі, дадаўшы зебрападобныя паласы - проста дадайце .zebra-striped
клас.
# | Імя | Прозвішча | мова |
---|---|---|---|
1 | Некаторыя | адзін | англійская |
2 | Джо | Sixpack | англійская |
3 | Сцю | Дэнт | Код |
Заўвага: Zebra-striping - гэта прагрэсіўнае паляпшэнне, недаступнае для старых браўзераў, такіх як IE8 і ніжэй.
- <table class = "zebra-striped" >
- ...
- </table>
Беручы папярэдні прыклад, мы паляпшаем карыснасць нашых табліц, забяспечваючы функцыянальнасць сартавання праз jQuery і плагін Tablesorter . Пстрыкніце загаловак любога слупка, каб змяніць сартаванне.
# | Імя | Прозвішча | мова |
---|---|---|---|
2 | Джо | Sixpack | англійская |
3 | Сцю | Дэнт | Код |
1 | Ваша | адзін | англійская |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <скрыпт >
- $ ( функцыя () {
- $ ( "табліца#sortTableExample" ). сартавальнік табліц ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "zebra-striped" >
- ...
- </table>
Усе формы маюць стылі па змаўчанні, каб яны былі зручнымі для чытання і з магчымасцю маштабавання. Стылі прадугледжаны для ўводу тэксту, спісаў выбару, тэкставых палёў, перамыкачоў і сцяжкоў, а таксама кнопак.
Дадайце .form-stacked
ў форму HTML, і вы будзеце мець цэтлікі ўверсе палёў, а не злева. Гэта выдатна працуе, калі вашы формы кароткія або ў вас ёсць два слупкі ўваходных дадзеных для больш цяжкіх формаў.
Наладзьце любую форму input
, select
або textarea
шырыню, дадаўшы ўсяго некалькі класаў у разметку.
Пачынаючы з версіі 1.3.0, мы дадалі класы памеру на аснове сеткі для элементаў формы. Калі ласка, выкарыстоўвайце гэтыя замест існуючых класаў .mini
, .small
і г.д.
Згодна з пагадненнем, кнопкі выкарыстоўваюцца для дзеянняў, а спасылкі - для аб'ектаў. Напрыклад, "Спампаваць" можа быць кнопкай, а "апошняя дзейнасць" - спасылкай.
Усе кнопкі па змаўчанні маюць светла-шэры стыль, але для розных каляровых стыляў можна прымяніць шэраг функцыянальных класаў. Гэтыя класы ўключаюць у сябе сіні .primary
клас, светла-блакітны .info
клас, зялёны .success
клас і чырвоны .danger
клас.
Стылі кнопак можна ўжываць да чаго заўгодна .btn
. Як правіла, вы хочаце прымяніць іх толькі да элементаў <a>
, <button>
, і select . <input>
Вось як гэта выглядае:
Любіце большыя ці меншыя гузікі? Майце на гэта!
Для кнопак, якія не актыўныя або адключаны праграмай па той ці іншай прычыне, выкарыстоўвайце стан адключаны. Гэта .disabled
для спасылак і :disabled
для <button>
элементаў.
.alert-message
Паведамленні ў адзін радок для асвятлення няўдачы, магчымай няўдачы або поспеху дзеяння. Асабліва карысна для формаў.
- <div class = "папярэджанне аб папярэджанні" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Святое гуакамоле! </strong> Лепш праверце сябе, вы выглядаеце не надта добра. </p>
- </div>
.alert-message.block-message
Для паведамленняў, якія патрабуюць невялікага тлумачэння, у нас ёсць абвесткі аб стылі абзацаў. Яны ідэальна падыходзяць для ўсплывання больш доўгіх паведамленняў пра памылкі, папярэджання карыстальніка аб незавершаным дзеянні або проста для прадстаўлення інфармацыі для большага акцэнту на старонцы.
- <div class = "alert-message block-message warning" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Святое гуакамоле! Гэта папярэджанне! </strong> Лепш праверце сябе, вы выглядаеце не надта добра. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
- <div class = "alert-actions" >
- <a class = "btn small" href = "#" > Выканайце гэта </a> <a class = "btn small" href = "#" > Ці зрабіце гэта </a>
- </div>
- </div>
Мадальныя - дыялогі або лайтбоксы - выдатна падыходзяць для кантэкстных дзеянняў у сітуацыях, калі важна захаваць фонавы кантэкст.
Адно добрае цела…
Twipsies вельмі карысныя, каб дапамагчы збянтэжаным карыстальнікам і накіраваць іх у правільным кірунку.
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit actuantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae actuantium fugit voluptas nemo voluptas voluptatem rem quaesi aut verquaitatis.
Выкарыстоўвайце ўсплывальныя вобразы, каб даць падтэкставую інфармацыю на старонку, не закранаючы макет.
Etiam porta sem malesuada magna mollis euismod. Mecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum і eros.
Інтэграцыя javascript з бібліятэкай Bootstrap вельмі простая. Ніжэй мы разгледзім асновы і прапануем вам некалькі цудоўных убудоў, каб вы пачалі!
Ажывіце некаторыя з асноўных кампанентаў Bootstrap з дапамогай новых карыстальніцкіх убудоў, якія працуюць з jQuery і Ender . Мы рэкамендуем вам пашыраць і мадыфікаваць іх у адпаведнасці з вашымі канкрэтнымі патрэбамі распрацоўкі.
Файл | Апісанне |
---|---|
bootstrap-modal.js | Наш мадальны плагін - гэта вельмі тонкі варыянт традыцыйнага мадальнага плагіна js! Мы асабліва паклапаціліся аб тым, каб уключаць у твітэр толькі тыя функцыі, якія нам патрэбныя. |
bootstrap-alerts.js | Убудова абвестак - гэта вельмі маленькі клас для дадання блізкіх функцый да абвестак. |
bootstrap-dropdown.js | Гэты плагін прызначаны для дадання ўзаемадзеяння з выпадальным меню ў верхнюю панэль загрузкі або навігацыю з укладкамі. |
bootstrap-scrollspy.js | Плагін ScrollSpy прызначаны для дадання аўтаматычнага абнаўлення навігацыі на аснове пазіцыі пракруткі да верхняй панэлі загрузкі. |
bootstrap-tabs.js | Гэты плагін дадае хуткія, дынамічныя функцыі ўкладак і таблетак для перамяшчэння па мясцовым змесціве. |
bootstrap-twipsy.js | Заснаваны на выдатным плагіне jQuery.tipsy, напісаным Джэйсанам Фрэймам; twipsy - гэта абноўленая версія, якая не абапіраецца на выявы, выкарыстоўвае css3 для анімацыі і атрыбуты дадзеных для лакальнага захоўвання загалоўкаў! |
bootstrap-popover.js | Убудова Popover забяспечвае просты інтэрфейс для дадання ўсплывальных праграм у ваша прыкладанне. Ён пашырае плагін boostrap-twipsy.js , таму не забудзьцеся захапіць і гэты файл, калі ўключаеце ўсплывальныя вобразы ў свой праект! |
Не! Bootstrap распрацаваны перш за ўсё як бібліятэка CSS. Гэты JavaScript забяспечвае базавы інтэрактыўны ўзровень паверх уключаных стыляў.
Тым не менш, для тых, каму патрэбен javascript, мы падалі прыведзеныя вышэй плагіны, каб дапамагчы вам зразумець, як інтэграваць Bootstrap з javascript, і даць вам хуткі і лёгкі варыянт для асноўнай функцыі адразу.
Для атрымання дадатковай інфармацыі і прагляду жывых дэманстрацый, калі ласка, звярніцеся да нашай старонкі дакументацыі плагіна .
Bootstrap быў створаны з дапамогай Preboot , пакета міксінаў і зменных з адкрытым зыходным кодам для выкарыстання ў спалучэнні з Less , прэпрацэсарам CSS для больш хуткай і лёгкай вэб-распрацоўкі.
Праверце, як мы выкарыстоўвалі Preboot у Bootstrap і як вы можаце выкарыстоўваць яго, калі вы вырашыце запусціць Less у сваім наступным праекце.
Выкарыстоўвайце гэты параметр, каб у поўнай меры выкарыстоўваць зменныя Bootstrap Less, міксіны і ўкладзенасць у CSS праз JavaScript у вашым браўзеры.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />
- <script src = "js/less-1.1.3.min.js" ></script>
Не адчуваеце рашэння .js? Паспрабуйце праграму Less Mac або выкарыстоўвайце Node.js для кампіляцыі пры разгортванні кода.
Вось некаторыя асноўныя моманты таго, што ўключана ў Twitter Bootstrap як частка Bootstrap. Перайдзіце на вэб-сайт Bootstrap або старонку праекта Github, каб спампаваць і даведацца больш.
Зменныя ў Less ідэальна падыходзяць для падтрымання і абнаўлення вашага CSS без галаўнога болю. Калі вы хочаце змяніць значэнне колеру або часта выкарыстоўванае значэнне, абнавіце яго ў адным месцы, і ўсё гатова.
- // Спасылкі
- @linkColor : #8b59c2;
- @linkColorHover : цямнець ( @linkColor , 10 );
- // Сівыя
- @чорны : #000;
- @grayDark : асвятліць ( @black , 25 %);
- @grey : асвятліць ( @black , 50 %);
- @grayLight : асвятліць ( @black , 70 %);
- @grayLighter : асвятліць ( @black , 90 %);
- @белы : #fff ;
- // Акцэнтныя колеры
- @blue : #08b5fb;
- @green : #46a546;
- @red : #9d261d;
- @yellow : #ffc40d;
- @orange : #f89406;
- @pink : #c3325f;
- @purple : #7a43b6;
- // Базавая сетка
- @basefont : 13 пікселяў ;
- @baseline : 18 пікселяў ;
/* ... */
У дадатак да звычайнага сінтаксісу CSS Less забяспечвае іншы стыль каментавання .
- // Гэта каментар
- /* Гэта таксама каментар */
Міксіны ў асноўным з'яўляюцца ўключэннямі або часткамі для CSS, якія дазваляюць аб'яднаць блок кода ў адзін. Яны выдатна падыходзяць для ўласцівасцей з прэфіксам пастаўшчыка, такіх як box-shadow
, крос-браўзерныя градыенты, стэкі шрыфтоў і інш. Ніжэй прыведзены ўзор міксінаў, якія ўключаны ў Bootstrap.
- #шрыфт {
- . скарачэнне ( @weight : нармальны , @size : 14 пікселяў , @lineHeight : 20 пікселяў ) {
- font - size : @size ;
- font - weight : @weight ;
- лінія - вышыня : @lineHeight ;
- }
- . без засечак ( @weight : звычайны , @size : 14 пікселяў , @lineHeight : 20 пікселяў ) {
- сямейства шрыфтоў : " Helvetica Neue " , Helvetica , Arial , без засечак ;
- font - size : @size ;
- font - weight : @weight ;
- лінія - вышыня : @lineHeight ;
- }
- ...
- }
- #градыент {
- ...
- . вертыкальна ( @startColor : #555, @endColor: #333) {
- колер фону : @endColor ; _
- фон - repeat : repeat - x ;
- фон - малюнак : - khtml - градыент ( лінейны , левы верхні , левы ніжні , ад ( @startColor ), да ( @endColor )); // Канканёр
- фон - малюнак : - moz - лінейны - градыент ( @startColor , @endColor ); // FF 3.6+
- фон - малюнак : - мс - лінейны - градыент ( @startColor , @endColor ); // IE10
- фон - малюнак : - webkit - градыент ( лінейны , левы верхні , левы ніжні , каляровы - стоп ( 0 %, @startColor ), каляровы - стоп ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- фон - малюнак : - webkit - лінейны - градыент ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- фон - малюнак : - o - лінейны - градыент ( @startColor , @endColor ); // Opera 11.10
- фон - малюнак : лінейны - градыент ( @startColor , @endColor ); // Эталон
- }
- ...
- }
Пафантазіруйце і выканайце некаторыя матэматычныя вылічэнні, каб стварыць гнуткія і магутныя міксіны, такія як прыведзены ніжэй.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40 пікселяў ;
- @gridGutterWidth : 20 пікселяў ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Зрабіць некалькі слупкоў
- . слупкі ( @columnSpan : 1 ) {
- шырыня : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
Пасля змены .less
файлаў у /lib/ вам трэба будзе іх перакампіляваць, каб аднавіць файлы bootstrap-*.*.*.css і bootstrap-*.*.*.min.css. Калі вы адпраўляеце запыт на выцягванне ў GitHub, вы заўсёды павінны перакампіляваць.
Метад | крокі |
---|---|
Вузел з make-файлам | Усталюйце кампілятар каманднага радка less з npm, выканаўшы наступную каманду: $ npm install lessc Пасля ўстаноўкі проста запусціце Акрамя таго, калі ў вас усталяваны watchr , вы можаце запускаць |
Javascript | Спампуйце апошнюю версію Less.js і ўключыце шлях да яе (і Bootstrap) у
Каб перакампіляваць файлы .less, проста захавайце іх і перазагрузіце старонку. Less.js кампілюе іх і захоўвае ў лакальным сховішчы. |
Камандны радок | Калі ў вас ужо ўсталяваны інструмент каманднага радка less, проста выканайце наступную каманду: $lessc ./lib/bootstrap.less > bootstrap.css Абавязкова ўключыце |
Менш прыкладання для Mac | Неафіцыйнае прыкладанне для Mac назірае за каталогамі файлаў .less і кампілюе код у лакальныя файлы пасля кожнага захавання прагледжанага файла .less. Пры жаданні вы можаце пераключаць налады ў дадатку для аўтаматычнай мінімізацыі і каталога, у які ў канчатковым выніку трапляюць скампіляваныя файлы. |