Жүктеп алу

Bootstrap (қазір v3.3.7) жылдам бастаудың бірнеше оңай жолы бар, олардың әрқайсысы әртүрлі дағдылар деңгейіне және пайдалану жағдайына сай келеді. Нақты қажеттіліктеріңізге сәйкес келетінін көру үшін оқып шығыңыз.

Жүктеу 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 көмегімен орнату

Сондай-ақ 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 құрылымын көру үшін қысылған қалтаны ашыңыз. Сіз келесідей нәрсені көресіз:

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 тақырыбы сияқты Glyphicons қаріптері қамтылған.

Bootstrap бастапқы коды

Bootstrap бастапқы кодын жүктеп алуға алдын ала құрастырылған CSS, JavaScript және қаріп активтері, сонымен қатар Less көзі, JavaScript және құжаттама кіреді. Нақтырақ айтқанда, ол мыналарды және т.б. қамтиды:

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

, less/, js/және fonts/біздің CSS, JS және белгіше қаріптерінің (тиісінше) бастапқы коды болып табылады. dist/Қалта жоғарыда алдын ала құрастырылған жүктеп алу бөлімінде тізімделгеннің барлығын қамтиды . Қалта біздің құжаттаманың және Bootstrap қолдануының docs/бастапқы кодын қамтиды . examples/Бұдан басқа, кез келген басқа қосылған файл пакеттерге, лицензия ақпаратына және әзірлеуге қолдау көрсетеді.

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(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 тақырыбын жүктеңіз.

Торлар

Барлық төрт деңгейлері, ұя салуы және т.б. бар тор орналасуларының бірнеше мысалдары.

Джумботрон

Шарлау тақтасы және кейбір негізгі тор бағандары бар жұмботронды айналдырыңыз.

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

Әдепкі контейнер мен жұмботронды тарылту арқылы көбірек реттелетін бетті жасаңыз.

Navbars жұмыс істейді

Navbar

Кейбір қосымша мазмұнмен бірге шарлау тақтасын қамтитын супер негізгі үлгі.

Статикалық жоғарғы шарлау тақтасы

Кейбір қосымша мазмұнмен бірге статикалық жоғарғы шарлау тақтасы бар супер негізгі үлгі.

Бекітілген шарлау тақтасы

Кейбір қосымша мазмұнмен бірге бекітілген жоғарғы шарлау тақтасы бар супер негізгі үлгі.

Жеке құрамдас бөліктер

Қақпақ

Қарапайым және әдемі басты беттерді құруға арналған бір беттік үлгі.

Карусель

Шарлау тақтасы мен карусельді теңшеңіз, содан кейін бірнеше жаңа құрамдастарды қосыңыз.

Блог

Пайдаланушы шарлауы, тақырыбы және түрі бар қарапайым екі бағанды ​​блог орналасуы.

Бақылау тақтасы

Бекітілген бүйірлік тақтасы мен шарлау тақтасы бар әкімші бақылау тақтасының негізгі құрылымы.

Жүйеге кіру беті

Пішінге қарапайым кіру үшін теңшелетін пішін орналасуы және дизайны.

Негізделген навигация

Негізделген сілтемелері бар теңшелетін шарлау тақтасын жасаңыз. Ескерту! Сафариге өте ыңғайлы емес.

Жабысқақ төменгі деректеме

Мазмұн одан қысқа болғанда, төменгі деректемені қарау терезесінің төменгі жағына тіркеңіз.

Шарлау тақтасы бар жабысқақ төменгі деректеме

Үстіңгі жағында бекітілген шарлау тақтасы бар төменгі деректемені көру терезесінің төменгі жағына бекітіңіз.

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

Жауап бермейтін Bootstrap

Біздің құжаттарға сәйкес Bootstrap жауап беру қабілетін оңай өшіріңіз .

Кенептен тыс

Bootstrap көмегімен пайдалану үшін ауыстырылатын кенептен тыс шарлау мәзірін жасаңыз.

Құралдар

Bootlint

Bootlint - ресми Bootstrap HTML линтер құралы. Ол Bootstrap-ті «ванильді» түрде қолданатын веб-беттердегі бірнеше жалпы HTML қателерін автоматты түрде тексереді. Vanilla Bootstrap құрамдастары/виджеттері олардың DOM бөліктерінің белгілі бір құрылымдарға сәйкес келуін талап етеді. Bootlint Bootstrap компоненттерінің даналары дұрыс құрылымдалған HTML бар-жоғын тексереді. Жалпы қателердің ешқайсысы жобаңыздың дамуын бәсеңдетпеуі үшін Bootstrap веб-әзірлеу құралдары тізбегіне Bootlint қосуды қарастырыңыз.

Қауымдастық

Bootstrap әзірлемелерін жаңартып отырыңыз және осы пайдалы ресурстармен қауымдастыққа хабарласыңыз.

• The Official Bootstrap блогын оқыңыз және жазылыңыз .
• irc.freenode.netСерверде, ##bootstrap арнасында IRC арқылы басқа жүктеушілермен сөйлесіңіз .
• Bootstrap көмегімен анықтама алу үшін , тегін пайдаланып StackOverflowtwitter-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 ең соңғы жұмыс үстелі және мобильді браузерлерде жақсы жұмыс істеу үшін жасалған, яғни ескі браузерлер белгілі бір құрамдас бөліктердің толық жұмыс істейтін болса да, әр түрлі стильде көрсетілгенін көрсетуі мүмкін.

Қолдау көрсетілетін браузерлер

Атап айтқанда, біз келесі браузерлер мен платформалардың соңғы нұсқаларын қолдаймыз.

WebKit, Blink немесе Gecko бағдарламаларының соңғы нұсқасын пайдаланатын балама браузерлерге тікелей немесе платформаның веб-көрініс API интерфейсі арқылы нақты қолдау көрсетілмейді. Дегенмен, Bootstrap (көп жағдайда) осы браузерлерде де дұрыс көрсетуі және жұмыс істеуі керек. Нақтырақ қолдау ақпараты төменде берілген.

Мобильді құрылғылар

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

Жұмыс үстелі браузерлері

Сол сияқты, көптеген жұмыс үстелі браузерлерінің соңғы нұсқаларына қолдау көрсетіледі.

Windows жүйесінде біз Internet Explorer 8-11 нұсқасын қолдаймыз .

Firefox үшін ең соңғы қалыпты тұрақты шығарылымға қоса, біз Firefox-тың соңғы кеңейтілген қолдау релизі (ESR) нұсқасын да қолдаймыз.

Бейресми түрде Bootstrap Chromium және Chrome for Linux, Firefox for Linux және 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 бұл комбинацияны өзінің глифондарымен пайдаланады. Егер бет кэштелген болса және тінтуірді терезенің үстінен жүктесе (яғни, жаңарту түймесін басыңыз немесе 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 нұсқасынан (aka 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 пайызын дөңгелектеу

.col-*-1OS X жүйесіне арналған v7.1 нұсқасына дейінгі Safari және iOS v8.0 нұсқасына арналған Safari нұсқаларының рендеринг механизмінде біздің тор сыныптарымызда пайдаланылған ондық таңбалар санына қатысты қиындықтар болды . Сонымен, сізде 12 жеке тор бағандары болса, олардың басқа баған жолдарымен салыстырғанда қысқа болғанын байқайсыз. Safari/iOS жүйесін жаңартудан басқа, сізде уақытша шешімдер үшін кейбір опциялар бар:

• .pull-rightҚатты оңға туралауды алу үшін соңғы тор бағаныңызға қосыңыз
• Safari үшін тамаша дөңгелектеуді алу үшін пайыздарды қолмен өзгертіңіз (бірінші нұсқаға қарағанда қиынырақ)

Модальдер, шарлау жолақтары және виртуалды пернетақталар

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

Элементке қолдау overflow: hiddeniOS <body>және Android жүйелерінде өте шектеулі. Осы мақсатта, сол құрылғылардың браузерлерінің кез келгенінде модальдың жоғарғы немесе төменгі жағын жылжытқанда, <body>мазмұн айналдыра бастайды. Chrome қатесі №175502 ( Chrome v40 нұсқасында түзетілген) және WebKit қатесі #153852 қараңыз .

iOS мәтін өрістері және айналдыру

<input>iOS 9.3 нұсқасы бойынша, модаль ашық болған кезде, айналдыру қимылының бастапқы түртуі мәтіндік немесе a шекарасында болса <textarea>, <body>модальдың астындағы мазмұн модальдың орнына айналдырылады. №153856 WebKit қатесін қараңыз .

Виртуалды пернетақталар

Сондай-ақ, егер сіз бекітілген шарлау тақтасын пайдалансаңыз немесе модаль ішінде кірістерді пайдалансаңыз, iOS жүйесінде виртуалды пернетақта іске қосылған кезде тіркелген элементтердің орнын жаңартпайтын көрсету қатесі бар екенін ескеріңіз. Бұл үшін бірнеше уақытша шешімдер элементтерді түрлендіруді position: absoluteнемесе орналастыруды қолмен түзетуге тырысу үшін фокустағы таймерді шақыруды қамтиды. Бұл Bootstrap арқылы өңделмейді, сондықтан қолданбаңыз үшін қай шешім ең жақсы екенін өзіңіз шешесіз.

Шарлау тақтасының ашылмалы тізімдері

Элемент .dropdown-backdropz-индексациясының күрделілігіне байланысты navда iOS жүйесінде пайдаланылмайды. Осылайша, шарлау жолақтарындағы ашылмалы тізімдерді жабу үшін ашылмалы элементті (немесе iOS жүйесінде басу оқиғасын іске қосатын кез келген басқа элементті ) тікелей басу керек .

Браузерді масштабтау

Бетті үлкейту Bootstrap бағдарламасында да, интернеттің қалған бөлігінде де кейбір құрамдас бөліктерде рендеринг артефактілерін сөзсіз ұсынады. Мәселеге байланысты біз оны түзете аламыз (қажет болса алдымен іздеп, содан кейін мәселені ашыңыз). Дегенмен, біз бұларды елемейміз, өйткені оларда қате шешімдерден басқа тікелей шешім жоқ.

Жабысқақ :hover/ :focusұялы телефонда

Көптеген сенсорлық экрандарда нақты меңзерді жылжыту мүмкін болмаса да, көптеген мобильді браузерлер жылжыту қолдауына еліктейді және :hover«жабысқақ» етеді. Басқаша айтқанда, :hoverстильдер элементті түрткеннен кейін қолданыла бастайды және пайдаланушы басқа элементті түрткеннен кейін ғана қолдануды тоқтатады. :hoverБұл Bootstrap күйлерінің мұндай браузерлерде қалаусыз «жабысып қалуына» әкелуі мүмкін . Кейбір мобильді браузерлер де :focusосындай жабысқақ етеді. Қазіргі уақытта мұндай мәнерлерді толығымен жоюдан басқа бұл мәселелердің қарапайым шешімі жоқ.

Басып шығару

Тіпті кейбір заманауи браузерлерде басып шығару қызық болуы мүмкін.

Атап айтқанда, Chrome v32 нұсқасы бойынша және шет параметрлеріне қарамастан, Chrome веб-бетті басып шығару кезінде мультимедиа сұрауларын шешу кезінде физикалық қағаз өлшемінен айтарлықтай тар көру терезесінің енін пайдаланады. Бұл басып шығару кезінде Bootstrap бағдарламасының өте кішкентай торының күтпеген жерден іске қосылуына әкелуі мүмкін. Кейбір мәліметтерді №12078 шығарылымды және №273306 Chrome қатесін қараңыз. Ұсынылатын шешімдер:

• Өте кішкентай торды қабылдаңыз және оның астында бетіңіз қолайлы болып көрінетініне көз жеткізіңіз.
• @screen-*Принтер қағазы өте кішкентайдан үлкенірек болып саналуы үшін Less айнымалыларының мәндерін теңшеңіз .
• Тек баспа құралдары үшін тор өлшемінің тоқтау нүктелерін өзгерту үшін теңшелетін медиа сұрауларын қосыңыз.

Сондай-ақ, Safari v8.0 нұсқасы бойынша бекітілген ені .containerSafari басып шығару кезінде әдеттен тыс шағын қаріп өлшемін пайдалануға әкелуі мүмкін. Қосымша мәліметтер алу үшін # 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 Maps және 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 және Пенн Стейттің 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-ге тиесілі кез келген белгілерді Twitter таратуды мақұлдайтынын білдіретін немесе білдіретін кез келген жолмен пайдаланыңыз
• Twitter-ге тиесілі кез келген белгілерді сіз Twitter бағдарламалық құралын жасағаныңызды білдіретін немесе білдіретін кез келген жолмен пайдаланыңыз

Ол сізге мыналарды талап етпейді:

• Bootstrap көзін немесе оған жасалған кез келген өзгертулерді оны қамтитын кез келген қайта бөлуге қосыңыз.
• Bootstrap жүйесіне енгізген өзгерістерді Bootstrap жобасына қайта жіберіңіз (бірақ мұндай кері байланыс құпталады)

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

Аудармалар

Қауымдастық мүшелері Bootstrap құжаттамасын әртүрлі тілдерге аударды. Ешқайсысы ресми түрде қолдау көрсетпейді және олар әрдайым жаңартылмауы мүмкін.

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

Біз аудармаларды ұйымдастыруға немесе орналастыруға көмектеспейміз, біз оларға сілтеме жасаймыз.

Жаңа немесе жақсырақ аударманы аяқтадыңыз ба? Оны біздің тізімге қосу үшін тарту сұрауын ашыңыз.