Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Морби leo risus, porta ac consectetur ac, vestibulum болон eros.
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 сүлжээний системийг тохируулах цөөн тооны хувьсагч юм. Бага зэрэг тохируулснаар та баганын хэмжээ, тэдгээрийн суваг, тэдгээрийн байрлах савны хэмжээг өөрчлөх боломжтой.
Сүлжээний системийг өөрчлөхөд шаардлагатай хувьсагч нь одоогоор бүгд дотор байна variables.less
.
Хувьсагч | Өгөгдмөл утга | Тодорхойлолт |
---|---|---|
@gridColumns |
16 | Торон доторх баганын тоо |
@gridColumnWidth |
40px | Торон доторх багана бүрийн өргөн |
@gridGutterWidth |
20px | Багана бүрийн хоорондох сөрөг зай |
@siteWidth |
Бүх багана ба сувгийн тооцоолсон нийлбэр | .fixed-container() Бид багана, сувагны тоог тоолж, холигчны өргөнийг тохируулахын тулд зарим үндсэн шүдэнзийг ашигладаг. |
Сүлжээг өөрчлөх нь гурван @grid-*
хувьсагчийг өөрчилж, Less файлуудыг дахин хөрвүүлнэ гэсэн үг юм.
Bootstrap нь 24 хүртэлх багана бүхий сүлжээний системийг зохицуулахаар тоноглогдсон; өгөгдмөл нь ердөө 16. Таны сүлжээний хувьсагчдыг 24 баганатай сүлжээнд тохируулан хэрхэн харагдахыг эндээс үзнэ үү.
- @gridБаганууд : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
Дахин эмхэтгэсний дараа та тохируулагдах болно!
Нэг <div.container>
.
- <бие>
- <div class = "контейнер" >
- ...
- </div>
- </body>
Хамгийн бага ба хамгийн их өргөн, зүүн талын хажуу талбар бүхий өөр, уян хатан шингэн хуудасны бүтэц. Аппликешн болон баримт бичигт тохиромжтой.
- <бие>
- <div class = "контейнер-шингэн" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "content" >
- ...
- </div>
- </div>
- </body>
Таны вэб хуудсуудыг зохион байгуулах стандарт хэвлэх шатлал.
Бүтэн хэвлэх сүлжээ нь манай variables.less файлын хоёр Less хувьсагч дээр суурилдаг: @basefont
болон @baseline
. Эхнийх нь үндсэн үсгийн хэмжээ, хоёр дахь нь үндсэн мөрийн өндөр юм.
Бид эдгээр хувьсагч болон зарим математикийг ашиглан бүх төрлийн захын зай, дэвсгэр, шугамын өндрийг болон бусад зүйлийг бий болгодог.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis dis aparturient 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 elit. Бүхэл тоо posuere erat a ante venenatis dapibus posuere velit aliquet.
Доктор Жулиус Хибберт
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүхэл тоо posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
- <small> Доктор Жулиус Хибберт </small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
Хоёр энгийн шошготойгоор кодоо загварчлаарай. Жаваскриптээр дамжуулан илүү гайхалтай болгохын тулд 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-г татаж аваад , хэрхэн ашиглахыг уншина уу. |
<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 сүлжээний системд буулгах үед хамгийн сайн ажилладаг. .span2
90, 210, 330 гэх мэт зургийн өргөн нь , .span4
, болон .span6
баганын хэмжээтэй тэнцүү байхын тулд хэдэн пикселийн дэвсгэртэй нийлдэг .
Медиа сүлжээнүүд нь ашиглахад хялбар бөгөөд тэмдэглэгээний тал дээр маш энгийн. Тэдний хэмжээс нь зөвхөн оруулсан зургийн хэмжээнээс хамаарна.
- <ul class = "media-grid" >
- <li>
- <a href = "#" >
- <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- <li>
- <a href = "#" >
- <img class = "thumbnail" 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 | Жо | Зургаан хайрцаг | Англи |
3 | Stu | Хонхорхой | Код |
- <хүснэгт>
- ...
- </хүснэгт>
Илүү нарийн зайд илүү их мэдээлэл шаарддаг хүснэгтүүдийн хувьд дэвсгэрийг хагасаар багасгадаг хураангуй амтыг ашиглана уу. Үүнийг мөн хүснэгтийн өгөгдмөл хэв маягийн адил хүрээ, тахө судалтай хослуулан ашиглаж болно.
# | Нэр | Овог | Хэл |
---|---|---|---|
1 | Зарим | Нэг | Англи |
2 | Жо | Зургаан хайрцаг | Англи |
3 | Stu | Хонхорхой | Код |
Ширээнийхээ булангуудыг бөөрөнхийлж, бүх талаараа хүрээ нэмж хийснээр ширээгээ арай илүү гоёмсог харагдуулна уу.
# | Нэр | Овог | Хэл |
---|---|---|---|
1 | Зарим | Нэг | Англи |
2 | Жо | Зургаан хайрцаг | Англи |
3 | Stu | Хонхорхой | Код |
- <хүснэгт анги = "хүрээтэй хүснэгт" >
- ...
- </хүснэгт>
Тахө зураасыг нэмж ширээгээ бага зэрэг гоёмсог болго—зүгээр л .zebra-striped
анги нэмээрэй.
# | Нэр | Овог | Хэл |
---|---|---|---|
1 | Зарим | Нэг | Англи |
2 | Жо | Зургаан хайрцаг | Англи |
3 | Stu | Хонхорхой | Код |
4 баганыг хамарна | |||
2 баганыг хамарна | 2 баганыг хамарна |
Тайлбар: Zebra-striping нь IE8 болон түүнээс доош настай хөтчүүдэд байхгүй дэвшилтэт сайжруулалт юм.
- <хүснэгт анги = "тахө судалтай" >
- ...
- </хүснэгт>
Өмнөх жишээг авч үзвэл, бид jQuery болон Tablesorter залгаасаар дамжуулан эрэмбэлэх функцээр дамжуулан хүснэгтүүдийнхээ ашиг тусыг сайжруулдаг . Ангилалыг өөрчлөхийн тулд дурын баганын толгой дээр дарна уу.
# | Нэр | Овог | Хэл |
---|---|---|---|
2 | Жо | Зургаан хайрцаг | Англи |
3 | Stu | Хонхорхой | Код |
1 | Таны | Нэг | Англи |
- <script src = "js/jquery/jquery.tablesorter.min.js" >></script>
- <скрипт >
- $ ( функц () {
- $ ( "хүснэгт#sortTableExample" ). хүснэгт эрэмбэлэгч ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <хүснэгт анги = "тахө судалтай" >
- ...
- </хүснэгт>
Бүх маягтыг унших боломжтой, өргөтгөх боломжтой байдлаар харуулахын тулд үндсэн хэв маягийг өгсөн. Текст оруулах, сонгох жагсаалт, текстийн талбар, радио товч болон шалгах хайрцаг, товчлуур зэрэгт зориулж хэв маягийг өгсөн.
Маягтынхаа HTML-д нэмбэл .form-stacked
та талбаруудын зүүн талд биш дээд талд шошготой болно. Хэрэв таны маягт богино эсвэл хүнд хэлбэрт оруулах хоёр багана байгаа бол энэ нь маш сайн ажилладаг.
Тэмдэглэгээнд хэдхэн анги нэмж дурын хэлбэр input
, select
, эсвэл өргөнийг тохируулаарай.textarea
1.3.0 хувилбараас бид маягтын элементүүдийн сүлжээнд суурилсан хэмжээсийн ангиллыг нэмсэн. Эдгээрийг одоо байгаа .mini
, .small
, гэх мэт ангиудад ашиглаарай.
Дүрмээр бол товчлууруудыг үйлдэл хийхэд ашигладаг бол холбоосыг объектод ашигладаг. Жишээлбэл, "Татаж авах" нь товчлуур, "сүүлийн үйл ажиллагаа" нь холбоос байж болно.
Бүх товчлуурууд нь анхдагчаар цайвар саарал өнгөтэй байдаг боловч янз бүрийн өнгөт загварт хэд хэдэн функциональ ангиллыг ашиглаж болно. Эдгээр ангиудад цэнхэр .primary
анги, цайвар цэнхэр .info
анги, ногоон .success
анги, улаан .danger
анги орно.
Товчлуурын хэв маягийг ашигласан бүх зүйлд .btn
хэрэглэж болно. Ерөнхийдөө та эдгээрийг зөвхөн <a>
, <button>
, сонгох <input>
элементүүдэд хэрэглэхийг хүсдэг. Энэ нь дараах байдалтай байна.
Илүү том эсвэл жижиг товчлуурууд танд таалагдаж байна уу? Болоорой!
Идэвхгүй байгаа эсвэл ямар нэг шалтгааны улмаас програм идэвхгүй болсон товчлууруудын хувьд идэвхгүй байдлыг ашиглана уу. Энэ .disabled
нь холбоосууд болон элементүүдэд :disabled
зориулагдсан .<button>
.alert-message
Аливаа үйлдлийн бүтэлгүйтэл, болзошгүй бүтэлгүйтэл, амжилтыг тодруулах нэг мөр мессеж. Ялангуяа маягтуудад хэрэгтэй.
- <div class = "aert-message warning" >
- <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, pharetra augue. Тэнд commodo cursus magna, vel sclerisque nisl consectetur et. </p>
- <div class = "alert-action" >
- <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 or 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 accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium voluptae voluptae quasi accusantium voluptae quae accusantium voluptae quasi .
Хуудасны бүтцэд нөлөөлөхгүйгээр дэд текст мэдээллээр хангахын тулд поповер ашиглана уу.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Морби leo risus, porta ac consectetur ac, vestibulum болон eros.
JavaScript-г Bootstrap номын сантай нэгтгэх нь маш хялбар юм. Доор бид үндсэн зарчмуудыг судалж, таныг эхлүүлэхэд тань туслах хэдэн гайхалтай залгаасуудыг санал болгож байна!
Bootstrap-ийн зарим үндсэн бүрэлдэхүүн хэсгүүдийг jQuery болон Ender дээр ажилладаг шинэ захиалгат залгаасуудаар амилуулаарай . Таны хөгжлийн тусгай хэрэгцээнд нийцүүлэн тэдгээрийг өргөтгөж, өөрчлөхийг бид танд зөвлөж байна.
Файл | Тодорхойлолт |
---|---|
bootstrap-modal.js | Манай Modal залгаас нь уламжлалт modal js залгаастай маш нарийн шийдэл юм! Бид зөвхөн твиттерт шаардлагатай нүцгэн функцуудыг оруулахад онцгой анхаарал хандуулсан. |
bootstrap-alerts.js | Сэрэмжлүүлэг залгаас нь сэрэмжлүүлэгт ойрхон функцийг нэмэхэд зориулагдсан маш жижиг анги юм. |
bootstrap-dropdown.js | Энэхүү залгаас нь ачаалах самбарын дээд самбар эсвэл цонхтой навигац руу унадаг харилцан үйлчлэлийг нэмэхэд зориулагдсан. |
bootstrap-scrollspy.js | ScrollSpy залгаас нь ачаалах самбарын дээд самбарт гүйлгэх байрлалд тулгуурлан автоматаар шинэчлэгдэх Nav-г нэмэхэд зориулагдсан. |
bootstrap-buttons.js | ScrollSpy залгаас нь ачаалах самбарын дээд самбарт гүйлгэх байрлалд тулгуурлан автоматаар шинэчлэгдэх Nav-г нэмэхэд зориулагдсан. |
bootstrap-tabs.js | Энэхүү залгаас нь орон нутгийн контентоор дамжин өнгөрөх хурдан, динамик таб болон эм функцийг нэмдэг. |
bootstrap-twipsy.js | Жейсон Фреймийн бичсэн гайхалтай jQuery.tipsy залгаас дээр үндэслэсэн; twipsy нь зураг дээр тулгуурладаггүй, хөдөлгөөнт дүрслэлд css3, орон нутгийн гарчиг хадгалахад өгөгдлийн шинж чанаруудыг ашигладаг шинэчлэгдсэн хувилбар юм! |
bootstrap-popover.js | Popover залгаас нь таны програмд поповер нэмэх энгийн интерфейсээр хангадаг. Энэ нь boostrap-twipsy.js залгаасыг өргөтгөдөг тул төсөлдөө поповер оруулахдаа тэр файлыг мөн татаж авахаа мартуузай! |
Үгүй ээ! Bootstrap нь юуны түрүүнд CSS номын сан байхаар бүтээгдсэн. Энэхүү javascript нь оруулсан загваруудын дээр үндсэн интерактив давхаргыг өгдөг.
Гэсэн хэдий ч javascript хэрэгтэй байгаа хүмүүст зориулж бид Bootstrap-г javascript-тэй хэрхэн нэгтгэх талаар ойлгоход тусалж, үндсэн функцийг түргэн шуурхай, хялбар болгох үүднээс дээрх нэмэлт өргөтгөлүүдийг өгсөн.
Дэлгэрэнгүй мэдээлэл авах болон зарим амьд үзүүлэнг үзэхийг хүсвэл манай залгаасын баримт бичгийн хуудаснаас үзнэ үү .
Bootstrap нь вэбийг илүү хурдан бөгөөд хялбар болгоход зориулагдсан CSS-ийн урьдчилсан процессор болох Less -тэй хамт ашиглах холимог болон хувьсагчийн нээлттэй эхийн багц болох Preboot - оос бүтээгдсэн .
Бид Bootstrap-д Preboot-г хэрхэн ашигласан, хэрэв та дараагийн төсөл дээрээ Less програмыг ажиллуулахаар сонгосон бол үүнийг хэрхэн ашиглаж болохыг харна уу.
Хөтөч дээрээ javascript-ээр дамжуулан Bootstrap-ийн Less хувьсагч, холимог болон CSS-ийн үүрийг бүрэн ашиглахын тулд энэ сонголтыг ашиглана уу.
- <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 ашиглан кодоо байршуулахдаа эмхэтгээрэй.
Энд Bootstrap-ийн нэг хэсэг болох Twitter Bootstrap-д багтсан зүйлсийн зарим онцлох зүйлсийг энд оруулав. Татаж авах болон илүү ихийг мэдэхийн тулд Bootstrap вэбсайт эсвэл Github төслийн хуудас руу очно уу.
Less дахь хувьсагч нь таны CSS-ийн толгойн өвчинг арилгах, шинэчлэхэд төгс төгөлдөр юм. Хэрэв та өнгөний утга эсвэл байнга ашиглагддаг утгыг өөрчлөхийг хүсвэл нэг цэгт шинэчлээрэй.
- // Холбоосууд
- @linkColor : #8b59c2;
- @linkColorHover : харанхуйлах ( @linkColor , 10 );
- // Саарал
- @хар : #000;
- @grayDark : гэрэлтүүлэх ( @хар , 25 %);
- @саарал : цайруулах ( @хар , 50 %);
- @grayLight : гэрэлтүүлэх ( @хар , 70 %);
- @grayLighter : гэрэлтүүлэх ( @хар , 90 %);
- @цагаан : #fff ;
- // Өргөлтийн өнгө
- @цэнхэр : #08b5fb ;
- @ногоон : #46a546 ;
- @улаан : #9d261d ;
- @шар : #ffc40d ;
- @улбар шар : #f89406 ;
- @ягаан : #c3325f ;
- @ нил ягаан : #7a43b6 ;
- // Суурь шугам
- @basefont : 13px ;
- @baseline : 18px ;
/* ... */
Less нь CSS-ийн ердийн синтаксаас гадна тайлбар бичих өөр хэв маягийг өгдөг .
- // Энэ бол тайлбар юм
- /* Энэ бас сэтгэгдэл */
Холимог нь үндсэндээ 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 ;
- background - image : - khtml - градиент ( шугаман , зүүн дээд , зүүн доод , -аас ( @startColor ), ( @endColor ) хүртэл ); // Konqueror
- background - image : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+
- background - image : - ms - linear - gradient ( @startColor , @endColor ); // IE10
- background - image : - 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 ); // Opera 11.10
- дэвсгэр - зураг : шугаман - градиент ( @startColor , @endColor ); // Стандарт
- }
- ...
- }
Доорх шиг уян хатан, хүчирхэг холимог үүсгэхийн тулд сонирхолтой болж, математик тооцоолоорой.
- // Сүлжээ
- @gridБаганууд : 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 суулгасан |
Javascript | Хамгийн сүүлийн үеийн Less.js-г татаж аваад түүнд хүрэх замыг (болон Bootstrap) дотор
.less файлуудыг дахин эмхэтгэхийн тулд тэдгээрийг хадгалаад хуудсыг дахин ачааллахад л болно. Less.js тэдгээрийг эмхэтгэж, дотоод санах ойд хадгалдаг. |
Тушаалын мөр | Хэрэв танд бага тушаалын хэрэгсэл суулгасан бол дараах тушаалыг ажиллуулна уу: $ lessc ./lib/bootstrap.less > bootstrap.css
|
Цөөн Mac програм | Албан бус Mac програм нь .less файлуудын лавлахуудыг үзэж, үзсэн .less файлыг хадгалсны дараа кодыг дотоод файлууд руу хөрвүүлдэг. Хэрэв та хүсвэл програмын тохиргоог автоматаар жижигрүүлэх, хөрвүүлсэн файлуудыг аль директорт оруулах зэргийг өөрчлөх боломжтой. |