Этиам порта семина любовь любвие. Maecenas faucibus mollis interdum. Морби leo risus, porta ac consectetur ac, vestibulum ва эрос.
Bootstrap як абзорест аз Twitter барои оғози рушди веббарномаҳо ва сайтҳо пешбинӣ шудааст.
Он асоси CSS ва HTML-ро барои типография, шаклҳо, тугмаҳо, ҷадвалҳо, шабакаҳо, паймоиш ва ғайра дар бар мегирад.
Огоҳии Nerd: Bootstrap бо Less сохта шудааст ва барои кор кардан аз дарвоза бо назардошти браузерҳои муосир тарҳрезӣ шудааст.
Барои зудтар ва осонтарин оғоз кардан, танҳо ин порчаро ба вебсайти худ нусхабардорӣ кунед.
Як мухлиси истифодаи Less? Мушкил нест, танҳо репо клон кунед ва ин сатрҳоро илова кунед:
Бо репои расмии Bootstrap дар Github зеркашӣ кунед, кашед, кашед, файлҳо ва ғайра.
Айни замон v1.3.0
Муҳандисони Twitter таърихан қариб ҳама китобхонаҳоеро, ки бо онҳо шинос буданд, барои қонеъ кардани талаботи пештара истифода мекарданд. Bootstrap ҳамчун ҷавоб ба мушкилоти пешниҳодшуда оғоз ёфт. Бо ёрии бисёр одамони олӣ, Bootstrap ба таври назаррас афзоиш ёфт.
Муфассалтар дар dev.twitter.com ›
Bootstrap дар браузерҳои асосии муосир ба монанди Chrome, Safari, Internet Explorer ва Firefox санҷида ва дастгирӣ карда мешавад.
Bootstrap бо қолибҳои CSS-и тартибдодашуда, тартибнашуда ва намунавӣ пурра меояд.
Системаи пешфарз шабакаи пешфарз, ки ҳамчун як қисми Bootstrap пешниҳод шудааст, шабакаи 16-сутуни васеъаш 940px мебошад. Ин мазза аз системаи маъмули шабакаи 960 аст, аммо бидуни маржа/паҳнкунии иловагӣ дар паҳлӯҳои чап ва рост.
Тавре ки дар ин ҷо нишон дода шудааст, тарҳбандии асосиро бо ду "сутун" сохтан мумкин аст, ки ҳар кадоми онҳо як қатор 16 сутуни бунёдиро дар бар мегиранд, ки мо ҳамчун як қисми системаи шабакаи мо муайян кардем. Барои вариантҳои бештар ба мисолҳои зер нигаред.
- <div class = "сатр" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
.row
Дар дохили сутуни мавҷуда мундариҷаи худро ҷойгир кунед, агар лозим бошад .
- <div class = "сатр" >
- <div class = "span12" >
- Сатҳи 1 сутун
- <div class = "сатр" >
- <div class = "span6" >
- Сатҳи 2
- </div>
- <div class = "span6" >
- Сатҳи 2
- </div>
- </div>
- </div>
- </div>
Дар Bootstrap як қатор тағирёбандаҳо барои танзими системаи пешфарзии шабакаи 940px сохта шудаанд. Бо каме мутобиқсозӣ, шумо метавонед андозаи сутунҳо, ҷӯйборҳои онҳо ва контейнере, ки дар онҳо зиндагӣ мекунанд, тағир диҳед.
Тағйирёбандаҳое, ки барои тағир додани системаи шабака заруранд, дар айни замон ҳама дар variables.less
.
Тағйирёбанда | Арзиши пешфарз | Тавсифи |
---|---|---|
@gridColumns |
16 | Шумораи сутунҳо дар дохили шабака |
@gridColumnWidth |
40px | Паҳнои ҳар як сутун дар дохили шабака |
@gridGutterWidth |
20px | Фосилаи манфӣ байни ҳар як сутун |
@siteWidth |
Маблағи ҳисобшудаи ҳамаи сутунҳо ва ҷӯйборҳо | Мо барои ҳисоб кардани шумораи сутунҳо ва ҷӯйборҳо ва муқаррар кардани паҳнои омехта якчанд бозии асосиро истифода мебарем .fixed-container() . |
Тағир додани шабака маънои тағир додани се @grid-*
тағирёбанда ва дубора тартиб додани файлҳои Less мебошад.
Bootstrap барои идора кардани системаи шабакавӣ бо то 24 сутун муҷаҳҳаз шудааст; пешфарз ҳамагӣ 16 аст. Ин аст, ки чӣ тавр тағирёбандаҳои шабакаи шумо ба шабакаи 24-сутунӣ мутобиқ карда мешаванд.
- @gridСутунҳо : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
Пас аз дубора тартиб додан, шумо муқаррар карда мешавед!
Тарҳбандии пешфарз ва соддаи 940px-и васеъ, мутамарказ барои ҳама гуна вебсайт ё саҳифае, ки аз ҷониби як <div.container>
.
- <бадан>
- <div class = "контейнер" >
- ...
- </div>
- </body>
Сохтори саҳифаи моеъи алтернативӣ бо паҳнои ҳадди ақал ва максимум ва панели паҳлӯи чап. Беҳтарин барои барномаҳо ва ҳуҷҷатҳо.
- <бадан>
- <div class = "контейнер-моеъ" >
- <div class = "панели паҳлӯ" >
- ...
- </div>
- <div class = "content" >
- ...
- </div>
- </div>
- </body>
Як иерархияи типографии стандартӣ барои сохтори вебсайтҳои шумо.
Тамоми шабакаи типографӣ ба ду тағирёбандаи Less дар файли variables.less мо асос ёфтааст: @basefont
ва @baseline
. Якум андозаи шрифти асосист, ки дар саросари ҷаҳон истифода мешавад ва дуввум баландии сатри асосӣ мебошад.
Мо ин тағирёбандаҳо ва баъзе аз математикаро барои эҷод кардани ҳошияҳо, пӯшишҳо ва баландии сатрҳои ҳама намуди мо ва ғайра истифода мебарем.
Нуллам quis risus eget urna mollis ornare vel eu leo. Ҷамъияти дорои ҷамоатҳои натоиҷӣ ва бузургии ҳомиладорӣ, масхарабозӣ мебошад. 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, a augue pharetra.
Эзоҳ: Истифода <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. Бутуни рақамҳо як қисми пешқадамро нишон медиҳанд.
Доктор Юлиус Ҳибберт
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутуни рақамҳо як қисми пешқадамро нишон медиҳанд. </p>
- <хурд> Доктор Юлиус Ҳибберт </small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
Рамзи худро бо услуб бо ду барчаспҳои оддӣ пимп кунед. Барои боз ҳам олиҷанобтар тавассути JavaScript, ба китобхонаи зебои коди Google афтед ва шумо омодаед.
Рамзҳо, блокҳо ё танҳо пораҳои дарунсохтро метавон бо услуб танҳо тавассути печонидани теги рост нишон дод. Барои блокҳои код, ки сатрҳои гуногун доранд, <pre>
элементро истифода баред. Барои рамзи inline, <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 -ро зеркашӣ кунед ва хондани хондаро барои истифодаи он бубинед. |
<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 | Дент | Кодекс |
- <ҷадвал>
- ...
- </ҷадвал>
Барои ҷадвалҳое, ки маълумоти бештарро дар ҷойҳои тангтар талаб мекунанд, маззаи конденсиро истифода баред, ки пуркунии онро ду маротиба кам мекунад. Он инчунин метавонад дар якҷоягӣ бо сарҳадҳо ва рахҳои зебра истифода шавад, ба монанди сабкҳои ҷадвали пешфарз.
# | Ном | Насаб | Забон |
---|---|---|---|
1 | Баъзехо | Як | англисӣ |
2 | Ҷо | Sixpack | англисӣ |
3 | Stu | Дент | Кодекс |
Мизҳои худро бо яклухт кардани кунҷҳои онҳо ва илова кардани сарҳадҳо дар ҳама ҷонибҳо каме ҳамвортар кунед.
# | Ном | Насаб | Забон |
---|---|---|---|
1 | Баъзехо | Як | англисӣ |
2 | Ҷо | Sixpack | англисӣ |
3 | Stu | Дент | Кодекс |
- < синфи ҷадвал = "ҷадвали марзӣ" >
- ...
- </ҷадвал>
Бо илова кардани зебра-стрипинг бо ҷадвалҳои худ каме зебо шавед - танҳо .zebra-striped
синфро илова кунед.
# | Ном | Насаб | Забон |
---|---|---|---|
1 | Баъзехо | Як | англисӣ |
2 | Ҷо | Sixpack | англисӣ |
3 | Stu | Дент | Кодекс |
4 сутунро фаро мегирад | |||
2 сутунро фаро мегирад | 2 сутунро фаро мегирад |
Эзоҳ: Zebra-striping як такмилдиҳии прогрессивӣ аст, ки барои браузерҳои кӯҳна ба монанди IE8 ва поёнтар дастрас нест.
- < синфи ҷадвал = "зебра-рах" >
- ...
- </ҷадвал>
Бо назардошти мисоли қаблӣ, мо фоиданокии ҷадвалҳои худро тавассути фароҳам овардани функсияҳои ҷудокунӣ тавассути jQuery ва плагини Tablesorter беҳтар мегардонем . Барои тағир додани навъ сарлавҳаи ягон сутунро клик кунед.
# | Ном | Насаб | Забон |
---|---|---|---|
2 | Ҷо | Sixpack | англисӣ |
3 | Stu | Дент | Кодекс |
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 class = "огоҳӣ-паём" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Гуакамоли муқаддас! </strong> Беҳтараш худатонро санҷед, шумо он қадар хуб намебинед. </p>
- </div>
.alert-message.block-message
Барои паёмҳое, ки каме тавзеҳот талаб мекунанд, мо огоҳиҳои услуби параграф дорем. Инҳо барои пур кардани паёмҳои хатогии тӯлонӣ, огоҳ кардани корбар аз амали интизорӣ ё танҳо пешниҳод кардани маълумот барои таваҷҷӯҳи бештар дар саҳифа комиланд.
- <div class = "огоҳии блок-паёми alert-message" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Гуакамоли муқаддас! Ин огоҳӣ аст! </strong> Беҳтараш худатонро санҷед, шумо он қадар хуб намебинед. Nulla vitae elit libero, a augue pharetra. Тамошо кунед, ки шумо метавонед ба таври васеъ истифода баред. </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 autist perspicatitis iste voluptas natus illo quasi odit or natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Вобаста ба он, ки шумо меъмори меъмориро ошкор месозед, ба таври ошкоро ошкор карда мешавад.
Поповҳоро истифода баред, то маълумоти зерматнро ба саҳифа бидуни таъсир ба тарҳ таъмин кунед.
Этиам порта семина любовь любвие. Maecenas faucibus mollis interdum. Морби leo risus, porta ac consectetur ac, vestibulum ва эрос.
Интегратсияи JavaScript бо китобхонаи Bootstrap хеле осон аст. Дар зер мо асосҳоро баррасӣ мекунем ва ба шумо якчанд плагинҳои олиро пешкаш мекунем, то шуморо оғоз кунанд!
Баъзе ҷузъҳои асосии Bootstrap-ро бо плагинҳои нави фармоишӣ, ки бо jQuery ва Ender кор мекунанд, зинда кунед. Мо шуморо ташвиқ мекунем, ки онҳоро васеъ ва тағир диҳед, то эҳтиёҷоти мушаххаси рушди худро мувофиқ созед.
Файл | Тавсифи |
---|---|
bootstrap-modal.js | Васлкунаки Modal мо як бартарии хеле нозук дар плагини анъанавии modal js аст! Мо ғамхории махсус кардем, ки танҳо функсияҳои бараҳнаеро, ки дар Twitter талаб мекунанд, дохил кунем. |
bootstrap-alerts.js | Васлкунаки ҳушдор як синфи хеле хурд барои илова кардани функсияҳои наздик ба огоҳиҳо мебошад. |
bootstrap-dropdown.js | Ин плагин барои илова кардани ҳамкории афтанда ба панели болоии боркунӣ ё навигатсияҳои ҷадвалбандишуда мебошад. |
bootstrap-scrollspy.js | Васлкунаки ScrollSpy барои илова кардани навсозии худкор дар асоси мавқеъи ҳаракат ба панели болоии боркунӣ мебошад. |
bootstrap-buttons.js | Васлкунаки ScrollSpy барои илова кардани навсозии худкор дар асоси мавқеъи ҳаракат ба панели болоии боркунӣ мебошад. |
bootstrap-tabs.js | Ин плагин функсияи зуд, динамикӣ ва таблетҳоро барои велосипедронӣ тавассути мундариҷаи маҳаллӣ илова мекунад. |
bootstrap-twipsy.js | Дар асоси плагини аълои jQuery.tipsy, ки аз ҷониби Ҷейсон Frame навишта шудааст; twipsy версияи навшудаест, ки ба тасвирҳо такя намекунад, css3-ро барои аниматсияҳо ва атрибутҳои маълумот барои нигаҳдории унвонҳои маҳаллӣ истифода мебарад! |
bootstrap-popover.js | Васлкунаки popover интерфейси оддиро барои илова кардани поповҳо ба замимаи шумо таъмин мекунад. Он плагини boostrap-twipsy.js-ро васеъ мекунад, аз ин рӯ ҳатман ҳангоми дохил кардани поповҳо ба лоиҳаи худ он файлро низ гиред! |
Не! Bootstrap пеш аз ҳама барои китобхонаи CSS тарҳрезӣ шудааст. Ин JavaScript қабати асосии интерактивиро дар болои услубҳои дохилшуда таъмин мекунад.
Бо вуҷуди ин, барои онҳое, ки ба JavaScript ниёз доранд, мо плагинҳои дар боло зикршударо пешниҳод кардем, то ба шумо дар фаҳмед, ки чӣ гуна Bootstrap-ро бо JavaScript ҳамҷоя кунед ва ба шумо имкони зуд ва сабукро барои функсияҳои асосӣ пешниҳод кунем.
Барои маълумоти бештар ва дидани баъзе намоишҳои зинда, лутфан ба саҳифаи ҳуҷҷатҳои плагини мо муроҷиат кунед .
Bootstrap аз Preboot сохта шудааст , як бастаи кушодаи омехтаҳо ва тағирёбандаҳо, ки дар якҷоягӣ бо Less , протсессори CSS барои рушди тезтар ва осонтари веб истифода мешавад.
Санҷед, ки чӣ тавр мо Preboot-ро дар Bootstrap истифода мебарем ва чӣ гуна шумо метавонед онро истифода баред, агар шумо дар лоиҳаи навбатии худ Less-ро иҷро кунед.
Ин хосиятро барои истифодаи пурраи тағирёбандаҳои Less Bootstrap, миксинҳо ва лона дар CSS тавассути javascript дар браузери худ истифода баред.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "ҳама" />
- <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 %);
- @грей : равшан кардан ( @сиёҳ , 50 %);
- @grayLight : равшан кардан ( @сиёҳ , 70 %);
- @grayLighter : равшан кардан ( @сиёҳ , 90 %);
- @сафед : #fff ;
- // Рангҳои аксент
- @кабуд : #08b5fb ;
- @сабз : #46a546 ;
- @red : # 9d261d;
- @зард : #ffc40d ;
- @orange : #f89406;
- @pink : #c3325f;
- @арғувон : #7a43b6 ;
- // Шабакаи ибтидоӣ
- @basefont : 13px ;
- @baseline : 18px ;
/* ... */
Илова ба синтаксиси муқаррарии CSS, Less инчунин услуби дигари шарҳро пешниҳод мекунад .
- // Ин шарҳ аст
- /* Ин ҳам шарҳ аст */
Миксинҳо асосан барои CSS-ро дар бар мегиранд ё қисман доранд, ки ба шумо имкон медиҳанд, ки блоки кодро дар як блок муттаҳид кунед. Онҳо барои хосиятҳои пешоянди фурӯшанда box-shadow
, ба монанди градиентҳои кросс-браузер, стекҳои шрифт ва ғайра бузурганд. Дар зер намунаи омехтаҳое оварда шудааст, ки ба Bootstrap дохил карда шудаанд.
- #шрифт {
- . стенография ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- шрифт - андоза : @size ;
- шрифт - вазн : @weight ;
- сатр - баландӣ : @lineHeight ;
- }
- . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- шрифт - оила : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- шрифт - андоза : @size ;
- шрифт - вазн : @weight ;
- сатр - баландӣ : @lineHeight ;
- }
- ...
- }
- #градиент {
- ...
- . амудӣ ( @startColor : #555, @endColor: #333) {
- замина - ранг : @endColor ;
- замина - такрор : такрор - x ;
- замина - тасвир : - khtml - градиент ( хаттӣ , боло чап , поёни чап , аз ( @startColor ), то ( @endColor )); // Konqueror
- замина - тасвир : - moz - linear - градиент ( @startColor , @endColor ); // FF 3.6+
- замина - тасвир : - ms - хатти - градиент ( @startColor , @endColor ); // IE10
- замина - тасвир : - webkit - градиент ( хаттӣ , болои чап , поёни чап , ранг - қатъ ( 0 %, @startColor ), ранг - қатъ ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- замина - тасвир : - webkit - linear - градиент ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- замина - тасвир : - o - хатӣ - градиент ( @startColor , @endColor ); // Опера 11.10
- замина - тасвир : хатӣ - градиент ( @startColor , @endColor ); // Стандарт
- }
- ...
- }
Барои тавлиди миксинҳои фасеҳ ва пурқудрате, ки дар зер оварда шудааст, тасаввур кунед ва математика иҷро кунед.
- // Гридитуд
- @gridСутунҳо : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Якчанд сутунҳо созед
- . сутунҳо ( @columnSpan : 1 ) {
- паҳно : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
Пас аз тағир додани .less
файлҳо дар /lib/, шумо бояд онҳоро аз нав тартиб диҳед, то файлҳои bootstrap-*.*.*.css ва bootstrap-*.*.*.min.css барқарор карда шаванд. Агар шумо ба GitHub дархост пешниҳод кунед, шумо бояд ҳамеша аз нав тартиб диҳед.
Усул | Қадамҳо |
---|---|
Гиреҳ бо makefile | Компилятори сатри фармони камтарро бо npm бо иҷро кардани фармони зерин насб кунед: $ npm насб камтарc Пас аз насб танҳо Илова бар ин, агар шумо watchr насб карда бошед, шумо метавонед кор кунед, |
Javascript | Навтарин Less.js-ро зеркашӣ кунед ва роҳ ба он (ва Bootstrap) -ро дар
Барои дубора тартиб додани файлҳои .кам, танҳо онҳоро захира кунед ва саҳифаи худро аз нав бор кунед. Less.js онҳоро тартиб медиҳад ва дар анбори маҳаллӣ нигоҳ медорад. |
Сатри фармон | Агар шумо аллакай асбоби сатри фармони камтарро насб карда бошед, танҳо фармони зеринро иҷро кунед: $ lessc ./lib/bootstrap.less > bootstrap.css Боварӣ ҳосил кунед, ки ба |
Барномаи камтари Mac | Барномаи ғайрирасмии Mac феҳристҳои файлҳои .lessро тамошо мекунад ва пас аз ҳар сабти файли .less тамошошуда кодро ба файлҳои маҳаллӣ тартиб медиҳад. Агар хоҳед, шумо метавонед афзалиятҳоро дар барнома барои минификатсияи худкор ва дар кадом директория файлҳои тартибдодашуда иваз кунед. |