Zazzagewa

Bootstrap (a halin yanzu v3.4.1) yana da 'yan hanyoyi masu sauƙi don farawa da sauri, kowannensu yana da sha'awar matakin fasaha daban-daban da shari'ar amfani. Karanta don ganin abin da ya dace da bukatunku na musamman.

jsDelivr

Mutanen da ke kan jsDelivr cikin alheri suna ba da tallafin CDN don Bootstrap's CSS da JavaScript. Yi amfani da waɗannan hanyoyin haɗin 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>

Shigar da Bower

Hakanan zaka iya shigar da sarrafa Bootstrap's Less, CSS, JavaScript, da fonts ta amfani da Bower :

bower install bootstrap

Shigar da npm

Hakanan zaka iya shigar da Bootstrap ta amfani da npm :

npm install bootstrap@3

require('bootstrap')za ta loda duk abubuwan jQuery na Bootstrap akan abin jQuery. Shi bootstrapkansa tsarin ba ya fitar da komai. Kuna iya loda plugins jQuery na Bootstrap da hannu daban-daban ta hanyar loda /js/*.jsfayilolin a ƙarƙashin babban jagorar matakin fakitin.

Bootstrap's package.jsonya ƙunshi ƙarin ƙarin metadata ƙarƙashin maɓallan masu zuwa:

• less- hanyar zuwa babban fayil ɗin ƙaramin tushe na Bootstrap
• style- Hanyar zuwa Bootstrap's mara ƙarancin CSS wanda aka riga aka haɗa ta amfani da saitunan tsoho (babu keɓancewa)

Shigar da Mawaƙi

Hakanan zaka iya shigar da sarrafa Bootstrap's Less, CSS, JavaScript, da fonts ta amfani da Mawaƙi :

composer require twbs/bootstrap

Ana buƙatar prefixer don ƙarami/Sass

Bootstrap yana amfani da Autoprefixer don ma'amala da prefixes masu siyar da CSS . Idan kana tattara Bootstrap daga tushen sa na ƙasa / Sass kuma ba sa amfani da Gruntfile ɗin mu, kuna buƙatar haɗa Autoprefixer cikin tsarin ginin ku da kanku. Idan kuna amfani da Bootstrap da aka riga aka haɗa ko amfani da Gruntfile ɗin mu, ba kwa buƙatar damuwa game da wannan saboda an riga an haɗa Autoprefixer cikin Gruntfile ɗin mu.

Me ya hada

Ana iya zazzage Bootstrap a cikin nau'i biyu, a cikin su zaku sami kundayen adireshi da fayiloli masu zuwa, tattara albarkatu na gama gari cikin ma'ana tare da samar da duka bambance-bambancen da aka tattara da ragi.

Bootstrap da aka riga aka haɗa

Da zarar an sauke, buɗe babban fayil ɗin da aka matsa don ganin tsarin (wanda aka haɗa) Bootstrap. Za ku ga wani abu kamar haka:

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

Wannan shine mafi asali nau'i na Bootstrap: fayilolin da aka riga aka tattara don amfani da sauri cikin kusan kowane aikin gidan yanar gizo. Mun samar da hadadden CSS da JS ( bootstrap.*), da kuma hadawa da rage girman CSS da JS ( bootstrap.min.*). Akwai taswirar tushen CSS ( bootstrap.*.map) don amfani tare da wasu kayan aikin haɓaka masu bincike. Haruffa daga Glyphicons an haɗa su, kamar yadda jigon Bootstrap ɗin zaɓi yake.

Lambar tushen Bootstrap

Zazzage lambar tushe ta Bootstrap ta ƙunshi CSS da aka riga aka tattara, JavaScript, da kadarorin rubutu, tare da ƙarancin tushe, JavaScript, da takaddun bayanai. Musamman ma, ya haɗa da masu zuwa da ƙari:

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

The less/, js/, kuma fonts/su ne tushen lambar tushe don CSS, JS, da alamomin alamar (bi da bi). Babban dist/fayil ɗin ya ƙunshi duk abin da aka jera a cikin ɓangaren zazzagewar da aka riga aka gama a sama. Babban docs/fayil ɗin ya ƙunshi lambar tushe don takaddun mu, da examples/na amfani da Bootstrap. Bayan haka, duk wani fayil ɗin da aka haɗa yana ba da tallafi don fakiti, bayanan lasisi, da haɓakawa.

Haɗa CSS da JavaScript

Bootstrap yana amfani da Grunt don tsarin ginin sa, tare da hanyoyi masu dacewa don aiki tare da tsarin. Ta haka ne muke tattara lambar mu, gudanar da gwaje-gwaje, da ƙari.

Ana shigar da Grunt

Don shigar da Grunt, dole ne ka fara saukewa kuma shigar da node.js (wanda ya haɗa da npm). npm yana tsaye ne don kuɗaɗen ƙirar ƙira kuma hanya ce ta sarrafa abubuwan dogaro da ci gaba ta hanyar node.js.

1. Shigar grunt-clida duniya tare da npm install -g grunt-cli.
2. Kewaya zuwa tushen /bootstrap/directory, sa'an nan gudu npm install. npm zai duba package.jsonfayil ɗin kuma ta atomatik shigar da abubuwan dogaro na gida da aka jera ta atomatik.

Lokacin da aka gama, zaku iya gudanar da umarni daban-daban na Grunt da aka bayar daga layin umarni.

Akwai umarnin Grunt

grunt dist(Kawai tattara CSS da JavaScript)

Yana sabunta kundin /dist/adireshi tare da haɗaɗɗen kuma rage girman fayilolin CSS da JavaScript. A matsayin mai amfani da Bootstrap, wannan yawanci shine umarnin da kuke so.

grunt watch(Kalli)

Yana kallon ƙananan fayilolin tushen kuma yana sake tattara su ta atomatik zuwa CSS a duk lokacin da kuka ajiye canji.

grunt test(Gudun gwaje-gwaje)

Yana gudanar da JSHint kuma yana gudanar da gwaje-gwajen QUnit a cikin masu bincike na gaske godiya ga Karma .

grunt docs(Gina & gwada kadarorin docs)

Gina da gwada CSS, JavaScript, da sauran kadarori waɗanda ake amfani da su lokacin gudanar da takaddun cikin gida ta hanyar bundle exec jekyll serve.

grunt(Gina cikakken komai kuma gudanar da gwaje-gwaje)

Yana tattarawa kuma yana rage CSS da JavaScript, yana gina gidan yanar gizon takardu, yana gudanar da ingantaccen HTML5 akan takaddun, sabunta kadarorin Customizer, da ƙari. Yana buƙatar Jekyll . Yawancin lokaci dole ne kawai idan kuna yin hacking akan Bootstrap kanta.

Shirya matsala

Idan kun ci karo da matsaloli tare da shigar da abin dogaro ko gudanar da umarnin Grunt, da farko share littafin /node_modules/da npm ya samar. Sa'an nan, sake yi npm install.

Samfurin asali

Fara da wannan ainihin samfurin HTML, ko gyara waɗannan misalan . Muna fatan za ku keɓance samfuranmu da misalai, daidaita su don dacewa da bukatunku.

Kwafi HTML ɗin da ke ƙasa don fara aiki tare da ƙaramin takaddar 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>

Misalai

Gina akan samfurin asali na sama tare da abubuwan haɗin Bootstrap da yawa. Muna ƙarfafa ku don tsarawa da daidaita Bootstrap don dacewa da bukatun aikin ku ɗaya.

Sami lambar tushe don kowane misali a ƙasa ta zazzage ma'ajiyar Bootstrap . Ana iya samun misalai a cikin kundin docs/examples/adireshi.

Amfani da tsarin

Samfurin farawa

Ba komai ba sai abubuwan yau da kullun: harhada CSS da JavaScript tare da akwati.

Jigon Bootstrap

Loda jigon Bootstrap na zaɓi don ingantaccen ƙwarewa na gani.

Grids

Misalai da yawa na shimfidu na grid tare da duk matakai huɗu, gida, da ƙari.

Jumbotron

Gina kewaye da jumbotron tare da navbar da wasu ginshiƙan grid na asali.

Jumbotron kunkuntar

Gina ƙarin shafi na al'ada ta hanyar ƙunsar tsohuwar akwati da jumbotron.

Navbars suna aiki

Navbar

Babban samfuri na asali wanda ya haɗa da navbar tare da wasu ƙarin abun ciki.

A tsaye saman navbar

Babban samfuri na asali tare da madaidaicin saman navbar tare da wasu ƙarin abun ciki.

Kafaffen navbar

Babban samfuri na asali tare da kafaffen saman navbar tare da wasu ƙarin abun ciki.

Abubuwan da aka saba

Rufewa

Samfurin shafi ɗaya don gina shafukan gida masu sauƙi da kyau.

Carousel

Keɓance navbar da carousel, sannan ƙara wasu sabbin abubuwa.

Blog

Sauƙaƙan shimfidar bulogi mai shafi biyu tare da kewayawa na al'ada, rubutun kai, da nau'in.

Dashboard

Tsarin asali don dashboard mai gudanarwa tare da kafaffen shingen gefe da navbar.

Shafin shiga

Tsarin tsari na al'ada da ƙira don alamar sa hannu mai sauƙi a cikin tsari.

Nav baratacce

Ƙirƙiri navbar na al'ada tare da ingantattun hanyoyin haɗi. A kula! Ba ma Safari abokantaka ba.

Ƙafar m

Haɗa ƙafa zuwa kasan wurin kallo lokacin da abun ciki ya yi guntu fiye da shi.

M ƙafafu tare da navbar

Haɗa ƙafa zuwa kasan tashar kallo tare da kafaffen navbar a saman.

Gwaje-gwaje

Bootstrap mara amsawa

Sauƙaƙe musaki amsawar Bootstrap ta kowane takaddun mu .

Kashe-canvas

Gina menu na kewayawa na kashe-canvas don amfani tare da Bootstrap.

Kayan aiki

Bootlint

Bootlint shine kayan aikin Bootstrap HTML na hukuma . Yana bincika ta atomatik don kurakuran HTML da yawa a cikin shafukan yanar gizo waɗanda ke amfani da Bootstrap ta hanyar "vanilla" daidai. Abubuwan Vanilla Bootstrap / widgets suna buƙatar sassan su na DOM don dacewa da wasu sifofi. Bootlint yana bincika cewa misalan abubuwan abubuwan Bootstrap sun tsara HTML daidai. Yi la'akari da ƙara Bootlint zuwa kayan aikin haɓaka gidan yanar gizo na Bootstrap don kada wani kuskuren gama gari ya sassauta ci gaban aikin ku.

Al'umma

Ci gaba da kasancewa da zamani kan ci gaban Bootstrap kuma isa ga al'umma da waɗannan albarkatu masu taimako.

• Karanta kuma ku yi rajista zuwa Bulogin Bootstrap na hukuma .
• Yi taɗi tare da 'yan'uwan Bootstrappers ta amfani da IRC a cikin irc.freenode.netuwar garken, a cikin tashar ##bootstrap .
• Don taimako ta amfani da Bootstrap, tambaya akan StackOverflow ta amfani da alamartwitter-bootstrap-3 .
• Masu haɓakawa yakamata su yi amfani da kalmar maɓalli bootstrapakan fakiti waɗanda ke canzawa ko ƙara zuwa ayyukan Bootstrap yayin rarraba ta npm ko hanyoyin isarwa makamantan don iyakar ganowa.
• Nemo misalan mutane masu ban sha'awa na ginin Bootstrap a Bootstrap Expo .

Hakanan kuna iya bin @getbootstrap akan Twitter don sabbin tsegumi da bidiyoyin kiɗa masu ban mamaki.

Kashe amsawa

Bootstrap yana daidaita shafukanku ta atomatik don girman allo daban-daban. Anan ga yadda ake kashe wannan fasalin don shafinku yayi aiki kamar wannan misalin mara amsawa .

Matakai don kashe amsawar shafi

1. Cire kallon kallon da <meta>aka ambata a cikin takaddun CSS
2. Mayar da widthkan .containerna kowane matakin grid tare da faɗi ɗaya, misali width: 970px !important;Tabbatar cewa wannan yana zuwa bayan tsoho Bootstrap CSS. Kuna iya guje wa zaɓin !importanttare da tambayoyin kafofin watsa labarai ko wasu zaɓaɓɓu-fu.
3. Idan ana amfani da navbars, cire duk navbar da ke rugujewa da haɓaka ɗabi'a.
4. Don shimfidar grid, yi amfani .col-xs-*da azuzuwan ban da, ko a madadin, matsakaita/manyan. Kada ku damu, grid ɗin ƙaramar na'ura tana daidaita duk shawarwari.

Har yanzu kuna buƙatar Respond.js don IE8 (tunda har yanzu tambayoyin kafofin watsa labarai suna nan kuma suna buƙatar sarrafa su). Wannan yana hana abubuwan "shafin hannu" na Bootstrap.

Samfurin Bootstrap tare da kashe amsawa

Mun yi amfani da waɗannan matakan zuwa misali. Karanta lambar tushe don ganin takamaiman canje-canjen da aka aiwatar.

Duba misalin mara amsawa

Browser da tallafin na'ura

An gina Bootstrap don yin aiki mafi kyau a cikin sabbin kayan bincike na tebur da wayar hannu, ma'ana tsofaffin masu bincike na iya nuna salo daban-daban, ko da yake suna da cikakken aiki, fassarar wasu abubuwan.

Masu bincike masu goyan baya

Musamman, muna goyan bayan sabbin sigogin masu bincike da dandamali masu zuwa.

Madadin masu bincike waɗanda ke amfani da sabuwar sigar WebKit, Blink, ko Gecko, ko kai tsaye ko ta hanyar API ɗin kallon yanar gizo, ba su da tallafi a sarari. Koyaya, Bootstrap yakamata (a mafi yawan lokuta) nunawa kuma yayi aiki daidai a cikin waɗannan masu binciken. An bayar da ƙarin takamaiman bayanin tallafi a ƙasa.

Na'urorin hannu

Gabaɗaya magana, Bootstrap yana goyan bayan sabbin juzu'ai na kowane babban dandamali ta tsoho mai bincike. Lura cewa masu bincike (irin su Opera Mini, Opera Mobile's Turbo yanayin, UC Browser Mini, Amazon Silk) ba su da tallafi.

Masu bincike na Desktop

Hakazalika, ana tallafawa sabbin nau'ikan mafi yawan masu binciken tebur.

A kan Windows, muna goyan bayan Internet Explorer 8-11 .

Don Firefox, ban da sabon sabuntawa na yau da kullun na yau da kullun, muna kuma goyan bayan sabon Sakin Taimako na Musamman (ESR) na Firefox.

Ba bisa ka'ida ba, Bootstrap ya kamata ya duba da kyau sosai a cikin Chromium da Chrome don Linux, Firefox don Linux, da Internet Explorer 7, da kuma Microsoft Edge, kodayake ba a tallafa musu bisa hukuma ba.

Don jerin wasu kurakuran burauzar da Bootstrap ya yi fama da su, duba bangon bugs ɗin mu .

Internet Explorer 8 da 9

Internet Explorer 8 da 9 suma suna da tallafi, duk da haka, da fatan za a sani cewa wasu kaddarorin CSS3 da abubuwan HTML5 ba su da cikakken goyan bayan waɗannan masu binciken. Bugu da kari, Internet Explorer 8 yana buƙatar amfani da Respond.js don ba da damar tallafin tambayar mai jarida.

Ziyarci Zan iya amfani da... don cikakkun bayanai kan tallafin mazuruftar abubuwan CSS3 da HTML5.

Internet Explorer 8 da Respond.js

Hattara da fa'idodin masu zuwa lokacin amfani da Respond.js a cikin haɓakawa da yanayin samarwa don Internet Explorer 8.

Respond.js da CSS na yanki-giciye

Amfani da Respond.js tare da CSS da aka shirya akan wani yanki (misali, akan CDN) yana buƙatar ƙarin saitin. Duba Respond.js docs don cikakkun bayanai.

Amsa.js dafile://

Saboda ka'idojin tsaro na burauza, Respond.js baya aiki tare da shafukan da aka duba ta hanyar file://yarjejeniya (kamar lokacin buɗe fayil ɗin HTML na gida). Don gwada fasalulluka masu amsawa a cikin IE8, duba shafukanku akan HTTP(S). Duba Respond.js docs don cikakkun bayanai.

Amsa.js da@import

Respond.js baya aiki tare da CSS wanda aka ambata ta hanyar @import. Musamman, an san wasu saitunan Drupal don amfani @import. Duba Respond.js docs don cikakkun bayanai.

Internet Explorer 8 da girman akwatin

IE8 baya cikakken goyan baya box-sizing: border-box;lokacin da aka haɗa shi da min-width, max-width, min-height, ko max-height. Don haka, kamar na v3.0.1, ba mu ƙara amfani max-widthda .containers.

Internet Explorer 8 da @font-face

IE8 yana da wasu batutuwa tare da @font-facelokacin da aka haɗa su tare da :before. Bootstrap yana amfani da wannan haɗin tare da Glyphicons. Idan shafi yana cache, kuma an loda shi ba tare da linzamin kwamfuta ba akan taga (watau danna maɓallin refresh ko loda wani abu a cikin iframe) to shafin yana farawa kafin saukar da font ɗin. Yin shawagi akan shafi (jiki) zai nuna wasu gumakan kuma yin shawagi akan sauran gumakan zai nuna waɗancan su ma. Duba fitowar #13863 don cikakkun bayanai.

IE Yanayin dacewa

Bootstrap ba shi da tallafi a cikin tsoffin hanyoyin dacewa da Internet Explorer. Don tabbatar da cewa kuna amfani da sabon yanayin fassara don IE, la'akari da haɗa alamar da ta dace <meta>a cikin shafukanku:

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

Tabbatar da yanayin daftarin aiki ta buɗe kayan aikin lalata: latsa F12kuma duba "Yanayin Takardu".

An haɗa wannan alamar a cikin duk takaddun Bootstrap da misalan don tabbatar da mafi kyawun ma'anar da zai yiwu a kowace sigar Internet Explorer da aka goyan baya.

Duba wannan tambayar StackOverflow don ƙarin bayani.

Internet Explorer 10 a cikin Windows 8 da Windows Phone 8

Internet Explorer 10 ba ya bambanta faɗin na'ura daga nisa na kallo , don haka baya amfani da tambayoyin kafofin watsa labarai da kyau a cikin Bootstrap's CSS. A al'ada za ku ƙara kawai snippet na CSS don gyara wannan:

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

Duk da haka, wannan ba ya aiki ga na'urorin da ke aiki da nau'ikan Windows Phone 8 da suka girmi Update 3 (aka GDR3) , saboda yana sa irin waɗannan na'urori su nuna mafi yawan kallon tebur maimakon kunkuntar kallon "wayar". Don magance wannan, kuna buƙatar haɗa da CSS masu zuwa da JavaScript don aiki a kusa da kwaro .

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

Don ƙarin bayani da jagororin amfani, karanta Windows Phone 8 da Faɗin Na'ura .

A matsayin jagora, mun haɗa wannan a cikin duk takaddun Bootstrap da misalai azaman nuni.

Safari kashi zagaye

Injin sarrafa nau'ikan Safari kafin v7.1 don OS X da Safari don iOS v8.0 yana da matsala tare da adadin wuraren ƙima da aka yi amfani da su a .col-*-1azuzuwan grid ɗin mu. Don haka idan kuna da ginshiƙan grid guda 12, za ku lura cewa sun zo gajere idan aka kwatanta da sauran layuka na ginshiƙai. Bayan haɓaka Safari/iOS, kuna da wasu zaɓuɓɓuka don abubuwan aiki:

• Ƙara .pull-rightzuwa ginshiƙin grid ɗinku na ƙarshe don samun jeri mai wuya-dama
• Canza adadin ku da hannu don samun cikakkiyar zagaye don Safari (mafi wahala fiye da zaɓi na farko)

Modals, navbars, da maɓallan madannai na kama-da-wane

Ambaliyar ruwa da gungurawa

Taimako donoverflow: hidden akan <body>kashi yana da iyakancewa a cikin iOS da Android. Don wannan, lokacin da kuka gungura sama ko ƙasa na modal a cikin ɗaya daga cikin masu binciken na'urorin, <body>abun ciki zai fara gungurawa. Duba kwaro na Chrome #175502 (wanda aka gyara a cikin Chrome v40) da kuma bug WebKit #153852 .

IOS filayen rubutu da gungurawa

Dangane da iOS 9.3, yayin da modal ke buɗewa, idan farkon taɓawar alamar gungura tana cikin iyakar rubutun.<input> ko a <textarea>, <body>abubuwan da ke ƙarƙashin modal ɗin za a gungurawa maimakon modal kanta. Duba kwaro na WebKit #153856 .

Allon madannai na zahiri

Har ila yau, lura cewa idan kana amfani da kafaffen navbar ko amfani da bayanai a cikin modal, iOS yana da kwaro mai ma'ana wanda baya sabunta matsayin ƙayyadaddun abubuwa lokacin da aka kunna maballin kama-da-wane. ƴan hanyoyin magance wannan sun haɗa da canza abubuwan ku zuwa position: absoluteko kiran mai ƙidayar lokaci akan mayar da hankali don ƙoƙarin gyara matsayi da hannu. Bootstrap ba ya sarrafa wannan, don haka ya rage naku don yanke shawarar wacce mafita ce mafi kyau ga aikace-aikacen ku.

Navbar Dropdowns

Ba .dropdown-backdropa yi amfani da kashi a kan iOS a cikin nav saboda sarkar z-indexing. Don haka, don rufe zazzagewa a cikin navbars, dole ne ku danna maɓallin zazzage kai tsaye (ko duk wani abu wanda zai kunna taron dannawa a cikin iOS). ).

Zuƙowa mai lilo

Zuƙowa shafi babu makawa yana gabatar da kayan tarihi a wasu sassa, duka a cikin Bootstrap da sauran gidan yanar gizo. Dangane da batun, ƙila za mu iya gyara shi (bincika da farko sannan buɗe batun idan akwai buƙata). Duk da haka, muna yawan yin watsi da waɗannan saboda galibi ba su da wata mafita ta kai tsaye face abubuwan da ba su dace ba.

M :hover/ :focusakan wayar hannu

Ko da yake ba zai yiwu a yi shawagi na gaske akan mafi yawan allon taɓawa ba, yawancin masu binciken wayar hannu suna yin koyi da goyan bayan shawagi kuma suna yin :hover“mai ɗaure”. A wasu kalmomi, :hoversalo suna fara amfani bayan danna wani abu kuma kawai a daina amfani bayan mai amfani ya taɓa wani abu. Wannan na iya sa :hoverjihohin Bootstrap su zama "manne" a kan irin waɗannan masu binciken. Wasu masu bincike na wayar hannu suma suna yin :focusmannewa irin wannan. A halin yanzu babu wata hanya mai sauƙi don waɗannan batutuwan banda cire irin waɗannan salo gaba ɗaya.

Bugawa

Ko da a wasu mashawartan zamani, bugu na iya zama da ban mamaki.

Musamman, kamar na Chrome v32 kuma ba tare da la'akari da saitunan gefe ba, Chrome yana amfani da faɗin wurin kallo sosai kunkuntar fiye da girman takarda ta zahiri lokacin warware tambayoyin kafofin watsa labarai yayin buga shafin yanar gizon. Wannan na iya haifar da ƙaramar grid ɗin Bootstrap ana kunna ba zato ba tsammani lokacin bugawa. Duba fitowar #12078 da Chrome bug #273306 don wasu cikakkun bayanai. Abubuwan da aka ba da shawarar:

• Rungumar ƙaramin ƙaramar grid kuma tabbatar da cewa shafinku ya yi kama da karɓuwa a ƙarƙashinsa.
• Keɓance ƙimar @screen-*Ƙananan masu canji ta yadda za a ɗauki takardar firinta ta fi ƙarami.
• Ƙara tambayoyin kafofin watsa labaru na al'ada don canza girman grid maki don kafofin bugawa kawai.

Hakanan, kamar na Safari v8.0, ƙayyadaddun faɗin .containers na iya haifar da Safari don amfani da ƙaramin girman font da ba a saba gani ba yayin bugawa. Duba #14868 da kuma WebKit bug #138192 don ƙarin cikakkun bayanai. Ɗaya mai yuwuwar hanyar magance wannan shine ƙara CSS mai zuwa:

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

Android stock browser

Daga cikin akwatin, Android 4.1 (har ma da wasu sabbin sakewa a bayyane) suna jigilar kaya tare da aikace-aikacen Browser azaman babban mai binciken gidan yanar gizo na zaɓi (saɓanin Chrome). Abin takaici, ƙa'idar Mai lilo tana da ɗimbin kwari da rashin daidaituwa tare da CSS gabaɗaya.

Zaɓi menus

A kan <select>abubuwa, mai binciken hannun jari na Android ba zai nuna ikon sarrafawa ba idan akwai border-radiusda/ko borderamfani. (Dubi wannan tambayar StackOverflow don cikakkun bayanai.) Yi amfani da snippet na lambar da ke ƙasa don cire CSS mai laifi da kuma mayar da <select>shi azaman nau'in da ba a yi masa salo ba akan mai binciken hannun jari na Android. Wakilin mai amfani yana shaka yana guje wa tsoma baki tare da Chrome, Safari, da 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>

Kuna son ganin misali? Duba wannan JS Bin demo.

Masu tabbatarwa

Domin samar da mafi kyawun yuwuwar ƙwarewa ga tsofaffi da masu bincike, Bootstrap yana amfani da hacks na masu binciken CSS a wurare da yawa don ƙaddamar da CSS na musamman zuwa wasu nau'ikan burauzar don yin aiki tare da kwari a cikin masu binciken da kansu. Waɗannan hacks a fahimta suna haifar da masu inganta CSS don yin korafin cewa ba su da inganci. A wurare biyu, muna kuma amfani da siffofin CSS masu zubar da jini waɗanda har yanzu ba a daidaita su ba, amma ana amfani da su kawai don haɓaka haɓakawa.

Waɗannan faɗakarwar tabbatarwa ba su da mahimmanci a aikace tunda ɓangaren da ba na ɓarna ba na CSS ɗinmu ya inganta cikakke kuma ɓangaren ɓarna ba sa tsoma baki tare da ingantaccen aiki na ɓangaren mara ɓarna, don haka me yasa muka yi watsi da waɗannan gargaɗin da gangan.

Dokokin mu na HTML suma suna da gargaɗin ingantattun HTML marasa mahimmanci kuma marasa amfani saboda haɗawar da muka yi don wani bug na Firefox .

Goyan bayan ɓangare na uku

Duk da yake ba mu goyan bayan wani plugins na ɓangare na uku a hukumance ko ƙari ba, muna ba da wasu shawarwari masu amfani don taimakawa guje wa yuwuwar al'amurra a cikin ayyukanku.

Girman akwatin

Wasu software na ɓangare na uku, gami da Taswirorin Google da Injin Bincike na Musamman na Google, suna cin karo da Bootstrap saboda * { box-sizing: border-box; }, ƙa'idar da ta sa hakan paddingba ta shafar faɗin ƙididdiga na ƙarshe na wani abu. Ƙara koyo game da samfurin akwatin da girman girman a CSS Tricks .

Dangane da mahallin, zaku iya soke yadda ake buƙata (Zaɓi 1) ko sake saita girman akwatin don duka yankuna (Zaɓi 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();
}

Dama

Bootstrap yana bin ka'idodin gidan yanar gizo gama gari kuma - tare da ƙaramin ƙoƙari - ana iya amfani da shi don ƙirƙirar rukunin yanar gizo waɗanda ke isa ga waɗanda ke amfani da AT .

Tsallake kewayawa

Idan kewayawa ya ƙunshi hanyoyi da yawa kuma ya zo gaban babban abun ciki a cikin DOM, ƙara hanyar Skip to main contenthaɗi kafin kewayawa (don bayani mai sauƙi, duba wannan labarin A11Y Project akan hanyoyin haɗin kewayawa ). Yin amfani da .sr-onlyajin zai ɓoye mahaɗin tsallake-tsallake a gani, kuma .sr-only-focusableajin zai tabbatar da cewa hanyar haɗin zata bayyana sau ɗaya an mayar da hankali (ga masu amfani da madannai masu gani).

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

Nsted headings

Lokacin da ake saka kanun ( <h1>- <h6>), babban rubutun ku ya kamata ya zama <h1>. Ya kamata taken da ke gaba ya yi amfani da hankali <h2>- <h6>kamar yadda masu karanta allo za su iya gina teburin abubuwan ciki don shafukanku.

Ƙara koyo a HTML CodeSniffer da Samun damar Jihar Penn .

Bambancin launi

A halin yanzu, wasu abubuwan haɗin launi na tsoho da ake samu a cikin Bootstrap (kamar azuzuwan maɓalli masu salo daban-daban , wasu lambobin da ke nuna launuka da aka yi amfani da su don tubalan lambar asali , aji mai taimako na .bg-primary mahallin mahallin , da tsohuwar hanyar haɗin yanar gizo lokacin amfani da farar bango) suna da ƙananan bambanci (a ƙasa da shawarar da aka ba da shawarar na 4.5: 1 ). Wannan na iya haifar da matsala ga masu amfani da ƙananan gani ko waɗanda suke makafi masu launi. Waɗannan launukan tsoho na iya buƙatar gyaggyara don ƙara bambancinsu da halaccinsu.

Ƙarin albarkatu

• Alamar "HTML Codesniffer" don gano matsalolin samun dama
• Tsawaita Kayan Aikin Haɓaka Dama na Chrome
• Analyzer Adadin Launi
• Aikin A11Y
• Takardun samun damar MDN

FAQs lasisi

An saki Bootstrap a ƙarƙashin lasisin MIT kuma haƙƙin mallaka ne na 2019 Twitter. Boiled ƙasa zuwa ƙananan ƙugiya, ana iya kwatanta shi tare da yanayi masu zuwa.

Yana buƙatar ku:

• Ajiye lasisi da sanarwar haƙƙin mallaka an haɗa su a cikin Bootstrap's CSS da fayilolin JavaScript lokacin da kuke amfani da su a cikin ayyukanku.

Yana ba ku damar:

• Zazzagewa da amfani da Bootstrap kyauta, gabaɗaya ko a sashi, don na sirri, na sirri, na cikin kamfani, ko dalilai na kasuwanci
• Yi amfani da Bootstrap a cikin fakiti ko rarrabawar da kuka ƙirƙira
• Gyara lambar tushe
• Ba da lasisi don gyarawa da rarraba Bootstrap ga ɓangarorin uku waɗanda ba a haɗa su cikin lasisin ba

Yana hana ku:

• Riƙe mawallafa da masu lasisin alhakin lalacewa kamar yadda aka samar da Bootstrap ba tare da garanti ba
• Riƙe masu ƙirƙira ko masu haƙƙin mallaka na Bootstrap
• Sake rarraba kowane yanki na Bootstrap ba tare da ingantaccen sifa ba
• Yi amfani da duk wata alama ta Twitter ta kowace hanya da za ta iya bayyana ko nuna cewa Twitter ya amince da rarraba ku
• Yi amfani da duk wata alama ta Twitter ta kowace hanya da za ta iya bayyana ko nuna cewa ka ƙirƙiri software na Twitter da ake tambaya

Ba ya buƙatar ku:

• Haɗa tushen Bootstrap kanta, ko na kowane gyare-gyare da kuka yi masa, a cikin kowane sake rarrabawa za ku iya haɗawa wanda ya haɗa da shi.
• Ƙaddamar da canje-canjen da kuka yi wa Bootstrap baya zuwa aikin Bootstrap (ko da yake ana ƙarfafa irin wannan ra'ayi)

Cikakken lasisin Bootstrap yana cikin wurin ajiyar aikin don ƙarin bayani.

Fassara

Membobin al'umma sun fassara takaddun Bootstrap zuwa harsuna daban-daban. Babu ɗayan da aka goyan baya bisa hukuma kuma ƙila ba koyaushe ya kasance na zamani ba.

• Bootstrap 中文文档 ( Sinanci)
• Bootstrap på Dansk (Danish)
• Bootstrap a Faransa (Faransa)
• Bootstrap auf Deutsch (Jamus)
• Bootstrap in Italiano (Italiya)
• Bootstrap 한국어 (Yaren mutanen Koriya)
• Bootstrap em Português do Brasil (Brazil Portuguese)
• Bootstrap по-русски (Rashanci)
• Bootstrap en Español (Spanish)
• Türkçe Bootstrap (Turkiyya)
• Bootstrap українською (Ukrainian)
• Bootstrap na Việt (Vietnamese)

Ba ma taimakawa wajen tsarawa ko ɗaukar fassarori, muna haɗa su kawai.

An gama sabon ko mafi kyawun fassarar? Bude buƙatar ja don ƙara shi zuwa lissafin mu.