Bootstrap

Scaffolding

Bootstrap жооп берүүчү 12 тилкелүү тордо курулган. Биз ошондой эле ошол системанын негизинде туруктуу жана суюктуктун кеңдигинен макеттерди киргиздик.

CSS баштапкы абалга келтирүү, типография жана шилтемелер үчүн глобалдык стилдер

HTML5 документ түрүн талап кылат

Bootstrap HTML5 документ түрүн колдонууну талап кылган HTML элементтерин жана CSS касиеттерин колдонот. Долбооруңуздагы ар бир Bootstrapped бетинин башында аны кошуңуз.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

Типография жана шилтемелер

scaffolding.less файлынын ичинде биз негизги глобалдык дисплей, типография жана шилтеме стилдерин орнотобуз. Тактап айтканда, биз:

  • Денедеги чекти алып салыңыз
  • background-color: white;боюнча коюуbody
  • Биздин типографиялык негиз катары @baseFontFamily, @baseFontSize, жана атрибуттарды колдонуңуз@baseLineHeight
  • Шилтеменин глобалдык түсүн коюңуз @linkColorжана шилтеменин астын сызууну гана колдонуңуз:hover

Нормалдаштыруу аркылуу баштапкы абалга келтирүү

Bootstrap 2ден баштап, салттуу CSS баштапкы абалга келтирүү HTML5 Boilerplate'ди дагы иштеткен Николас Галлахердин долбоору болгон Normalize.css элементтерин колдонуу үчүн өнүккөн .

Жаңы баштапкы абалга келтирүүнү дагы эле reset.lessтен тапса болот , бирок кыска жана тактык үчүн көптөгөн элементтер алынып салынган.

Демейки сетка системасы 12 мамыча менен жооп кайтаруу

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Bootstrap бөлүгү катары берилген демейки тор системасы 940px кең, 12 тилкелүү тор .

Ал ошондой эле ар кандай түзмөктөр жана резолюциялар үчүн төрт жооп берүүчү вариацияга ээ: телефон, планшеттин портрети, столдун пейзаждары жана кичинекей иш такталары жана чоң кең экрандуу иш такталары.

  1. <div класс = "сап" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Бул жерде көрсөтүлгөндөй, негизги макет эки "мамыча" менен түзүлүшү мүмкүн, алардын ар бири тор тутумубуздун бир бөлүгү катары аныктаган 12 фундаменталдык мамычалардын санын камтыйт.


Мамычаларды алмаштыруу

4
4 офсет 4
3 офсет 3
3 офсет 3
8 офсет 4 
  1. <div класс = "сап" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Уюшкан мамычалар

Bootstrapдагы статикалык (суюк эмес) тор системасы менен уя салуу оңой. Мазмунуңузду уячага салуу үчүн, учурдагы тилкеге ​​жаңы .rowжана мамычалар топтомун кошуңуз ..span*.span*

Мисал

Уюшкан саптар анын ата-энесинин мамычаларынын санына чейин кошулган мамычаларды камтышы керек. Мисалы, эки уя салынган .span3мамычаларды .span6.

Мамычанын 1-деңгээли
2-деңгээл
2-деңгээл 
  1. <div класс = "сап" > 
  2.   <div class = "span12" > 
  3.     Мамычанын 1-деңгээли
  4.     <div класс = "сап" > 
  5.       <div class = "span6" > 2-деңгээл </div> 
  6.       <div class = "span6" > 2-деңгээл </div> 
  7.     </div>
  8.   </div>
  9. </div>

Суюктук тор системасы 12 жооп берүүчү, пайызга негизделген мамычалар

Суюк мамычалар

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Пикселдер эмес, пайыздар

Суюк тор системасы белгиленген пикселдердин ордуна мамычанын туурасы үчүн пайыздарды колдонот. Ал ошондой эле биздин туруктуу тор тутумубуз сыяктуу эле жооп берүүчү вариацияларга ээ, бул негизги экран токтомдору жана түзмөктөр үчүн тийиштүү пропорцияларды камсыз кылат.

Суюк катарлар

Катар суюктугун жөн гана өзгөртүү .rowменен жасаңыз .row-fluid. Мамычалар так ошол бойдон калууда, бул стационардык жана суюк схемалардын ортосунда өтүүнү оңой кылат.

Белгилөө

  1. <div класс = "катар-суюктук" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Суюктук уясы

Суюк торлор менен уя салуу бир аз башкача: уя салынган мамычалардын саны ата-энеге дал келүүнүн кереги жок. Анын ордуна, мамычаларыңыз ар бир деңгээлде баштапкы абалга келтирилет, анткени ар бир сап негизги тилкенин 100% ээлейт.

Суюктук 12
Суюктук 6
Суюктук 6 
  1. <div класс = "катар-суюктук" > 
  2.   <div class = "span12" > 
  3.     Мамычанын 1-деңгээли
  4.     <div класс = "катар-суюктук" > 
  5.       <div class = "span6" > 2-деңгээл </div> 
  6.       <div class = "span6" > 2-деңгээл </div> 
  7.     </div>
  8.   </div>
  9. </div>

Тор ыңгайлаштыруу

Variable Демейки маани Description
@gridColumns 12 Мамычалардын саны
@gridColumnWidth 60px Ар бир мамычанын туурасы
@gridGutterWidth 20px Мамычалардын ортосундагы терс боштук
@siteWidth Бардык мамычалар менен каналдардын эсептелген суммасы Микстин туурасын коюу үчүн мамычалардын жана каналдардын санын .container-fixed()эсептейт

LESS ичиндеги өзгөрмөлөр

Bootstrap ичинде орнотулган демейки 940px тор системасын ыңгайлаштыруу үчүн бир нече өзгөрмөлөр бар, жогоруда документтештирилген. Тор үчүн бардык өзгөрмөлөр variables.less ичинде сакталат.

Кантип ыңгайлаштыруу керек

Торду өзгөртүү үч @grid*өзгөрмөлөрдү өзгөртүүнү жана Bootstrapты кайра компиляциялоону билдирет. variables.less ичиндеги тор өзгөрмөлөрдү өзгөртүңүз жана кайра компиляциялоо үчүн документтештирилген төрт жолдун бирин колдонуңуз . Эгер сиз көбүрөөк мамычаларды кошуп жатсаңыз, анда grid.less ичиндегилер үчүн CSS кошууну унутпаңыз.

Жооптуу болуу

Торду ыңгайлаштыруу демейки деңгээлде, 940px тордо гана иштейт. Bootstrap'тин жооп берүүчү аспектилерин сактап калуу үчүн responsive.less ичинде торлорду да ыңгайлаштырышыңыз керек болот.

Макеттер Веб баракчаларды түзүү үчүн негизги калыптар

Фиксалдуу макет

Демейки жана жөнөкөй 940px кеңдиги, бир гана веб-сайт же барагы үчүн борборлоштурулган макет <div class="container">.

  1. <дене>
  2.   <div класс = "контейнер" > 
  3.     ...
  4.   </div>
  5. </body>

Суюктуктун жайгашуусу

<div class="container-fluid">ийкемдүү бет түзүмүн, мин- жана максимум-туураларын жана сол жак каптал тилкесин берет. Бул колдонмолор жана документтер үчүн сонун.

  1. <div класс = "контейнер-суюктук" > 
  2.   <div класс = "катар-суюктук" > 
  3.     <div class = "span2" > 
  4.       <!--Конталдык панелдин мазмуну-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Дене мазмуну-->
  8.     </div>
  9.   </div>
  10. </div>

Жооптуу дизайн Ар кандай түзмөктөр жана токтомдор үчүн медиа сурамдары

Жооптуу түзмөктөр

Алар эмне кылышат

Медиа сурамдары бир катар шарттардын негизинде ыңгайлаштырылган CSS'ге мүмкүндүк берет - катыштар, тууралар, дисплей түрү min-width, max-widthж.б.

  • Торубуздагы мамычанын туурасын өзгөртүңүз
  • Керектүү жерде калкып жүрүүнүн ордуна элементтерди стек
  • Түзмөктөр үчүн ылайыктуураак болушу үчүн аталыштардын жана тексттин өлчөмүн өзгөртүү

Медиа сурамдарын жоопкерчиликтүү жана мобилдик аудиторияңыздын башталышы катары гана колдонуңуз. Чоңураак долбоорлор үчүн медиа сурамдарынын катмарларын эмес, атайын коддук базаларды карап көрүңүз.

Колдоого алынган түзмөктөр

Bootstrap долбоорлоруңузду ар кандай түзмөктөрдө жана экрандын токтомдорунда ылайыктуураак кылууга жардам берүү үчүн бир файлдагы бир нече медиа сурамдарды колдойт. Бул жерде эмне камтылган:

Белги Макеттин туурасы Мамычанын туурасы Арыктын туурасы
Смартфондор 480px жана андан төмөн Суюк мамычалар, белгиленген туурасы жок
Смартфондордон планшеттерге 767px жана андан төмөн Суюк мамычалар, белгиленген туурасы жок
Портреттик планшеттер 768px жана андан жогору 42px 20px
Демейки 980px жана андан жогору 60px 20px
Чоң дисплей 1200px жана андан жогору 70px 30px

Мета тег талап кылынат

Түзмөктөрдүн жооп берүүчү баракчаларды туура көрсөтүшүн камсыз кылуу үчүн көрүү портунун мета тегин кошуңуз.

  1. <meta name = "viewport" мазмуну = "туурасы = түзмөктүн туурасы, баштапкы масштаб = 1.0" >

Медиа сурамдарды колдонуу

Bootstrap бул медиа сурамдарды автоматтык түрдө камтыбайт, бирок аларды түшүнүү жана кошуу абдан оңой жана минималдуу орнотууну талап кылат. Сизде Bootstrapтин жооп берүүчү функцияларын кошуу үчүн бир нече варианттар бар:

  1. Түзүлгөн жооп берүүчү версияны колдонуңуз, bootstrap-responsive.css
  2. @import "responsive.less" кошуңуз жана Bootstrapди кайра компиляциялаңыз
  3. Responsive.less өзүнчө файл катары өзгөртүп, кайра компиляциялаңыз

Эмне үчүн аны жөн эле камтыбайт? Чынын айтсам, баары эле жооп бериши керек эмес. Иштеп чыгуучуларды бул функцияны алып салууга үндөгөндүн ордуна, биз аны иштетүүнү эң жакшы деп эсептейбиз.

  1.   // Пейзаж телефондору жана төмөн
  2.   @media ( макс . туурасы : 480px ) { ... }     
  3.  
  4.   // Пейзаждык телефондон портреттик планшетке
  5.   @media ( макс . туурасы : 768px ) { ... }     
  6.  
  7.   // Пейзажга жана иш тактасына портреттик планшет
  8.   @media ( мин - туурасы : 768px ) жана ( макс - туурасы : 980px ) { ... }        
  9.  
  10.   // Чоң иш тактасы
  11.   @media ( мин - туурасы : 1200px ) { .. }

Жооптуу пайдалуу класстар

Эмне алар

Тезирээк мобилдик ыңгайлуу иштеп чыгуу үчүн, бул негизги пайдалуу класстарды түзмөк боюнча мазмунду көрсөтүү жана жашыруу үчүн колдонуңуз.

Качан колдонуу керек

Чектелген негизде колдонуу жана бир эле сайттын такыр башка версияларын түзүүдөн качыңыз. Анын ордуна, аларды ар бир түзмөктүн презентациясын толуктоо үчүн колдонуңуз.

Мисалы, сиз <select>мобилдик макеттерде navigasyon үчүн элементти көрсөтсөңүз болот, бирок планшеттерде же иш такталарында эмес.

Колдоо класстары

Бул жерде биз колдогон класстардын таблицасы жана алардын берилген медиа сурамынын макетине тийгизген таасири (түзмөк менен белгиленген). Аларды тапса болот responsive.less.

Класс Телефондор480px жана андан төмөн Планшеттер767px жана андан төмөн Иш такталары768px жана андан жогору
.visible-phone Көрүнүүчү
.visible-tablet Көрүнүүчү
.visible-desktop Көрүнүүчү
.hidden-phone Көрүнүүчү Көрүнүүчү
.hidden-tablet Көрүнүүчү Көрүнүүчү
.hidden-desktop Көрүнүүчү Көрүнүүчү

Сыноо иши

Жогорудагы класстарды текшерүү үчүн браузериңиздин өлчөмүн өзгөртүңүз же башка түзмөктөргө жүктөңүз.

Төмөнкүдө көрүнөт...

  • Телефон✔ Телефон
  • Планшет✔ Планшет
  • Иш такта✔ Иш такта

Жашырылган...

  • Телефон✔ Телефон
  • Планшет✔ Планшет
  • Иш такта✔ Иш такта