Scaffolding

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

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

<!DOCTYPE html>
<html lang = "en" > 
  ...
</html>

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

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

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

Бул стилдерди scaffolding.less ичинде тапса болот .

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

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

Жандуу тордун мисалы

Демейки Bootstrap тор системасы 12 мамычаны колдонот , бул 940px кең контейнерди жооп берүүчү функциялар иштетилбестен түзөт. Кошулган жооп берүүчү CSS файлы менен сетка сиздин көрүү портуңузга жараша 724px жана 1170px кеңдигине ыңгайлашат. 767px көрүү терезелеринен ылдыйда, мамычалар суюк болуп, вертикалдуу топтолот.

Негизги тор HTML

Жөнөкөй эки мамычанын макети үчүн, а түзүп, тилкелердин .rowтиешелүү санын кошуңуз .span*. Бул 12 тилкелүү тор болгондуктан, ар бири .span*ошол 12 мамычанын санын камтыйт жана ар бир сап үчүн ар дайым 12ге чейин кошулушу керек (же ата-энедеги тилкелердин саны).

<div класс = "сап" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Бул мисалды эске алганда, бизде .span4жана бар .span8, 12 жалпы мамычаларды жана толук сапты түзөт.

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

.offset*Класстар аркылуу тилкелерди оңго жылдырыңыз . Ар бир класс мамычанын сол четин бүтүндөй тилкеге көбөйтөт. Мисалы, төрт мамычанын үстүнөн .offset4жылдырат ..span4

3 офсет 2

3 офсет 1

3 офсет 2

6 офсет 3

<div класс = "сап" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

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

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

1-деңгээл тилкеси

2-деңгээл

<div класс = "сап" > 
  <div class = "span9" > 
    1-деңгээл тилкеси
    <div класс = "сап" > 
      <div class = "span6" > 2-деңгээл </div> 
      <div class = "span3" > 2-деңгээл </div> 
    </div>
  </div>
</div>

Тирүү суюктук торчо мисалы

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

Негизги суюктук торчо HTML

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

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

Суюктукту алмаштыруу

Туруктуу тор тутумунун .offset*ордун алмаштыруусу сыяктуу иштейт: ушунча тилке менен алмаштыруу үчүн каалаган тилкеге кошуңуз.

4 офсет 4

3 офсет 3

6 офсет 6

<div класс = "катар-суюктук" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

Суюктук уясы

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

Суюктук 12

Суюктук 6

<div класс = "катар-суюктук" > 
  <div class = "span12" > 
    Суюктук 12
    <div класс = "катар-суюктук" > 
      <div class = "span6" > 
        Суюктук 6
        <div класс = "катар-суюктук" > 
          <div class = "span6" > Суюктук 6 </div> 
          <div class = "span6" > Суюктук 6 </div> 
        </div>
      </div>
      <div class = "span6" > Суюктук 6 </div> 
    </div>
  </div>
</div>

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

Талап кылынган жалпы белгиленген туурасы (жана милдеттүү түрдө жооп берүүчү) макет менен <div class="container">камсыз кылат.

<дене>
  <div класс = "контейнер" > 
    ...
  </div>
</body>

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

Суюк, эки тилкелүү баракты түзүңүз <div class="container-fluid">— колдонмолор жана документтер үчүн сонун.

<div класс = "контейнер-суюктук" > 
  <div класс = "катар-суюктук" > 
    <div class = "span2" > 
      <!--Каптал тилкесинин мазмуну-->
    </div>
    <div class = "span10" > 
      <!--Дене мазмуну-->
    </div>
  </div>
</div>

Жооп берүүчү функцияларды иштетүү

Документиңизге туура мета тэгди жана кошумча стилдер жадыбалын кошуу менен долбооруңузда жооп берүүчү CSSти күйгүзүңүз <head>. Эгер сиз Bootstrap'ти Ыңгайлаштыруу барагынан түзгөн болсоңуз, сизге мета тег гана камтышы керек.

<meta name = "viewport" content = "туурасы = түзмөктүн туурасы, баштапкы масштаб = 1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

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

Жооптуу Bootstrap жөнүндө

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

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

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

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

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

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

/* Чоң иш тактасы */
@media ( мин - туурасы : 1200px ) { ... }     
 
/* пейзажга жана иш тактасына портреттик планшет */
@media ( мин - туурасы : 768px ) жана ( макс - туурасы : 979px ) { ... }        
 
/* Пейзаждык телефондон портреттик планшетке */
@media ( макс . туурасы : 767px ) { ... }     
 
/* Пейзаж телефондору жана төмөн */
@media ( макс . туурасы : 480px ) { ... }

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

Уюлдук телефонго ыңгайлуураак иштеп чыгуу үчүн, бул пайдалуу класстарды түзмөк боюнча мазмунду көрсөтүү жана жашыруу үчүн колдонуңуз. Төмөндө жеткиликтүү класстардын таблицасы жана алардын берилген медиа сурамынын схемасына тийгизген таасири (түзмөк менен белгиленген). Алардан тапса болот responsive.less.

Класс	Телефондор767px жана андан төмөн	Планшеттер979 пикселден 768 пикселге чейин	Иш такталарыДемейки
`.visible-phone`	Көрүнүүчү	Жашырылган	Жашырылган
`.visible-tablet`	Жашырылган	Көрүнүүчү	Жашырылган
`.visible-desktop`	Жашырылган	Жашырылган	Көрүнүүчү
`.hidden-phone`	Жашырылган	Көрүнүүчү	Көрүнүүчү
`.hidden-tablet`	Көрүнүүчү	Жашырылган	Көрүнүүчү
`.hidden-desktop`	Көрүнүүчү	Көрүнүүчү	Жашырылган

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

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

Жооптуу коммуналдык кызматтардын сыноо иши

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

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

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

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

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

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

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

Глобалдык орнотуулар