Скафолдинг

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 казанын эшләтеп җибәргән проект . Нормальләштерүнең күп өлешен үзебезнең reset.less эчендә куллансак та , без Bootstrap өчен кайбер элементларны бетердек.

Тере челтәр үрнәге

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

HTML челтәре

Гади ике багана макеты өчен, a ясагыз .rowһәм тиешле сандагы .span*баганаларны өстәгез. Бу 12 баганалы челтәр булганлыктан, аларның һәрберсе .span*шул 12 багананың санын үз эченә ала, һәм һәр рәт өчен һәрвакыт 12 гә кадәр булырга тиеш (яки ата-ананың баганалары саны).

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

.span4Бу мисалны исәпкә алып , бездә .span8барлыгы 12 багана һәм тулы рәт бар.

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

.offset*Дәресләр ярдәмендә баганаларны уңга күчерегез . Eachәр класс багананың сул читен тулы баганага арттыра. Мәсәлән, дүрт багана өстендә .offset4хәрәкәт итә..span4

3 офсет 2

3 офсет 1

3 офсет 2

6 офсет 3

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

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

Эчтәлекне килешү челтәре белән оялау өчен, булган баганага яңа .rowһәм баганалар җыелмасы өстәгез . Ояланган рәтләр аның әти-әнисенең баганалар санына өстәгән баганалар җыелмасын кертергә тиеш..span*.span*

1 нче дәрәҗә багана

2 нче дәрәҗә

<div class = "row" > 
  <div class = "span9" > 
    1 нче дәрәҗә багана
    <div class = "row" > 
      <div class = "span6" > 2 дәрәҗә </div> 
      <div class = "span3" > 2 дәрәҗә </div> 
    </div>
  </div>
</div>

Тере сыеклык челтәре мисалы

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

HTML сыеклык челтәре

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

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

Сыеклык офсетинг

Туры челтәр системасы офсетинг белән бер үк эш итә: .offset*теләсә нинди баганага шул баганаларны каплау өчен өстәгез.

4 офсет 4

3 офсет 3

6 офсет 6

<div class = "рәт-сыеклык" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

Сыек оя

Сыеклык челтәрләре ояны төрлечә кулланалар: һәр багана оясы 12 баганага кадәр булырга тиеш. Чөнки сыеклык челтәре киңлекне билгеләү өчен пиксель түгел, процент куллана.

Сыеклык 12

Сыеклык 6

<div class = "рәт-сыеклык" > 
  <div class = "span12" > 
    Сыеклык 12
    <div class = "рәт-сыеклык" > 
      <div class = "span6" > 
        Сыеклык 6
        <div class = "рәт-сыеклык" > 
          <div class = "span6" > Сыеклык 6 </div> 
          <div class = "span6" > Сыеклык 6 </div> 
        </div>
      </div>
      <div class = "span6" > Сыеклык 6 </div> 
    </div>
  </div>
</div>

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

Бары тик <div class="container">кирәкле киңлек (һәм өстәмә җаваплы) макет тәкъдим итә.

<body>
  <div class = "контейнер" > 
    ...
  </div>
</body>

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

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

<div class = "контейнер-сыеклык" > 
  <div class = "рәт-сыеклык" > 
    <div class = "span2" > 
      <! - Капка эчтәлеге ->
    </div>
    <div class = "span10" > 
      <! - Тән эчтәлеге ->
    </div>
  </div>
</div>

Responsаваплы үзенчәлекләр булдыру

<head>Документыгыз эчендә тиешле мета-тег һәм өстәмә стиль таблицасын кертеп, сезнең проектта җаваплы CSS-ны кабызыгыз . Әгәр сез Bootstrap-ны Customize битеннән туплаган булсагыз, сезгә мета-тегны гына кертергә кирәк.

<мета исеме = "күренеш" эчтәлеге = "киңлек = җайланма киңлеге, башлангыч масштаб = 1,0" >  
<link href = "активлар / css / bootstrap-responsive.css" rel = "стиль таблицасы" >

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

Bootstrap турында

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

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

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

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

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

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

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

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

Мобиль яктан тизрәк үсеш өчен, бу файдалы классларны җайланма аша күрсәтү һәм яшерү өчен кулланыгыз. Түбәндә булган класслар таблицасы һәм аларның бирелгән медиа соравына тәэсире (җайланма белән билгеләнгән). Аларны табарга мөмкин responsive.less.

Класс	Телефоннар767px һәм аста	Планшетлар979px - 768px	Эш өстәлеКилешү
`.visible-phone`	Күренеп тора	Яшерен	Яшерен
`.visible-tablet`	Яшерен	Күренеп тора	Яшерен
`.visible-desktop`	Яшерен	Яшерен	Күренеп тора
`.hidden-phone`	Яшерен	Күренеп тора	Күренеп тора
`.hidden-tablet`	Күренеп тора	Яшерен	Күренеп тора
`.hidden-desktop`	Күренеп тора	Күренеп тора	Яшерен

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

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

Коммуналь хезмәт сынау

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

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

Яшел билгеләр классның хәзерге күренештә күренүен күрсәтә.

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

Яшерен ...

Монда, яшел билгеләр классның хәзерге күренештә яшерелгәнен күрсәтә.

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

Глобаль көйләүләр