Жүктөп алуу

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>

Bower менен орнотуу

Ошондой эле Bower аркылуу Bootstrap'тын Less, CSS, JavaScript жана шрифттерин орнотуп, башкара аласыз :

$ bower install bootstrap

npm менен орнотуу

Ошондой эле npm аркылуу Bootstrap орното аласыз :

$ npm install bootstrap@3

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

Bootstrap package.jsonтөмөнкү баскычтардын астында кээ бир кошумча метадайындарды камтыйт:

• less- Bootstrapтын негизги Less булак файлына жол
• style- демейки жөндөөлөр аркылуу алдын ала компиляцияланган Bootstrap'тын кичирейтилбеген CSS жолу (ыңгайлаштыруу жок)

Композитор менен орнотуу

Ошондой эле Composer аркылуу Bootstrap'тын Less, CSS, JavaScript жана шрифттерин орнотуп, башкара аласыз :

$ composer require twbs/bootstrap

Less/Sass үчүн автопрефиксер талап кылынат

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

Эмне камтылган

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) белгилүү бир браузерлердин иштеп чыгуучу куралдары менен колдонуу үчүн жеткиликтүү. Glyphicons шрифттери, кошумча Bootstrap темасы камтылган.

Bootstrap булак коду

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

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

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

CSS жана JavaScript түзүү

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

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(Күү)

Less булак файлдарын карап, өзгөртүүнү сактаган сайын аларды автоматтык түрдө CSSке кайра компиляциялайт.

grunt test(Тесттерди жүргүзүү)

JSHint иштетет жана QUnit тесттерин PhantomJSде башсыз иштетет .

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 темасы

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

Торлор

Бардык төрт деңгээли бар тор макеттеринин бир нече мисалдары, уя салуу жана башкалар.

Jumbotron

Navbar жана кээ бир негизги тор мамычалары менен жумботрондун айланасын куруңуз.

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

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

Navbars иштеп жатат

Navbar

Кошумча мазмун менен бирге навигация тилкесин камтыган супер негизги шаблон.

Статикалык үстүнкү навигация тилкеси

Кээ бир кошумча мазмуну менен бирге статикалык үстүнкү навигация тилкеси бар супер негизги шаблон.

Туруктуу навигация

Бир нече кошумча мазмуну менен бирге туруктуу үстүнкү навигация тилкеси бар супер негизги шаблон.

Ыңгайлаштырылган компоненттер

Cover

Жөнөкөй жана кооз үй баракчаларын куруу үчүн бир беттик шаблон.

Карусель

Чабыт тилкесин жана карусельди ыңгайлаштырыңыз, андан соң жаңы компоненттерди кошуңуз.

Блог

Ыңгайлаштырылган навигациясы, аталышы жана түрү менен жөнөкөй эки тилкелүү блог макети.

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

Туруктуу каптал тилкеси жана навигация панели бар администратор тактасынын негизги түзүмү.

Кирүү барагы

Ыңгайлаштырылган форманын макети жана формадагы жөнөкөй белги үчүн дизайн.

Негизделген nav

Негизделген шилтемелер менен ыңгайлаштырылган навигация тилкесин түзүңүз. Көңүл бургула! Safari өтө ыңгайлуу эмес.

Жабышкак колонтитул

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

Navbar менен жабышчаак колонтитул

Жогору жагында туруктуу навигация тилкеси менен көрүү терезесинин ылдый жагына колонтитулду тиркиңиз.

Эксперименттер

Жооп бербеген Bootstrap

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

Off-canvas

Bootstrap менен колдонуу үчүн алмаштырыла турган кенептен тышкары навигация менюсун түзүңүз.

Куралдар

Bootlint

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

Коомчулук

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

• Оку жана The Official Bootstrap блогуна жазылыңыз .
• irc.freenode.netСервердеги ##bootstrap каналында IRC аркылуу башка жүктөөчүлөр менен баарлашыңыз .
• Bootstrap аркылуу жардам алуу үчүн, теги менен StackOverflow'танtwitter-bootstrap-3 сураңыз .
• Иштеп чыгуучулар ачкыч сөздү npm же ушуга окшош жеткирүү механизмдери bootstrapаркылуу бөлүштүрүүдө Bootstrap функциясын өзгөрткөн же кошумчалаган пакеттерде колдонушу керек.
• Bootstrap Expo көргөзмөсүндө Bootstrap менен курулган адамдардын шыктандыруучу мисалдарын табыңыз .

Сиз ошондой эле акыркы ушактарды жана укмуштуудай музыкалык видеолорду көрүү үчүн Twitter'де @getbootstrap баракчасына жазылсаңыз болот.

Жооптуулукту өчүрүү

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

Барактын жооп берүү жөндөмдүүлүгүн өчүрүү үчүн кадамдар

1. CSS документтеринде<meta> айтылган көрүнүштү өткөрүп жибериңиз
2. widthБир туурасы менен ар бир тор деңгээли үчүн жокко чыгарыңыз, .containerмисалы width: 970px !important;, бул демейки Bootstrap CSS кийин келерин текшериңиз. Кааласаңыз !important, медиа сурамдарынан же айрым селектор-фудон качсаңыз болот.
3. Эгер навигация тилкелерин колдонсоңуз, бардык чабыттоо тилкелерин жыйноо жана кеңейтүү аракеттерин алып салыңыз.
4. Тор макеттери үчүн .col-xs-*класстарды орто/чоң класстарга кошумча же алардын ордуна колдонуңуз. Кабатыр болбоңуз, түзмөктүн кичинекей торчолору бардык чечимдерге чейин таразаланат.

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

Жооптуулугу өчүрүлгөн жүктөөчү шаблон

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

Жооп бербеген мисалды көрүү

Браузерди жана түзмөктү колдоо

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

Колдоого алынган браузерлер

Тактап айтканда, биз төмөнкү браузерлердин жана платформалардын акыркы версияларын колдойбуз.

Түздөн-түз же платформанын веб көрүү API'си аркылуу болобу, WebKit, Blink же Gecko акыркы версиясын колдонгон альтернативдик браузерлер ачык колдоого алынбайт. Бирок, Bootstrap (көпчүлүк учурларда) бул браузерлерде да туура иштеши керек. Көбүрөөк конкреттүү колдоо маалымат төмөндө келтирилген.

Мобилдик түзмөктөр

Жалпысынан алганда, Bootstrap ар бир негизги платформанын демейки браузерлеринин акыркы версияларын колдойт. Прокси браузерлер (мисалы, Opera Mini, Opera Mobileдын Turbo режими, UC Browser Mini, Amazon Silk) колдоого алынбагандыгын эске алыңыз.

Иш такта браузерлери

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

Windows'до биз Internet Explorer 8-11 колдойбуз .

Firefox үчүн эң акыркы кадимки туруктуу релизден тышкары, Firefoxтун эң акыркы Extended Support Release (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

Respond.js файлын башка (суб) доменде (мисалы, CDNде) жайгаштырылган CSS менен колдонуу кошумча жөндөөлөрдү талап кылат. Чоо-жайын билүү үчүн 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 жана кутучанын өлчөмү

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

Internet Explorer 8 жана @font-face

@font-faceIE8 менен айкалышканда кээ бир көйгөйлөр бар :before. Bootstrap бул комбинацияны Glyphicons менен колдонот. Эгер барак кэштелип, терезенин үстүнө чычкансыз жүктөлсө (б.а. жаңылоо баскычын басыңыз же iframeде бир нерсени жүктөсөңүз), анда барак шрифт жүктөлө электе көрсөтүлөт. Барактын (денесинин) үстүнө ченеп коюу кээ бир иконаларды көрсөтөт, ал эми калган иконкалардын үстүнө баруу аларды да көрсөтөт. Чоо-жайын билүү үчүн №13863 чыгарылышын караңыз.

IE шайкештик режимдери

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

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

Мүчүлүштүктөрдү оңдоо куралдарын ачуу менен документ режимин ырастаңыз: F12басып, "Документ режимин" текшериңиз.

Бул тег Internet Explorerдин ар бир колдоого алынган версиясында мүмкүн болушунча мыкты көрсөтүүнү камсыз кылуу үчүн Bootstrapтын бардык документтеринде жана мисалдарында камтылган.

Көбүрөөк маалымат алуу үчүн бул StackOverflow суроосун караңыз .

Windows 8 жана Windows Phone 8де Internet Explorer 10

Internet Explorer 10 түзмөктүн туурасын көрүү терезесинин кеңинен айырмалай албайт, ошондуктан Bootstrap CSS'индеги медиа сурамдарды туура колдонбойт. Адатта муну оңдоо үчүн CSSтин кыскача үзүндүсүн кошмоксуз:

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

Бирок, бул Жаңыртуу 3 (башкача айтканда GDR3) Windows Phone 8 версияларында иштеген түзмөктөрдө иштебейт , анткени ал мындай түзмөктөрдө тар "телефон" көрүнүшүнүн ордуна негизинен иштакта көрүнүшүн көрсөтөт. Муну чечүү үчүн, катаны чечүү үчүн төмөнкү 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 жана Түзмөктүн туурасы дегенди окуңуз .

Эскерте кетсек, биз муну Bootstrapтын бардык документтерине жана мисалдарына демонстрация катары киргизебиз.

Safari пайыздык тегеректөө

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

• .pull-rightКатуу оңго тегиздөө үчүн акыркы тор тилкеңизге кошуңуз
• Safari үчүн эң сонун тегеректөө үчүн пайыздарыңызды кол менен өзгөртүңүз (биринчи вариантка караганда татаалыраак)

Модалдар, навигация тилкелери жана виртуалдык клавиатуралар

Толуп кетүү жана жылдыруу

Элементти колдоо overflow: hiddeniOS <body>жана Androidде бир топ чектелген. Ушул максатта, сиз ошол түзмөктөрдүн браузерлеринин биринде модалдын өйдө же ылдый жагына өткөндө, <body>мазмун жылдыра баштайт. Chrome мүчүлүштүгү #175502 ( Chrome v40да оңдолгон) жана WebKit катасы #153852 караңыз .

iOS текст талаалары жана сыдыруу

iOS 9.3 версиясында, модаль ачык болуп турганда, сыдырма жаңсоосунун баштапкы тийүү тексттин <input>же а чегинде болсо <textarea>, <body>модалдын астындагы мазмун модалдын ордуна жылдырылат. #153856 WebKit катасын караңыз .

Виртуалдык клавиатуралар

Ошондой эле, эгер сиз туруктуу навигация тилкесин колдонуп жатсаңыз же модалдык киргизүүлөрдү колдонуп жатсаңыз, iOS'тун виртуалдык клавиатура иштетилгенде туруктуу элементтердин абалын жаңыртпаган көрсөтүү мүчүлүштүгү бар экенин эске алыңыз. Бул үчүн бир нече убактылуу чечимдерге элементтериңизди өзгөртүү position: absoluteже позицияны кол менен оңдоого аракет кылуу үчүн фокустагы таймерди чакыруу кирет. Бул Bootstrap тарабынан иштебейт, андыктан колдонмоңуз үчүн кайсы чечим эң ��акшы экенин сиз чечесиз.

Navbar Dropdowns

Элемент z - .dropdown-backdropиндекстөөнүн татаалдыгынан улам iOS'то nav'да колдонулбайт. Ошентип, навигация тилкелериндеги ачылуучу тизмелерди жабуу үчүн, сиз түз ылдый түшүүчү элементти (же iOS'те чыкылдатуу окуясын иштете турган башка элементти ) басышыңыз керек .

Серепчинин масштабы

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

Жабышкак :hover/ :focusмобилдик

Көпчүлүк сенсордук экрандарда чыныгы сүзүү мүмкүн болбосо да, көпчүлүк мобилдик браузерлер илинген колдоону туурап, :hover"жабышчаак" кылат. Башкача айтканда, :hoverстилдер элементти таптагандан кийин колдонула баштайт жана колдонуучу башка элементти таптагандан кийин гана колдонулушун токтотот. Бул Bootstrap :hoverабалынын мындай браузерлерде каалабаган "жабылууга" алып келиши мүмкүн. Кээ бир мобилдик браузерлер да :focusушундай жабышчаак кылат. Учурда мындай стилдерди толугу менен алып салуудан башка бул маселелерди чечүүнүн жөнөкөй жолу жок.

Басып чыгаруу

Кээ бир заманбап браузерлерде да басып чыгаруу кызык болушу мүмкүн.

Атап айтканда, Chrome v32 жана маржа жөндөөлөрүнө карабастан, Chrome веб-баракчасын басып чыгарууда медиа суроо-талаптарын чечүүдө физикалык кагаз өлчөмүнөн кыйла тарыраак көрүү терезесин колдонот. Бул басып чыгарууда Bootstrap'тын өтө кичинекей сеткасынын күтүлбөгөн жерден иштетилишине алып келиши мүмкүн. Кээ бир чоо-жайын көрүү үчүн №12078 чыгарылышты жана Chrome мүчүлүштүгү #273306 караңыз. Сунушталган чечүү жолдору:

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

Ошондой эле, Safari v8.0 версиясы боюнча, белгиленген туурасы .containerSafari басып чыгарууда адаттан тыш кичинекей шрифт өлчөмүн колдонууга алып келиши мүмкүн. Көбүрөөк маалымат үчүн #14868 жана WebKit катасы #138192 караңыз. Бул үчүн мүмкүн болгон бир чечүү жолу төмөнкү CSS кошуу болуп саналат:

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

Android биржа браузери

Кутудан тышкары, Android 4.1 (жана кээ бир жаңы релиздер) Браузер колдонмосу менен демейки веб-браузер катары тандалган (Chrome караганда). Тилекке каршы, Браузер колдонмосунда көп мүчүлүштүктөр жана жалпысынан CSS менен дал келбестиктер бар.

Менюларды тандаңыз

Элементтерде Android <select>биржа серепчиси каптал башкаруу элементтерин көрсөтпөйт border-radiusжана/же borderколдонулса. ( Чоо-жайын билүү үчүн бул StackOverflow суроосун<select> караңыз.) Адепсиз CSSти алып салуу жана Android фондулук браузерде стили жок элемент катары көрсөтүү үчүн төмөндөгү код үзүндүсүн колдонуңуз . Колдонуучу агенттин жыттоосу Chrome, Safari жана Mozilla браузерлерине кийлигишүүдөн сактайт.

<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тин бузулбаган бөлүгү толугу менен текшерилет жана бузук бөлүктөрү бузук эмес бөлүктүн туура иштешине тоскоол болбойт, ошондуктан биз бул өзгөчө эскертүүлөрдү атайылап этибарга албайбыз.

Белгилүү бир Firefox мүчүлүштүктөрүн чечүү жолдорун камтыгандыктан, биздин HTML документтерибизде анча-мынча маанисиз жана маанисиз 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тин каалаган бөлүгүн тийиштүү атрибуциясыз кайра бөлүштүрүңүз
• Твиттерге таандык болгон белгилерди Твиттер бөлүштүрүүңүздү колдойт деп билдире турган же билдире турган түрдө колдонуңуз
• Твиттерге таандык болгон белгилерди сиз Twitter программасын сиз жаратканыңызды билдире турган же билдире турган ар кандай түрдө колдонуңуз

Бул сизден талап кылбайт:

• Bootstrap булагын же ага жасаган өзгөртүүлөрүңүздү камтыган кайра бөлүштүрүүгө кошуңуз
• Bootstrap'ке киргизген өзгөртүүлөрдү кайра Bootstrap долбооруна тапшырыңыз (бирок мындай пикир кубатталган)

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

Translations

Коомчулуктун мүчөлөрү Bootstrap документтерин ар кандай тилдерге которгон. Эч кимиси расмий түрдө колдоого алынбайт жана алар ар дайым актуалдуу боло бербейт.

• Bootstrap 中文文档 (кытайча)
• Bootstrap 3 中文手冊 (Кытайча (Салттуу))
• Bootstrap på Dansk (Дания)
• Bootstrap en Français (французча)
• Bootstrap auf Deutsch (Германча)
• Bootstrap in Italiano (Италия)
• Bootstrap (корейче)
• Bootstrap em Português do Brasil (Бразилиялык португалча)
• Bootstrap по-русски (орусча)
• Bootstrap en Español (испанча)
• Türkçe Bootstrap (түркчө)
• Bootstrap українською (Украинча)
• Bootstrap bằng tiếng Việt (вьетнамча)

Биз котормолорду уюштурууга же уюштурууга жардам бербейбиз, жөн гана аларга шилтеме кылабыз.

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