Ботстрап

Скафолдинг

Bootstrap 12 баганалы челтәрдә төзелгән. Без шулай ук ​​шул системага нигезләнгән тотрыклы һәм сыеклык киңлеге макетларын керттек.

CSS яңарту, типография һәм сылтамалар өчен глобаль стильләр

HTML5 доктипы кирәк

Bootstrap HTML элементларын һәм HTML5 доктип куллануны таләп итә торган 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 яңадан торгызу Normalize.css элементларын куллану өчен үсеш алды, Николас Галлагер проекты, ул шулай ук ​​HTML5 казанына көч бирә .

Яңа яңартуны 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 class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Монда күрсәтелгәнчә, төп макет ике "багана" белән ясалырга мөмкин, аларның һәрберсе безнең челтәр системасы өлеше итеп билгеләгән 12 нигез баганасын үз эченә ала.


Колонналарны офсетлау

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

Оя баганалары

Ботстраптагы статик (сыек булмаган) челтәр системасы белән оя ясау җиңел. Эчтәлекне оялау өчен, булган багана эчендә яңа .rowһәм баганалар җыелмасы өстәгез ..span*.span*

Мисал

Ояланган рәтләр аның әти-әнисенең баганалар санына өстәгән баганалар җыелмасын кертергә тиеш. Мәсәлән, ике оя .span3баганасы а эчендә урнаштырылырга тиеш .span6.

1 нче багана
2 нче дәрәҗә
2 нче дәрәҗә 
  1. <div class = "row" > 
  2.   <div class = "span12" > 
  3.     1 нче багана
  4.     <div class = "row" > 
  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

Пиксель түгел, процентлар

Сыеклык челтәре системасы тотрыклы пиксель урынына багана киңлеге өчен процент куллана. Бу шулай ук ​​безнең төп челтәр системасы белән бер үк җаваплы вариацияләргә ия, төп экран резолюцияләре һәм җайланмалары өчен тиешле пропорцияләрне тәэмин итә.

Сыек рәтләр

.rowAnyзгәртеп кенә теләсә нинди рәт сыеклык ясагыз .row-fluid. Колонналар бер үк булып калалар, тотрыклы һәм сыеклыклы макетлар арасында әйләнү супер туры.

Билгеләү

  1. <div class = "рәт-сыеклык" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Сыек оя

Сыеклык челтәрләре белән оя ясау бераз башка: ояланган баганалар саны ата-аналарга туры килергә тиеш түгел. Киресенчә, сезнең баганалар һәр дәрәҗәдә яңартылган, чөнки һәр рәт ата-багананың 100% тәшкил итә.

Сыеклык 12
Сыеклык 6
Сыеклык 6 
  1. <div class = "рәт-сыеклык" > 
  2.   <div class = "span12" > 
  3.     1 нче багана
  4.     <div class = "рәт-сыеклык" > 
  5.       <div class = "span6" > 2 дәрәҗә </div> 
  6.       <div class = "span6" > 2 дәрәҗә </div> 
  7.     </div>
  8.   </div>
  9. </div>

Челтәрне көйләү

Үзгәрүчән Килешенгән кыйммәт Тасвирлау
@gridColumns 12 Колонналар саны
@gridColumnWidth 60px Eachәр багананың киңлеге
@gridGutterWidth 20px Колонналар арасында тискәре урын
@siteWidth Барлык баганаларның һәм чокырларның исәпләнгән суммасы .container-fixed()Миксинның киңлеген билгеләү өчен баганалар һәм чокырлар саны

LESS үзгәрүләр

Bootstrap эчендә урнаштырылган, югарыда документлаштырылган 940px челтәр системасын көйләү өчен бик күп үзгәрүләр. Челтәр өчен барлык үзгәрешләр үзгәрүчәннәрдә саклана.

Ничек көйләргә

Челтәрне үзгәртү өч @grid*үзгәрүчене үзгәртү һәм Bootstrap-ны кабатлау дигән сүз. Челтәр үзгәрүчәннәрен үзгәрүчәннәрдә үзгәртегез һәм компиляцияләү өчен документлаштырылган дүрт ысулның берсен кулланыгыз . Әгәр сез күбрәк баганалар өстисез икән, grid.less өчен CSS өстәргә онытмагыз.

Respаваплы булу

Челтәрне көйләү 940px челтәрдә килешү дәрәҗәсендә эшли. Bootstrap-ның җаваплы якларын саклап калу өчен, сез шулай ук ​​челтәрләрне responsive.less'та көйләргә тиеш.

Веб -битләр ясау өчен төп шаблоннар

Тикшерелгән макет

Килешү һәм гади 940px киңлектә, бер сайт белән тәэмин ителгән теләсә нинди вебсайт яки бит өчен үзәкләштерелгән макет <div class="container">.

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

Сыеклык урнашуы

<div class="container-fluid">сыгылмалы бит структурасын, мин- һәм макс-киңлекләрне, һәм сул як ягы бирә. Бу кушымталар һәм документлар өчен бик яхшы.

  1. <div class = "контейнер-сыеклык" > 
  2.   <div class = "рәт-сыеклык" > 
  3.     <div class = "span2" > 
  4.       <! - Капка тактасы эчтәлеге ->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <! - Тән эчтәлеге ->
  8.     </div>
  9.   </div>
  10. </div>

Responsаваплы дизайн Төрле җайланмалар һәм карарлар өчен Медиа соравы

Onsаваплы җайланмалар

Алар нәрсә эшлиләр

Медиа соравы CSS өчен берничә шартка нигезләнеп - катнашу, киңлек, күрсәтү төре һ.б. рөхсәт итә, ләкин гадәттә тирә-якка игътибар min-widthитә max-width.

  • Безнең челтәрдәге багананың киңлеген үзгәртегез
  • Кирәк булган җирдә йөзү урынына элементларны туплагыз
  • Devicesайланмалар өчен урынлырак булсын өчен, баш һәм текстның размерын үзгәртегез

Медиа сорауларын җаваплы һәм мобиль аудиториягез өчен башлангыч итеп кулланыгыз. Зур проектлар өчен, медиа-сорау катламнарын түгел, ә махсус код базаларын карагыз.

Ярдәмче җайланмалар

Bootstrap сезнең проектларыгызны төрле җайланмаларда һәм экран резолюцияләрендә урынлырак итәр өчен, бер файлдагы берничә медиа соравын хуплый. Менә нәрсә кертелгән:

Ярлык Таблицаның киңлеге Колонның киңлеге Гаттер киңлеге
Смартфоннар 480px һәм аста Сыек баганалар, тотрыклы киңлекләр юк
Планшетларга смартфоннар 767px һәм аста Сыек баганалар, тотрыклы киңлекләр юк
Портрет планшетлары 768px һәм аннан да югары 42px 20px
Килешү 980px һәм югарырак 60px 20px
Зур дисплей 1200px һәм югарырак 70px 30px

Мета-тег кирәк

Devicesайланмаларның җаваплы битләрне дөрес күрсәтүен тәэмин итү өчен, визута мета-тегын кертегез.

  1. <мета исеме = "күренеш" эчтәлеге = "киңлек = җайланма киңлеге, башлангыч масштаб = 1,0" >

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

Bootstrap автоматик рәвештә бу медиа сорауларын кертми, ләкин аларны аңлау һәм өстәү бик җиңел һәм минималь көйләү таләп итә. Bootstrap-ның җаваплы үзенчәлекләрен кертү өчен сезнең берничә вариант бар:

  1. Ostыелган җаваплы версияне кулланыгыз, bootstrap-responsive.css
  2. @Import "responsive.less" өстәгез һәм Bootstrap-ны кабатлагыз
  3. Аерым файл буларак җаваплы.lessны үзгәртегез һәм компиляцияләгез

Нигә аны кертмәскә? Дөресен генә әйткәндә, барысы да җаваплы булырга тиеш түгел. Төзүчеләрне бу функцияне бетерергә өндәү урынына, без аны эшләтеп җибәрү өчен иң яхшысы дип саныйбыз.

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

Коммуналь дәресләр

Алар нәрсә

Тизрәк мобиль дуслык үсеше өчен, бу төп файдалы классларны җайланма аша күрсәтү һәм яшерү өчен кулланыгыз.

Кайчан кулланырга

Чикләнгән нигездә кулланыгыз һәм бер үк сайтның бөтенләй башка версияләрен булдырмагыз. Киресенчә, аларны һәр җайланманың презентациясен тулыландыру өчен кулланыгыз.

Мисал өчен, сез <select>мобиль макетларда nav өчен элемент күрсәтә аласыз, ләкин планшетларда яки эш өстәлләрендә түгел.

Ярдәм дәресләре

Монда без күрсәткән класслар таблицасы һәм аларның медиа-сорау макетына тәэсире күрсәтелә (җайланма белән билгеләнгән). Аларны табарга мөмкин responsive.less.

Класс Телефоннар480px һәм аста Планшетлар767px һәм аста Эш өстәле768px һәм аннан да югары
.visible-phone Күренеп тора
.visible-tablet Күренеп тора
.visible-desktop Күренеп тора
.hidden-phone Күренеп тора Күренеп тора
.hidden-tablet Күренеп тора Күренеп тора
.hidden-desktop Күренеп тора Күренеп тора

Тест

Aboveгарыдагы пунктларны сынап карау өчен браузерыгызны үзгәртегез яки төрле җайланмаларга йөкләгез.

Күренеп тора ...

  • ТелефонOne Телефон
  • Планшет✔ Планшет
  • Эш өстәле✔ Эш өстәле

Яшерен ...

  • ТелефонOne Телефон
  • Планшет✔ Планшет
  • Эш өстәле✔ Эш өстәле