Բեռնել

Bootstrap-ը (ներկայումս v3.4.1) ունի արագ սկսելու մի քանի հեշտ եղանակներ, որոնցից յուրաքանչյուրը գրավում է տարբեր հմտությունների և օգտագործման դեպքերի համար: Կարդացեք՝ տեսնելու համար, թե ինչն է համապատասխանում ձեր կոնկրետ կարիքներին:

jsDelivr

jsDelivr- ի մարդիկ սիրով տրամադրում են CDN աջակցություն Bootstrap-ի CSS-ին և JavaScript-ին: Պարզապես օգտագործեք այս jsDelivr հղումները:

<!-- 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-ի հետ

Կարող եք նաև տեղադրել և կառավարել Bootstrap-ի Less-ը, CSS-ը, JavaScript-ը և տառատեսակները՝ օգտագործելով Bower .

bower install bootstrap

Տեղադրեք npm-ով

Կարող եք նաև տեղադրել Bootstrap՝ օգտագործելով npm .

npm install bootstrap@3

require('bootstrap')կբեռնի Bootstrap-ի բոլոր jQuery պլագինները jQuery օբյեկտի վրա: Մոդուլն bootstrapինքնին ոչինչ չի արտահանում: Դուք կարող եք ձեռքով բեռնել Bootstrap-ի jQuery հավելվածները՝ բեռնելով /js/*.jsֆայլերը փաթեթի վերին մակարդակի գրացուցակի տակ:

Bootstrap-ը package.jsonպարունակում է որոշ լրացուցիչ մետատվյալներ հետևյալ ստեղների ներքո.

• less- ճանապարհ դեպի Bootstrap-ի հիմնական Less source ֆայլը
• style- ճանապարհ դեպի Bootstrap-ի չմինացված CSS, որը նախապես կազմվել է լռելյայն կարգավորումների միջոցով (առանց հարմարեցման)

Տեղադրեք Composer-ի հետ

Կարող եք նաև տեղադրել և կառավարել Bootstrap-ի Less-ը, CSS-ը, JavaScript-ը և տառատեսակները՝ օգտագործելով Composer .

composer require twbs/bootstrap

Less/Sass-ի համար պահանջվում է ավտոմատ նախածանց

Bootstrap-ն օգտագործում է Autoprefixer ՝ CSS վաճառողի նախածանցների հետ գործ ունենալու համար : Եթե ​​դուք 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) հասանելի են որոշ բրաուզերների մշակողների գործիքների հետ օգտագործելու համար: Ներառված են Glyphicons-ի տառատեսակները, ինչպես նաև Bootstrap-ի կամընտիր թեման:

Bootstrap սկզբնական կոդը

Bootstrap-ի սկզբնական կոդի ներբեռնումը ներառում է նախապես կազմված CSS-ը, JavaScript-ը և տառատեսակի ակտիվները, ինչպես նաև Source Less-ը, JavaScript-ը և փաստաթղթերը: Ավելի կոնկրետ, այն ներառում է հետևյալը և ավելին.

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

less/, js/և - fonts/ը մեր CSS, JS և պատկերակների տառատեսակների սկզբնական կոդը են (համապատասխանաբար): Թղթապանակը dist/ներառում է այն ամենը, ինչ նշված է վերևում նախապես կազմված ներբեռնման բաժնում: Թղթապանակը docs/ներառում է մեր փաստաթղթերի և examples/Bootstrap-ի օգտագործման սկզբնական կոդը: Դրանից բացի, ցանկացած այլ ներառված ֆայլ ապահովում է փաթեթների, լիցենզիայի տեղեկատվության և զարգացման աջակցություն:

CSS-ի և JavaScript-ի կազմում

Bootstrap-ն օգտագործում է Grunt- ը իր կառուցման համակարգի համար՝ շրջանակի հետ աշխատելու հարմար մեթոդներով: Դա այն է, թե ինչպես ենք մենք կազմում մեր կոդը, կատարում թեստերը և այլն:

Grunt-ի տեղադրում

Grunt-ը տեղադրելու համար նախ պետք է ներբեռնել և տեղադրել node.js-ը (որը ներառում է npm): npm-ը նշանակում է հանգույցների փաթեթավորված մոդուլներ և հանդիսանում է node.js-ի միջոցով զարգացման կախվածությունները կառավարելու միջոց:

1. Տեղադրեք grunt-cliգլոբալ հետ npm install -g grunt-cli:
2. Նավարկեք դեպի արմատային /bootstrap/գրացուցակ, ապա գործարկեք npm install: npm-ը կանդրադառնա package.jsonֆայլին և ավտոմատ կերպով կտեղադրի այնտեղ թվարկված անհրաժեշտ տեղական կախվածությունները:

Ավարտելուց հետո դուք կկարողանաք գործարկել հրամանի տողից տրամադրված Grunt-ի տարբեր հրամանները:

Հասանելի Grunt հրամաններ

grunt dist(Պարզապես կազմեք CSS և JavaScript)

Վերականգնում է /dist/գրացուցակը կազմված և փոքրացված CSS և JavaScript ֆայլերով: Որպես Bootstrap օգտագործող, սա սովորաբար ձեր ուզած հրամանն է:

grunt watch(Դիտել)

Դիտում է Less սկզբնաղբյուր ֆայլերը և ավտոմատ կերպով վերակոմպիլացնում դրանք CSS-ում, երբ փոփոխություն եք պահում:

grunt test(Գործարկել թեստեր)

Աշխատում է JSHint-ը և գործարկում է QUnit թեստերը իրական բրաուզերներում Karma- ի շնորհիվ :

grunt docs(Կառուցեք և փորձարկեք փաստաթղթերի ակտիվները)

Կառուցում և փորձարկում է CSS, JavaScript և այլ ակտիվներ, որոնք օգտագործվում են փաստաթղթերը լոկալ միջոցով գործարկելիս bundle exec jekyll serve:

grunt(Կառուցեք բացարձակապես ամեն ինչ և կատարեք թեստեր)

Կազմում և փոքրացնում է CSS-ը և JavaScript-ը, կառուցում է փաստաթղթերի վեբկայքը, գործարկում է HTML5 վավերացնողը փաստաթղթերի դեմ, վերականգնում է Customizer-ի ակտիվները և այլն: Պահանջում է Ջեկիլը : Սովորաբար անհրաժեշտ է միայն այն դեպքում, եթե դուք կոտրում եք Bootstrap-ը:

Անսարքությունների վերացում

Եթե ​​​​կախվածությունների տեղադրման կամ Grunt հրամանների գործարկման հետ կապված խնդիրների հանդիպեք, նախ ջնջեք /node_modules/npm-ի կողմից ստեղծված գրացուցակը: Այնուհետև կրկնել npm install:

Հիմնական ձևանմուշ

Սկսեք այս հիմնական HTML ձևանմուշով կամ փոփոխեք այս օրինակները : Հուսով ենք, որ դուք կհարմարեցնեք մեր ձևանմուշներն ու օրինակները՝ հարմարեցնելով դրանք ձեր կարիքներին համապատասխան:

Պատճենեք ստորև բերված HTML-ը, որպեսզի սկսեք աշխատել նվազագույն Bootstrap փաստաթղթի հետ:

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

Օրինակներ

Կառուցեք վերը նշված հիմնական ձևանմուշի վրա՝ Bootstrap-ի բազմաթիվ բաղադրիչներով: Մենք խրախուսում ենք ձեզ հարմարեցնել և հարմարեցնել Bootstrap-ը՝ ձեր անհատական ​​նախագծի կարիքներին համապատասխան:

Ստացեք ստորև բերված յուրաքանչյուր օրինակի սկզբնական կոդը՝ ներբեռնելով Bootstrap պահեստը : Օրինակներ կարելի է գտնել docs/examples/գրացուցակում:

Օգտագործելով շրջանակը

Սկսնակ ձևանմուշ

Ոչինչ, բացի հիմունքներից՝ կազմված CSS և JavaScript կոնտեյների հետ միասին:

Bootstrap թեմա

Ներբեռնեք կամընտիր Bootstrap թեման՝ տեսողականորեն ընդլայնված փորձի համար:

Ցանցեր

Ցանցային դասավորության բազմաթիվ օրինակներ բոլոր չորս մակարդակներով, բնադրում և այլն:

Ջամբոտրոն

Կառուցեք jumbotron-ի շուրջը navbar-ով և որոշ հիմնական ցանցային սյուներով:

Նեղ ջամբոտրոն

Կառուցեք ավելի հարմարեցված էջ՝ նեղացնելով լռելյայն կոնտեյները և jumbotron-ը:

Navbars գործողության մեջ

Navbar

Սուպեր հիմնական ձևանմուշ, որը ներառում է նավագոտի և որոշ լրացուցիչ բովանդակություն:

Ստատիկ վերին նավարկիչ

Սուպեր հիմնական ձևանմուշ՝ ստատիկ վերին նավագոտով և որոշ լրացուցիչ բովանդակությամբ:

Ֆիքսված նավարկղ

Սուպեր հիմնական ձևանմուշը ֆիքսված վերին նավագոտով և որոշ լրացուցիչ բովանդակությամբ:

Պատվերով բաղադրիչներ

Ծածկույթ

Պարզ և գեղեցիկ գլխավոր էջեր կառուցելու մեկ էջանոց ձևանմուշ:

Կարուսել

Անհատականացրեք navbar-ը և կարուսելը, այնուհետև ավելացրեք որոշ նոր բաղադրիչներ:

Բլոգ

Պարզ երկսյունակ բլոգի դասավորություն՝ հատուկ նավարկմամբ, վերնագրով և տիպով:

Վահանակ

Հիմնական կառուցվածքը ադմինիստրատորի վահանակի համար՝ ֆիքսված կողագոտով և նավագոտով:

Մուտք գործելու էջ

Հատուկ ձևի դասավորություն և ձևավորում՝ ձևի պարզ նշանի համար:

Արդարացված nav

Ստեղծեք մաքսային նավարկիչ՝ հիմնավորված հղումներով: Գլուխը վեր Ոչ շատ Safari ընկերական:

Կպչուն ստորագիր

Կցեք ստորագիր դիտակետի ներքևի մասում, երբ բովանդակությունը դրանից կարճ է:

Կպչուն ստորագիր՝ navbar-ով

Տեսադաշտի ներքևի մասում ամրացրեք ստորագիր՝ վերևում ֆիքսված նավագոտով:

Փորձարկումներ

Չպատասխանող Bootstrap

Հեշտությամբ անջատեք Bootstrap-ի արձագանքումը մեր փաստաթղթերի համաձայն :

Կտավից դուրս

Կառուցեք անջատվող նավարկության ընտրացանկ՝ Bootstrap-ով օգտագործելու համար:

Գործիքներ

Bootlint

Bootlint- ը պաշտոնական Bootstrap HTML linter գործիքն է: Այն ավտոմատ կերպով ստուգում է մի քանի սովորական HTML սխալներ այն վեբէջերում, որոնք օգտագործում են Bootstrap-ը բավականին «վանիլային» եղանակով: Vanilla Bootstrap-ի բաղադրիչները/վիջեթները պահանջում են, որ DOM-ի իրենց մասերը համապատասխանեն որոշակի կառուցվածքներին: Bootlint-ը ստուգում է, որ Bootstrap-ի բաղադրիչների օրինակները ունեն ճիշտ կառուցվածքային HTML: Մտածեք ավելացնել Bootlint-ը ձեր Bootstrap վեբ մշակման գործիքների շղթայում, որպեսզի սովորական սխալներից ոչ մեկը չդանդաղեցնի ձեր նախագծի զարգացումը:

Համայնք

Եղեք արդիական Bootstrap-ի զարգացման մասին և կապվեք համայնքի հետ այս օգտակար ռեսուրսների միջոցով:

• Կարդացեք և բաժանորդագրվեք The Official Bootstrap բլոգին :
• Զրուցեք ընկերների հետ Bootstrapper-ի հետ՝ օգտագործելով IRC irc.freenode.netսերվերում, ##bootstrap ալիքում :
• Bootstrap-ի օգտագործման օգնության համար հարցրեք StackOverflow-ում՝ օգտագործելով պիտակըtwitter-bootstrap-3 :
• Ծրագրավորողները պետք է օգտագործեն բանալի բառը bootstrapփաթեթների վրա, որոնք փոփոխում կամ ավելացնում են Bootstrap-ի ֆունկցիոնալությունը npm-ի կամ նմանատիպ առաքման մեխանիզմների միջոցով տարածելիս՝ առավելագույն հայտնաբերման համար:
• Bootstrap Expo- ում գտեք Bootstrap-ով կառուցվող մարդկանց ոգեշնչող օրինակներ :

Դուք կարող եք նաև հետևել @getbootstrap-ին Twitter-ում ՝ վերջին բամբասանքների և հիանալի երաժշտական ​​տեսահոլովակների համար:

Արձագանքման անջատում

Bootstrap-ը ավտոմատ կերպով հարմարեցնում է ձեր էջերը էկրանի տարբեր չափերի համար: Ահա, թե ինչպես կարելի է անջատել այս հնարավորությունը, որպեսզի ձեր էջն աշխատի այս չպատասխանող օրինակի պես :

Էջի արձագանքման անջատման քայլեր

1. Բաց թողեք CSS փաստաթղթերում<meta> նշված տեսադաշտը
2. Անտեսեք յուրաքանչյուր ցանցի մակարդակի widthվրա .containerմեկ լայնությամբ, օրինակ. width: 970px !important;Համոզվեք, որ սա գալիս է լռելյայն Bootstrap CSS-ից հետո: Դուք կարող եք կամայականորեն խուսափել !importantլրատվամիջոցների հարցումներից կամ որոշ ընտրիչ-fu-ից:
3. Եթե ​​օգտագործում եք նավագոտիներ, հեռացրեք նավագոտի փլուզվող և ընդլայնվող բոլոր վարքագիծը:
4. Ցանցային դասավորությունների համար օգտագործեք .col-xs-*դասեր՝ ի լրումն միջին/մեծ դասավորությունների կամ դրանց փոխարեն: Մի անհանգստացեք, չափազանց փոքր սարքի ցանցը չափվում է բոլոր լուծումներով:

Ձեզ դեռ պետք է Respond.js-ը IE8-ի համար (քանի որ մեր լրատվամիջոցների հարցումները դեռ կան և պետք է մշակվեն): Սա անջատում է Bootstrap-ի «բջջային կայքի» ասպեկտները:

Bootstrap ձևանմուշ՝ արձագանքողությունն անջատված է

Մենք կիրառել ենք այս քայլերը օրինակի համար: Կարդացեք դրա սկզբնական կոդը՝ կատարված կոնկրետ փոփոխությունները տեսնելու համար:

Դիտեք չպատասխանող օրինակ

Բրաուզերի և սարքի աջակցություն

Bootstrap-ը ստեղծվել է աշխատասեղանի և շարժական վերջին բրաուզերներում լավագույնս աշխատելու համար, ինչը նշանակում է, որ ավելի հին բրաուզերները կարող են ցուցադրել որոշակի բաղադրիչների այլ ոճով, թեև լիովին ֆունկցիոնալ պատկերներ:

Աջակցվող բրաուզերներ

Մասնավորապես, մենք աջակցում ենք հետևյալ բրաուզերների և հարթակների վերջին տարբերակները :

Այլընտրանքային բրաուզերները, որոնք օգտագործում են WebKit-ի, Blink-ի կամ Gecko-ի վերջին տարբերակը՝ ուղղակիորեն կամ հարթակի վեբ դիտման API-ի միջոցով, հստակորեն չեն աջակցվում: Այնուամենայնիվ, Bootstrap-ը (շատ դեպքերում) պետք է ցուցադրի և ճիշտ գործի նաև այս բրաուզերներում: Աջակցության ավելի կոնկրետ տեղեկատվությունը տրված է ստորև:

Շարժական սարքեր

Ընդհանուր առմամբ, Bootstrap-ն աջակցում է յուրաքանչյուր հիմնական հարթակի լռելյայն բրաուզերների վերջին տարբերակները: Նկատի ունեցեք, որ պրոքսի բրաուզերները (օրինակ՝ Opera Mini, Opera Mobile's Turbo ռեժիմ, UC Browser Mini, Amazon Silk) չեն աջակցվում:

Սեղանի բրաուզերներ

Նմանապես, աշխատասեղանի բրաուզերների մեծ մասի վերջին տարբերակներն ապահովված են:

Windows-ում մենք աջակցում ենք Internet Explorer 8-11 -ին :

Firefox-ի համար, ի լրումն վերջին նորմալ կայուն թողարկման, մենք նաև աջակցում ենք Firefox-ի վերջին Extended Support Release (ESR) տարբերակը:

Ոչ պաշտոնապես, Bootstrap-ը պետք է բավականաչափ լավ տեսք ունենա և իրեն պահի Chromium-ում և Chrome-ում Linux-ի համար, Firefox-ում 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

Զգուշացեք հետևյալ զգուշացումներից՝ Respond.js-ն օգտագործելիս Internet Explorer 8-ի մշակման և արտադրության միջավայրում:

Respond.js և միջդոմենային CSS

Respond.js-ի օգտագործումը CSS-ով, որը տեղակայված է այլ (ենթա)տիրույթում (օրինակ՝ CDN-ում) պահանջում է որոշակի լրացուցիչ կարգավորում: Մանրամասների համար տես Respond.js-ի փաստաթղթերը :

Respond.js ևfile://

Բրաուզերի անվտանգության կանոնների պատճառով Respond.js-ը չի աշխատում file://արձանագրության միջոցով դիտված էջերի հետ (ինչպես տեղական HTML ֆայլ բացելիս): IE8-ում արձագանքող գործառույթները փորձարկելու համար դիտեք ձեր էջերը HTTP(S) միջոցով: Մանրամասների համար տես Respond.js-ի փաստաթղթերը :

Respond.js և@import

Respond.js-ը չի աշխատում CSS-ի հետ, որը հղում է կատարվում @import. Մասնավորապես, հայտնի է, որ Drupal-ի որոշ կոնֆիգուրացիաներ օգտագործում են @import. Մանրամասների համար տես Respond.js-ի փաստաթղթերը :

Internet Explorer 8 և տուփի չափսեր

IE8-ը լիովին չի աջակցում box-sizing: border-box;, երբ համակցվում է min-width, max-width, min-heightկամ max-height. Այդ պատճառով, v3.0.1-ի դրությամբ մենք այլևս չենք օգտագործում max-widths .container.

Internet Explorer 8 և @font-face

IE8-ը որոշ խնդիրներ ունի, @font-faceերբ համակցվում է :before. Bootstrap-ն օգտագործում է այդ համադրությունն իր Glyphicons-ի հետ: Եթե ​​էջը պահվում է քեշում և բեռնվում առանց մկնիկի պատուհանի վրա (այսինքն՝ սեղմեք թարմացման կոճակը կամ ինչ-որ բան բեռնեք iframe-ում), ապա էջը ցուցադրվում է նախքան տառատեսակի բեռնումը: Էջի (մարմինի) վրայով սավառնելը ցույց կտա որոշ պատկերակներ, իսկ մնացած պատկերակների վրա սավառնելը ցույց կտա նաև դրանք: Մանրամասների համար տես թիվ 13863 թողարկումը :

IE Համատեղելիության ռեժիմներ

Bootstrap-ը չի աջակցվում հին Internet Explorer-ի համատեղելիության ռեժիմներում: Համոզվելու համար, որ օգտագործում եք IE-ի վերջին մատուցման ռեժիմը, մտածեք <meta>ձեր էջերում համապատասխան պիտակ ներառելու համար.

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

Հաստատեք փաստաթղթի ռեժիմը՝ բացելով վրիպազերծման գործիքները. սեղմեք F12և ստուգեք «Փաստաթղթի ռեժիմը»:

Այս թեգը ներառված է Bootstrap-ի բոլոր փաստաթղթերում և օրինակներում, որպեսզի ապահովի Internet Explorer-ի յուրաքանչյուր աջակցվող տարբերակի լավագույն ցուցադրումը:

Լրացուցիչ տեղեկությունների համար տե՛ս StackOverflow-ի այս հարցը :

Internet Explorer 10-ը Windows 8-ում և Windows Phone 8-ում

Internet Explorer 10-ը չի տարբերում սարքի լայնությունը տեսադաշտի լայնությունից և , հետևաբար, պատշաճ կերպով չի կիրառում մեդիա հարցումները Bootstrap-ի CSS-ում: Սովորաբար դուք պարզապես կավելացնեիք CSS-ի արագ հատված՝ սա շտկելու համար.

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

Այնուամենայնիվ, սա չի աշխատում Windows Phone 8-ի թարմացում 3 -ից ավելի հին տարբերակներով աշխատող սարքերի համար , քանի որ այն ստիպում է նման սարքերին ցուցադրել հիմնականում աշխատասեղանի տեսքը նեղ «հեռախոսի» փոխարեն: Այս խնդիրը լուծելու համար դուք պետք է ներառեք հետևյալ CSS-ը և JavaScript-ը՝ վրիպակը վերացնելու համար :

@-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)
}

Լրացուցիչ տեղեկությունների և օգտագործման ուղեցույցների համար կարդացեք Windows Phone 8 և Device-Width :

Որպես սկզբում, մենք սա ներառում ենք Bootstrap-ի բոլոր փաստաթղթերում և օրինակներում որպես ցուցադրություն:

Safari տոկոսի կլորացում

Safari-ի մինչև v7.1-ը OS X-ի և Safari-ի iOS v8.0-ի տարբերակների վերարտադրման շարժիչը որոշ խնդիրներ ուներ մեր .col-*-1ցանցային դասերում օգտագործվող տասնորդական տեղերի քանակի հետ: Այսպիսով, եթե ունեիք 12 առանձին ցանցային սյունակներ, ապա կնկատեիք, որ դրանք կարճ են՝ համեմատած սյունակների այլ տողերի հետ: Բացի Safari/iOS-ի արդիականացումից, դուք ունեք լուծումների որոշ տարբերակներ.

• Ավելացրեք .pull-rightձեր վերջին ցանցի սյունակին՝ կոշտ աջ հավասարեցումը ստանալու համար
• Ձեռքով կարգավորեք ձեր տոկոսները՝ Safari-ի համար կատարյալ կլորացում ստանալու համար (ավելի դժվար, քան առաջին տարբերակը)

Մոդալներ, navbars և վիրտուալ ստեղնաշարեր

Հորդառատ և ոլորում

Տարրերի աջակցությունը բավականին սահմանափակ է iOS-ում և Android-ում overflow: hidden: <body>Այդ նպատակով, երբ դուք ոլորեք մոդալի վերևի կամ ներքևի կողքով այդ սարքերից որևէ մեկի բրաուզերում, <body>բովանդակությունը կսկսի ոլորվել: Տե՛ս Chrome-ի թիվ 175502 սխալը (շտկվել է Chrome v40-ում) և WebKit սխալը՝ #153852 :

iOS տեքստային դաշտեր և ոլորում

iOS 9.3-ի դրությամբ, երբ մոդալը բաց է, եթե պտտվող ժեստի սկզբնական հպումը գտնվում է տեքստի <input>կամ a- ի սահմաններում <textarea>, մոդալի <body>տակի բովանդակությունը պտտվելու է հենց մոդալի փոխարեն: Տես WebKit սխալ #153856 :

Վիրտուալ ստեղնաշարեր

Նաև նկատի ունեցեք, որ եթե դուք օգտագործում եք ֆիքսված նավագոտի կամ օգտագործում եք մուտքագրումներ մոդալում, iOS-ն ունի մատուցման սխալ, որը չի թարմացնում ֆիքսված տարրերի դիրքը, երբ վիրտուալ ստեղնաշարը գործարկվում է: Դրա համար մի քանի լուծումներ ներառում են ձեր տարրերի փոխակերպումը position: absoluteկամ կենտրոնացման ժամանակաչափի կանչը, որպեսզի փորձեք ձեռքով շտկել դիրքը: Սա չի կարգավորվում Bootstrap-ի կողմից, ուստի ձեզնից է կախված, թե որ լուծումն է լավագույնը ձեր հավելվածի համար:

Navbar dropdowns

Տարրը .dropdown-backdropչի օգտագործվում iOS-ում նավի մեջ՝ z-ինդեքսավորման բարդության պատճառով: Այսպիսով, navbars-ում բացվող ցանկերը փակելու համար դուք պետք է ուղղակիորեն սեղմեք բացվող տարրը (կամ որևէ այլ տարր, որը կգործարկի սեղմման իրադարձություն iOS-ում ):

Բրաուզերի խոշորացում

Էջի խոշորացումն անխուսափելիորեն ներկայացնում է որոշ բաղադրիչների արտեֆակտներ, ինչպես Bootstrap-ում, այնպես էլ համացանցի մնացած մասում: Կախված խնդրից, մենք կարող ենք շտկել այն (նախ որոնեք, իսկ անհրաժեշտության դեպքում բացեք խնդիրը): Այնուամենայնիվ, մենք հակված ենք անտեսել դրանք, քանի որ դրանք հաճախ այլ ուղղակի լուծում չունեն, քան հաքերային լուծումները:

Կպչուն :hover/ :focusբջջայինով

Թեև սենսորային էկրանների մեծ մասում իրական սավառնելը հնարավոր չէ, բջջային բրաուզերների մեծ մասը նմանակում է սավառնող աջակցությանը և դարձնում :hover«կպչուն»: Այլ կերպ ասած, :hoverոճերը սկսում են կիրառվել տարրը հպելուց հետո և դադարում են կիրառել միայն այն բանից հետո, երբ օգտվողը կտտացնում է որևէ այլ տարր: Սա կարող է պատճառ դառնալ, որ Bootstrap-ի :hoverվիճակները անցանկալիորեն «կպչեն» նման բրաուզերների վրա: Որոշ բջջային բրաուզերներ նույնպես :focusնմանապես կպչուն են դարձնում: Ներկայումս այս խնդիրների համար չկա պարզ լուծում, բացի նման ոճերը ամբողջությամբ հեռացնելուց:

Տպագրություն

Նույնիսկ որոշ ժամանակակից բրաուզերներում տպագրությունը կարող է տարօրինակ լինել:

Մասնավորապես, Chrome v32-ի դրությամբ և անկախ լուսանցքի կարգավորումներից, Chrome-ն օգտագործում է տեսադաշտի լայնությունը զգալիորեն ավելի նեղ, քան ֆիզիկական թղթի չափսը՝ վեբ էջ տպելիս լրատվամիջոցների հարցումները լուծելիս: Սա կարող է հանգեցնել նրան, որ Bootstrap-ի չափազանց փոքր ցանցը տպագրելիս անսպասելիորեն ակտիվանում է: Որոշ մանրամասների համար տե՛ս թողարկումը #12078 և Chrome bug #273306 : Առաջարկվող լուծումներ.

• Ընդգրկեք չափազանց փոքր ցանցը և համոզվեք, որ ձեր էջը ընդունելի տեսք ունի դրա տակ:
• Անհատականացրեք Less փոփոխականների արժեքները, @screen-*որպեսզի ձեր տպիչի թուղթը համարվի ավելի մեծ, քան չափազանց փոքր:
• Ավելացրեք հատուկ մեդիա հարցումներ՝ միայն տպագիր մեդիայի համար ցանցի չափի բեկման կետերը փոխելու համար:

Բացի այդ, Safari v8.0-ի դրությամբ, ֆիքսված լայնությամբ .containers-երը կարող են պատճառ դառնալ, որ Safari-ն տպելիս օգտագործի անսովոր փոքր տառաչափ: Լրացուցիչ մանրամասների համար տես #14868 և WebKit սխալ #138192 : Դրա համար հնարավոր լուծումներից մեկը հետևյալ CSS-ի ավելացումն է.

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

Android ֆոնդային բրաուզեր

Android 4.1-ը (և նույնիսկ որոշ նոր թողարկումներ, ըստ երևույթին) առաքվում է Browser հավելվածով որպես ընտրված լռելյայն վեբ դիտարկիչ (ի տարբերություն Chrome-ի): Ցավոք, Browser հավելվածն ունի բազմաթիվ սխալներ և անհամապատասխանություններ ընդհանուր առմամբ CSS-ի հետ:

Ընտրեք ընտրացանկերը

Տարրերի վրա <select>Android ֆոնդային զննարկիչը չի ցուցադրի կողային հսկիչները, եթե կա border-radiusև/կամ borderկիրառվում է: (Մանրամասների համար տե՛ս այս StackOverflow հարցը :) Օգտագործեք ստորև բերված կոդի հատվածը՝ վիրավորական CSS-ը հեռացնելու և այն ներկայացնելու համար:<select> Android ֆոնդային բրաուզերի վրա որպես չոճավորված տարր վերածելու համար: Օգտվողի գործակալի հոտը խուսափում է Chrome, Safari և Mozilla բրաուզերների միջամտությունից:

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

Ցանկանու՞մ եք օրինակ տեսնել: Ստուգեք այս JS Bin ցուցադրությունը:

Վավերացնողներ

Հին և խելագարված բրաուզերներին լավագույն հնարավոր փորձը ապահովելու համար Bootstrap-ն օգտագործում է CSS բրաուզերի հաքեր ՝ հատուկ CSS-ին թիրախավորելու բրաուզերի որոշակի տարբերակների համար, որպեսզի շտկվի բրաուզերների սխալները: Այս հաքերները հասկանալի է, որ CSS վավերացնողները բողոքում են, որ դրանք անվավեր են: Մի քանի վայրերում մենք նաև օգտագործում ենք արյունահոսող CSS գործառույթներ, որոնք դեռ լիովին ստանդարտացված չեն, բայց դրանք օգտագործվում են զուտ առաջադեմ բարելավման համար:

Այս վավերացման նախազգուշացումները գործնականում նշանակություն չունեն, քանի որ մեր CSS-ի ոչ հաքերային հատվածը լիովին վավերացվում է, և հաքի հատվածները չեն խանգարում ոչ հաքերային հատվածի պատշաճ աշխատանքին, հետևաբար ինչու ենք մենք միտումնավոր անտեսում այս հատուկ նախազգուշացումները:

Մեր HTML փաստաթղթերը նույնպես ունեն որոշ չնչին և անհետևանք HTML-ի վավերացման նախազգուշացումներ՝ կապված Firefox-ի որոշակի վրիպակի լուծումների ընդգրկման հետ :

Երրորդ կողմի աջակցություն

Թեև մենք պաշտոնապես չենք աջակցում որևէ երրորդ կողմի պլագիններին կամ հավելումներին, մենք առաջարկում ենք որոշ օգտակար խորհուրդներ, որոնք կօգնեն խուսափել ձեր նախագծերում հնարավոր խնդիրներից:

Տուփի չափսեր

Երրորդ կողմի որոշ ծրագրեր, այդ թվում՝ 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 Project հոդվածը՝ բաց թողնել նավիգացիոն հղումները ): Դասի օգտագործումը .sr-onlyտեսողականորեն կթաքցնի բաց թողնելու հղումը, և .sr-only-focusableդասը կապահովի, որ հղումը տեսանելի դառնա կենտրոնանալուց հետո (տեսողությամբ ստեղնաշար օգտագործողների համար):

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

Ներդրված վերնագրեր

Երբ տեղադրվում են վերնագրեր ( <h1>- <h6>), ձեր հիմնական փաստաթղթի վերնագիրը պետք է լինի <h1>. Հետագա վերնագրերը պետք է տրամաբանական օգտագործեն, <h2>որպեսզի <h6>էկրանի ընթերցողները կարողանան կառուցել բովանդակության աղյուսակ ձեր էջերի համար:

Իմացեք ավելին HTML CodeSniffer-ում և Penn State's AccessAbility-ում :

Գույնի հակադրություն

Ներկայումս Bootstrap-ում առկա են լռելյայն գունային համակցություններից մի քանիսը (օրինակ՝ կոճակների տարբեր դասեր, կոդի հիմնական բլոկների համար օգտագործվող կոդի ընդգծող գույները , .bg-primary համատեքստային ֆոնի օգնական դասը և հղման լռելյայն գույնը, երբ օգտագործվում է սպիտակ ֆոնի վրա) ունեն հակադրության ցածր հարաբերակցություն ( առաջարկվող 4,5:1 հարաբերակցությունից ցածր ): Սա կարող է խնդիրներ առաջացնել ցածր տեսողություն ունեցող կամ դալտոնիկ ունեցող օգտատերերի համար: Այս լռելյայն գույները կարող են փոփոխման կարիք ունենալ՝ դրանց հակադրությունն ու ընթեռնելիությունը մեծացնելու համար:

Լրացուցիչ ռեսուրսներ

• «HTML Codesniffer» էջանիշ՝ մատչելիության խնդիրները բացահայտելու համար
• Chrome-ի Accessibility Developer Tools-ի ընդլայնում
• Գույնի հակադրության անալիզատոր
• A11Y նախագիծը
• MDN հասանելիության փաստաթղթեր

Լիցենզիա ՀՏՀ

Bootstrap-ը թողարկվում է MIT լիցենզիայի ներքո և 2019 թվականի Twitter-ի հեղինակային իրավունքով: Եփած ավելի փոքր կտորների, այն կարելի է նկարագրել հետևյալ պայմաններով.

Այն պահանջում է ձեզանից՝

• Պահպանեք լիցենզիայի և հեղինակային իրավունքի մասին ծանուցումը ներառված Bootstrap-ի CSS և JavaScript ֆայլերում, երբ դրանք օգտագործում եք ձեր աշխատանքներում:

Այն թույլ է տալիս.

• Ազատորեն ներբեռնեք և օգտագործեք Bootstrap-ը, ամբողջությամբ կամ մասնակի, անձնական, մասնավոր, ընկերության ներքին կամ առևտրային նպատակներով
• Օգտագործեք Bootstrap ձեր ստեղծած փաթեթներում կամ բաշխումներում
• Փոփոխեք աղբյուրի կոդը
• Տրամադրել ենթալիցենզիա Bootstrap-ը փոփոխելու և բաշխելու համար լիցենզիայում չընդգրկված երրորդ անձանց

Այն ձեզ արգելում է.

• Հեղինակներին և լիցենզիայի սեփականատերերին պատասխանատվություն կրեք վնասների համար, քանի որ Bootstrap-ը տրամադրվում է առանց երաշխիքի
• Պատասխանատվություն կրեք Bootstrap-ի ստեղծողներին կամ հեղինակային իրավունքի սեփականատերերին
• Վերաբաշխեք Bootstrap-ի ցանկացած կտոր առանց համապատասխան վերագրման
• Օգտագործեք Twitter-ին պատկանող ցանկացած նշան, որը կարող է նշել կամ ենթադրել, որ Twitter-ը հավանություն է տալիս ձեր բաշխմանը
• Օգտագործեք Twitter-ին պատկանող ցանկացած նշան, որը կարող է նշել կամ ենթադրել, որ դուք ստեղծել եք տվյալ Twitter ծրագրաշարը

Դա ձեզանից չի պահանջում.

• Ներառեք բուն Bootstrap-ի աղբյուրը կամ ցանկացած փոփոխություն, որը դուք կարող եք կատարել դրանում, ցանկացած վերաբաշխման մեջ, որը կարող եք հավաքել, որը ներառում է այն:
• Ուղարկեք Bootstrap-ում ձեր կատարած փոփոխությունները ետ Bootstrap նախագծին (չնայած նման կարծիքը խրախուսվում է)

Լրացուցիչ տեղեկությունների համար Bootstrap լիցենզիան գտնվում է նախագծի պահեստում :

Թարգմանություններ

Համայնքի անդամները թարգմանել են Bootstrap-ի փաստաթղթերը տարբեր լեզուներով: Ոչ մեկը պաշտոնապես չի աջակցվում, և դրանք միշտ չէ, որ արդիական են:

• Bootstrap 中文文档 (չինարեն)
• Bootstrap 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 (վիետնամերեն)

Մենք չենք օգնում կազմակերպել կամ ընդունել թարգմանությունները, մենք պարզապես հղում ենք անում դրանց:

Ավարտե՞լ եք նոր կամ ավելի լավ թարգմանություն: Բացեք ձգման հարցում՝ այն մեր ցուցակում ավելացնելու համար: