Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum жана эрос.
Bootstrap - бул веб-колдонмолорду жана сайттарды иштеп чыгууну баштоо үчүн иштелип чыккан Twitter шаймандары.
Ал типография, формалар, баскычтар, таблицалар, торлор, навигация жана башкалар үчүн базалык CSS жана HTMLди камтыйт.
Nerd эскертүүсү: Bootstrap Less менен курулган жана заманбап браузерлерди эске алуу менен дарбазадан чыгуу үчүн иштелип чыккан.
Эң тез жана оңой баштоо үчүн, бул үзүндүнү веб баракчаңызга көчүрүңүз.
Less колдонуу күйөрманы? Эч кандай көйгөй жок, жөн гана репо клондоңуз жана бул саптарды кошуңуз:
Github'дагы расмий Bootstrap репо менен жүктөп алыңыз, айрыңыз, тартыңыз, файлдарды коюңуз жана башкалар.
Учурда v1.3.0
Твиттердеги инженерлер тарыхта алар тааныш болгон дээрлик бардык китепкананы алдыңкы талаптарга жооп берүү үчүн колдонушкан. Bootstrap сунушталган кыйынчылыктарга жооп катары башталды. Көптөгөн кереметтүү адамдардын жардамы менен Bootstrap кыйла өстү.
Кененирээк dev.twitter.com сайтынан окуңуз ›
Bootstrap сыналган жана Chrome, Safari, Internet Explorer жана Firefox сыяктуу негизги заманбап браузерлерде колдоого алынат.
Bootstrap компиляцияланган CSS, компиляцияланбаган жана үлгү калыптары менен толук келет.
Bootstrap бөлүгү катары берилген демейки тор системасы 940px кең 16 тилкелүү тор болуп саналат. Бул популярдуу 960 тор системасынын даамы, бирок сол жана оң тарабында кошумча маржа/толтуру жок.
Бул жерде көрсөтүлгөндөй, негизги макет эки "мамыча" менен түзүлүшү мүмкүн, алардын ар бири тор тутумубуздун бир бөлүгү катары аныктаган 16 фундаменталдык мамычалардын санын камтыйт. Көбүрөөк вариациялар үчүн төмөндөгү мисалдарды караңыз.
- <div класс = "сап" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
.row
Эгер керек болсо , учурдагы тилкенин ичинде түзүү аркылуу мазмунуңузду уяга салыңыз .
- <div класс = "сап" >
- <div class = "span12" >
- Мамычанын 1-деңгээли
- <div класс = "сап" >
- <div class = "span6" >
- 2-деңгээл
- </div>
- <div class = "span6" >
- 2-деңгээл
- </div>
- </div>
- </div>
- </div>
Bootstrap ичинде орнотулган демейки 940px тор тутумун ыңгайлаштыруу үчүн бир нече өзгөрмөлөр бар. Бир аз ыңгайлаштыруу менен, сиз мамычалардын өлчөмүн, алардын арыктарын жана алар жашаган контейнерди өзгөртө аласыз.
Тор системасын өзгөртүү үчүн зарыл болгон өзгөрмөлөр учурда бардыгы preboot.less
.
Variable | Демейки маани | Description |
---|---|---|
@gridColumns |
16 | Тордогу тилкелердин саны |
@gridColumnWidth |
40px | Тордогу ар бир мамычанын туурасы |
@gridGutterWidth |
20px | Ар бир мамычанын ортосундагы терс боштук |
@siteWidth |
Бардык мамычалар менен каналдардын эсептелген суммасы | Биз мамычалардын жана каналдардын санын санап, аралаштыргычтын туурасын коюу үчүн кээ бир негизги дал келүүнү колдонобуз .fixed-container() . |
Торду өзгөртүү үч @grid-*
өзгөрмөлөрдү өзгөртүүнү жана Less файлдарын кайра компиляциялоону билдирет.
Bootstrap 24 мамычасы бар тор тутумун иштетүү үчүн жабдылган; демейки жөн гана 16. Бул жерде сиздин тор өзгөрмөлөрүңүз 24 тилкелүү торго ылайыкташтырылган көрүнөт.
- @gridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
Кайра компиляциялангандан кийин, сиз орнотулат!
Демейки жана жөнөкөй 940px кеңдиги, бир гана веб-сайт же барагы үчүн борборлоштурулган макет <div.container>
.
- <дене>
- <div класс = "контейнер" >
- ...
- </div>
- </body>
Минималдуу жана максималдуу туурасы жана сол тараптагы каптал тилкеси бар альтернативалуу, ийкемдүү суюк барак структурасы. Колдонмолор жана документтер үчүн сонун.
- <дене>
- <div класс = "контейнер-суюктук" >
- <div класс = "каптал тилкеси" >
- ...
- </div>
- <div класс = "мазмун" >
- ...
- </div>
- </div>
- </body>
Веб баракчаларыңызды структуралаштыруу үчүн стандарттуу типографиялык иерархия.
Бүтүндөй типографиялык тор биздин preboot.less файлыбыздагы эки Less өзгөрмөсүнө негизделген: @basefont
жана @baseline
. Биринчиси - бүтүндөй колдонулган негизги шрифт-өлчөмү, экинчиси - базалык сызыктын бийиктиги.
Биз ошол өзгөрмөлөрдү жана кээ бир математиканы бардык түрүбүздүн четтерин, толтургучтарын жана сызык бийиктиктерин жана башкаларды түзүү үчүн колдонобуз.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis dis tourient 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. Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.
Эскертүү:<b>
HTML5те жана тегдерин колдонуу дагы деле жакшы <i>
жана алар калың жана курсив менен стилдештирилбеши керек (бирок семантикалык элементи көбүрөөк болсо, аны колдонуңуз). <b>
кошумча маани бербестен сөздөрдү же сөз айкаштарын бөлүп көрсөтүү үчүн арналган, ал эми <i>
негизинен үн, техникалык терминдер ж.б.у.с.
<address>
Элемент анын жакынкы ата-бабасы же бүткүл иш органы үчүн байланыш маалыматы үчүн колдонулат . Бул жерде аны кантип колдонсо болоруна эки мисал келтирилген:
Эскертүү: Мазмунду туура түзүш үчүн ар бир сап <address>
сызык тыныгуусу ( <br />
) менен аякташы керек же блок деңгээлиндеги тегге (мисалы, <p>
) оролгон болушу керек.
<abbr>
Кыскартуулар жана аббревиатуралар үчүн тегди колдонуңуз ( HTML5те <acronym>
эскирген ) . Тегдин ичине стенографиялык форманы коюңуз жана толук ат үчүн аталышты коюңуз.
<blockquote>
<p>
<small>
Блок цитатаны кошуу үчүн, <blockquote>
тегерете ороп <p>
, <small>
тегдер. Булакыңызга шилтеме кылуу үчүн элементти колдонуңуз жана анын алдында <small>
сызыкча —
аласыз.
Lorem ipsum dolor sit amet, consectetur adipiscing элит. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Доктор Юлиус Хибберт
- <blockquote>
- <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'дун кооздук китепканасынын кодун таштаңыз жана сиз даярсыз.
Код, блоктор же жөн эле үзүндүлөр, жөн гана туура тегге ороп, стили менен көрсөтүлүшү мүмкүн. Бир нече сапты камтыган код блоктору үчүн <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 класс = "эскиз" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- <li>
- <a href = "#" >
- <img класс = "эскиз" 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 | Stu | Дент | Code |
- <таблица>
- ...
- </таблица>
Зебра сызыгын кошуу менен үстөлдөрүңүздү бир аз кооздоңуз — .zebra-striped
классты кошуңуз.
# | Биринчи аты | Акыркы аты | Тил |
---|---|---|---|
1 | Кээ бир | Бир | Англисче |
2 | Джо | Sixpack | Англисче |
3 | Stu | Дент | Code |
Эскертүү: Zebra-стрипинг IE8 жана андан төмөн сыяктуу эски браузерлер үчүн жеткиликтүү эмес прогрессивдүү өркүндөтүү.
- <стол класс = "зебра-сызык" >
- ...
- </таблица>
Мурунку мисалды алып, биз jQuery жана Tablesorter плагини аркылуу сорттоо функциясын камсыз кылуу менен таблицаларыбыздын пайдалуулугун жакшыртабыз . Сортту өзгөртүү үчүн каалаган мамычанын башын чыкылдатыңыз.
# | Биринчи аты | Акыркы аты | Тил |
---|---|---|---|
2 | Джо | Sixpack | Англисче |
3 | Stu | Дент | Code |
1 | Сиздин | Бир | Англисче |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <скрипт >
- $ ( функция () {
- $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <стол класс = "зебра-сызык" >
- ...
- </таблица>
Бардык формаларга аларды окула турган жана масштабдуу түрдө көрсөтүү үчүн демейки стилдер берилет. Стилдер текст киргизүү, тандоо тизмелери, текст аймактары, радио баскычтар жана белги кутучалары жана баскычтар үчүн берилген.
.form-stacked
Формаңыздын HTML'ине кошсоңуз, алардын сол жагында эмес, алардын талаасынын үстүндө энбелгилер болот . Формаларыңыз кыска болсо же оор формалар үчүн эки мамычасы болсо, бул сонун иштейт.
Белгилөөңүзгө бир нече класстарды кошуп , каалаган форманы input
, select
, же туурасын ыңгайлаштырыңыз.textarea
v1.3.0 боюнча, форма элементтери үчүн торго негизделген өлчөмдөр класстарын коштук. Сураныч, буларды учурдагы .mini
, .small
, ж.б. класстардын үстүнөн колдонуңуз.
Конвенция катары баскычтар иш-аракеттер үчүн колдонулат, ал эми шилтемелер объекттер үчүн колдонулат. Мисалы, "Жүктөө" баскычы жана "акыркы аракет" шилтеме болушу мүмкүн.
Бардык баскычтар демейки ачык боз стилде, бирок ар кандай түс стилдери үчүн бир катар функционалдык класстарды колдонсо болот. Бул класстарга көк .primary
класс, ачык көк .info
класс, жашыл .success
класс жана кызыл .danger
класс кирет.
Баскычтардын стилдери колдонулган бардык нерсеге .btn
колдонулушу мүмкүн. <a>
Адатта, сиз буларды , <button>
, жана тандалган <input>
элементтерге гана колдонгуңуз келет . Бул кандай көрүнөт:
Чоңураак же кичине баскычтарды жактырасызбы? Бол!
Активдүү эмес же тигил же бул себептерден улам колдонмо тарабынан өчүрүлгөн баскычтар үчүн өчүрүлгөн абалды колдонуңуз. Бул .disabled
шилтемелер жана элементтер :disabled
үчүн .<button>
.alert-message
Иштин ийгиликсиздигин, мүмкүн болбой калышын же ийгилигин көрсөтүү үчүн бир саптык билдирүүлөр. Өзгөчө формалар үчүн пайдалуу.
- <div класс = "эскертүүчү кабар эскертүү" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Ыйык гуакамоле! </strong> Өзүңүздү текшериңиз, сиз өтө жакшы көрүнбөйсүз. </p>
- </div>
.alert-message.block-message
Бир аз түшүндүрүүнү талап кылган билдирүүлөр үчүн бизде абзац стилиндеги эскертүүлөр бар. Булар узакка созулган ката билдирүүлөрүн чыгаруу, колдонуучуга күтүлүп жаткан аракет жөнүндө эскертүү же бетке көбүрөөк басым жасоо үчүн жөн гана маалыматты көрсөтүү үчүн идеалдуу.
- <div класс = "эскертүү-билдирүү блок-билдирүү эскертүү" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Ыйык гуакамоле! Бул эскертүү! </strong> Өзүңүздү текшериңиз, сиз өтө жакшы көрүнбөйсүз. Nulla vitae elit libero, pharetra augue. Кошумча commodo cursus magna, vel scelerisque nisl consectetur et. </p>
- <div класс = "эскертүү аракеттери" >
- <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 толугу менен voluptas. Voluptasdicta eaquee beriam ut ut ut ut utterim us uplicabo explicabo us uplicabo, voluptas quia odit fugit accusantas totam totam totam totam totam totam totam totam totam totam totam totam totam une unde sed dica quee unde sed dicta leuptas voluptas nemo valupas voluptatem reftas voluptatem reftas voluptatem reftas voluptatem reftas voluptatem reftas
Макетке таасирин тийгизбестен баракка субтексттик маалымат берүү үчүн поповерлерди колдонуңуз.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum жана эрос.
JavaScriptти Bootstrap китепканасы менен интеграциялоо өтө оңой. Төмөндө биз негиздерди карап чыгып, сизди баштоо үчүн укмуштуудай плагиндерди сунуштайбыз!
jQuery жана Ender менен иштеген жаңы ыңгайлаштырылган плагиндер менен Bootstrap'тин негизги компоненттеринин айрымдарын жандантыңыз . Биз сизге аларды өнүктүрүүгө өзгөчө муктаждыктарыңызга ылайыкташтырууну сунуштайбыз.
Файл | Description |
---|---|
bootstrap-modal.js | Биздин Modal плагинибиз салттуу modal 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 плагини колдонмоңузга popover кошуу үчүн жөнөкөй интерфейсти камсыз кылат. Ал boostrap-twipsy.js плагинин кеңейтет, андыктан проектиңизге поповерлерди кошкондо, ошол файлды да кармаңыз! |
Жок! Bootstrap биринчи кезекте CSS китепканасы болуу үчүн иштелип чыккан. Бул JavaScript камтылган стилдердин үстүнө негизги интерактивдүү катмарды камсыз кылат.
Бирок, JavaScript'ке муктаж болгондор үчүн, Bootstrap менен JavaScript кантип интеграциялоону түшүнүүгө жардам берүү үчүн жана сизге дароо эле негизги функциялардын тез, жеңил вариантын берүү үчүн жогорудагы плагиндерди бердик.
Көбүрөөк маалымат алуу жана кээ бир жандуу демонстрацияларды көрүү үчүн, биздин плагиндин документтер барагына кайрылыңыз .
Bootstrap Preboot менен курулган , аралашмалардын жана өзгөрмөлөрдүн ачык булагы болгон Less , тезирээк жана оңой веб иштеп чыгуу үчүн CSS препроцессору менен бирге колдонулуучу .
Preboot'ду Bootstrap'те кантип колдонгонубузду жана кийинки долбооруңузда Less иштетүүнү тандасаңыз, аны кантип колдонсоңуз болорун карап көрүңүз.
Бул параметрди браузериңиздеги javascript аркылуу Bootstrap'тын Less өзгөрмөлөрүн, микстерин жана CSS'те уялоосун толук пайдалануу үчүн колдонуңуз.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" медиа = "бардыгы" />
- <script src = "js/less-1.1.3.min.js" ></script>
.js чечимди сезбей жатасызбы? Less Mac колдонмосун колдонуп көрүңүз же кодуңузду жайгаштырганыңызда компиляциялоо үчүн Node.js колдонуңуз .
Бул жерде Bootstrapтын бир бөлүгү катары Twitter Bootstrapге камтылган нерселердин айрымдары. Жүктөп алуу жана көбүрөөк билүү үчүн Bootstrap веб-сайтына же Github долбоорунун барагына өтүңүз.
Less ичиндеги өзгөрмөлөр CSS башыңызды оорутпай кармап туруу жана жаңыртуу үчүн идеалдуу. Түс маанисин же көп колдонулган маанини өзгөрткүңүз келсе, аны бир жерде жаңыртыңыз жана сиз орнотуңуз.
- // Шилтемелер
- @linkColor : #8b59c2;
- @linkColorHover : darken ( @linkColor , 10 );
- // Боз
- @black : #000;
- @grayDark : lighten ( @black , 25 %);
- @gray : lighten ( @black , 50 %);
- @grayLight : lighten ( @black , 70 %);
- @grayLighter : жарыктандыруу ( @black , 90 %);
- @white : #fff;
- // Акцент Түстөр
- @blue : #08b5fb;
- @green : #46a546;
- @red : #9d261d;
- @yellow : #ffc40d;
- @orange : #f89406;
- @pink : #c3325f;
- @purple : #7a43b6;
- // Базалык тор
- @basefont : 13px ;
- @baseline : 18px ;
Less ошондой эле CSSтин кадимки /* ... */
синтаксисине кошумча комментарий берүүнүн дагы бир стилин камсыз кылат.
- // Бул комментарий
- /* Бул да комментарий */
Миксиндер негизинен CSS үчүн камтылган же жарым-жартылай болуп, код блогун бир блокко бириктирүүгө мүмкүндүк берет. Алар box-shadow
, кайчылаш браузер градиенттери, шрифт стектери жана башкалар сыяктуу сатуучулардын префикстүү касиеттери үчүн эң сонун. Төмөндө Bootstrap менен камтылган аралашмалардын үлгүсү келтирилген.
- #шрифт {
- . стенография ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- font - size : @size ;
- font - weight : @weight ;
- сызык бийиктиги : @lineHeight ; _
- }
- . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- шрифт - үй- бүлө : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- font - size : @size ;
- font - weight : @weight ;
- сызык бийиктиги : @lineHeight ; _
- }
- ...
- }
- #градиент {
- ...
- . вертикалдуу ( @startColor : #555, @endColor: #333) {
- background - color : @endColor ;
- фон - кайталоо : кайталоо - x ;
- background - image : - khtml - градиент ( сызыктуу , жогорку сол , сол ылдый , баштап ( @startColor ), чейин ( @endColor ) ); // Konqueror
- background - image : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+
- background - image : - ms - linear - gradient ( @startColor , @endColor ); // IE10
- фон - сүрөт : - webkit - градиент ( сызыктуу , сол жакта , сол ылдыйда , түс - токтотуу ( 0 %, @startColor ), түс - токтотуу ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- background - image : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- background - image : - o - сызыктуу - градиент ( @startColor , @endColor ); // Опера 11.10
- фон - сүрөт : сызыктуу - градиент ( @startColor , @endColor ); // Стандарт
- }
- ...
- }
Төмөнкүдөй ийкемдүү жана күчтүү миксингдерди түзүү үчүн фантазияга ээ болуп, математиканы аткарыңыз.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Кээ бир мамычаларды түзүңүз
- . мамычалар ( @columnSpan : 1 ) {
- туурасы : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
/lib/ ичиндеги файлдарды өзгөрткөндөн кийин .less
, bootstrap-*.*.*.css жана bootstrap-*.*.*.min.css файлдарын кайра жаратуу үчүн аларды кайра компиляциялашыңыз керек болот. Эгер сиз GitHub'га тартуу өтүнүчүн тапшырып жатсаңыз, ар дайым кайра компиляциялооңуз керек.
Метод | Кадамдар |
---|---|
makefile менен түйүн | Төмөнкү буйрукту иштетүү менен npm менен азыраак командалык сап компиляторун орнотуңуз: $ npm орнотуу азыраакc Орнотулгандан кийин жөн гана Кошумчалай кетсек , эгер сизде watchr орнотулган болсо, сиз жүктөө libиндеги файлды түзөткөн |
Javascript | Акыркы Less.js жүктөп алып, ага жолду (жана Bootstrap)
.less файлдарын кайра компиляциялоо үчүн аларды сактап, баракчаңызды кайра жүктөңүз. Less.js аларды компиляциялап, жергиликтүү сактагычта сактайт. |
Command line | Эгер сизде мурунтан эле азыраак буйрук сабы куралы орнотулган болсо, жөн гана төмөнкү буйрукту аткарыңыз: $ lessc ./lib/bootstrap.less > bootstrap.css
|
Азыраак Mac колдонмосу | Бейрасмий Mac колдонмосу .less файлдарынын каталогдорун карап, көргөн .less файлын ар бир сактагандан кийин кодду жергиликтүү файлдарга түзөт. Кааласаңыз, колдонмодогу артыкчылыктарды автоматтык түрдө кичирейтүү жана компиляцияланган файлдар кайсы каталогдо бүтөрүн которуштурууга болот. |