Yuklab olish

Bootstrap (hozirda v3.4.1) tezda ishga tushirishning bir necha oson usullariga ega, ularning har biri boshqa mahorat darajasi va foydalanish holatlariga mos keladi. Muayyan ehtiyojlaringizga nima mos kelishini bilish uchun o'qing.

jsDelivr

jsDelivr -dagi odamlar Bootstrap-ning CSS va JavaScript-lari uchun CDN-ni qo'llab-quvvatlaydilar. Shunchaki jsDelivr havolalaridan foydalaning.

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

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

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

Bower bilan o'rnating

Shuningdek, Bower yordamida Bootstrap-ning Less, CSS, JavaScript va shriftlarini o'rnatishingiz va boshqarishingiz mumkin :

bower install bootstrap

Npm bilan o'rnating

Bundan tashqari, npm yordamida Bootstrap-ni o'rnatishingiz mumkin :

npm install bootstrap@3

require('bootstrap')jQuery ob'ektiga barcha Bootstrap jQuery plaginlarini yuklaydi. Modulning bootstrapo'zi hech narsani eksport qilmaydi. /js/*.jsPaketning yuqori darajadagi katalogi ostidagi fayllarni yuklash orqali Bootstrap jQuery plaginlarini alohida-alohida qo'lda yuklashingiz mumkin .

Bootstrap- package.jsonda quyidagi kalitlar ostida qo'shimcha metadata mavjud:

• less- Bootstrap-ning asosiy Less manba fayliga yo'l
• style- standart sozlamalar yordamida oldindan tuzilgan Bootstrap-ning kichiklashtirilmagan CSS-ga yo'l (sozlash yo'q)

Composer bilan o'rnating

Bundan tashqari, Composer yordamida Bootstrap-ning Less, CSS, JavaScript va shriftlarini o'rnatishingiz va boshqarishingiz mumkin :

composer require twbs/bootstrap

Less/Sass uchun avtoprefiksator kerak

Bootstrap CSS sotuvchisi prefikslari bilan ishlash uchun Autoprefixer'dan foydalanadi . Agar siz Bootstrap-ni Less/Sass manbasidan kompilyatsiya qilsangiz va bizning Gruntfile-dan foydalanmasangiz, Autoprefixer-ni o'zingiz qurish jarayoniga integratsiyalashingiz kerak bo'ladi. Agar siz oldindan kompilyatsiya qilingan Bootstrap-dan foydalanayotgan bo'lsangiz yoki Gruntfile-dan foydalansangiz, bu haqda tashvishlanishingizga hojat yo'q, chunki Autoprefixer allaqachon bizning Gruntfaylimizga integratsiyalangan.

Nima kiritilgan

Bootstrap ikki shaklda yuklab olinadi, ular ichida siz quyidagi katalog va fayllarni topasiz, umumiy resurslarni mantiqiy ravishda guruhlash va kompilyatsiya qilingan va kichiklashtirilgan variatsiyalarni taqdim etishingiz mumkin.

Oldindan kompilyatsiya qilingan bootstrap

Yuklab olingandan so'ng, (kompilyatsiya qilingan) Bootstrap tuzilishini ko'rish uchun siqilgan jildni oching. Siz shunga o'xshash narsani ko'rasiz:

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

Bu Bootstrap ning eng asosiy shakli: deyarli har qanday veb-loyihada tez kirish uchun oldindan kompilyatsiya qilingan fayllar. Biz kompilyatsiya qilingan CSS va JS ( bootstrap.*), shuningdek kompilyatsiya qilingan va kichiklashtirilgan CSS va JS ( bootstrap.min.*) ni taqdim etamiz. CSS manba xaritalari ( bootstrap.*.map) muayyan brauzerlarning ishlab chiquvchi vositalari bilan foydalanish uchun mavjud. Ixtiyoriy Bootstrap mavzusi kabi Glyphicons shriftlari kiritilgan.

Bootstrap manba kodi

Bootstrap manba kodini yuklab olish oldindan kompilyatsiya qilingan CSS, JavaScript va shrift aktivlarini, shuningdek Less manbasi, JavaScript va hujjatlarni o'z ichiga oladi. Aniqroq aytganda, u quyidagilarni va boshqalarni o'z ichiga oladi:

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

, less/, js/va fonts/bizning CSS, JS va ikonka shriftlari (mos ravishda) uchun manba kodidir. Jild dist/yuqoridagi oldindan kompilyatsiya qilingan yuklab olish bo'limida sanab o'tilgan barcha narsalarni o'z ichiga oladi. Jildda docs/bizning hujjatlarimiz va examples/Bootstrap-dan foydalanish uchun manba kodlari mavjud. Bundan tashqari, boshqa har qanday fayl paketlar, litsenziya ma'lumotlari va ishlab chiqish uchun yordam beradi.

CSS va JavaScript-ni kompilyatsiya qilish

Bootstrap o'zining qurish tizimi uchun Grunt -dan foydalanadi , ramka bilan ishlashning qulay usullari. Biz kodimizni shunday tuzamiz, testlarni o'tkazamiz va hokazo.

Grunt o'rnatilmoqda

Grunt-ni o'rnatish uchun avval node.js-ni yuklab olishingiz va o'rnatishingiz kerak (bu npm-ni o'z ichiga oladi). npm tugunli paketlangan modullarni anglatadi va node.js orqali rivojlanishga bog'liqlikni boshqarish usulidir.

1. grunt-clibilan global o'rnating npm install -g grunt-cli.
2. Ildiz /bootstrap/katalogiga o'ting, so'ngra ishga tushiring npm install. npm package.jsonfaylni ko'rib chiqadi va u erda sanab o'tilgan kerakli mahalliy bog'liqliklarni avtomatik ravishda o'rnatadi.

Tugallangach, siz buyruq satridan taqdim etilgan turli Grunt buyruqlarini ishga tushirishingiz mumkin bo'ladi.

Grunt buyruqlari mavjud

grunt dist(Faqat CSS va JavaScript-ni kompilyatsiya qiling)

/dist/Kompilyatsiya qilingan va kichiklashtirilgan CSS va JavaScript fayllari bilan katalogni qayta tiklaydi. Bootstrap foydalanuvchisi sifatida bu odatda siz xohlagan buyruqdir.

grunt watch(Tomosha qilish)

Less manba fayllarini ko'radi va har safar o'zgartirishni saqlaganingizda ularni avtomatik ravishda CSS-ga qayta kompilyatsiya qiladi.

grunt test(Testlarni bajarish)

JSHint -ni ishga tushiradi va Karma tufayli haqiqiy brauzerlarda QUnit testlarini o'tkazadi .

grunt docs(Hujjatlar aktivlarini yarating va sinab ko'ring)

Hujjatlarni mahalliy sifatida ishga tushirishda foydalaniladigan CSS, JavaScript va boshqa aktivlarni yaratadi va sinovdan o'tkazadi bundle exec jekyll serve.

grunt(Mutlaqo hamma narsani yarating va testlarni o'tkazing)

CSS va JavaScript-ni kompilyatsiya qiladi va kichraytiradi, hujjatlar veb-saytini yaratadi, hujjatlarga qarshi HTML5 validatorini ishga tushiradi, Customizer aktivlarini qayta tiklaydi va boshqalar. Jekyll talab qiladi . Odatda, agar siz Bootstrap-ning o'zida buzib kirsangiz kerak bo'ladi.

Muammolarni bartaraf qilish; nosozliklarni TUZATISH

Agar bog'liqliklarni o'rnatish yoki Grunt buyruqlarini ishga tushirish bilan bog'liq muammolarga duch kelsangiz, avval /node_modules/npm tomonidan yaratilgan katalogni o'chiring. Keyin, qayta ishga tushiring npm install.

Asosiy shablon

Ushbu asosiy HTML shablonidan boshlang yoki ushbu misollarni o'zgartiring . Umid qilamizki, siz shablonlarimiz va misollarimizni o'z ehtiyojlaringizga moslashtirib sozlaysiz.

Minimal Bootstrap hujjati bilan ishlashni boshlash uchun quyidagi HTML-dan nusxa oling.

<!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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 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://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

Misollar

Bootstrap-ning ko'plab komponentlari bilan yuqoridagi asosiy shablonni yarating. Biz sizni shaxsiy loyiha ehtiyojlaringizga moslashtirish uchun Bootstrap-ni sozlash va moslashtirishni tavsiya qilamiz.

Bootstrap omborini yuklab olish orqali quyidagi har bir misol uchun manba kodini oling . docs/examples/Misollarni katalogda topish mumkin .

Ramkadan foydalanish

Boshlovchi shablon

Asosiylaridan boshqa hech narsa: konteyner bilan birga kompilyatsiya qilingan CSS va JavaScript.

Bootstrap mavzusi

Vizual ravishda yaxshilangan tajriba uchun ixtiyoriy Bootstrap mavzusini yuklang.

To'rlar

To'rt qavatli, joylashtirish va boshqalarga ega bo'lgan panjara sxemalariga bir nechta misollar.

Jumbotron

Navbar va bir nechta asosiy panjara ustunlari bilan jumbotron atrofida quring.

Tor jumbotron

Standart konteyner va jumbotronni toraytirib, yanada moslashtirilgan sahifa yarating.

Navbarlar harakatda

Navbar

Navbar va ba'zi qo'shimcha kontentni o'z ichiga olgan super asosiy shablon.

Statik yuqori navbar

Yuqori statik navigatsiya paneli va ba'zi qo'shimcha kontentga ega super asosiy shablon.

Ruxsat etilgan navbar

Ruxsat etilgan yuqori navigatsiya paneli va ba'zi qo'shimcha kontentga ega super asosiy shablon.

Maxsus komponentlar

Qopqoq

Oddiy va chiroyli uy sahifalarini yaratish uchun bir sahifali shablon.

Karusel

Navbar va karuselni sozlang, so'ngra ba'zi yangi komponentlarni qo'shing.

Blog

Shaxsiy navigatsiya, sarlavha va turga ega oddiy ikki ustunli blog tartibi.

Boshqaruv paneli

Ruxsat etilgan yon panel va navbarga ega boshqaruv paneli uchun asosiy tuzilma.

Kirish sahifasi

Shaklda oddiy kirish uchun maxsus shakl tartibi va dizayni.

Oqlangan nav

Asoslangan havolalar bilan maxsus navbar yarating. Oldindan qisqa ma'lumot berish! Safari uchun unchalik qulay emas.

Yopishqoq altbilgi

Kontent undan qisqaroq bo'lsa, ko'rish oynasining pastki qismiga altbilgini biriktiring.

Navbar bilan yopishqoq altbilgi

Ko'rish oynasining pastki qismiga pastki qismni biriktiring.

Tajribalar

Javob bermaydigan Bootstrap

Hujjatlarimiz bo'yicha Bootstrap-ning javob berish qobiliyatini osongina o'chirib qo'ying .

Tuvaldan tashqari

Bootstrap bilan foydalanish uchun o'zgaruvchan tuvaldan tashqari navigatsiya menyusini yarating.

Asboblar

Bootlint

Bootlint rasmiy Bootstrap HTML linter vositasidir. U Bootstrap-dan juda "vanil" usulda foydalanadigan veb-sahifalardagi bir nechta keng tarqalgan HTML xatolarini avtomatik ravishda tekshiradi. Vanilla Bootstrap komponentlari/vidjetlari DOM qismlarining ma'lum tuzilmalarga mos kelishini talab qiladi. Bootlint Bootstrap komponentlari misollarida to'g'ri tuzilgan HTML mavjudligini tekshiradi. Umumiy xatolarning hech biri loyihangiz rivojlanishini sekinlashtirmasligi uchun Bootstrap veb-ishlab chiqish asboblar zanjiriga Bootlint qo'shing.

Jamiyat

Bootstrap-ning rivojlanishidan xabardor bo'ling va ushbu foydali resurslar bilan hamjamiyat bilan bog'laning.

• Rasmiy yuklash blogini o'qing va obuna bo'ling .
• irc.freenode.netServerda, ##bootstrap kanalida IRC yordamida boshqa yuklovchilar bilan suhbatlashing .
• Bootstrap-dan foydalanishda yordam olish uchun teg yordamida StackOverflowtwitter-bootstrap-3 -dan so'rang .
• Ishlab chiquvchilar npm yoki shunga o'xshash etkazib berish mexanizmlari orqali tarqatishda maksimal aniqlanish uchun bootstrapBootstrap funksiyasini o'zgartiradigan yoki qo'shadigan paketlarda kalit so'zdan foydalanishlari kerak .
• Bootstrap Expo -da Bootstrap yordamida odamlar qurishning ilhomlantiruvchi misollarini toping .

Shuningdek , eng soʻnggi gʻiybat va ajoyib musiqiy videolar uchun Twitter’da @getbootstrap-ni kuzatib borishingiz mumkin .

Javob berish qobiliyatini o'chirish

Bootstrap avtomatik ravishda sahifalaringizni turli ekran o'lchamlariga moslashtiradi. Sizning sahifangiz javob bermaydigan misol kabi ishlashi uchun bu xususiyatni qanday o'chirish mumkin .

Sahifa sezgirligini o'chirish uchun qadamlar

1. CSS hujjatlarida<meta> ko'rsatilgan ko'rish oynasini o'tkazib yuboring
2. widthBitta kenglikdagi har bir grid sathi uchun ni bekor qiling .container, masalan width: 970px !important;, bu standart Bootstrap CSS-dan keyin kelishiga ishonch hosil qiling. Siz ixtiyoriy ravishda !importantmedia so'rovlaridan yoki ba'zi selektor-fulardan qochishingiz mumkin.
3. Agar navigatsiya panelidan foydalansangiz, barcha navigatsiya panelining yiqilishi va kengaytirilishini olib tashlang.
4. To'r sxemalari .col-xs-*uchun o'rta/katta sinflarga qo'shimcha yoki ularning o'rnida sinflardan foydalaning. Xavotir olmang, juda kichik qurilmalar tarmog'i barcha o'lchamlarga mos keladi.

IE8 uchun Respond.js kerak boʻladi (chunki bizning media soʻrovlarimiz hali ham mavjud va qayta ishlanishi kerak). Bu Bootstrap-ning "mobil sayt" jihatlarini o'chirib qo'yadi.

Bootstrap shablonida sezgirlik o‘chirilgan

Biz ushbu qadamlarni misol uchun qo'lladik. Amalga oshirilgan maxsus o'zgarishlarni ko'rish uchun uning manba kodini o'qing.

Javob bermaydigan misolni ko'ring

Brauzer va qurilmani qo'llab-quvvatlash

Bootstrap eng so'nggi ish stoli va mobil brauzerlarda eng yaxshi ishlashi uchun yaratilgan, ya'ni eski brauzerlar ba'zi komponentlarning to'liq funktsional bo'lsa-da, turli uslubda ko'rsatilishi mumkin.

Qo'llab-quvvatlanadigan brauzerlar

Xususan, biz quyidagi brauzerlar va platformalarning so‘nggi versiyalarini qo‘llab-quvvatlaymiz.

To‘g‘ridan-to‘g‘ri yoki platformaning veb-ko‘rish API’si orqali WebKit, Blink yoki Gecko’ning so‘nggi versiyasidan foydalanadigan muqobil brauzerlar aniq qo‘llab-quvvatlanmaydi. Biroq, Bootstrap (ko'p hollarda) ushbu brauzerlarda ham to'g'ri ko'rsatilishi va ishlashi kerak. Qo'llab-quvvatlash haqida batafsil ma'lumot quyida keltirilgan.

Mobil qurilmalar

Umuman olganda, Bootstrap har bir asosiy platformaning standart brauzerlarining so'nggi versiyalarini qo'llab-quvvatlaydi. Esda tutingki, proksi-brauzerlar (masalan, Opera Mini, Opera Mobile-ning Turbo rejimi, UC Browser Mini, Amazon Silk) qo'llab-quvvatlanmaydi.

Ish stoli brauzerlari

Xuddi shunday, ko'pgina ish stoli brauzerlarining so'nggi versiyalari qo'llab-quvvatlanadi.

Windows tizimida biz Internet Explorer 8-11 ni qo'llab-quvvatlaymiz .

Firefox uchun, eng so'nggi oddiy barqaror versiyaga qo'shimcha ravishda, biz Firefox-ning so'nggi Kengaytirilgan Yordam Relizi (ESR) versiyasini ham qo'llab-quvvatlaymiz.

Norasmiy ravishda Bootstrap Linux uchun Chromium va Chrome, Linux uchun Firefox va Internet Explorer 7, shuningdek, Microsoft Edge-da etarlicha yaxshi ko'rinishi va o'zini tutishi kerak, ammo ular rasman qo'llab-quvvatlanmaydi.

Bootstrap bilan kurashishi kerak bo'lgan ba'zi brauzer xatolarining ro'yxatini Brauzer xatoliklari devoriga qarang .

Internet Explorer 8 va 9

Internet Explorer 8 va 9 ham qo'llab-quvvatlanadi, ammo shuni yodda tutingki, ba'zi CSS3 xususiyatlari va HTML5 elementlari ushbu brauzerlar tomonidan to'liq qo'llab-quvvatlanmaydi. Bundan tashqari, Internet Explorer 8 media so'rovlarini qo'llab-quvvatlashni yoqish uchun Respond.js dan foydalanishni talab qiladi .

CSS3 va HTML5 funksiyalarini brauzerni qo‘llab-quvvatlash bo‘yicha batafsil ma’lumot olish uchun “Ishlab olamanmi... ” sahifasiga tashrif buyuring .

Internet Explorer 8 va Respond.js

Internet Explorer 8 uchun ishlab chiqish va ishlab chiqarish muhitida Respond.js dan foydalanishda quyidagi ogohlantirishlardan ehtiyot bo'ling.

Respond.js va domenlararo CSS

Respond.js-dan boshqa (sub) domenda (masalan, CDN-da) joylashtirilgan CSS-dan foydalanish qo'shimcha sozlashlarni talab qiladi. Tafsilotlar uchun Respond.js hujjatlariga qarang.

Respond.js vafile://

Brauzer xavfsizligi qoidalari tufayli Respond.js protokol orqali ko'rilgan sahifalar bilan ishlamaydi file://(masalan, mahalliy HTML faylni ochishda). IE8-da sezgir xususiyatlarni sinab ko'rish uchun sahifalaringizni HTTP(S) orqali ko'ring. Tafsilotlar uchun Respond.js hujjatlariga qarang.

Respond.js va@import

Respond.js orqali havola qilingan CSS bilan ishlamaydi @import. Xususan, ba'zi Drupal konfiguratsiyalaridan foydalanish ma'lum @import. Tafsilotlar uchun Respond.js hujjatlariga qarang.

Internet Explorer 8 va quti o'lchamlari

, , yoki box-sizing: border-box;bilan birlashganda IE8 to'liq qo'llab-quvvatlamaydi . Shu sababli, v3.0.1 dan boshlab biz s - dan foydalanmaymiz .min-widthmax-widthmin-heightmax-heightmax-width.container

Internet Explorer 8 va @font-face

@font-faceIE8 bilan birlashtirilganda ba'zi muammolar mavjud :before. Bootstrap bu kombinatsiyani o'zining Glifikonlari bilan ishlatadi. Agar sahifa keshlangan bo'lsa va sichqonchani deraza ustiga o'rnatmasdan yuklangan bo'lsa (ya'ni, yangilash tugmasini bosing yoki iframe-ga biror narsani yuklang), u holda sahifa shrift yuklanishidan oldin ko'rsatiladi. Sahifa (tana) ustiga sichqonchani olib borish ba'zi piktogrammalarni ko'rsatadi va qolgan piktogramma ustiga olib borish ularni ham ko'rsatadi. Tafsilotlar uchun №13863-songa qarang .

IE muvofiqlik rejimlari

Bootstrap eski Internet Explorer moslik rejimlarida qo'llab-quvvatlanmaydi. IE uchun eng soʻnggi renderlash rejimidan foydalanayotganingizga ishonch hosil qilish <meta>uchun sahifalaringizga tegishli tegni qoʻshishni oʻylab koʻring:

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

Nosozliklarni tuzatish vositalarini ochib, hujjat rejimini tasdiqlang: bosing F12va "Hujjat rejimi" ni tekshiring.

Ushbu teg barcha Bootstrap hujjatlariga va Internet Explorer-ning har bir qo'llab-quvvatlanadigan versiyasida eng yaxshi renderlashni ta'minlash uchun misollarga kiritilgan.

Qo'shimcha ma'lumot olish uchun ushbu StackOverflow savoliga qarang .

Windows 8 va Windows Phone 8 da Internet Explorer 10

Internet Explorer 10 qurilma kengligini ko'rish maydoni kengligidan farqlamaydi va shuning uchun Bootstrap CSS-dagi media so'rovlarini to'g'ri qo'llamaydi. Odatda buni tuzatish uchun CSS-ning tezkor parchasini qo'shsangiz bo'ladi:

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

Biroq, bu yangilanish 3 dan (aka GDR3) eski Windows Phone 8 versiyalari bilan ishlaydigan qurilmalar uchun ishlamaydi , chunki bunday qurilmalar tor "telefon" ko'rinishi o'rniga asosan ish stoli ko'rinishini ko'rsatishiga olib keladi. Buni hal qilish uchun xatoni hal qilish uchun quyidagi CSS va JavaScript-ni qo'shishingiz kerak bo'ladi .

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

// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/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)
}

Qo'shimcha ma'lumot va foydalanish bo'yicha ko'rsatmalar uchun Windows Phone 8 va Device-Width- ni o'qing.

Ehtiyotkorlik sifatida biz buni barcha Bootstrap hujjatlari va misollariga namoyish sifatida kiritamiz.

Safari foizli yaxlitlash

OS X uchun Safari v7.1 va iOS v8.0 uchun Safari versiyalarining renderlash mexanizmi bizning .col-*-1panjara sinflarimizda ishlatiladigan o'nli kasrlar soni bilan bog'liq muammolarga duch keldi. Shunday qilib, agar sizda 12 ta alohida panjara ustunlari bo'lsa, ular boshqa ustunlar qatorlariga qaraganda qisqa ekanligini sezasiz. Safari/iOS-ni yangilashdan tashqari, sizda vaqtinchalik echimlar uchun ba'zi variantlar mavjud:

• .pull-rightQattiq o'ngga tekislashni olish uchun oxirgi panjara ustuniga qo'shing
• Safari uchun mukammal yaxlitlashni olish uchun foizlaringizni qo'lda o'zgartiring (birinchi variantga qaraganda qiyinroq)

Modallar, navbarlar va virtual klaviaturalar

To'ldirish va aylantirish

Elementni qo'llab-quvvatlash overflow: hiddeniOS <body>va Android-da juda cheklangan. Shu maqsadda, ushbu qurilmalar brauzerlaridan birida modalning yuqori yoki pastki qismidan o‘tsangiz, <body>kontent aylana boshlaydi. Chrome xato #175502 ( Chrome v40 da tuzatilgan) va WebKit xatosi #153852 ga qarang .

iOS matn maydonlari va aylantirish

<input>IOS 9.3 dan boshlab, modal ochiq boʻlsa, aylantirish imo-ishorasining dastlabki tegishi matn yoki a chegarasida boʻlsa, <textarea>modalning <body>oʻrniga modal ostidagi kontent aylantiriladi. WebKit xatosi # 153856 ga qarang .

Virtual klaviaturalar

Shuni ham yodda tutingki, agar siz qattiq navigatsiya panelidan foydalansangiz yoki modal ichida kirishlardan foydalansangiz, iOS-da virtual klaviatura ishga tushirilganda sobit elementlarning holatini yangilamaydigan renderlash xatosi bor. Buning uchun bir nechta vaqtinchalik echimlar elementlarni o'zgartirish position: absoluteyoki joylashuvni qo'lda tuzatish uchun fokusda taymerni chaqirishni o'z ichiga oladi. Bu Bootstrap tomonidan bajarilmaydi, shuning uchun ilovangiz uchun qaysi yechim eng mos kelishini o'zingiz hal qilasiz.

Navbarning ochiladigan menyusi

Element .dropdown-backdropz-indekslashning murakkabligi tufayli iOS-da navlarda ishlatilmaydi. Shunday qilib, navigatsiya panelidagi ochiladigan menyularni yopish uchun siz to'g'ridan-to'g'ri ochiladigan elementni (yoki iOS-da bosish hodisasini ishga tushiradigan boshqa elementni ) bosishingiz kerak.

Brauzerni kattalashtirish

Sahifani kattalashtirish muqarrar ravishda Bootstrap-da ham, Internetning qolgan qismlarida ham ba'zi komponentlarda renderlash artefaktlarini taqdim etadi. Muammoga qarab, biz uni hal qilishimiz mumkin (avval qidiring va kerak bo'lsa, muammoni oching). Biroq, biz ularni e'tiborsiz qoldiramiz, chunki ular ko'pincha noto'g'ri vaqtinchalik echimlardan boshqa to'g'ridan-to'g'ri echimga ega emas.

Yopishqoq :hover/ :focusmobilda

Ko'pgina sensorli ekranlarda haqiqiy sichqonchani ko'tarish mumkin bo'lmasa ham, ko'pchilik mobil brauzerlar sichqonchani qo'llab-quvvatlashga taqlid qiladi va :hover"yopishqoq" qiladi. Boshqacha qilib aytganda, :hoveruslublar elementni bosgandan so'ng qo'llanila boshlaydi va foydalanuvchi boshqa elementni bosgandan keyingina qo'llashni to'xtatadi. Bu Bootstrap :hoverholatlarining bunday brauzerlarda istalmagan tarzda "yopishib qolishiga" olib kelishi mumkin. Ba'zi mobil brauzerlar ham :focusxuddi shunday yopishqoq qiladi. Hozirda bunday uslublarni butunlay olib tashlashdan tashqari, bu muammolarni hal qilishning oddiy echimi yo'q.

Chop etish

Hatto ba'zi zamonaviy brauzerlarda ham chop etish g'alati bo'lishi mumkin.

Xususan, Chrome v32 dan boshlab va chekka sozlamalaridan qat'i nazar, Chrome veb-sahifani chop etishda media so'rovlarini hal qilishda jismoniy qog'oz hajmidan sezilarli darajada torroq ko'rish oynasi kengligidan foydalanadi. Bu chop etishda kutilmaganda Bootstrap-ning juda kichik tarmog'ining faollashishiga olib kelishi mumkin. Ba'zi tafsilotlar uchun #12078-son va Chrome xatosi #273306- ga qarang. Tavsiya etilgan vaqtinchalik echimlar:

• Kichkina katakchani qo'llang va sahifangiz uning ostida maqbul ko'rinishiga ishonch hosil qiling.
• @screen-*Printer qog'ozi juda kichikdan kattaroq deb hisoblanishi uchun Less o'zgaruvchilari qiymatlarini moslang .
• Faqat bosma ommaviy axborot vositalari uchun panjara o'lchamining uzilish nuqtalarini o'zgartirish uchun maxsus media so'rovlarini qo'shing.

Bundan tashqari, Safari v8.0 dan boshlab, qattiq kenglikdagi .containers Safari chop etishda juda kichik shrift hajmidan foydalanishiga olib kelishi mumkin. Batafsil ma'lumot uchun #14868 va WebKit xatosi #138192 ga qarang. Buning mumkin bo'lgan vaqtinchalik echimlaridan biri quyidagi CSS-ni qo'shishdir:

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

Android fond brauzeri

Qutiga Android 4.1 (va hatto ba'zi yangi versiyalar) Brauzer ilovasi bilan tanlagan standart veb-brauzer sifatida (Chrome'dan farqli o'laroq) yetkazib beriladi. Afsuski, Brauzer ilovasida juda ko'p xatolar va umuman CSS bilan nomuvofiqliklar mavjud.

Menyularni tanlang

Elementlarda Android fond brauzeri va/yoki qo'llanilsa <select>, yon boshqaruv elementlarini ko'rsatmaydi . ( Tafsilotlar uchun ushbu StackOverflow savoliga qarang.) Quyidagi kod parchasidan foydalanib, haqoratli CSS-ni olib tashlang va Android birja brauzerida uslubsiz element sifatida ko'rsating. Foydalanuvchi agenti hidlash Chrome, Safari va Mozilla brauzerlari bilan aralashuvdan qochadi.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>

Misol ko'rishni xohlaysizmi? Ushbu JS Bin demosini tekshiring.

Tasdiqlovchilar

Eski va noto'g'ri brauzerlar uchun eng yaxshi tajribani taqdim etish uchun Bootstrap brauzerlarning o'zlarida xatolarni bartaraf etish uchun muayyan brauzer versiyalariga maxsus CSS-ni yo'naltirish uchun bir necha joylarda CSS brauzerini buzishlardan foydalanadi. Ushbu buzg'unchiliklar CSS validatorlarining noto'g'ri ekanligi haqida shikoyat qilishlariga sabab bo'lishi mumkin. Baʼzi joylarda biz hali toʻliq standartlashtirilmagan CSS xususiyatlaridan ham foydalanamiz, lekin ular faqat progressiv yaxshilash uchun ishlatiladi.

Ushbu tasdiqlash ogohlantirishlari amalda muhim emas, chunki bizning CSS-ning noto'g'ri bo'lgan qismi to'liq tasdiqlanadi va buzilgan bo'limlar noto'g'ri bo'lgan qismning to'g'ri ishlashiga xalaqit bermaydi, shuning uchun biz ushbu maxsus ogohlantirishlarni ataylab e'tiborsiz qoldiramiz.

Bizning HTML hujjatlarimizda ham ma'lum bir Firefox xatosi uchun vaqtinchalik yechim kiritilganligimiz sababli arzimas va ahamiyatsiz HTML tekshiruvi ogohlantirishlari mavjud .

Uchinchi tomon yordami

Biz uchinchi tomon plaginlari yoki qo‘shimchalarini rasman qo‘llab-quvvatlamasak ham, loyihalaringizda yuzaga kelishi mumkin bo‘lgan muammolarni oldini olish uchun foydali maslahatlar beramiz.

Quti o'lchami

Ba'zi uchinchi tomon dasturlari, jumladan, Google Xaritalar va Google Custom Search Engine, Bootstrap bilan ziddiyatga ega * { box-sizing: border-box; }, chunki qoida paddingelementning yakuniy hisoblangan kengligiga ta'sir qilmaydi. CSS Tricks-da quti modeli va o'lchamlari haqida ko'proq bilib oling .

Kontekstga qarab, kerak bo'lganda bekor qilishingiz mumkin (1-variant) yoki butun mintaqalar uchun quti o'lchamini tiklashingiz mumkin (2-variant).

/* 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();
}

Foydalanish imkoniyati

Bootstrap umumiy veb-standartlarga amal qiladi va minimal qo'shimcha harakatlar bilan AT dan foydalanadiganlar kirishi mumkin bo'lgan saytlarni yaratish uchun ishlatilishi mumkin .

Navigatsiyani oʻtkazib yuborish

Agar sizning navigatsiyangizda koʻplab havolalar boʻlsa va DOM-dagi asosiy tarkibdan oldin boʻlsa Skip to main content, navigatsiyadan oldin havola qoʻshing (oddiy tushuntirish uchun navigatsiya havolalarini oʻtkazib yuborish haqidagi ushbu A11Y loyihasi maqolasiga qarang ). Sinfdan foydalanish .sr-onlyo'tkazib yuborish havolasini vizual ravishda yashiradi va .sr-only-focusablesinf diqqat markazida bo'lgandan keyin havola ko'rinadigan bo'lishini ta'minlaydi (ko'rish qobiliyatiga ega klaviatura foydalanuvchilari uchun).

<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>

Ichki sarlavhalar

Sarlavhalarni ( <h1>- <h6>) joylashtirishda asosiy hujjat sarlavhasi bo'lishi kerak <h1>. Keyingi sarlavhalar mantiqiy foydalanishi kerak <h2>- <h6>ekran o'quvchilari sizning sahifalaringiz uchun tarkiblar jadvalini yaratishi mumkin.

HTML CodeSniffer va Penn State's AccessAbility- da ko'proq bilib oling .

Rang kontrasti

Hozirda Bootstrap-da mavjud bo'lgan ba'zi birlamchi rang kombinatsiyalari (masalan, turli uslubdagi tugma sinflari, asosiy kod bloklari uchun ishlatiladigan ba'zi kodlarni ajratib ko'rsatish ranglari , .bg-primary kontekstli fon yordamchi sinfi va oq fonda foydalanilganda standart havola rangi) past kontrast nisbatiga ega ( tavsiya etilgan 4,5:1 nisbatdan past ). Bu ko'rish qobiliyati past yoki ranglarni ko'r bo'lgan foydalanuvchilarga muammo tug'dirishi mumkin. Ushbu standart ranglarning kontrastini va tushunarliligini oshirish uchun o'zgartirish kerak bo'lishi mumkin.

Qo'shimcha manbalar

• Maxsus imkoniyatlar bilan bog'liq muammolarni aniqlash uchun "HTML Codesniffer" xatcho'p
• Chrome-ning maxsus imkoniyatlarni ishlab chiquvchi asboblari kengaytmasi
• Rang kontrasti tahlilchisi
• A11Y loyihasi
• MDN mavjudlik hujjatlari

Litsenziya haqida tez-tez so'raladigan savollar

Bootstrap MIT litsenziyasi ostida chiqarilgan va mualliflik huquqi 2019 Twitter. Kichikroq bo'laklarga qaynatiladi, uni quyidagi shartlar bilan tavsiflash mumkin.

U sizdan quyidagilarni talab qiladi:

• Bootstrap-ning CSS va JavaScript-fayllariga kiritilgan litsenziya va mualliflik huquqi toʻgʻrisidagi eslatmani asaringizda ishlatganda saqlang.

U sizga quyidagilarga imkon beradi:

• Bootstrap-ni to'liq yoki qisman shaxsiy, shaxsiy, kompaniyaning ichki yoki tijorat maqsadlarida bepul yuklab oling va foydalaning
• O'zingiz yaratgan paketlar yoki tarqatishlarda Bootstrap-dan foydalaning
• Manba kodini o'zgartiring
• Litsenziyaga kiritilmagan uchinchi shaxslarga Bootstrap-ni o'zgartirish va tarqatish uchun sublitsenziya bering

U sizni taqiqlaydi:

• Mualliflar va litsenziya egalarini etkazilgan zarar uchun javobgarlikka torting, chunki Bootstrap kafolatsiz taqdim etiladi
• Bootstrap yaratuvchilari yoki mualliflik huquqi egalarini javobgarlikka torting
• Bootstrap-ning istalgan qismini tegishli atributsiz qayta tarqating
• Twitter-ga tegishli bo'lgan har qanday belgilardan Twitter sizning tarqatishingizni ma'qullashini bildirishi yoki anglatuvchi har qanday tarzda foydalaning
• Twitter’ga tegishli bo‘lgan har qanday belgilardan Twitter dasturini siz yaratganligingizni bildirishi mumkin bo‘lgan har qanday usulda foydalaning

U sizdan quyidagilarni talab qilmaydi:

• Bootstrap manbasini yoki unga kiritilgan har qanday oʻzgartirishlarni siz yigʻishingiz mumkin boʻlgan har qanday qayta tarqatishda, shu jumladan uni qoʻshing.
• Bootstrap-ga kiritilgan o'zgarishlarni Bootstrap loyihasiga qaytaring (bunday fikr-mulohaza rag'batlantirilsa ham)

To'liq Bootstrap litsenziyasi qo'shimcha ma'lumot olish uchun loyiha omborida joylashgan.

Tarjimalar

Hamjamiyat a'zolari Bootstrap hujjatlarini turli tillarga tarjima qilishgan. Hech biri rasman qo'llab-quvvatlanmaydi va ular har doim ham yangilanmasligi mumkin.

• Bootstrap mínìnì (Xitoy)
• Bootstrap på Dansk (Daniya)
• Bootstrap en Français (frantsuz)
• Bootstrap auf Deutsch (Nemis)
• Bootstrap Italiano (Italiya)
• Bootstrap (Koreys)
• Bootstrap em Português do Brasil (Braziliya portugalcha)
• Bootstrap po-russki (ruscha)
• Bootstrap en Español (Ispancha)
• O'zbekcha Bootstrap (Turkcha)
• Bootstrap ukraínskoyu (Ukraina)
• Bootstrap bằng tiếng Việt (Vetnam)

Biz tarjimalarni tashkil qilish yoki joylashtirishga yordam bermaymiz, faqat ularga havola qilamiz.

Yangi yoki yaxshiroq tarjimani tugatdingizmi? Uni ro'yxatimizga qo'shish uchun tortish so'rovini oching.