Татаж авах

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/
├── 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, icon фонтуудын (тус тус бүр) эх код юм. Уг 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(Үзэх)

Бага эх сурвалж файлуудыг үзэж, өөрчлөлтийг хадгалах болгонд автоматаар 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 сэдвийг ачаалж үзэнгээ сайжруулаарай.

Сүлжээ

Бүх дөрвөн шатлалт, үүрлэх гэх мэт сүлжээний байршлын олон жишээ.

Жумботрон

Navbar болон зарим үндсэн сүлжээ багана бүхий jumbotron-ийн эргэн тойронд бүтээгээрэй.

Нарийн жумботрон

Өгөгдмөл контейнер болон jumbotron-ыг нарийсгаж илүү захиалгат хуудсыг бүтээгээрэй.

Навбарууд ажиллаж байна

Navbar

Нэмэлт контентын хамт navbar-г агуулсан супер үндсэн загвар.

Статик дээд навигац

Зарим нэмэлт контентын хамт статик дээд навигац бүхий супер үндсэн загвар.

Тогтмол navbar

Тогтмол дээд навигац бүхий супер үндсэн загвар болон нэмэлт контент.

Захиалгат бүрэлдэхүүн хэсгүүд

Хавтас

Энгийн бөгөөд үзэсгэлэнтэй нүүр хуудас бүтээх нэг хуудасны загвар.

Карусель

Navbar болон тойруулгыг тохируулж, дараа нь шинэ бүрэлдэхүүн хэсгүүдийг нэмнэ үү.

Блог

Захиалгат навигаци, толгой хэсэг, төрөл бүхий энгийн хоёр баганатай блогийн зохион байгуулалт.

Хяналтын самбар

Тогтмол хажуугийн самбар болон навигаци бүхий админ хяналтын самбарын үндсэн бүтэц.

Нэвтрэх хуудас

Захиалгат маягтын байршил, загвар нь энгийн нэвтрэх маягт.

Зөвшөөрөгдсөн nav

Зөвшөөрөгдсөн холбоос бүхий захиалгат navbar үүсгэ. Анхаар! Safari-д тийм ч ээлтэй биш.

Наалттай хөл хэсэг

Агуулга түүнээс богино байх үед харах цонхны доод хэсэгт хөл хэсгийг хавсаргана уу.

Navbar бүхий наалттай хөл хэсэг

Харах цонхны доод хэсэгт хөл хэсгийг хавсаргана.

Туршилтууд

Хариу өгөхгүй ачаалагч

Манай бичиг баримтын дагуу Bootstrap-ийн хариу үйлдлийг хялбархан идэвхгүй болго .

Зөөлөн даавуу

Bootstrap-тэй ашиглахын тулд сэлгэн залгах боломжтой зотон навигацийн цэсийг бүтээгээрэй.

Багаж хэрэгсэл

Bootlint

Bootlint бол албан ёсны Bootstrap HTML линтер хэрэгсэл юм. Энэ нь Bootstrap-ийг нэлээд "ванил" хэлбэрээр ашиглаж байгаа вэб хуудаснуудын нийтлэг HTML алдааг автоматаар шалгадаг. Vanilla Bootstrap-ийн бүрэлдэхүүн хэсэг/виджетүүд нь DOM-ийн хэсгүүдийг тодорхой бүтэцтэй нийцүүлэхийг шаарддаг. Bootlint нь Bootstrap бүрэлдэхүүн хэсгүүдийн зөв бүтэцтэй HTML-тэй эсэхийг шалгадаг. Нийтлэг алдаануудын аль нь ч таны төслийн хөгжлийг удаашруулахгүйн тулд Bootstrap вэб хөгжүүлэлтийн хэрэгслийн гинжиндээ Bootlint нэмэх талаар бодож үзээрэй.

Нийгэмлэг

Bootstrap-ийн хөгжүүлэлтийн талаар цаг тухайд нь мэдээлэлтэй байж, эдгээр хэрэгцээт эх сурвалжуудыг ашиглан нийгэмд хандаарай.

• The Official Bootstrap блогийг уншиж, бүртгүүлнэ үү .
• ##bootstrap сувагirc.freenode.net дээр серверийн 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. Хэрэв navbar ашиглаж байгаа бол бүх навигацийн уналт болон тэлэх үйлдлийг устгана уу.
4. Сүлжээний .col-xs-*байршлын хувьд дунд/том ангиудын оронд эсвэл нэмэлт ангиллыг ашиглана уу. Санаа зоволтгүй, хэт жижиг төхөөрөмжийн сүлжээ нь бүх нягтралд нийцдэг.

Танд IE8-д Respond.js хэрэгтэй хэвээр байх болно (учир нь манай медиа асуулга байсаар байгаа бөгөөд боловсруулах шаардлагатай). Энэ нь Bootstrap-ийн "мобайл сайт"-ыг идэвхгүй болгодог.

Хариултыг идэвхгүй болгосон ачаалах загвар

Бид эдгээр алхмуудыг жишээ болгон ашигласан. Хэрэгжүүлсэн тодорхой өөрчлөлтүүдийг харахын тулд эх кодыг уншина уу.

Хариу өгөхгүй жишээг харна уу

Хөтөч болон төхөөрөмжийн дэмжлэг

Bootstrap нь хамгийн сүүлийн үеийн ширээний болон гар утасны хөтчүүдэд хамгийн сайн ажиллахаар бүтээгдсэн бөгөөд энэ нь хуучин хөтчүүд нь бүрэн ажиллагаатай боловч зарим бүрэлдэхүүн хэсгүүдийн дүрслэлийг өөр өөр загвараар харуулах боломжтой гэсэн үг юм.

Дэмжигдсэн хөтчүүд

Тодруулбал, бид дараах хөтөч болон платформуудын хамгийн сүүлийн үеийн хувилбаруудыг дэмждэг.

WebKit, Blink, Gecko-ийн хамгийн сүүлийн хувилбарыг шууд эсвэл платформын вэб үзэх API-ээр дамжуулан ашигладаг өөр хөтчүүдийг шууд дэмждэггүй. Гэсэн хэдий ч Bootstrap нь (ихэнх тохиолдолд) эдгээр хөтчүүдэд зөв харуулж, ажиллах ёстой. Илүү тодорхой тусламжийн мэдээллийг доор өгөв.

Хөдөлгөөнт төхөөрөмж

Ерөнхийдөө Bootstrap нь үндсэн платформ бүрийн үндсэн хөтчийн хамгийн сүүлийн хувилбарыг дэмждэг. Прокси хөтчүүдийг (Opera Mini, Opera Mobile-ийн Turbo горим, UC Browser Mini, Amazon Silk гэх мэт) дэмждэггүйг анхаарна уу.

Ширээний хөтчүүд

Үүний нэгэн адил ихэнх ширээний хөтчүүдийн хамгийн сүүлийн хувилбарууд дэмжигддэг.

Windows дээр бид Internet Explorer 8-11-ийг дэмждэг .

Firefox-ийн хувьд бид хамгийн сүүлийн үеийн ердийн тогтвортой хувилбараас гадна Firefox-ын хамгийн сүүлийн үеийн Өргөтгөсөн дэмжлэгийн хувилбарыг (ESR) дэмждэг .

Албан бусаар Bootstrap нь Linux-д зориулсан Chromium болон Chrome, Linux-д зориулсан Firefox, Internet Explorer 7, мөн Microsoft Edge-д албан ёсоор дэмжигдээгүй ч хангалттай сайн харагдах ёстой.

Bootstrap-д тулгардаг хөтчийн зарим алдаануудын жагсаалтыг манай хөтчийн алдааны Wall -аас үзнэ үү .

Internet Explorer 8 ба 9

Internet Explorer 8 болон 9-ийг бас дэмждэг боловч зарим CSS3 шинж чанарууд болон HTML5 элементүүдийг эдгээр хөтчүүд бүрэн дэмждэггүйг анхаарна уу. Нэмж дурдахад Internet Explorer 8 нь медиа асуулгын дэмжлэгийг идэвхжүүлэхийн тулд Respond.js -г ашиглахыг шаарддаг.

CSS3 болон HTML5 функцуудын хөтчийн дэмжлэгийн талаарх дэлгэрэнгүй мэдээллийг Би ашиглаж болох уу... хэсгээс авна уу .

Internet Explorer 8 болон Respond.js

Respond.js-г Internet Explorer 8-д зориулсан хөгжүүлэлт болон үйлдвэрлэлийн орчинд ашиглахдаа дараах сэрэмжлүүлгээс болгоомжил.

Respond.js болон домайн хоорондын CSS

Respond.js-г өөр (дэд) домайн дээр (жишээ нь, CDN дээр) байршуулсан CSS-тэй ашиглах нь нэмэлт тохиргоог шаарддаг. Дэлгэрэнгүйг Respond.js баримтаас үзнэ үү.

Respond.js болонfile://

file://Хөтчийн аюулгүй байдлын дүрмийн улмаас Respond.js нь протоколоор (локал HTML файл нээх гэх мэт) үзсэн хуудсуудтай ажиллахгүй . IE8-д хариу үйлдэл үзүүлэх функцуудыг шалгахын тулд HTTP(S)-ээр хуудсаа үзнэ үү. Дэлгэрэнгүйг Respond.js баримтаас үзнэ үү.

Respond.js болон@import

Respond.js нь дамжуулан иш татсан CSS-тэй ажиллахгүй @import. Ялангуяа зарим Drupal тохиргоог ашигладаг нь мэдэгдэж байна @import. Дэлгэрэнгүйг Respond.js баримтаас үзнэ үү.

Internet Explorer 8 ба хайрцагны хэмжээ

IE8 нь , , , эсвэл box-sizing: border-box;-тэй хослуулсан тохиолдолд бүрэн дэмждэггүй . Ийм учраас v3.0.1-ээс хойш бид s дээр ашиглахаа больсон .min-widthmax-widthmin-heightmax-heightmax-width.container

Internet Explorer 8 болон @font-face

@font-faceIE8-тэй хослуулах үед зарим асуудал гардаг :before. Bootstrap нь энэ хослолыг 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; }

Гэсэн хэдий ч, энэ нь Windows Phone 8-ийн Update 3-аас хуучин хувилбаруудыг ажиллуулж байгаа төхөөрөмжүүдэд ажиллахгүй (өөрөөр хэлбэл GDR3) , учир нь эдгээр төхөөрөмжүүд нь нарийн "утас" харагдахын оронд ихэвчлэн ширээний харагдах байдлыг харуулдаг. Үүнийг арилгахын тулд та алдааг арилгахын тулд дараах CSS болон JavaScript-г оруулах шаардлагатай болно .

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

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

Дэлгэрэнгүй мэдээлэл болон ашиглалтын удирдамжийг Windows Phone 8 болон Төхөөрөмжийн өргөнийг уншина уу .

Анхаарал татахуйц бид үүнийг Bootstrap-ийн бүх баримт бичиг, жишээнүүдэд жагсаал болгон оруулсан болно.

Safari хувь нь бөөрөнхийлсөн

OS X-д зориулсан Safari-ийн v7.1-ээс өмнөх хувилбарууд болон iOS v8.0-д зориулсан Safari-н хувилбаруудыг дүрслэх хөдөлгүүр нь манай .col-*-1торны ангиудад ашигласан аравтын бутархайн тоотой холбоотой асуудалтай байсан. Хэрэв танд 12 тусдаа сүлжээ багана байсан бол тэдгээр баганын бусад мөртэй харьцуулахад богино байгааг анзаарах болно. Safari/iOS-г шинэчлэхээс гадна танд тойрч гарах хэд хэдэн сонголт байна:

• .pull-rightХатуу баруун зэрэгцүүлэхийн тулд сүүлчийн сүлжээ баганадаа нэмнэ үү
• Safari-г төгс дугуйлахын тулд хувиараа гараар тохируулаарай (эхний сонголтоос илүү хэцүү)

Модал, навигац, виртуал гар

Халих, гүйлгэх

overflow: hiddenЭлемент дээрх дэмжлэг <body>iOS болон Android дээр нэлээд хязгаарлагдмал байдаг. Үүний тулд та эдгээр төхөөрөмжүүдийн аль нэг хөтчийг горимын дээд эсвэл доод талаас гүйлгэн гүйлгэх үед <body>контент гүйлгэж эхэлнэ. Chrome-ын алдаа # 175502 (Chrome v40 дээр зассан) болон WebKit-ийн алдаа # 153852- ыг харна уу .

iOS текст талбарууд болон гүйлгэх

IOS 9.3-аас эхлэн модаль нээлттэй байхад гүйлгэх дохионы эхний мэдрэгч нь текст <input>эсвэл a гэсэн заагт байгаа бол модаль өөрөө биш, доор <textarea>байгаа <body>контентыг гүйлгэх болно. WebKit-ийн алдаа # 153856- г үзнэ үү .

Виртуал гарууд

Түүнчлэн, хэрэв та тогтмол навигацийн самбар ашиглаж байгаа эсвэл модаль дотор оролт ашиглаж байгаа бол iOS-д виртуал гар асаалттай үед тогтмол элементийн байрлалыг шинэчлэхгүй дүрслэх алдаа байгааг анхаарна уу. Үүнийг шийдвэрлэх хэд хэдэн арга замууд нь өөрийн элементүүдийг хувиргах position: absoluteэсвэл байрлалыг гараар засахын тулд анхаарлаа төвлөрүүлэх цаг хэмжигчийг ажиллуулах явдал юм. Үүнийг Bootstrap хариуцдаггүй тул аль шийдэл нь таны хэрэглээнд тохирохыг та өөрөө шийднэ.

Navbar унадаг цэс

.dropdown-backdropz-индексжүүлэлтийн нарийн төвөгтэй байдлаас шалтгаалан энэ элементийг iOS дээр nav-д ашигладаггүй . Тиймээс, навигацын цэсийг хаахын тулд та унадаг элемент дээр (эсвэл iOS дээр товшилтыг идэвхжүүлдэг бусад элемент ) шууд дарах ёстой.

Хөтөчийг томруулж байна

Хуудсыг томруулах нь Bootstrap болон бусад вэбийн аль алинд нь зарим бүрэлдэхүүн хэсгүүдэд олдворуудыг үзүүлэх нь гарцаагүй. Асуудлаас хамааран бид үүнийг засах боломжтой (эхлээд хайгаад дараа нь шаардлагатай бол асуудлыг нээнэ үү). Гэсэн хэдий ч, бид тэдгээрийг үл тоомсорлох хандлагатай байдаг, учир нь тэдгээрт алдаатай тойрон гарахаас өөр шууд шийдэл байдаггүй.

Наалттай :hover/ :focusгар утсан дээр

Хэдийгээр ихэнх мэдрэгчтэй дэлгэц дээр бодит хулганыг зөөвөрлөх боломжгүй ч ихэнх гар утасны хөтчүүд зөөгчийг дуурайж, :hover"наалдамхай" болгодог. Өөрөөр хэлбэл, :hoverзагвар нь элементийг товшсоны дараа хэрэгжиж эхэлдэг бөгөөд хэрэглэгч өөр элементийг товшсоны дараа л хэрэглэхээ болино. Энэ нь Bootstrap-ийн :hoverтөлөвүүдийг ийм хөтөч дээр хүсээгүй "гацах"-д хүргэж болзошгүй. Зарим гар утасны хөтөч мөн :focusадил наалдамхай болгодог. Ийм хэв маягийг бүрмөсөн устгахаас өөр эдгээр асуудлыг шийдвэрлэх энгийн арга одоогоор алга.

Хэвлэх

Орчин үеийн зарим хөтөч дээр ч гэсэн хэвлэх нь хачирхалтай байж болно.

Ялангуяа Chrome v32 хувилбарын дагуу, захын тохиргооноос үл хамааран Chrome нь вэб хуудсыг хэвлэх явцад медиа асуултуудыг шийдвэрлэхдээ бодит цаасны хэмжээнээс хамаагүй нарийхан харагдах цонхны өргөнийг ашигладаг. Энэ нь хэвлэх үед Bootstrap-ийн хэт жижиг сүлжээг гэнэт идэвхжүүлэхэд хүргэдэг. Дэлгэрэнгүйг №12078 дугаар болон Chrome алдаа #273306 -г үзнэ үү. Санал болгож буй тойрон гарах арга замууд:

• Хэт жижиг сүлжээг хүлээн авч, түүний доор таны хуудас зөвшөөрөгдөх боломжтой эсэхийг шалгаарай.
• Бага хувьсагчийн утгыг @screen-*тохируулснаар таны принтерийн цаас хэт жижиг хэмжээнээс том гэж тооцогдоно.
• Зөвхөн хэвлэх хэрэгсэлд зориулсан сүлжээний хэмжээ таслах цэгийг өөрчлөхийн тулд тусгай медиа асуулга нэмнэ үү.

Түүнчлэн Safari v8.0 хувилбарын хувьд тогтмол өргөн нь Safari-г хэвлэхдээ .containerер бусын жижиг үсгийн хэмжээг ашиглахад хүргэдэг. Дэлгэрэнгүй мэдээллийг #14868 болон WebKit алдаа #138192-оос үзнэ үү. Үүнийг шийдвэрлэх нэг боломжит арга бол дараах CSS-г нэмэх явдал юм.

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

Android хувьцааны хөтөч

Хайрцагнаас Android 4.1 (мөн зарим шинэ хувилбарууд нь) нь Browser програмыг үндсэн вэб хөтчөөр (Chrome-ээс эсрэгээр) нийлүүлдэг. Харамсалтай нь Хөтөч програм нь ерөнхийдөө CSS-тэй нийцэхгүй, олон алдаатай байдаг.

Цэсүүдийг сонгоно уу

Элементүүд дээр болон/эсвэл хэрэгжсэн тохиолдолд <select>Android хувьцааны хөтөч хажуугийн удирдлагыг харуулахгүй . (Дэлгэрэнгүйг 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 демо-г үзээрэй.

Баталгаажуулагчид

In order to provide the best possible experience to old and buggy browsers, Bootstrap uses CSS browser hacks in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren't yet fully standardized, but these are used purely for progressive enhancement.

These validation warnings don't matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don't interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.

Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of a workaround for a certain Firefox bug.

Third party support

While we don't officially support any third party plugins or add-ons, we do offer some useful advice to help avoid potential issues in your projects.

Box-sizing

Some third party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to * { box-sizing: border-box; }, a rule which makes it so padding does not affect the final computed width of an element. Learn more about box model and sizing at CSS Tricks.

Depending on the context, you may override as-needed (Option 1) or reset the box-sizing for entire regions (Option 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();
}

Accessibility

Bootstrap follows common web standards and—with minimal extra effort—can be used to create sites that are accessible to those using AT.

Skip navigation

If your navigation contains many links and comes before the main content in the DOM, add a Skip to main content link before the navigation (for a simple explanation, see this A11Y Project article on skip navigation links). Using the .sr-only class will visually hide the skip link, and the .sr-only-focusable class will ensure that the link becomes visible once focused (for sighted keyboard users).

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

Nested headings

When nesting headings (<h1> - <h6>), your primary document header should be an <h1>. Subsequent headings should make logical use of <h2> - <h6> such that screen readers can construct a table of contents for your pages.

Learn more at HTML CodeSniffer and Penn State's AccessAbility.

Color contrast

Currently, some of the default color combinations available in Bootstrap (such as the various styled button classes, some of the code highlighting colors used for basic code blocks, the .bg-primary contextual background helper class, and the default link color when used on a white background) have a low contrast ratio (below the recommended ratio of 4.5:1). This can cause problems to users with low vision or who are color blind. These default colors may need to be modified to increase their contrast and legibility.

Additional resources

• "HTML Codesniffer" bookmarklet for identifying accessibility issues
• Chrome's Accessibility Developer Tools extension
• Colour Contrast Analyser
• The A11Y Project
• MDN accessibility documentation

License FAQs

Bootstrap is released under the MIT license and is copyright 2016 Twitter. Boiled down to smaller chunks, it can be described with the following conditions.

It requires you to:

• Keep the license and copyright notice included in Bootstrap's CSS and JavaScript files when you use them in your works

It permits you to:

• Freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes
• Use Bootstrap in packages or distributions that you create
• Modify the source code
• Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license

It forbids you to:

• Hold the authors and license owners liable for damages as Bootstrap is provided without warranty
• Hold the creators or copyright holders of Bootstrap liable
• Redistribute any piece of Bootstrap without proper attribution
• Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution
• Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question

It does not require you to:

• Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
• Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)

The full Bootstrap license is located in the project repository for more information.

Translations

Community members have translated Bootstrap's documentation into various languages. None are officially supported and they may not always be up to date.

• Bootstrap 中文文档 (Chinese)
• Bootstrap 3 中文手冊 (Chinese (Traditional))
• Bootstrap på Dansk (Дани)
• Bootstrap en Français (Франц)
• Bootstrap auf Deutsch (Герман)
• Итали (Итали) хэл дээрх ачаалагч
• Bootstrap (Солонгос)
• Bootstrap em Português do Brasil (Бразилийн португал хэл)
• Bootstrap по-русски (Орос)
• Bootstrap en Español (Испани)
• Türkçe Bootstrap (Турк)
• Bootstrap українською (Украйн)
• Bootstrap bằng tiếng Việt (Вьетнам)

Бид орчуулгыг зохион байгуулах, зохион байгуулахад тусалдаггүй, зөвхөн орчуулгатай холбож өгдөг.

Шинэ эсвэл илүү сайн орчуулга хийж дуусгасан уу? Үүнийг манай жагсаалтад нэмэхийн тулд татах хүсэлтийг нээнэ үү.