Pakua

Bootstrap (kwa sasa ni v3.4.1) ina njia chache rahisi za kuanza kwa haraka, kila moja ikivutia kiwango tofauti cha ustadi na matumizi. Soma ili kuona kile kinachofaa mahitaji yako maalum.

jsDelivr

Watu walioko jsDelivr kwa neema hutoa usaidizi wa CDN kwa CSS ya Bootstrap na JavaScript. Tumia tu viungo hivi vya 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>

Sakinisha na Bower

Unaweza pia kusakinisha na kudhibiti Bootstrap's Less, CSS, JavaScript, na fonti kwa kutumia Bower :

bower install bootstrap

Sakinisha na npm

Unaweza pia kusakinisha Bootstrap kwa kutumia npm :

npm install bootstrap@3

require('bootstrap')itapakia programu-jalizi zote za jQuery za Bootstrap kwenye kitu cha jQuery. Moduli bootstrapyenyewe haihamishi chochote. Unaweza kupakia kiotomatiki programu jalizi za jQuery za Bootstrap kibinafsi kwa kupakia /js/*.jsfaili chini ya saraka ya kiwango cha juu cha kifurushi.

Bootstrap's package.jsonina metadata ya ziada chini ya funguo zifuatazo:

• less- njia ya faili kuu ya Chanzo cha Bootstrap
• style- njia ya CSS isiyo na minified ya Bootstrap ambayo imeandaliwa kwa kutumia mipangilio chaguo-msingi (hakuna ubinafsishaji)

Sakinisha ukitumia Mtunzi

Unaweza pia kusakinisha na kudhibiti Bootstrap's Less, CSS, JavaScript, na fonti kwa kutumia Composer :

composer require twbs/bootstrap

Kiambishi kiambishi kiotomatiki kinahitajika kwa Less/Sass

Bootstrap hutumia Autoprefixer kushughulikia viambishi awali vya wachuuzi wa CSS . Ikiwa unatayarisha Bootstrap kutoka chanzo chake cha Chini/Sass na hutumii Gruntfile yetu, utahitaji kujumuisha Kiambishi Kiotomatiki katika mchakato wako wa uundaji wewe mwenyewe. Ikiwa unatumia Bootstrap iliyokusanywa mapema au unatumia Gruntfile yetu, huna haja ya kuwa na wasiwasi kuhusu hili kwa sababu Autoprefixer tayari imeunganishwa kwenye Gruntfile yetu.

Ni nini kimejumuishwa

Bootstrap inaweza kupakuliwa katika aina mbili, ambayo utapata saraka na faili zifuatazo, zikiweka rasilimali za kawaida katika vikundi na kutoa tofauti zilizokusanywa na zilizopunguzwa.

Bootstrap iliyokusanywa mapema

Mara baada ya kupakuliwa, fungua folda iliyobanwa ili kuona muundo wa (iliyokusanywa) Bootstrap. Utaona kitu kama hiki:

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

Hii ndiyo aina ya msingi zaidi ya Bootstrap: faili zilizokusanywa awali kwa matumizi ya haraka ya kudondosha katika takriban mradi wowote wa wavuti. Tunatoa CSS na JS ( bootstrap.*) zilizokusanywa, pamoja na CSS na JS ( bootstrap.min.*). Ramani chanzo cha CSS ( bootstrap.*.map) zinapatikana kwa matumizi na zana za wasanidi wa vivinjari fulani. Fonti kutoka Glyphicons ni pamoja na, kama ni hiari Bootstrap mandhari.

Msimbo wa chanzo wa Bootstrap

Upakuaji wa msimbo wa chanzo cha Bootstrap ni pamoja na CSS, JavaScript, na vipengee vya fonti vilivyokusanywa awali, pamoja na chanzo Chini, JavaScript, na hati. Hasa zaidi, inajumuisha yafuatayo na zaidi:

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

, less/, js/na fonts/ndio msimbo wa chanzo wa fonti zetu za CSS, JS, na ikoni (mtawalia). Folda dist/inajumuisha kila kitu kilichoorodheshwa katika sehemu ya upakuaji iliyokusanywa hapo juu. Folda docs/inajumuisha msimbo wa chanzo kwa hati zetu, na examples/matumizi ya Bootstrap. Zaidi ya hayo, faili nyingine yoyote iliyojumuishwa hutoa usaidizi kwa vifurushi, maelezo ya leseni, na ukuzaji.

Inakusanya CSS na JavaScript

Bootstrap hutumia Grunt kwa mfumo wake wa ujenzi, na njia rahisi za kufanya kazi na mfumo. Ni jinsi tunavyokusanya nambari zetu, kufanya majaribio, na zaidi.

Inasakinisha Grunt

Ili kusakinisha Grunt, lazima kwanza upakue na usakinishe node.js (ambayo inajumuisha npm). npm inasimama kwa moduli zilizofungashwa za nodi na ni njia ya kudhibiti utegemezi wa maendeleo kupitia node.js.

1. Sakinisha grunt-clikimataifa na npm install -g grunt-cli.
2. /bootstrap/Nenda kwenye saraka ya mizizi , kisha endesha npm install. npm itaangalia package.jsonfaili na kusanikisha kiotomati utegemezi muhimu wa ndani ulioorodheshwa hapo.

Ikikamilika, utaweza kutekeleza amri mbalimbali za Grunt zinazotolewa kutoka kwa safu ya amri.

Amri za Grunt zinazopatikana

grunt dist(Tunga CSS na JavaScript)

Hutengeneza saraka upya /dist/na faili za CSS na JavaScript zilizokusanywa na kupunguzwa. Kama mtumiaji wa Bootstrap, hii kawaida ni amri unayotaka.

grunt watch(Tazama)

Hutazama faili chanzo kidogo na kuzikusanya kiotomatiki kwa CSS kila unapohifadhi mabadiliko.

grunt test(Fanya majaribio)

Huendesha JSHint na huendesha majaribio ya QUnit katika vivinjari halisi shukrani kwa Karma .

grunt docs(Jenga na ujaribu mali ya hati)

Huunda na kufanyia majaribio CSS, JavaScript, na vipengee vingine vinavyotumika wakati wa kuendesha hati ndani ya nchi kupitia bundle exec jekyll serve.

grunt(Jenga kila kitu kabisa na endesha majaribio)

Hukusanya na kupunguza CSS na JavaScript, huunda tovuti ya hati, huendesha kithibitishaji cha HTML5 dhidi ya hati, huzalisha upya vipengee vya Kiteja, na zaidi. Inahitaji Jekyll . Kawaida ni muhimu tu ikiwa unavinjari Bootstrap yenyewe.

Utatuzi wa shida

Ukikutana na matatizo ya kusakinisha vitegemezi au kuendesha amri za Grunt, kwanza futa /node_modules/saraka inayotokana na npm. Kisha, rudia npm install.

Template ya msingi

Anza na kiolezo hiki cha msingi cha HTML, au urekebishe mifano hii . Tunatumahi kuwa utabinafsisha violezo na mifano yetu, ukibadilisha ili kuendana na mahitaji yako.

Nakili HTML hapa chini ili kuanza kufanya kazi na hati ndogo ya 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>

Mifano

Jenga kwenye kiolezo cha msingi hapo juu na vijenzi vingi vya Bootstrap. Tunakuhimiza kubinafsisha na kurekebisha Bootstrap ili kukidhi mahitaji ya mradi wako binafsi.

Pata msimbo wa chanzo kwa kila mfano hapa chini kwa kupakua hazina ya Bootstrap . Mifano inaweza kupatikana katika docs/examples/saraka.

Kwa kutumia mfumo

Kiolezo cha kuanza

Hakuna ila mambo ya msingi: CSS iliyokusanywa na JavaScript pamoja na kontena.

Mandhari ya Bootstrap

Pakia mandhari ya hiari ya Bootstrap kwa matumizi ya mwonekano yaliyoboreshwa.

Gridi

Mifano mingi ya mipangilio ya gridi ya taifa yenye viwango vyote vinne, kuweka kiota na zaidi.

Jumbotron

Jenga kuzunguka jumbotron kwa upau wa urambazaji na safu wima za msingi za gridi.

Jumbotron nyembamba

Unda ukurasa maalum zaidi kwa kupunguza kontena chaguo-msingi na jumbotron.

Navbar zikifanya kazi

Upau wa urambazaji

Kiolezo cha msingi bora ambacho kinajumuisha upau wa urambazaji pamoja na maudhui mengine ya ziada.

Upau wa urambazaji wa juu tuli

Kiolezo bora cha msingi kilicho na upau wa urambazaji wa juu tuli pamoja na maudhui mengine ya ziada.

Upau wa urambazaji usiobadilika

Kiolezo bora cha msingi kilicho na upau wa urambazaji usiobadilika pamoja na maudhui mengine ya ziada.

Vipengee maalum

Jalada

Kiolezo cha ukurasa mmoja cha kujenga kurasa rahisi na nzuri za nyumbani.

Jukwaa

Geuza upau wa urambazaji na jukwa upendavyo, kisha uongeze baadhi ya vipengele vipya.

Blogu

Mpangilio rahisi wa blogu wa safu mbili na urambazaji maalum, kichwa na aina.

Dashibodi

Muundo msingi wa dashibodi ya msimamizi iliyo na utepe na upau wa urambazaji.

Ukurasa wa kuingia

Mpangilio wa fomu maalum na muundo wa ishara rahisi katika fomu.

Haki nav

Unda upau wa urambazaji maalum na viungo vilivyohalalishwa. Vichwa juu! Sio kirafiki sana kwa Safari.

Sehemu ya chini ya ukurasa inayonata

Ambatisha kijachini chini ya kituo cha kutazama wakati maudhui ni mafupi kuliko hayo.

Kijachini kinachonata chenye upau wa urambazaji

Ambatisha kijachini chini ya kituo cha kutazama na upau wa urambazaji usiobadilika juu.

Majaribio

Bootstrap isiyojibu

Lemaza kwa urahisi uitikiaji wa Bootstrap kwa kila hati zetu .

Nje ya turubai

Unda menyu ya kusogeza ya nje ya turubai inayoweza kugeuzwa kwa matumizi na Bootstrap.

Zana

Bootlint

Bootlint ni zana rasmi ya Bootstrap HTML ya linter . Hukagua kiotomatiki makosa kadhaa ya kawaida ya HTML katika kurasa za wavuti zinazotumia Bootstrap kwa njia ya "vanilla". Vipengee/wijeti za Vanilla Bootstrap zinahitaji sehemu zao za DOM kuendana na miundo fulani. Bootlint hukagua kuwa visa vya vijenzi vya Bootstrap vina HTML iliyopangwa kwa usahihi. Fikiria kuongeza Bootlint kwenye mnyororo wako wa zana za ukuzaji wa wavuti wa Bootstrap ili kusiwe na makosa ya kawaida kupunguza kasi ya maendeleo ya mradi wako.

Jumuiya

Pata habari kuhusu uundaji wa Bootstrap na ufikie jamii ukitumia nyenzo hizi muhimu.

• Soma na ujiandikishe kwa Blogu Rasmi ya Bootstrap .
• Piga gumzo na Wachezaji Bootstrap wenzako kwa kutumia IRC kwenye irc.freenode.netseva, katika ##bootstrap chaneli .
• Kwa usaidizi wa kutumia Bootstrap, uliza kwenye StackOverflow ukitumia lebotwitter-bootstrap-3 .
• Wasanidi programu wanapaswa kutumia nenomsingi bootstrapkwenye vifurushi vinavyorekebisha au kuongeza utendakazi wa Bootstrap wakati wa kusambaza kupitia npm au njia sawa za uwasilishaji kwa ugunduzi wa juu zaidi.
• Pata mifano ya kuvutia ya watu wanaojenga na Bootstrap kwenye Maonyesho ya Bootstrap .

Unaweza pia kufuata @getbootstrap kwenye Twitter kwa uvumi mpya na video za muziki za kupendeza.

Inalemaza mwitikio

Bootstrap hubadilisha kiotomati kurasa zako kwa saizi tofauti za skrini. Hivi ndivyo unavyoweza kuzima kipengele hiki ili ukurasa wako ufanye kazi kama mfano huu usio na majibu .

Hatua za kuzima mwitikio wa ukurasa

1. Acha tovuti ya kutazama <meta>iliyotajwa kwenye hati za CSS
2. Batilisha widthkwa .containerkila daraja la gridi kwa upana mmoja, kwa mfano width: 970px !important;Hakikisha kuwa hii inakuja baada ya CSS chaguo-msingi ya Bootstrap. Unaweza kuepuka kwa hiari !importantna maswali ya midia au kichaguzi-fu.
3. Ikiwa unatumia pau za urambazaji, ondoa upau wa urambazaji wote unaoanguka na upanuzi wa tabia.
4. Kwa mipangilio ya gridi ya taifa, tumia .col-xs-*madarasa pamoja na, au badala ya yale ya kati/kubwa. Usijali, gridi ya kifaa kidogo zaidi hulingana na maazimio yote.

Bado utahitaji Respond.js kwa IE8 (kwa kuwa hoja zetu za media bado zipo na zinahitaji kushughulikiwa). Hii inazima vipengele vya "tovuti ya rununu" ya Bootstrap.

Kiolezo cha Bootstrap na uitikiaji umezimwa

Tumetumia hatua hizi kwa mfano. Soma msimbo wake wa chanzo ili kuona mabadiliko maalum yanayotekelezwa.

Tazama mfano usiojibu

Usaidizi wa kivinjari na kifaa

Bootstrap imeundwa kufanya kazi vizuri zaidi katika vivinjari vya hivi punde vya eneo-kazi na simu, ikimaanisha kuwa vivinjari vya zamani vinaweza kuonyesha muundo tofauti, ingawa hufanya kazi kikamilifu, uwasilishaji wa vipengee fulani.

Vivinjari vinavyotumika

Hasa, tunaauni matoleo mapya zaidi ya vivinjari na mifumo ifuatayo.

Vivinjari mbadala vinavyotumia toleo jipya zaidi la WebKit, Blink, au Gecko, iwe moja kwa moja au kupitia API ya mwonekano wa wavuti ya jukwaa, havitumiki kwa uwazi. Walakini, Bootstrap inapaswa (katika hali nyingi) kuonyesha na kufanya kazi ipasavyo katika vivinjari hivi pia. Taarifa maalum zaidi za usaidizi zimetolewa hapa chini.

Vifaa vya rununu

Kwa ujumla, Bootstrap inasaidia matoleo mapya zaidi ya kila vivinjari chaguo-msingi vya jukwaa kuu. Kumbuka kuwa vivinjari vya seva mbadala (kama vile Opera Mini, hali ya Turbo ya Opera Mobile, UC Browser Mini, Amazon Silk) havitumiki.

Vivinjari vya eneo-kazi

Vile vile, matoleo ya hivi karibuni ya vivinjari vingi vya eneo-kazi yanaauniwa.

Kwenye Windows, tunaauni Internet Explorer 8-11 .

Kwa Firefox, pamoja na toleo jipya la kawaida thabiti, pia tunaauni toleo la hivi punde la Utoaji wa Usaidizi Uliopanuliwa (ESR) wa Firefox.

Isivyo rasmi, Bootstrap inapaswa kuonekana na kutenda vyema katika Chromium na Chrome kwa Linux, Firefox kwa Linux, na Internet Explorer 7, pamoja na Microsoft Edge, ingawa hazitumiki rasmi.

Kwa orodha ya baadhi ya hitilafu za kivinjari ambazo Bootstrap inapaswa kukabiliana nazo, angalia Wall of browser bugs zetu .

Internet Explorer 8 na 9

Internet Explorer 8 na 9 pia zinatumika, hata hivyo, tafadhali fahamu kuwa baadhi ya vipengele vya CSS3 na vipengele vya HTML5 havitumiki kikamilifu na vivinjari hivi. Kwa kuongeza, Internet Explorer 8 inahitaji matumizi ya Respond.js ili kuwezesha usaidizi wa hoja ya midia.

Tembelea Je, ninaweza kutumia... kwa maelezo kuhusu usaidizi wa kivinjari wa vipengele vya CSS3 na HTML5.

Internet Explorer 8 na Respond.js

Jihadharini na tahadhari zifuatazo unapotumia Respond.js katika mazingira yako ya ukuzaji na uzalishaji wa Internet Explorer 8.

Respond.js na CSS ya kikoa tofauti

Kutumia Respond.js na CSS iliyopangishwa kwenye kikoa (kidogo) tofauti (kwa mfano, kwenye CDN) kunahitaji usanidi wa ziada. Tazama hati za Respond.js kwa maelezo.

Jibu.js nafile://

Kwa sababu ya sheria za usalama za kivinjari, Respond.js haifanyi kazi na kurasa zinazotazamwa kupitia file://itifaki (kama vile unapofungua faili ya HTML ya ndani). Ili kujaribu vipengele vya kuitikia katika IE8, tazama kurasa zako kupitia HTTP(S). Tazama hati za Respond.js kwa maelezo.

Jibu.js na@import

Respond.js haifanyi kazi na CSS ambayo inarejelewa kupitia @import. Hasa, usanidi fulani wa Drupal unajulikana kutumia @import. Tazama hati za Respond.js kwa maelezo.

Internet Explorer 8 na ukubwa wa sanduku

IE8 haiauni kikamilifu box-sizing: border-box;ikiunganishwa na min-width, max-width, min-height, au max-height. Kwa sababu hiyo, kuanzia v3.0.1, hatutumii tena max-widthkwenye .containers.

Internet Explorer 8 na @font-face

IE8 ina maswala kadhaa @font-faceikiwa imejumuishwa na :before. Bootstrap hutumia mchanganyiko huo na Glyphicons zake. Ikiwa ukurasa umehifadhiwa, na kupakiwa bila kipanya juu ya dirisha (yaani, bonyeza kitufe cha kuonyesha upya au pakia kitu katika iframe) basi ukurasa utatolewa kabla ya fonti kupakiwa. Kuelea juu ya ukurasa (mwili) kutaonyesha baadhi ya aikoni na kuelea juu ya ikoni zilizosalia kutaonyesha hizo pia. Tazama toleo #13863 kwa maelezo zaidi.

Njia za Utangamano za IE

Bootstrap haitumiki katika modi za uoanifu za Internet Explorer. Ili kuhakikisha kuwa unatumia hali ya hivi punde ya uwasilishaji ya IE, zingatia kujumuisha <meta>lebo inayofaa katika kurasa zako:

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

Thibitisha hali ya hati kwa kufungua zana za kurekebisha: bonyeza F12na uangalie "Hali ya Hati".

Lebo hii imejumuishwa katika nyaraka na mifano yote ya Bootstrap ili kuhakikisha utoaji bora zaidi iwezekanavyo katika kila toleo linalotumika la Internet Explorer.

Tazama swali hili la StackOverflow kwa maelezo zaidi.

Internet Explorer 10 katika Windows 8 na Windows Phone 8

Internet Explorer 10 haitofautishi upana wa kifaa na upana wa kituo cha kutazama , na kwa hivyo haitumii ipasavyo hoja za maudhui katika CSS ya Bootstrap. Kwa kawaida ungeongeza kijisehemu cha haraka cha CSS kurekebisha hili:

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

Hata hivyo, hii haifanyi kazi kwa vifaa vinavyotumia matoleo ya Windows Phone 8 ya zamani kuliko Sasisho la 3 (yaliyojulikana pia kama GDR3) , kwani husababisha vifaa hivyo kuonyesha zaidi mwonekano wa eneo-kazi badala ya mwonekano finyu wa "simu". Ili kushughulikia hili, utahitaji kujumuisha CSS na JavaScript ifuatayo ili kusuluhisha hitilafu .

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

Kwa maelezo zaidi na miongozo ya matumizi, soma Windows Phone 8 na Device-Width .

Kama somo, tunajumuisha hii katika hati zote za Bootstrap na mifano kama onyesho.

Safari asilimia rounding

Injini ya uwasilishaji ya matoleo ya Safari kabla ya v7.1 ya OS X na Safari ya iOS v8.0 ilikuwa na shida na idadi ya nafasi za desimali zinazotumika katika .col-*-1madarasa yetu ya gridi ya taifa. Kwa hivyo ikiwa ulikuwa na safu wima 12 za gridi ya mtu binafsi, ungegundua kuwa zilikuja fupi ikilinganishwa na safu mlalo zingine za safuwima. Kando na kusasisha Safari/iOS, unayo chaguzi kadhaa za kufanya kazi:

• Ongeza .pull-rightkwenye safu wima yako ya mwisho ya gridi ili kupata mpangilio mgumu wa kulia
• Rekebisha asilimia zako mwenyewe ili kupata mzunguko mzuri wa Safari (ngumu zaidi kuliko chaguo la kwanza)

Modals, navbar, na kibodi pepe

Kufurika na kusogeza

Usaidizi kwa overflow: hiddenkipengele <body>ni mdogo katika iOS na Android. Kwa ajili hiyo, unaposogeza juu au chini ya modali katika mojawapo ya vivinjari vya vifaa hivyo, <body>maudhui yataanza kusogeza. Tazama hitilafu ya Chrome #175502 (iliyorekebishwa katika Chrome v40) na mdudu wa WebKit #153852 .

Sehemu za maandishi za iOS na kusogeza

Kuanzia iOS 9.3, wakati modali imefunguliwa, ikiwa mguso wa kwanza wa ishara ya kusogeza uko ndani ya mpaka wa maandishi <input>au a <textarea>, <body>maudhui yaliyo chini ya modali yatasonga badala ya modali yenyewe. Tazama hitilafu ya WebKit #153856 .

Kibodi pepe

Pia, kumbuka kuwa ikiwa unatumia upau wa uelekezaji usiobadilika au unatumia ingizo ndani ya modali, iOS ina hitilafu ya uwasilishaji ambayo haisasishi nafasi ya vipengee vilivyowekwa wakati kibodi pepe inapoanzishwa. Marekebisho machache kwa hili ni pamoja na kubadilisha vipengee vyako hadi position: absoluteau kukaribisha kipima muda kwenye umakini ili kujaribu kusahihisha nafasi wewe mwenyewe. Hili halishughulikiwi na Bootstrap, kwa hivyo ni juu yako kuamua ni suluhisho gani linafaa kwa programu yako.

Miteremko ya Upau wa Urambazaji

Kipengele .dropdown-backdrophiki hakitumiki kwenye iOS kwenye nav kwa sababu ya uchangamano wa z-index. Kwa hivyo, ili kufunga menyu kunjuzi kwenye pau za urambazaji, lazima ubofye moja kwa moja kipengee kunjuzi (au kipengele kingine chochote kitakachowasha tukio la kubofya katika iOS ).

Kukuza kwa kivinjari

Ukuzaji wa ukurasa bila shaka huwasilisha uwasilishaji wa vizalia vya programu katika baadhi ya vipengele, katika Bootstrap na kwingineko kwenye wavuti. Kulingana na tatizo, tunaweza kulitatua (tafuta kwanza kisha ufungue tatizo ikihitajika). Walakini, huwa tunapuuza haya kwani mara nyingi hayana suluhisho la moja kwa moja isipokuwa njia za kudanganya.

Inanata :hover/ :focuskwenye simu ya mkononi

Ingawa kuelea kwa kweli hakuwezekani kwenye skrini nyingi za kugusa, vivinjari vingi vya rununu huiga usaidizi wa kuelea na kufanya :hover"kunata". Kwa maneno mengine, :hovermitindo huanza kutumika baada ya kugonga kipengele na kuacha tu kutumia baada ya mtumiaji kugonga kipengele kingine. :hoverHii inaweza kusababisha majimbo ya Bootstrap "kukwama" kwenye vivinjari kama hivyo. Vivinjari vingine vya rununu pia hufanya :focusvivyo hivyo kunata. Kwa sasa hakuna suluhisho rahisi kwa maswala haya zaidi ya kuondoa mitindo kama hii kabisa.

Uchapishaji

Hata katika vivinjari vingine vya kisasa, uchapishaji unaweza kuwa wa kushangaza.

Hasa, kufikia Chrome v32 na bila kujali mipangilio ya ukingo, Chrome hutumia upana wa eneo la kutazama ambao ni finyu zaidi kuliko ukubwa halisi wa karatasi wakati wa kusuluhisha hoja za midia wakati wa kuchapisha ukurasa wa tovuti. Hii inaweza kusababisha gridi ya ziada ya Bootstrap kuwashwa bila kutarajiwa wakati wa uchapishaji. Tazama toleo #12078 na Chrome bug #273306 kwa maelezo kadhaa. Marekebisho yaliyopendekezwa:

• Kubali gridi ya ziada-ndogo na uhakikishe kuwa ukurasa wako unaonekana kukubalika chini yake.
• Geuza kukufaa thamani za @screen-*Vigezo Vichache ili karatasi yako ya kichapishi ichukuliwe kuwa kubwa kuliko ndogo zaidi.
• Ongeza hoja maalum za media ili kubadilisha vikomo vya ukubwa wa gridi ya media ya uchapishaji pekee.

Pia, kufikia Safari v8.0, upana-weka .containers unaweza kusababisha Safari kutumia saizi ndogo ya fonti wakati wa kuchapisha. Tazama #14868 na mdudu wa WebKit #138192 kwa maelezo zaidi. Njia moja inayowezekana ya hii ni kuongeza CSS ifuatayo:

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

Kivinjari cha hisa cha Android

Nje ya kisanduku, Android 4.1 (na hata matoleo mapya zaidi inaonekana) husafirishwa na programu ya Kivinjari kama kivinjari chaguo-msingi cha chaguo-msingi (kinyume na Chrome). Kwa bahati mbaya, programu ya Kivinjari ina hitilafu nyingi na kutopatana na CSS kwa ujumla.

Chagua menyu

Kwenye <select>vipengele, kivinjari cha hisa cha Android hakitaonyesha vidhibiti vya kando ikiwa kuna border-radiusna/au borderkutumika. (Angalia swali hili la StackOverflow kwa maelezo.) Tumia kijisehemu cha msimbo ulio hapa chini ili kuondoa CSS inayokera na kutoa <select>kama kipengele kisicho na mtindo kwenye kivinjari cha hisa cha Android. Wakala wa mtumiaji anayenusa huepuka kuingiliwa na vivinjari vya Chrome, Safari na 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>

Unataka kuona mfano? Angalia onyesho hili la JS Bin.

Vithibitishaji

Ili kutoa utumiaji bora zaidi kwa vivinjari vya zamani na vilivyo na hitilafu, Bootstrap hutumia udukuzi wa kivinjari cha CSS katika maeneo kadhaa ili kulenga CSS maalum kwa matoleo fulani ya kivinjari ili kushughulikia hitilafu kwenye vivinjari vyenyewe. Udukuzi huu kwa kueleweka husababisha wathibitishaji wa CSS kulalamika kuwa si sahihi. Katika maeneo kadhaa, pia tunatumia vipengele vya CSS ambavyo havijasawazishwa kikamilifu, lakini vinatumika kwa ajili ya uboreshaji unaoendelea.

Maonyo haya ya uthibitishaji hayajalishi kiutendaji kwani sehemu isiyo ya udukuzi ya CSS yetu haidhibitishi kikamilifu na sehemu za udukuzi haziingiliani na utendakazi sahihi wa sehemu isiyo ya udukuzi, kwa hivyo tunapuuza maonyo haya kimakusudi.

Hati zetu za HTML vile vile zina maonyo madogo na yasiyo na maana ya uthibitishaji wa HTML kwa sababu ya ujumuishaji wetu wa suluhisho kwa hitilafu fulani ya Firefox .

Msaada wa mtu wa tatu

Ingawa hatuungi mkono rasmi programu-jalizi au programu-jalizi za wahusika wengine, tunatoa ushauri muhimu ili kukusaidia kuepuka matatizo yanayoweza kutokea katika miradi yako.

Ukubwa wa sanduku

Baadhi ya programu za wahusika wengine, ikiwa ni pamoja na Ramani za Google na Injini Maalum ya Kutafuta ya Google, inakinzana na Bootstrap kutokana na * { box-sizing: border-box; }, sheria inayoifanya kuwa hivyo paddinghaiathiri upana wa mwisho uliokokotwa wa kipengele. Pata maelezo zaidi kuhusu modeli ya kisanduku na ukubwa katika Mbinu za CSS .

Kulingana na muktadha, unaweza kubatilisha inavyohitajika (Chaguo 1) au kuweka upya ukubwa wa kisanduku kwa maeneo yote (Chaguo la 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();
}

Ufikivu

Bootstrap hufuata viwango vya kawaida vya wavuti na—pamoja na juhudi kidogo zaidi—inaweza kutumika kuunda tovuti zinazoweza kufikiwa na wanaotumia AT .

Ruka urambazaji

Ikiwa uelekezaji wako una viungo vingi na huja kabla ya maudhui kuu katika DOM, ongeza Skip to main contentkiungo kabla ya kusogeza (kwa maelezo rahisi, angalia makala haya ya Mradi wa A11Y kuhusu ruka viungo vya kusogeza ). Kutumia .sr-onlydarasa kutaficha kiunga cha kuruka kionekano, na .sr-only-focusabledarasa litahakikisha kuwa kiungo kinaonekana kikielekezwa (kwa watumiaji wa kibodi wanaoona).

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

Vichwa vilivyowekwa

Unapoweka vichwa ( <h1>- <h6>), kichwa chako cha msingi cha hati kinapaswa kuwa <h1>. Vichwa vifuatavyo vinapaswa kufanya matumizi ya kimantiki <h2>- <h6>hivi kwamba visoma skrini vinaweza kuunda jedwali la yaliyomo kwa kurasa zako.

Pata maelezo zaidi katika HTML CodeSniffer na AccessAbility ya Penn State .

Tofauti ya rangi

Kwa sasa, baadhi ya michanganyiko ya rangi chaguo-msingi inayopatikana katika Bootstrap (kama vile aina mbalimbali za vitufe vilivyowekwa mitindo, baadhi ya rangi zinazoangazia msimbo zinazotumika kwa vizuizi vya msingi vya misimbo , darasa la usaidizi wa .bg-primary mandharinyuma , na rangi ya kiungo chaguo-msingi inapotumiwa kwenye mandharinyuma nyeupe) kuwa na uwiano wa chini wa utofautishaji (chini ya uwiano uliopendekezwa wa 4.5:1 ). Hii inaweza kusababisha matatizo kwa watumiaji wenye uoni hafifu au wasioona rangi. Huenda rangi hizi chaguomsingi zikahitaji kurekebishwa ili kuongeza utofautishaji na uhalali wake.

Rasilimali za ziada

• "HTML Codesniffer" alamisho kwa ajili ya kutambua masuala ya ufikivu
• Kiendelezi cha Zana za Wasanidi Programu wa Chrome
• Kichanganuzi cha Utofautishaji wa Rangi
• Mradi wa A11Y
• Nyaraka za ufikivu za MDN

Maswali Yanayoulizwa Mara kwa Mara kuhusu Leseni

Bootstrap inatolewa chini ya leseni ya MIT na ni hakimiliki 2019 Twitter. Imechemshwa hadi vipande vidogo, inaweza kuelezewa na masharti yafuatayo.

Inakuhitaji:

• Weka leseni na notisi ya hakimiliki ikiwa ni pamoja na katika CSS ya Bootstrap na faili za JavaScript unapozitumia katika kazi zako

Inakuruhusu:

• Pakua na utumie Bootstrap bila malipo, nzima au kwa sehemu, kwa madhumuni ya kibinafsi, ya kibinafsi, ya ndani ya kampuni au ya kibiashara
• Tumia Bootstrap katika vifurushi au usambazaji unaounda
• Rekebisha msimbo wa chanzo
• Toa leseni ndogo ya kurekebisha na kusambaza Bootstrap kwa wahusika wengine ambao hawajajumuishwa kwenye leseni

Inakukataza:

• Wawajibishe waandishi na wamiliki wa leseni kwa uharibifu kwani Bootstrap inatolewa bila udhamini
• Wawajibishe waundaji au wamiliki wa hakimiliki wa Bootstrap
• Sambaza upya kipande chochote cha Bootstrap bila maelezo sahihi
• Tumia alama zozote zinazomilikiwa na Twitter kwa njia yoyote ambayo inaweza kusema au kuashiria kuwa Twitter inaidhinisha usambazaji wako
• Tumia alama zozote zinazomilikiwa na Twitter kwa njia yoyote ambayo inaweza kusema au kuashiria kuwa umeunda programu ya Twitter inayohusika

Haihitaji wewe:

• Jumuisha chanzo cha Bootstrap yenyewe, au marekebisho yoyote ambayo unaweza kuwa umeifanyia, katika ugawaji wowote unaoweza kuunganisha unaojumuisha.
• Wasilisha mabadiliko unayofanya kwa Bootstrap kurudi kwenye mradi wa Bootstrap (ingawa maoni kama hayo yanahimizwa)

Leseni kamili ya Bootstrap iko kwenye hazina ya mradi kwa maelezo zaidi.

Tafsiri

Wanajamii wametafsiri hati za Bootstrap katika lugha mbalimbali. Hakuna zinazotumika rasmi na huenda zisisasishwe kila wakati.

• Ukanda wa buti 中文文档 (Kichina)
• Bootstrap kwenye Dansk (Kideni)
• Mkanda wa viatu kwa Kifaransa (Kifaransa)
• Bootstrap auf Deutsch (Kijerumani)
• Kitambaa cha buti kwa Kiitaliano (Kiitaliano)
• Bootstrap 한국어 (Kikorea)
• Bootstrap em Português do Brasil (Kireno cha Brazil)
• Bootstrap по-русски (Kirusi)
• Ufungaji wa viatu kwa Kihispania (Kihispania)
• Türkçe Bootstrap (Kituruki)
• Bootstrap українською (Kiukreni)
• Bootstrap bằng tiếng Việt (Kivietinamu)

Hatusaidii kupanga au kupangisha tafsiri, tunaziunganisha tu.

Je, umemaliza tafsiri mpya au bora zaidi? Fungua ombi la kuvuta ili kuiongeza kwenye orodha yetu.