Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Морби лео рисус, порта ac consectetur ac, vestibulum болон eros.
Bootstrap бол вэб програм болон сайтуудыг хөгжүүлэхэд зориулагдсан Twitter-ийн хэрэгсэл юм.
Энэ нь хэвлэх, маягт, товчлуур, хүснэгт, сүлжээ, навигаци гэх мэт үндсэн CSS болон HTML-г агуулдаг.
Nerd-ийн сэрэмжлүүлэг: Bootstrap нь Less -ээр бүтээгдсэн бөгөөд орчин үеийн хөтчүүдийг харгалзан хаалганы гадна ажиллахад зориулагдсан.
Хамгийн хурдан бөгөөд хялбар эхлүүлэхийн тулд энэ хэсгийг вэб хуудсандаа хуулна уу.
Less ашиглах дуртай хүн үү? Ямар ч асуудалгүй, зүгээр л репо клон хийгээд дараах мөрүүдийг нэмнэ үү:
Github дээрх албан ёсны Bootstrap репо ашиглан татаж авах, салаалах, татах, файл үүсгэх гэх мэт асуудлууд.
Твиттерийн эхний өдрүүдэд инженерүүд урд талын шаардлагыг хангахын тулд өөрсдийн мэддэг бараг бүх номын санг ашигладаг байв. Bootstrap нь Twitter-ийн анхны Hackweek-ийн үеэр гарч ирсэн сорилтуудын хариулт болж эхэлсэн бөгөөд хөгжил нь хурдацтай хурдассан.
Твиттерийн олон инженерүүдийн тусламж, санал хүсэлтийн дагуу 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>
Нэг <div.container>
.
- <бие>
- <div class = "контейнер" >
- ...
- </div>
- </body>
Хамгийн бага ба хамгийн их өргөнтэй, зүүн талын хажуугийн самбар бүхий өөр, уян хатан шингэн хуудасны бүтэц. Аппликешн болон баримт бичигт тохиромжтой.
- <бие>
- <div class = "контейнер-шингэн" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "content" >
- ...
- </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 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.
Доктор Жулиус Хибберт
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Хүснэгт нь маш сайн - олон зүйлд зориулагдсан. Гайхалтай хүснэгтүүд нь ашигтай, өргөтгөх боломжтой, унших боломжтой (кодын түвшинд) байхын тулд бага зэрэг тэмдэглэгээ хийх хэрэгтэй. Энд туслах хэдэн зөвлөгөө байна.
Баганын толгой хэсгийг үргэлж > > <thead>
байхаар боож байгаарай .<thead>
<tr>
<th>
Баганын толгойтой адил таны хүснэгтийн бүх агуулгыг дотор нь ороосон байх ёстой бөгөөд <tbody>
ингэснээр таны шатлал <tbody>
> <tr>
> <td>
байна.
Унших, бүтцийг хадгалахын тулд бүх хүснэгтийг зөвхөн чухал хүрээгээр автоматаар загварчлах болно. Нэмэлт анги, шинж чанар нэмэх шаардлагагүй.
# | Нэр | Овог | Хэл |
---|---|---|---|
1 | Зарим | Нэг | Англи |
2 | Жо | Зургаан хайрцаг | Англи |
3 | Stu | Хонхорхой | Код |
- <хүснэгт>
- ...
- </хүснэгт>
Тахө зураасыг нэмж ширээгээ бага зэрэг гоёмсог болго—зүгээр л .zebra-striped
анги нэмээрэй.
# | Нэр | Овог | Хэл |
---|---|---|---|
1 | Зарим | Нэг | Англи |
2 | Жо | Зургаан хайрцаг | Англи |
3 | Stu | Хонхорхой | Код |
Тайлбар: Zebra-striping нь IE8 болон түүнээс доош настай хөтчүүдэд байхгүй дэвшилтэт сайжруулалт юм.
- <хүснэгт анги = "тахө судалтай" >
- ...
- </хүснэгт>
Өмнөх жишээг авч үзвэл, бид jQuery болон Tablesorter залгаасаар дамжуулан эрэмбэлэх функцээр хангаснаар хүснэгтийнхээ ашиг тусыг сайжруулдаг . Ангилалыг өөрчлөхийн тулд дурын баганын толгой дээр дарна уу.
# | Нэр | Овог | Хэл |
---|---|---|---|
1 | Таны | Нэг | Англи |
2 | Жо | Зургаан хайрцаг | Англи |
3 | Stu | Хонхорхой | Код |
- <script src = "js/jquery/jquery.tablesorter.min.js" >></script>
- <скрипт >
- $ ( функц () {
- $ ( "хүснэгт#sortTableExample" ). хүснэгт эрэмбэлэгч ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <хүснэгт анги = "тахө судалтай" >
- ...
- </хүснэгт>
Бүх маягтыг унших боломжтой, өргөтгөх боломжтой байдлаар харуулахын тулд үндсэн хэв маягийг өгсөн. Текст оруулах, сонгох жагсаалт, текстийн талбар, радио товч болон шалгах хайрцаг, товчлуур зэрэгт хэв маягийг өгсөн.
Маягтынхаа HTML-д нэмбэл .form-stacked
та талбаруудын зүүн талд биш дээд талд шошготой болно. Хэрэв таны маягт богино эсвэл хүнд хэлбэрт оруулах хоёр багана байгаа бол энэ нь маш сайн ажилладаг.
Дүрмээр бол товчлууруудыг үйлдэл хийхэд ашигладаг бол холбоосыг объектод ашигладаг. Жишээлбэл, "Татаж авах" нь товчлуур, "сүүлийн үйл ажиллагаа" нь холбоос байж болно.
Бүх товчлуурууд нь анхдагчаар цайвар саарал өнгөтэй байдаг боловч янз бүрийн өнгөт загварт хэд хэдэн функциональ ангиллыг ашиглаж болно. Эдгээр ангиудад цэнхэр .primary
анги, цайвар цэнхэр .info
анги, ногоон .success
анги, улаан .danger
анги орно. Нэмж дурдахад, өөрийн гэсэн хэв маягийг хэвлэхэд хялбар байдаг.
Товчлуурын хэв маягийг ашигласан бүх зүйлд .btn
хэрэглэж болно. Ерөнхийдөө та эдгээрийг зөвхөн <a>
, <button>
, сонгох <input>
элементүүдэд хэрэглэхийг хүсдэг. Энэ нь дараах байдалтай байна.
Илүү том эсвэл жижиг товчлуурууд танд таалагдаж байна уу? Болоорой!
Идэвхгүй байгаа эсвэл ямар нэг шалтгааны улмаас програм идэвхгүй болсон товчлууруудын хувьд идэвхгүй байдлыг ашиглана уу. Энэ .disabled
нь холбоосууд болон элементүүдэд :disabled
зориулагдсан .<button>
div.alert-message
Аливаа үйлдлийн бүтэлгүйтэл, болзошгүй бүтэлгүйтэл, амжилтыг тодруулах нэг мөр мессеж. Ялангуяа маягтуудад хэрэгтэй.
div.alert-message.block-message
Бага зэрэг тайлбар шаарддаг мессежүүдийн хувьд бид догол мөрний хэв маягийн анхааруулгатай. Эдгээр нь илүү урт алдааны мэдээг гаргах, хэрэглэгчдэд хүлээгдэж буй үйлдлийн талаар сэрэмжлүүлэх, эсвэл хуудсанд илүү их анхаарал хандуулахын тулд зүгээр л мэдээлэл өгөхөд тохиромжтой.
Модаль-харилцах цонх эсвэл гэрлийн хайрцаг нь суурь контекстийг хадгалах нь чухал нөхцөл байдалд контекст үйлдлүүдэд тохиромжтой.
Нэг сайхан бие…
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. Морби лео рисус, порта ac consectetur ac, vestibulum болон eros.
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 ;
- }
- . сериф ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- фонт - гэр бүл : "Georgia" , Times New Roman , Times , sans - serif ;
- фонт - хэмжээ : @size ;
- фонт - жин : @weight ;
- шугам - өндөр : @lineHeight ;
- }
- . monospace ( @ жин : хэвийн , @size : 12px , @lineHeight : 20px ) {
- фонт - гэр бүл : "Монако" , Courier New , monospace ;
- фонт - хэмжээ : @size ;
- фонт - жин : @weight ;
- шугам - өндөр : @lineHeight ;
- }
- }
- #градиент {
- . хэвтээ ( @startColor : #555, @endColor: #333) {
- дэвсгэр - өнгө : @endColor ;
- дэвсгэр - давтах : давтах - x ;
- дэвсгэр - зураг : - khtml - градиент ( шугаман , зүүн дээд , баруун дээд , -аас ( @startColor ), ( @endColor ) хүртэл ); // Konqueror
- дэвсгэр - зураг : - moz - шугаман - градиент ( зүүн , @startColor , @endColor ); // FF 3.6+
- дэвсгэр - зураг : - ms - шугаман - градиент ( зүүн , @startColor , @endColor ); // IE10
- background - image : - 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 ); // Стандарт
- }
- . босоо ( @startColor : #555, @endColor: #333) {
- дэвсгэр - өнгө : @endColor ;
- дэвсгэр -давтах : давтах - x ;
- background - image : - khtml - градиент ( шугаман , зүүн дээд , зүүн доод , -аас ( @startColor ) хүртэл ( @endColor ); // Konqueror
- дэвсгэр - зураг : - moz - шугаман - градиент ( @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 ); // Стандарт
- }
- . чиглэлтэй ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . босоо - гурван өнгө ( @startColor : #00b3ee, @midColor : #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
- }
Доорх шиг уян хатан, хүчирхэг холимог үүсгэхийн тулд сонирхолтой болж, математик тооцоолоорой.
- // Сүлжээ
- @gridБаганууд : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Сүлжээний систем
- . сав {
- өргөн : @siteWidth ;
- захын зай : 0 автомат ;
- . тодорхой засах ();
- }
- . баганууд ( @columnSpan : 1 ) {
- өргөн : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . офсет ( @columnOffset : 1 ) {
- захын зай - зүүн : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }