Йөкләү

Bootstrap (хәзерге v3.3.7) тиз башлау өчен берничә җиңел ысул бар, аларның һәрберсе төрле осталык дәрәҗәсенә мөрәҗәгать итә һәм куллану очракларын куллана. Сезнең конкрет ихтыяҗларыгызга туры килүен укыгыз.

Bootstrap CDN

JsDelivr кешеләре Bootstrap CSS һәм JavaScript өчен CDN ярдәме күрсәтәләр. Бу Bootstrap CDN сылтамаларын кулланыгыз.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Бауэр белән урнаштырыгыз

Сез шулай ук ​​Bootstrap's Less, CSS, JavaScript һәм шрифтларны Bower ярдәмендә урнаштыра һәм идарә итә аласыз :

$ bower install bootstrap

Npm белән урнаштырыгыз

Сез шулай ук ​​Bootstrap -ны npm ярдәмендә урнаштыра аласыз :

$ npm install bootstrap@3

require('bootstrap')Bootstrap-ның барлык jQuery плагиннарын jQuery объектына йөкләячәк. bootstrapМодуль үзе бернәрсә дә экспортламый . Сез Bootstrap-ның jQuery плагиннарын кул белән йөкли аласыз /js/*.js, пакетларның иң югары каталог астына файлларны йөкләп.

Bootstrap'та package.jsonтүбәндәге ачкычлар астында өстәмә мета-мәгълүматлар бар:

• less- Bootstrap-ның төп аз чыганак файлына юл
• style- Bootstrap-ның минималь булмаган CSS-ка юл, ул килешенгән көйләүләр ярдәмендә тупланган (көйләү юк)

Композитор белән урнаштырыгыз

Сез шулай ук ​​Bootstrap's Less, CSS, JavaScript һәм шрифтларны Композитор ярдәмендә урнаштыра һәм идарә итә аласыз :

$ composer require twbs/bootstrap

Автопрефиксер аз / Сасс өчен кирәк

Bootstrap CSS сатучы префикслары белән эш итәр өчен Autoprefixer куллана . Әгәр сез Bootstrap-ны аның Less / Sass чыганагыннан туплыйсыз һәм безнең Gruntfile кулланмыйсыз икән, сезгә Autoprefixer-ны төзү процессына кертергә кирәк. Әгәр дә сез алдан эшләнгән Bootstrap кулланасыз яки безнең Gruntfile кулланасыз икән, моның турында борчыласы юк, чөнки Autoprefixer безнең Gruntfile белән интеграцияләнгән.

Нәрсә кертелгән

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

Алдан әзерләнгән Bootstrap

Йөкләнгәннән соң, (тупланган) Bootstrap структурасын карау өчен кысылган папканы чишегез. Мондый әйберне күрерсез:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Бу Bootstrap-ның иң төп формасы: теләсә нинди веб-проектта тиз куллану өчен тупланган файллар. Без тупланган CSS һәм JS ( bootstrap.*), шулай ук ​​CSS һәм JS ( bootstrap.min.*) тупланган һәм минимальләштерелгән тәэмин итәбез. CSS чыганак карталары ( bootstrap.*.map) кайбер браузерларның эшкәртү кораллары белән куллану өчен бар. Глификон шрифтлары өстәмә Bootstrap темасы кебек кертелгән.

Ботстрап чыганагы

Bootstrap чыганак коды йөкләү CSS, JavaScript һәм шрифт активларын, аз чыганак, JavaScript һәм документлар белән бергә кертә. Төгәлрәк әйткәндә, ул түбәндәгеләрне үз эченә ала:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

, Һәм безнең CSS, JS, икон шрифтлары өчен чыганак коды (тиешенчә) less/. Папка өстә йөкләү бүлегендә күрсәтелгән бар нәрсәне дә үз эченә ала . Папкага безнең документлар һәм Bootstrap куллану чыганак коды керә . Моннан тыш, бүтән кертелгән файл пакетларга, лицензия мәгълүматларына, үсешкә ярдәм күрсәтә.js/fonts/dist/docs/examples/

CSS һәм JavaScript туплау

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

Грунт урнаштыру

Grunt урнаштыру өчен, башта node.js-ны йөкләргә һәм урнаштырырга кирәк (ул npmны үз эченә ала). npm төен пакетланган модульләрне аңлата һәм node.js аша үсеш бәйләнешләрен идарә итү ысулы.

1. grunt-cliГлобаль рәвештә урнаштырыгыз npm install -g grunt-cli.
2. Тамыр /bootstrap/каталогына күчегез, аннары эшләгез npm install. npm файлны караячак package.jsonһәм анда күрсәтелгән кирәкле җирле бәйләнешләрне автоматик рәвештә урнаштырачак.

Тәмамлангач, сез командалар сызыгыннан бирелгән төрле Grunt командаларын эшли алырсыз.

Мөмкин булган Grunt командалары

grunt dist(CSS һәм JavaScript туплагыз)

Каталогны /dist/тупланган һәм минималь CSS һәм JavaScript файллары белән яңарта. Bootstrap кулланучысы буларак, бу гадәттә сез теләгән боерык.

grunt watch(Кара)

Кечкенә чыганак файлларын карый һәм үзгәртүне саклаган вакытта аларны автоматик рәвештә CSS белән компиляцияли.

grunt test(Тестларны эшләгез)

JSHint эшли һәм PhantomJS'да QUnit сынауларын башсыз эшли .

grunt docs(Документларның активларын төзү һәм сынау)

Документацияне җирле вакытта эшләгәндә кулланыла торган CSS, JavaScript һәм бүтән активларны төзи һәм сынап карый bundle exec jekyll serve.

grunt(Барысын да төзегез һәм тестлар эшләгез)

CSS һәм JavaScript туплый һәм минимальләштерә, документлар вебсайтын төзи, HTML5 валидаторын документларга каршы эшли, Customizer активларын яңарта һәм башкалар. Джекил кирәк . Гадәттә, Bootstrap-ның үзенә хакер булсагыз гына кирәк.

Төзексезлекләрне Эзләү

Әгәр дә сез бәйләнешләр урнаштыру яки Grunt командаларын эшләтү белән проблемалар белән очрашсагыз, башта /node_modules/npm белән ясалган каталогны бетерегез. Аннары, яңадан эшләгез npm install.

Төп шаблон

Бу төп HTML шаблоныннан башлап, яки бу мисалларны үзгәртегез . Сез безнең шаблоннарны һәм мисалларны көйләячәксез, аларны сезнең ихтыяҗларыгызга яраклаштырырсыз дип ышанабыз.

Минималь Bootstrap документы белән эшли башлау өчен түбәндәге HTML-ны күчерегез.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Мисаллар

Bootstrap-ның күп компонентлары белән өстә төп шаблонга корыгыз. Без сезне Bootstrap-ны шәхси проект ихтыяҗларына яраклаштырырга һәм җайлаштырырга өндәп торабыз.

Bootstrap складын йөкләп, түбәндәге һәр мисал өчен чыганак кодын алыгыз . Мисалларны docs/examples/каталогта табарга мөмкин.

Кадрны куллану

Стартер шаблоны

Нигездән башка бернәрсә дә юк: контейнер белән бергә CSS һәм JavaScript тупланган.

Ботстрап темасы

Визуаль көчәйтелгән тәҗрибә өчен өстәмә Bootstrap темасын йөкләгез.

Челтәрләр

Дүрт яруслы, оя кору һәм башкалар белән челтәр макетларының берничә мисалы.

Джамботрон

Джамботрон тирәсендә диңгез тактасы һәм төп челтәр баганалары белән төзегез.

Тар джумботрон

Килешенгән контейнерны һәм джумботронны кыскартып, үзенчәлекле бит төзегез.

Хәрби диңгез

Навбар

Супер төп шаблон, өстәмә эчтәлек белән бергә.

Статик өске диңгез

Супер төп шаблон, өстәмә эчтәлек белән бергә.

Тикшерелгән диңгез тактасы

Супер төп шаблон, өстәмә эчтәлек белән бергә.

Махсус компонентлар

Капка

Гади һәм матур өй битләрен төзү өчен бер битле шаблон.

Карусель

Диңгез тактасын һәм карусельне көйләгез, аннары яңа компонентлар өстәгез.

Блог

Гадәттәге навигация, баш һәм тип белән гади ике баганалы блог макеты.

Такталар

Административ такта өчен төп структура.

Керү бите

Формадагы гади билге өчен махсус форма макеты һәм дизайны.

Акланган диңгез

Акланган сылтамалар белән махсус диңгез тактасы ясагыз. Идарә итә! Сафари белән дус түгел.

Ябыштыргыч

Эчтәлек аннан кыска булганда, аскы өлешне аскы өлешкә бәйләгез.

Диңгез тактасы белән ябыштыргыч

Viewгарыда тотрыклы диңгез тактасы белән күренешнең аскы өлешенә бәйләгез.

Тикшеренүләр

Ботстрап

Безнең документлар өчен Bootstrap-ның җаваплылыгын җиңел сүндерегез .

Картина

Bootstrap белән куллану өчен күчерелә торган навигация менюсын төзегез.

Кораллар

Ботлинт

Bootlint - рәсми Bootstrap HTML линтер коралы. Бу Bootstrap-ны гади "ваниль" кулланган веб-битләрдәге берничә HTML хатасын автоматик рәвештә тикшерә. Vanilla Bootstrap компонентлары / виджетлары DOM өлешләрен билгеле структураларга туры китерүне таләп итә. Bootlint Bootstrap компонентларының HTML-ның дөрес структуралы булуын тикшерә. Bootstrap веб-үсеш кораллар челтәренә Bootlint өстәргә уйлагыз, гомуми хаталарның берсе дә сезнең проект үсешен акрынайтмасын.

Communityәмгыять

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

• Рәсми Bootstrap блогын укыгыз һәм язылыгыз .
• irc.freenode.netСерверда, ## bootstrap каналында IRC кулланып, Bootstrappers белән аралашу .
• Bootstrap куллану өчен, теге ярдәмендә StackOverflow'танtwitter-bootstrap-3 сорагыз .
• Эшләүчеләр пакетларда ачкыч сүз кулланырга тиеш, алар npmbootstrap аша таратканда яки максималь ачылу өчен охшаш тапшыру механизмнары аша Bootstrap функциясен үзгәртә яки өсти.
• Bootstrap күргәзмәсендә Bootstrap белән төзелгән кешеләрнең илһамлы мисалларын табыгыз .

Соңгы гайбәтләр һәм искиткеч музыкаль видеолар өчен сез шулай ук ​​Твиттерда @getbootstrap артыннан бара аласыз.

Responsаваплылыкны сүндерү

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

Битнең җаваплылыгын сүндерү өчен адымнар

1. CSS документларында<meta> күрсәтелгән күренешне калдырыгыз
2. Gridәр челтәр дәрәҗәсе өчен widthбер .containerкиңлектә өстәмә языгыз, мәсәлән width: 970px !important;, бу Bootstrap CSS килешүеннән соң килеп чыкканына инаныгыз. Сез !importantмедиа соравы яки кайбер селектор-фу белән факультатив рәвештә кача аласыз.
3. Әгәр диңгез такталарын куллансагыз, барлык диңгез такталарының җимерелүен һәм тәртибен киңәйтүне бетерегез.
4. Челтәр макетлары өчен .col-xs-*, урта / зур классларга өстәп, яисә урынына класслар кулланыгыз. Борчылмагыз, кечкенә резолюция өчен кечкенә җайланма челтәре таразасы.

Сезгә IE8 өчен Respond.js кирәк булачак (чөнки безнең медиа сораулары әле дә бар һәм эшкәртелергә тиеш). Бу Bootstrapның "мобиль сайты" аспектларын сүндерә.

Ботстрап шаблоны җаваплылыгы чикләнгән

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

Responsавапсыз мисалны карау

Браузер һәм җайланма ярдәме

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

Ярдәмче браузерлар

Аерым алганда, без түбәндәге браузерларның һәм платформаларның соңгы версияләрен хуплыйбыз.

WebKit, Blink, яки Gecko'ның соңгы версиясен кулланган альтернатив браузерлар, турыдан-туры яки платформаның веб-күренеше API аша, ачыктан-ачык хупланмыйлар. Ләкин, Bootstrap (күпчелек очракта) бу браузерларда дөрес күрсәтергә һәм эшләргә тиеш. Төгәлрәк ярдәм турында мәгълүмат түбәндә китерелгән.

Кәрәзле җайланмалар

Гомумән алганда, Bootstrap һәр төп платформаның демократик браузерларының соңгы версияләрен хуплый. Игътибар итегез, прокси браузерлары (мәсәлән, Opera Mini, Opera Mobile'ның Turbo режимы, UC браузеры мини, Amazon Silk) ярдәм итми.

Эш өстәле браузерлары

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

Windows'та без Internet Explorer 8-11 ярдәм итәбез .

Firefox өчен, соңгы гадәти тотрыклы чыгарылышка өстәп, без Firefox'ның соңгы киңәйтелгән ярдәм релизы (ESR) версиясен дә хуплыйбыз.

Рәсми булмаган рәвештә, Bootstrap Linux өчен Chromium һәм Chrome, Linux өчен Firefox, һәм Internet Explorer 7, шулай ук ​​Microsoft Edge кебек яхшы булырга тиеш, алар рәсми ярдәм итмәсәләр дә.

Bootstrap белән көрәшергә туры килгән кайбер браузер хаталары исемлеге өчен безнең браузер хаталары стенасын карагыз .

Internet Explorer 8 һәм 9

Internet Explorer 8 һәм 9 шулай ук ​​ярдәм итә, ләкин шуны онытмагыз: кайбер CSS3 характеристикалары һәм HTML5 элементлары бу браузерлар белән тулысынча хупланмый. Моннан тыш, Internet Explorer 8 медиа соравына ярдәм күрсәтү өчен Respond.js куллануны таләп итә .

Мин керә аламмы ... CSS3 һәм HTML5 функцияләренең браузер ярдәме турында тулырак мәгълүмат.

Internet Explorer 8 һәм Respond.js

Internet Explorer 8 өчен үсеш һәм җитештерү мохитендә Respond.js кулланганда түбәндәге саклыклардан сакланыгыз.

Respond.js һәм CSS домены

Башка (суб) доменда урнаштырылган CSS белән Respond.js куллану (мәсәлән, CDN) өстәмә көйләү таләп итә. Детальләр өчен Respond.js документларын карагыз .

Respond.js һәмfile://

Браузерның куркынычсызлык кагыйдәләре аркасында, Respond.js протокол аша каралган битләр белән эшләми file://(җирле HTML файлын ачкан кебек). IE8-дә җаваплы функцияләрне сынап карау өчен, битләрегезне HTTP (S) аша карагыз. Детальләр өчен Respond.js документларын карагыз .

Respond.js һәм@import

Respond.js CSS белән эшләми @import. Аерым алганда, кайбер Drupal конфигурацияләре кулланыла @import. Детальләр өчен Respond.js документларын карагыз .

Internet Explorer 8 һәм бокс-размер

IE8 ,, яки белән box-sizing: border-box;кушылганда тулысынча ярдәм итми . Шул сәбәпле, v3.0.1 булганга , без инде s кулланмыйбыз.min-widthmax-widthmin-heightmax-heightmax-width.container

Internet Explorer 8 һәм @ font-face

@font-faceIE8 белән кушылганда кайбер проблемалар бар :before. Bootstrap бу комбинацияне үзенең Глификоннары белән куллана. Әгәр дә бит кэшланган булса, һәм тәрәзә өстендә тычкансыз йөкләнсә (яңарту төймәсенә басыгыз яки ифрамга нәрсәдер йөкләгез), шрифт йөкләнгәнче бит күрсәтелә. Бит (тән) өстендә йөрү кайбер иконаларны күрсәтәчәк, калган иконалар өстендә йөрү дә аларны күрсәтәчәк. Детальләр өчен 13 13863 чыгарылышын карагыз .

IE туры килү режимнары

Bootstrap иске Internet Explorer яраклашу режимында булышмый. IE өчен соңгы күрсәтү режимын куллануыгызга ышану өчен, <meta>битләрегезгә тиешле тег кертүне карагыз:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Документ режимын төзәтү коралларын ачып раслагыз: F12"Документация режимын" басыгыз һәм тикшерегез.

Бу тэг Bootstrap'ның барлык документларына һәм Internet Explorer'ның һәр ярдәм ителгән версиясендә иң яхшы күрсәтүне тәэмин итү өчен мисалларга кертелгән.

Күбрәк мәгълүмат алу өчен бу StackOverflow соравын карагыз .

Windows Explorer 10 һәм Windows Phone 8

Internet Explorer 10 җайланма киңлеген күренеш киңлегеннән аермый , һәм шулай итеп Bootstrap CSS'ында медиа соравын дөрес кулланмый. Гадәттә сез моны төзәтер өчен CSS-ның тиз фрагментын өстәр идегез:

@-ms-viewport       { width: device-width; }

Ләкин, бу Windows Phone 8 версиясен яңарту җайланмаларыннан эшләми (GDR3 ака) , чөнки ул мондый җайланмалар тар "телефон" күренеше урынына эш өстәлен күрсәтә. Бу проблеманы чишү өчен, сезгә түбәндәге CSS һәм JavaScript кертергә кирәк .

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

Күбрәк мәгълүмат һәм куллану күрсәтмәләре өчен Windows Phone 8 һәм Device-Width укыгыз .

Баш буларак, без моны Bootstrap-ның барлык документларына һәм демонстрациягә кертәбез.

Сафари процент әйләнеше

OS X өчен v7.1 алдыннан Safari һәм iOS v8.0 өчен Safari версияләрен күрсәтүче двигатель безнең .col-*-1челтәр классларында кулланылган унлыклы урыннар саны белән бераз кыенлыклар тудырды. Димәк, сезнең 12 аерым челтәр баганасы булса, аларның башка баганалар белән чагыштырганда кыска килеп чыкканын күрерсез. Safari / iOS-ны яңартудан тыш, сезнең эш вариантлары бар:

• .pull-rightКаты уң тигезләнү өчен соңгы челтәр баганасына өстәгез
• Сафари өчен иң яхшы әйләнеш алу өчен процентларыгызны кул белән сөртегез (беренче вариантка караганда авыррак)

Модальләр, диңгез такталары, виртуаль клавиатура

Ташу һәм әйләндерү

Элементка ярдәм iOS overflow: hiddenһәм <body>Androidда бик чикле. Моның өчен, ул җайланмаларның браузерларының берсендә модальнең өске яисә аскы өлешен узгач, <body>эчтәлек әйләнә башлый. Chrome хата # 175502 ( Chrome v40 белән көйләнгән) һәм WebKit хата # 153852 карагыз .

iOS текст кырлары һәм әйләндерү

<input>IOS 9.3 мәгълүматларына караганда, модаль ачык булганда, әйләндерү ишарәсенең беренче кагылышы текст яки а чикләрендә булса <textarea>, <body>модаль астындагы эчтәлек модальнең урынына әйләнәчәк. WebKit хата # 153856 карагыз .

Виртуаль клавиатура

Шулай ук, шуны истә тотыгыз: әгәр сез тотрыклы диңгез тактасын кулланасыз яки модаль эчендә керемнәр кулланасыз икән, iOS виртуаль клавиатура эшләгәндә төп элементларның торышын яңартмый торган рендеринг хата бар. Моның өчен берничә эш үз элементларыгызны үзгәртү position: absoluteяки позицияне кул белән төзәтергә тырышу өчен таймерга мөрәҗәгать итү. Бу Bootstrap белән эшләнми, шуңа күрә сезнең заявка өчен иң яхшы карарны үзегез хәл итәсез.

Навбар тамчылары

.dropdown-backdropZ-индексациянең катлаулылыгы аркасында элемент iOS диңгезендә кулланылмый . Шулай итеп, диңгез такталарындагы тамчыларны ябу өчен, сез турыдан-туры тамчы элементына басыгыз (яки iOS'да чиртү вакыйгасын кабызачак бүтән элемент ).

Браузерны зурайту

Битне зурайту котылгысыз рәвештә кайбер компонентларда, Bootstrapта да, вебның калган өлешендә дә күрсәтелә. Проблемага карап, без аны төзәтә алабыз (башта эзләгез, кирәк булса проблеманы ачыгыз). Ләкин, без боларны санга сукмыйбыз, чөнки аларның еш кына турыдан-туры чишелеше юк.

Мобильдә ябыштырылган :hover_:focus

Күпчелек сенсорлы экраннарда реаль йөрү мөмкин булмаса да, күпчелек мобиль браузерлар ярдәмне охшаталар һәм :hover"ябышып" ясыйлар. Башка сүзләр белән әйткәндә, :hoverстильләр элементны таптаганнан соң кулланыла башлый һәм кулланучы башка элементны таптаганнан соң гына куллануны туктата. Бу Bootstrap :hoverштатларының мондый браузерларда теләмәгән "тыгылып" китүенә китерергә мөмкин. Кайбер мобиль браузерлар да шундый :focusук ябыштыралар. Хәзерге вакытта мондый стильләрне бөтенләй бетерүдән башка гади эш юк.

Басма

Кайбер заманча браузерларда да бастыру кызык булырга мөмкин.

Аерым алганда, Chrome v32 булганга һәм марж көйләнмәләренә карамастан, Chrome веб-битне бастырганда медиа сорауларын чишкәндә физик кәгазь зурлыгына караганда таррак кулланыла. Бу Bootstrap-ның кечкенә кечкенә челтәрен бастырганда көтмәгәндә активлашырга мөмкин. Кайбер детальләр өчен 120 12078 һәм Chrome хата # 273306 карагыз . Тәкъдим ителгән эш юллары:

• Кечкенә челтәрне кочаклагыз һәм битегез аның астында яраклы булып күренсен.
• Кечкенә үзгәрүчәннәрнең кыйммәтләрен көйләгез, @screen-*сезнең принтер кәгазегез кечкенәдән зуррак саналсын.
• Басма медиа өчен челтәрнең зурлык нокталарын үзгәртү өчен махсус медиа сорауларын өстәгез.

Шулай ук, Safari v8.0 буенча, киңлек киңлеге .containers Safari бастырганда гадәти булмаган кечкенә шрифт зурлыгын кулланырга мөмкин. Төгәлрәк мәгълүмат өчен # 14868 һәм WebKit хата # 138192 карагыз . Моның өчен потенциаль эш түбәндәге CSS өстәү:

@media print {
  .container {
    width: auto;
  }
}

Android акция браузеры

Рамкадан тыш, Android 4.1 (һәм хәтта кайбер яңа чыгарылышлар да) браузер кушымтасы белән сайлау веб-браузеры итеп җибәрелә (Chromeдан аермалы буларак). Кызганычка каршы, Браузер кушымтасында бик күп хаталар һәм гомумән CSS белән туры килмәүләр бар.

Менюларны сайлагыз

Элементларда , Android акция браузеры, һәм / яки кулланылган <select>булса, ян контрольне күрсәтмәячәк . ( Детальләр өчен бу StackOverflow соравын карагыз.) Рәнҗетүче CSSны бетерү һәм Android акция браузерында стилизацияләнмәгән элемент итеп күрсәтү өчен түбәндәге кодның фрагментын кулланыгыз . Кулланучының агентын селкетү Chrome, Safari һәм Mozilla браузерларына комачаулый.border-radiusborder<select>

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

Мисал күрәсегез киләме? Бу JS Bin демоны карагыз.

Валидаторлар

Иске һәм бозык браузерларга мөмкин булган иң яхшы тәҗрибәне тәэмин итү өчен, Bootstrap берничә урында CSS браузер хакларын куллана, браузерларның хаталары өстендә эшләү өчен, махсус CSS-ны билгеле браузер версияләренә юнәлтә. Бу хаклар CSS валидаторларының яраксыз дип зарлануларына китерә. Ике урында, без шулай ук ​​тулы стандартлаштырылмаган CSS үзенчәлекләрен кулланабыз, ләкин алар прогрессив көчәйтү өчен генә кулланыла.

Бу тикшерү кисәтүләре практикада мөһим түгел, чөнки безнең CSS-ның хак булмаган өлеше тулысынча расланган һәм хаклы өлешләр хак булмаган өлешнең дөрес эшләвенә комачауламый, шуңа күрә ни өчен без бу кисәтүне белә торып санга сукмыйбыз.

Безнең HTML документларыбыз шулай ук ​​кайбер Firefox хата өчен эш программасын кертү аркасында кайбер вак-төяк һәм әһәмиятсез HTML тикшерү кисәтүләренә ия .

Өченче як ярдәме

Без рәсми рәвештә өченче як плагиннарын яки өстәмәләрне хупламасак та, без сезнең проектларыгызда потенциаль проблемаларны булдырмас өчен файдалы киңәшләр бирәбез.

Бокс-размер

Кайбер өченче як программалары, шул исәптән Google Карталар һәм Google Custom Search Engine, Bootstrap белән конфликт * { box-sizing: border-box; }, бу кагыйдә paddingэлементның соңгы исәпләнгән киңлегенә тәэсир итми. CSS Tricks-та бокс моделе һәм зурлыгы турында күбрәк белү .

Контекстка карап, сез кирәк булганда кире кагарга мөмкин (1-нче вариант) яки бөтен регионнар өчен сандык зурлыгын үзгәртә аласыз (2-нче вариант).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Уңайлык

Bootstrap гомуми веб стандартларга туры килә һәм, минималь өстәмә тырышлык белән, AT кулланучылар өчен мөмкин булган сайтлар булдыру өчен кулланыла ала .

Навигацияне калдыр

Әгәр сезнең навигация бик күп сылтамаларны үз эченә ала һәм DOM-ның төп эчтәлеге Skip to main contentалдында булса, навигациягә кадәр сылтама өстәгез (гади аңлату өчен, бу A11Y Проект мәкаләсен навигация сылтамаларыннан карагыз ). Классны куллану .sr-onlyсикерү сылтамасын визуаль рәвештә яшерәчәк, һәм .sr-only-focusableкласс сылтаманың тупланганнан соң күренүен тәэмин итәчәк (клавиатура кулланучылары өчен).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

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

Ояларны оялаганда ( <h1>- <h6>), сезнең төп документ башы булырга тиеш <h1>. Киләсе рубрикалар логик кулланырга тиеш <h2>- <h6>экран укучылары сезнең битләр өчен эчтәлек таблицасын төзи алалар.

HTML CodeSniffer һәм Penn State's AccessAbility турында күберәк белү .

Төс контрасты

Хәзерге вакытта Bootstrap'та булган кайбер төс комбинацияләре (мәсәлән, төрле стиль төймәләре класслары, төп код блоклары өчен кулланылган төсләрне күрсәтүче кайбер кодлар , .bg-primary контекст фон ярдәмчесе классы, һәм ак фонда кулланылганда сылтама төсе) түбән контраст коэффициенты бар ( тәкъдим ителгән нисбәттән 4,5: 1 ). Бу начар күрүчән яки төсле сукыр кулланучыларга проблемалар китерергә мөмкин. Бу контрастны һәм легитимлыкны арттыру өчен бу килешү төсләрен үзгәртергә кирәк.

Өстәмә ресурслар

• "HTML Codesniffer" кыстыргыч, мөмкинлек проблемаларын ачыклау өчен
• Chrome'ның мөмкинлекләрен уйлап табучы коралларын киңәйтү
• Төс контраст анализаторы
• A11Y проекты
• MDN мөмкинлеге документлары

Лицензия сораулары

Bootstrap MIT лицензиясе нигезендә чыгарыла һәм авторлык хокукы 2016 Twitter. Кечкенә кисәкләргә кайнатылган, аны түбәндәге шартлар белән сурәтләргә мөмкин.

Бу сездән таләп итә:

• Bootstrap'ның CSS һәм JavaScript файлларына кертелгән лицензияне һәм авторлык хокукларын белдерүне саклагыз

Бу сезгә рөхсәт бирә:

• Bootstrap-ны тулысынча йөкләү һәм куллану шәхси яки шәхси, компаниянең эчке яки коммерция максатларында
• Сез ясаган пакетларда яки таратуларда Bootstrap кулланыгыз
• Чыганак кодын үзгәртү
• Bootstrap-ны үзгәртү һәм лицензиягә кермәгән өченче якка тарату өчен субликенс бирегез

Бу сезгә тыя:

• Bootstrap гарантиясез бирелгәнгә, авторлар һәм лицензия хуҗалары зыян өчен җаваплы
• Bootstrap авторларын яки авторлык хокукларын саклаучыларны җаваплылыкка тарт
• Ботстрапның теләсә нинди кисәген тиешле атрибутсыз таратыгыз
• Твиттерныкы булган билгеләрне кулланыгыз, Твиттер сезнең таратуны хуплый яки күрсәтә ала
• Твиттерныкы булган билгеләрне кулланыгыз, бу сезнең Твиттер программасын булдырганыгызны күрсәтә ала

Бу сездән таләп итми:

• Bootstrap чыганагын, яки аңа кертелгән үзгәртүләрне кертегез, сез аны җыя аласыз.
• Bootstrap'ка ясаган үзгәртүләрегезне Bootstrap проектына җибәрегез (гәрчә мондый фикерләр дәртләндерелсә дә)

Bootstrap-ның тулы лицензиясе күбрәк мәгълүмат алу өчен проект складында урнашкан.

Тәрҗемәләр

Иҗтимагый әгъзалар Bootstrap документларын төрле телләргә тәрҗемә иттеләр. Рәсми рәвештә беркем дә хупланмый һәм алар һәрвакыт яңартылмаска мөмкин.

• Ботстрап 中文 Chinese (Кытай)
• Bootstrap 3 中文 Chinese (Кытай (традицион))
• Bootstrap på Dansk (Дания)
• Bootstrap en Français (Француз)
• Bootstrap auf Deutsch (немец)
• Италиядә ботинка (итальян)
• Ботстрап Korean (Корея)
• Bootstrap em Português do Brasil (Бразилия Португалия)
• Ботстрап по-русски (рус)
• Español (Bootstrap en Español)
• Türkçe Bootstrap (төрек)
• Ботстрап українською (украин)
• Bootstrap bằng tiếng Việt (Вьетнам)

Без тәрҗемәләрне оештырырга яки кабул итәргә булышмыйбыз, алар белән бәйләнәбез.

Яңа яки яхшырак тәрҗемә тәмамландыгызмы? Аны безнең исемлеккә өстәр өчен тарту соравын ачыгыз.