Download

Bootstrap (hadda v3.4.1) waxay leedahay dhowr siyaabood oo fudud oo si degdeg ah loo bilaabo, mid kastaa wuxuu soo jiidanayaa heer xirfadeed oo kala duwan iyo kiis isticmaal. Akhri si aad u aragto waxa ku habboon baahiyahaaga gaarka ah.

jsDelivr

Dadka jooga jsDelivr waxay si naxariis leh u bixiyaan taageerada CDN ee Bootstrap's CSS iyo JavaScript. Kaliya isticmaal kuwan 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>

Ku rakib Bower

Waxa kale oo aad ku rakibi kartaa oo maamuli kartaa Bootstrap's Less, CSS, JavaScript, iyo fonts addoo isticmaalaya Bower :

bower install bootstrap

Ku rakib npm

Waxa kale oo aad ku rakibi kartaa Bootstrap adoo isticmaalaya npm :

npm install bootstrap@3

require('bootstrap')waxay ku shubi doontaa dhammaan Bootstrap's jQuery plugins-ka shayga jQuery. moduleka bootstraplaftiisa waxba ma dhoofiyo. Waxaad si gaar ah ugu shuban kartaa Bootstrap's jQuery plugins adiga oo ku shubaya /js/*.jsfaylalka hoos yimaada hagaha heerka sare ee xirmada.

Bootstrap's package.jsonwuxuu ka kooban yahay xog badan oo dheeraad ah oo hoos yimaada furayaasha soo socda:

• less- Jidka loo maro Bootstrap's faylka isha ka yar
• style- Jidka loo maro Bootstrap's CSS-ka aan la yarayn ee horay loo soo ururiyay iyadoo la adeegsanayo jaangooyooyinka caadiga ah (wax habayn lahayn)

Ku rakib laxanka

Waxa kale oo aad ku rakibi kartaa oo maamuli kartaa Bootstrap's Less, CSS, JavaScript, iyo fonts adoo isticmaalaya laxanka :

composer require twbs/bootstrap

Autoprefixer ayaa looga baahan yahay wax ka yar/Sass

Bootstrap wuxuu adeegsadaa Autoprefixer si uu ula tacaalo horgalayaasha CSS . Haddii aad Bootstrap ka ururinayso isha ka yar/Sass oo aanad isticmaalin Gruntfile-kayaga, waxaad u baahan doontaa inaad laftaadu ku dhex darto Autoprefixer habka dhismahaaga. Haddii aad isticmaalayso Bootstrap-ka hore ama aad isticmaalayso Gruntfile-kayaga, uma baahnid inaad ka walwasho tan sababtoo ah Autoprefixer ayaa mar horeba lagu dhex daray Gruntfile.

Maxaa ka mid ah

Bootstrap waxaa lagu soo dejisan karaa laba qaab, taas oo aad ka heli doonto hagayaasha soo socda iyo faylalka, si macquul ah u kooxaynta agabyada guud oo bixisa kala duwanaansho la soo ururiyey iyo kuwa la yareeyey.

Bootstrap-ka la sii diyaariyay

Marka la soo dejiyo, fur galka la isku riixay si aad u aragto qaab-dhismeedka (kuwa la isku duba riday) Bootstrap Waxaad arki doontaa wax sidan oo kale ah:

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

Kani waa qaabka ugu aasaasiga ah ee Bootstrap: faylalka horay loo soo diyaariyay ee isticmaalka degdega ah ee ku dhawaad ​​mashruuc kasta oo shabakad ah. Waxaan bixinaa CSS iyo JS ( bootstrap.*), iyo sidoo kale CSS la soo ururiyey oo la yareeyey iyo JS ( bootstrap.min.*). Khariidadaha isha CSS ( bootstrap.*.map) ayaa diyaar u ah in lagu isticmaalo daalacashada qalabyada horumariyaha qaarkood. Farta ka socota Glyphicons ayaa lagu soo daray, sidoo kale mawduuca Bootstrap ee ikhtiyaarka ah.

Koodhka isha bootstrap

Soo dejinta koodhka isha Bootstrap waxaa ku jira CSS-da la sii diyaariyay, JavaScript, iyo hantida farta, oo ay la socoto isha ka yar, JavaScript, iyo dukumentiyada. Si gaar ah, waxa ka mid ah kuwan soo socda iyo in ka badan:

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

The less/, js/, iyo fonts/waa furaha isha ee CSS, JS, iyo astaanta (sida ay u kala horreeyaan). Galka dist/waxa ku jira wax kasta oo ku taxan qaybta hore loo soo dejiyey ee sare. Galka docs/waxaa ku jira summada isha ee dukumeentigeena, iyo examples/isticmaalka Bootstrap. Intaa ka sokow, fayl kasta oo lagu soo daray wuxuu bixiyaa taageerada xirmooyinka, macluumaadka shatiga, iyo horumarinta.

Ururinta CSS iyo JavaScript

Bootstrap waxay u isticmaashaa Grunt nidaamkeeda dhismaheeda, oo leh habab ku habboon in lagu shaqeeyo qaabka. Waa sida aan u ururinno koodkayaga, u wadno imtixaannada, iyo in ka badan.

Ku rakibida Grunt

Si aad u rakibto Grunt, waa inaad marka hore soo dejisaa oo aad rakibtaa node.js (oo ay ku jirto npm). npm waxay u taagan tahay unugyo baakadaysan oo node ah waana hab lagu maareeyo ku tiirsanaanta horumarka iyada oo loo marayo node.js.

1. Ku rakib grunt-clicaalami ahaan npm install -g grunt-cli.
2. U gudub tusaha xididka /bootstrap/, ka dibna orod npm install. npm waxay eegi doontaa package.jsonfaylka oo si toos ah u rakibi doona ku-tiirsanaanta lama huraanka ah ee meeshaas ku qoran.

Marka la dhammeeyo, waxaad awoodi doontaa inaad socodsiiso amarrada kala duwan ee Grunt ee laga bixiyo khadka taliska.

Amarrada Grunt ee la heli karo

grunt dist(Kaliya soo ururi CSS iyo JavaScript)

Wuxuu dib u /dist/soo nooleeyaa tusaha isagoo wata faylal CSS iyo JavaScript la ururiyey oo la yareeyey. Isticmaale Bootstrap ahaan, kani caadiyan waa amarka aad rabto.

grunt watch(Daawo)

Wuxuu daawadaa il-yaraha faylalka oo si toos ah ugu ururiyaa CSS mar kasta oo aad kaydiso isbeddel.

grunt test(Orod imtixaanada)

Waxa uu wadaa JSHint oo uu ku socodsiiyaa imtixaanada QUnit browser -yada dhabta ah mahada iska leh Karma .

grunt docs(dhiso oo tijaabi hantida dukumeentiyada)

Wuxuu dhisaa oo tijaabiyaa CSS, JavaScript, iyo hantida kale ee la isticmaalo marka dukumentiga lagu socodsiinayo gudaha bundle exec jekyll serve.

grunt(Gabi ahaanba wax walba dhis oo tijaabi imtixaanada)

Wuxuu ururiyaa oo yareeyaa CSS iyo JavaScript, wuxuu dhisaa bogga dukumeentiyada, wuxuu maamulaa ansaxiyaha HTML5 ka soo horjeeda dukumeentiyada, dib u soo nooleynta hantida Customizer, iyo in ka badan. Wuxuu u baahan yahay Jekyll . Caadi ahaan waa lagama maarmaan kaliya haddii aad jabsanayso Bootstrap lafteeda.

Ciladaynta

Haddii aad la kulanto dhibaatooyin ku saabsan rakibidda ku-tiirsanaanta ama socodsiinta amarrada Grunt, marka hore tirtir /node_modules/tusaha ay soo saartay npm. Kadibna, ku celi npm install.

Qaabka aasaasiga ah

Ka bilow template HTML ee aasaasiga ah, ama wax ka beddel tusaalahan . Waxaan rajaynaynaa inaad habayn doonto qaab-dhismeedkayada iyo tusaalayaashayada, adigoo ku habaynaya si ay ugu habboonaadaan baahiyahaaga.

Koobi HTML-ka hoose si aad u bilowdo ku shaqaynta dukumeenti Bootstrap ugu yar.

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

Tusaalooyinka

Ku dhis qaabka aasaasiga ah ee kore oo leh qaybaha badan ee Bootstrap. Waxaanu kugu dhiirigelinaynaa inaad habayso oo aad la qabsato Bootstrap si uu u waafajiyo baahiyaha mashruucaaga gaarka ah.

Hel koodka isha tusaale kasta oo hoose adiga oo soo dejinaya kaydka Bootstrap . Tusaalooyinka waxaa laga heli karaa docs/examples/hagaha.

Isticmaalka qaabka

Qaabka bilowga

Ma jiro wax aan ahayn aasaaska: CSS la soo ururiyey iyo JavaScript oo ay weheliso weel.

Dulucda bootstrap

Ku dheji mawduuca Bootstrap ee ikhtiyaarka ah ee waayo-aragnimada muuqaal ahaan loo xoojiyay.

Xargaha

Tusaalooyinka kala duwan ee qaab-dhismeedka grid oo leh dhammaan afarta heer, buul, iyo in ka badan.

Jumbotron

Ku dhis agagaarka jumbotron leh navbar iyo qaar ka mid ah tiirarka shabagga aasaasiga ah.

Jumbotron cidhiidhi ah

Dhis bog gaar ah adiga oo yareynaya weelka caadiga ah iyo jumbotron

Navbars oo shaqaynaya

Navbar

Qaabka aasaasiga ah ee ugu sarreeya oo ay ku jiraan navbar-ka oo ay la socdaan waxyaabo dheeraad ah.

Navbar sare oo taagan

Qaabka aasaasiga ah ee ugu sarreeya oo leh navbar sare oo taagan oo ay weheliso waxyaabo dheeraad ah.

Navbar go'an

Qaabka aasaasiga ah ee Super oo leh navbar sare oo go'an oo ay la socdaan waxyaabo dheeraad ah.

Qaybaha gaarka ah

Dabool

Qaab hal bog ah oo loogu talagalay in lagu dhiso bogag guri oo fudud oo qurux badan.

Carousel

Habee navbar iyo carousel, ka dibna ku dar qaybo cusub.

Blog

Qaab fudud oo laba-column blog ah oo leh hagitaan caado ah, madax, iyo nooca.

Dashboard-ka

Qaab dhismeedka aasaasiga ah ee dashboardka maamulka oo leh bar-side go'an iyo navbar.

Bogga galitaanka

Qaabaynta qaabka gaarka ah iyo naqshadaynta calaamad fudud oo foomka ah.

Nav xaq ah

Samee navbar gaar ah oo leh xiriiriyeyaal xaq ah. Madaxa kor u qaad! Ma aha mid aad u saaxiibtinimo Safari.

Cag dhegdheg leh

Ku dheji cag dhinaca hoose ee daawashada marka waxa ku jira uu ka gaaban yahay.

Caga dhegdheg leh oo leh navbar

Ku dheji cag dhinaca hoose ee daawashada oo leh navbar go'an oo sare ku yaal.

Tijaabooyin

Bootstrap aan jawaab lahayn

Si fudud u dami ka jawaab celinta Bootstrap docsyadayada .

Shiraac ka baxsan

Dhis liiska socodka shiraac ka baxsan shiraac si loogu isticmaalo Bootstrap.

Qalab

Bootlint

Bootlint waa aaladda rasmiga ah ee Bootstrap HTML. Waxay si toos ah u hubisaa dhowr qalad oo HTML ah oo ku jira boggaga internetka kuwaas oo u isticmaalaya Bootstrap si cadaalad ah "vanilla". Qaybaha Vanilla Bootstrap's/widgets waxay u baahan yihiin qaybahooda DOM si ay ugu hoggaansamaan qaababka qaarkood. Bootlint waxay hubisaa in tusaalooyinka qaybaha Bootstrap ay si sax ah u habeeyeen HTML. Tixgeli inaad ku darto Bootlint qalabkaaga horumarinta shabakada Bootstrap si aanay khaladaadka caadiga ah midkoodna u dhimin horumarka mashruucaaga.

Bulshada

La soco wixii ku saabsan horumarinta Bootstrap oo la xiriir bulshada agabkan waxtarka leh.

• Akhri oo rukunso Blog-ga Bootstrap-ka Rasmiga ah .
• Kala hadal Bootstrappers kale adiga oo isticmaalaya IRC irc.freenode.netserver-ka, gudaha kanaalka ##bootstrap .
• Caawinta isticmaalka Bootstrap, weydii StackOverflow adoo isticmaalaya sumaddatwitter-bootstrap-3 .
• Horumariyayaashu waa inay adeegsadaan ereyga muhiimka ah bootstrapee xirmooyinka wax ka beddelaya ama ku dara shaqada Bootstrap marka loo qaybinayo npm ama hababka gudbinta la midka ah si loo helo ugu badnaan.
• Ka hel tusaalooyin dhiirigelin leh oo dadka ku dhisa Bootstrapka Bootstrap Expo .

Waxaad sidoo kale kala socon kartaa @getbootstrap Twitter- ka xanta ugu dambeysay iyo muuqaalada muusiga ee cajiibka ah.

Naafada ka jawaabida

Bootstrap wuxuu si toos ah ugu habeeyaa boggaga cabbirrada shaashadaha kala duwan. Waa kan sida loo damiyo sifadan si boggaagu u shaqeeyo sida tusaalahan aan jawaab-celinta lahayn .

Talaabooyinka lagu joojinayo jawaab celinta bogga

1. Iska dhaaf aragtida <meta>lagu sheegay dukumeentiyada CSS
2. Ku dhaaf kan widthku yaal .containerheer-beero kasta oo leh hal balac, tusaale ahaan width: 970px !important;Hubi in tani ay timaaddo Bootstrap-ka caadiga ah ee CSS. Waxaad si ikhtiyaar ah uga fogaan kartaa !importantsu'aalaha warbaahinta ama qaar ka mid ah xulashada-fu.
3. Haddii aad isticmaalayso navbars, ka saar dhammaan navbar burburay iyo habdhaqanka ballaarinta.
4. Qaabaynta sharoobada, isticmaal .col-xs-*fasallada ka sokow, ama meesha, kuwa dhexe/weyn. Ha werwerin, qalabka yar-yar ee dheeraadka ah ayaa cabbiraya dhammaan xallinta.

Waxaad weli u baahan doontaa Respond.js ee IE8 (maadaama su'aalahayaga warbaahintu ay weli jiraan oo ay u baahan yihiin in la habeeyo). Tani waxay curyaamisaa "goobta mobilada" dhinacyada Bootstrap.

Qaabka bootstrap ee ka jawaab celinta waa naafo

Tillaabooyinkan waxaan ku dabaqnay tusaale. Akhri koodka isha si aad u aragto isbeddelada gaarka ah ee la fuliyay.

Eeg tusaale aan jawaab-celin lahayn

Browser iyo taageerada qalabka

Bootstrap waxaa loo dhisay inuu si wanaagsan ugu shaqeeyo Desktop-kii ugu dambeeyay iyo daalacashada mobilada, taasoo la micno ah daalacashada hore ayaa laga yaabaa inay soo bandhigaan qaab kala duwan, inkastoo ay si buuxda u shaqeynayaan, muujinta qaybaha qaarkood.

daalacashada la taageeray

Gaar ahaan, waxaanu taageernaa noocyadii ugu dambeeyay ee daalacashada iyo aaladaha soo socda.

Daalacashada beddelka ah ee adeegsata noocii ugu dambeeyay ee WebKit, Blink, ama Gecko, ha ahaato si toos ah ama ha ahaato goobta muuqaalka shabakadda API, si cad looma taageero. Si kastaba ha ahaatee, Bootstrap waa in (xaaladaha intooda badan) ay si sax ah u soo bandhigaan oo si sax ah ugu shaqeeyaan daalacashadan sidoo kale. Macluumaad dheeri ah oo gaar ah ayaa lagu bixiyaa hoosta.

Qalabka mobilada

Guud ahaan, Bootstrap waxay taageertaa noocyadii ugu dambeeyay ee madal kasta oo daalacashada caadiga ah. Ogow in browsers-yada wakiillada ah (sida Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) aan la taageerin.

daalacashada Desktop

Sidoo kale, noocyadii ugu dambeeyay ee inta badan daalacashada desktop-ka waa la taageerayaa.

Daaqadaha, waxaan taageernaa Internet Explorer 8-11 .

Firefox, marka lagu daro sii dayntii ugu dambeysay ee xasilloonida, waxaan sidoo kale taageernaa sii deynta Taageerada Dheeraadka ah ee ugu dambeysay (ESR) ee Firefox.

Si aan rasmi ahayn, Bootstrap waa inuu si fiican ugu dhaqmaa Chromium iyo Chrome ee Linux, Firefox for Linux, iyo Internet Explorer 7, iyo sidoo kale Microsoft Edge, in kasta oo aan si rasmi ah loo taageerin.

Liisaska qaar ka mid ah cilladaha browserka ee Bootstrap ay tahay in uu la tacaalo, arag darbigayaga kutaannada browserka .

Internet Explorer 8 iyo 9

Internet Explorer 8 iyo 9 sidoo kale waa la taageerayaa, si kastaba ha ahaatee, fadlan la soco in qaar ka mid ah guryaha CSS3 iyo HTML5 aysan si buuxda u taageerin daalacashadan. Intaa waxaa dheer, Internet Explorer 8 waxay u baahan tahay isticmaalka Respond.js si ay awood ugu siiso taageerada weydiinta warbaahinta.

Booqo Ma isticmaali karaa... faahfaahinta taageerada browserka ee sifooyinka CSS3 iyo HTML5.

Internet Explorer 8 iyo Respond.js

Ka digtoonow digniinaha soo socda markaad Respond.js u isticmaalayso horumarkaaga iyo deegaankaaga wax soo saarka ee Internet Explorer 8.

Respond.js iyo CSS-ka-taliyaha

Isticmaalka Respond.js ee leh CSS oo lagu hayo meel (sub) ka duwan (tusaale, CDN) waxay u baahan tahay habayn dheeraad ah. Faahfaahinta ka eeg dukumeentiyada Respond.js

Ka jawaab.js iyofile://

Shuruucda amniga browserka awgeed, Respond.js kuma shaqeyso boggaga lagu arko file://hab-maamuuska (sida marka la furayo faylka HTML maxalli ah). Si aad u tijaabiso sifooyinka ka jawaabaya gudaha IE8, ka eeg boggaga HTTP(S). Faahfaahinta ka eeg dukumeentiyada Respond.js

Ka jawaab.js iyo@import

Respond.js kuma shaqeyso CSS ee lagu tixraacayo @import. Gaar ahaan, qaar ka mid ah qaababka Drupal ayaa loo yaqaan inay isticmaalaan @import. Faahfaahinta ka eeg dukumeentiyada Respond.js

Internet Explorer 8 iyo sanduuqa cabbirka

IE8 si buuxda uma taageero box-sizing: border-box;marka lagu daro min-width, max-width, min-height, ama max-height. Sababtaas awgeed, laga bilaabo v3.0.1, hadda ma isticmaalno max-widths .container.

Internet Explorer 8 iyo @font-face

IE8 waxay leedahay arrimo qaarkood @font-facemarka lagu daro :before. Bootstrap waxay isticmaashaa isku dhafkaas Glyphicons. Haddii bog la kaydiyo, oo lagu shubo mouse-ka oo aan la dul marin daaqadda (tusaale ku dhufo badhanka dib u soo kicinta ama wax ku shub iframe) markaas bogga waxa la sameeyay ka hor inta aanay fartu soo degin. Ku dul boodista bogga (jidhka) waxay tusi doontaa qaar ka mid ah calaamadaha oo ku dul boodboodka calaamadaha soo hadhay waxay tusi doontaa kuwa sidoo kale. Faahfaahinta ka eeg tirsiga #13863 .

IE Hababka Waafaqid

Bootstrap laguma taageero qaababkii hore ee Internet Explorer. Si aad u hubiso inaad isticmaalayso qaabkii ugu dambeeyay ee IE, tixgeli inaad ku darto summada ku habboon <meta>bogaggaaga:

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

Xaqiiji qaabka dukumeentiga adigoo furaya qalabka wax-ka-hortagga: taabo F12oo hubi "Qaabka Dukumentiga".

Summadan waxay ku jirtaa dhammaan dukumeentiyada Bootstrap iyo tusaalooyinka si loo hubiyo sida ugu wanaagsan ee suurtogalka ah ee nooc kasta oo Internet Explorer ah oo la taageero.

Ka eeg su'aasha StackOverflow wixii macluumaad dheeraad ah.

Internet Explorer 10 gudaha Windows 8 iyo Windows Phone 8

Internet Explorer 10 kama soocna ballaca aaladda ballaca daawashada , sidaas awgeedna si habboon uma dabaqdo weydiimaha warbaahinta ee Bootstrap's CSS . Caadi ahaan waxaad ku dari lahayd qayb yar oo degdeg ah oo CSS ah si tan loo hagaajiyo:

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

Si kastaba ha ahaatee, tani uma shaqaynayso aaladaha ku shaqeeya Windows Phone 8 versions ka weyn Update 3 (loo yaqaan GDR3) , sababtoo ah waxay keenaysaa qalabkan oo kale inay muujiyaan muuqaal u badan desktop halkii ay cidhiidhi lahaayeen aragtida "telefoonka". Si aad tan wax uga qabato, waxaad u baahan doontaa inaad ku darto CSS-ga soo socda iyo JavaScript si aad uga shaqeyso bug .

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

Macluumaad dheeraad ah iyo tilmaamaha isticmaalka, akhri Windows Phone 8 iyo Aaladda-ballaadhka .

Horudhac ahaan, waxaan tan ku darnaa dhammaan dukumeentiyada Bootstrap iyo tusaalooyin muujin ahaan.

Boqolkiiba Safari soo koobid

Matoorka samaynta ee noocyada Safari ka hor v7.1 ee OS X iyo Safari ee macruufka v8.0 ayaa xoogaa dhib ah kala kulmay tirada meelaha tobanlaha ah ee loo isticmaalo .col-*-1fasaladayada grid. Markaa haddii aad lahayd 12 tiir oo sharooto ah, waxaad ogaan lahayd inay gaabnaayeen marka la barbar dhigo safafka kale ee tiirarka. Ka sokow cusboonaysiinta Safari/iOS, waxaad haysataa qaar ka mid ah fursadaha xalinta shaqada:

• Ku dar .pull-righttiirarkaagii ugu dambeeyay si aad u hesho toosinta midig ee adag
• Si aad gacanta ugu rogto boqolleydaada si aad u hesho wareegga ugu habboon ee Safari (oo ka adag doorashada koowaad)

Hababka, navbars, iyo kiiboodhka farsamada

Buux-dhaaf iyo rogrogid

Taageerada curiyaha overflow: hiddenayaa <body>aad u xaddidan macruufka iyo Android. Si taas loo gaaro, marka aad ka gudubto xagga sare ama hoose ee modal mid ka mid ah daalacashada aaladahaas, <body>waxa ku jira ayaa bilaabi doona in ay rogaan. Eeg bug Chrome ah #175502 (ku xidhan Chrome v40) iyo bug WebKit #153852 .

Garoomada qoraalka ee iOS iyo duuduub

Sida iOS 9.3, halka modal furan yahay, haddii taabashada bilowga ah ee tilmaanta duubku ay ku dhex jirto xadka qoraalka <input>ama a <textarea>, <body>waxa ku jira modalka hoostiisa waa la rogrogmi doonaa halkii modal laftiisa. Fiiri WebKit bug #153856 .

Kiiboodhka dhabta ah

Sidoo kale, la soco in haddii aad isticmaalayso navbar go'an ama aad isticmaalayso agabka gudaha modal, iOS waxa uu leeyahay bug samaynta oo aan cusboonaysiin booska walxaha go'an marka kiiboodhka farsamada la kiciyo. Waxyaabo dhowr ah oo tan ah waxaa ka mid ah inaad u beddesho walxahaaga position: absoluteama u yeerida saacada diirada saara si aad isugu daydo inaad gacanta ku saxdo meelaynta. Tan ma maamusho Bootstrap, markaa adiga ayay kugu xiran tahay inaad go'aansato xalka ugu fiican codsigaaga.

Navbar Dropdowns

Cunsurka .dropdown-backdroplooma isticmaalo IOS ee nav sababtoo ah kakanaanta z-indexing. Markaa, si aad u xidho hoos u dhaca navbars, waa inaad si toos ah u gujisaa qaybta hoos u dhaca (ama shay kasta oo kale kaas oo kicin doona dhacdo gujin ah oo ku taal iOS ).

Browser-gaaban

Soo-dhoweynta bogga ayaa si lama filaan ah u soo bandhigaysa samaynta farshaxan ee qaybaha qaarkood, labadaba Bootstrap iyo inta kale ee shabakadda. Iyadoo ay ku xiran tahay arrinta, waxaa laga yaabaa inaan awoodno inaan hagaajino (marka hore raadi ka dibna fur arrin haddii loo baahdo). Si kastaba ha ahaatee, waxaan u muuqannaa inaan iska indhatirno kuwan maadaama aysan inta badan haysan xal toos ah oo aan ahayn xalal xun.

Ku dheggan :hover/ :focusmobilka

In kasta oo dullimaad dhab ahi aanay suurtogal ahayn inta badan shaashadaha taabashada, badi daalacashada moobiilku waxa ay ku daydaan taageerada kor u kaca oo ay sameeyaan :hover"ku dheggan". Si kale haddii loo dhigo, :hoverqaababka ayaa bilaabaya codsashada ka dib marka la taabto shay oo kaliya jooji codsiga ka dib marka isticmaaluhu taabto shay kale. Tani waxay sababi kartaa in :hovergobolada Bootstrap ay si aan la rabin u "ku dheggan" daalacashada noocaas ah. Qaar ka mid ah daalacashada mobilada ayaa sidoo kale sameeya :focussi la mid ah kuwa dhegdheg leh. Hadda ma jirto xal fudud oo arrimahan ah oo aan ka ahayn in gebi ahaanba meesha laga saaro qaababkaas.

Daabacaadda

Xataa daalacashada casriga ah qaarkood, daabacaaddu waxay noqon kartaa mid qariib ah.

Gaar ahaan, sida Chrome v32 iyo iyada oo aan loo eegin goobaha margin, Chrome waxay isticmaashaa ballaca aragtida si aad uga yar cabbirka warqadda jireed marka la xalinayo weydiimaha warbaahinta marka la daabacayo bogga shabakadda. Tani waxay keeni kartaa in Bootstrap-ka-yar-yar ee dheeraadka ah si lama filaan ah loo hawlgeliyo marka la daabacayo. Fiiri arrinta #12078 iyo Chrome bug #273306 wixii faahfaahin ah. Hagaajinta la soo jeediyay:

• Qabsoo shabaqyada-yar ee dheeraadka ah oo hubi in boggaagu u muuqdo mid la aqbali karo hoostiisa.
• Habbee qiyamka @screen-*doorsoomayaasha Yaryar si warqadaada daabacaada loo tixgeliyo inay ka weyn tahay kuwa yar yar.
• Ku dar su'aalaha warbaahinta gaarka ah si aad u bedesho cabbirka xajmiyada goynta ee warbaahinta daabacan oo keliya.

Sidoo kale, sida Safari v8.0, ballac go'an .containers waxay sababi kartaa Safari inay isticmaasho cabbir yar oo aan caadi ahayn marka la daabacayo. Fiiri #14868 iyo WebKit bug #138192 wixii faahfaahin dheeraad ah. Mid ka mid ah xalinta suurtagalka ah ee tan ayaa ku daraya CSS soo socda:

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

browserka stock Android

Marka laga reebo sanduuqa, Android 4.1 (iyo xitaa qaar cusub oo la sii daayay sida muuqata) waxay la soo degtaa abka Browser-ka oo ah browser-ka caadiga ah ee dookha (oo ka duwan Chrome). Nasiib darro, abka Browserku wuxuu leeyahay kutaanno badan iyo iswaafaqla'aan la xiriira CSS guud ahaan.

Dooro liiska

Cunsurrada <select>, browserka saamiyada Android ma soo bandhigi doono kontaroolada dhinac haddii ay jiraan border-radiusiyo/ama borderlagu dabaqay. ( Faahfaahinta ka eeg su'aashan StackOverflow <select>Wakiilka adeegsadaha dhuuqida ayaa ka fogaanaya faragelinta Chrome, Safari, iyo daalacashada 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>

Ma rabtaa inaad aragto tusaale? Fiiri JS Bin demo.

Ansixiyeyaal

Si loo siiyo waayo-aragnimada ugu wanaagsan ee suurtogalka ah ee daalacashada hore iyo kuwa buggy, Bootstrap waxay isticmaashaa hacks browser CSS meelo badan si ay u beegsato CSS gaar ah noocyada browserka qaarkood si ay uga shaqeeyaan kutaannada daalacashada laftooda. Dhacdooyinkan si la fahmi karo waxay sababaan ansaxayaasha CSS inay ka cawdaan inay khaldan yihiin. Meelo lamaane ah, waxaan sidoo kale isticmaalnaa astaamaha CSS-da ee dhiig-baxa kuwaas oo aan wali si buuxda loo habayn, laakiin kuwan waxa kaliya loo isticmaalaa kobcinta horumarka.

Digniintan ansaxinta ah shaqo kuma laha ficil ahaan maadaama qaybta aan jabsanayn ee CSS-tayadu si buuxda u ansixiso oo qaybaha jabsiga ahi aanay faragelin habsami u shaqaynta qaybta aan jabsanayn, sidaa awgeed sababta aanu si ula kac ah isaga indho-tirno digniinahaas gaarka ah.

Dukumeentiyadayada HTML sidoo kale waxay leeyihiin digniino ansax ah oo HTML ah oo aan waxtar lahayn oo aan macno lahayn taas oo ay ugu wacan tahay ku darista hab-dhaqanka cilad Firefox gaar ah .

Taageerada dhinac saddexaad

In kasta oo aynaan si rasmi ah u taageerin wax plugins ah oo dhinac saddexaad ah ama lagu daro, waxaanu ku siinaynaa talo waxtar leh si looga fogaado arrimaha suurtagalka ah ee mashaariicdaada.

Cabbirka sanduuqa

Qaar ka mid ah software-ka saddexaad, oo ay ku jiraan Khariidadaha Google iyo Mashiinka Raadinta Gaarka ah ee Google, ayaa iska hor imanaya Bootstrap sababtoo ah * { box-sizing: border-box; }, qaanuunka ka dhigaya sidaas paddingma saameynayo ballaca ugu dambeeya ee shay. Baro wax badan oo ku saabsan moodelka sanduuqa iyo cabbirida CSS Tricks .

Iyadoo ku xiran macnaha guud, waxaad ka gudbi kartaa hadba sida loogu baahdo (Doorashada 1) ama waxaad dib u dejin kartaa cabbirka sanduuqa dhammaan gobollada (Doorashada 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();
}

Helitaanka

Bootstrap waxay raacdaa heerarka shabakadaha caadiga ah iyo-iyada oo leh dadaal dheeri ah oo yar-waxaa loo isticmaali karaa in lagu abuuro goobo ay heli karaan kuwa isticmaalaya AT .

Ka bood jihada

Haddii navigation-kaagu ka kooban yahay xiriiriyeyaal badan oo uu ka horeeyo nuxurka ugu muhiimsan ee DOM, ku dar Skip to main contentxiriiriye ka hor navigation (sharaxaad fudud, fiiri maqaalkan Mashruuca A11Y ee ku saabsan isku xirka navigation boodboodka ). Isticmaalka .sr-onlyfasalka waxay si muuqaal ah u qarin doontaa isku xirka boodboodka, .sr-only-focusablefasalkuna wuxuu hubin doonaa in iskuxirku uu noqdo mid muuqda marka la eego (isticmalayaasha kiiboodhka aragga ah).

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

Ciwaanka buulsan

Marka ciwaanada buulka ( <h1>- <h6>), madaxa dukumeentigaaga koowaad waa inuu ahaado <h1>. Ciwaanada xiga waa inay si macquul ah u isticmaalaan <h2>- <h6>sida in akhristayaasha shaashadu ay u dhisi karaan tusmada boggagaaga.

Wax badan ka baro HTML CodeSniffer iyo Helitaanka Awoodda Gobolka Penn .

Kala duwanaanshaha midabka

Waqtigan xaadirka ah, qaar ka mid ah isku dhafka midabka caadiga ah ee laga heli karo Bootstrap (sida fasallada badhanka qaabaysan ee kala duwan , qaar ka mid ah koodhka muujinaya midabada loo isticmaalo blocks code aasaasiga ah , fasalka caawiyaha .bg-primary asalka ah, iyo midabka isku xidhka caadiga ah marka loo isticmaalo asal cad) leeyihiin saamiga isbarbardhigga hooseeya (ka hooseeya saamiga lagu taliyey ee 4.5: 1 ). Tani waxay dhibaato u keeni kartaa isticmaalayaasha aragga hooseeya ama kuwa midabka indhoolaha ah. Midabadaan caadiga ah ayaa laga yaabaa inay u baahdaan in wax laga beddelo si loo kordhiyo isbar-bardhigga iyo sharci ahaanshahooda.

Khayraadka dheeraadka ah

• Buug-yareedka "HTML Codesniffer" ee lagu aqoonsanayo arrimaha gelitaanka
• Kordhinta Aaladaha Horumariyaha Helitaanka Chrome
• Kala-duwanaanshaha Midabka
• Mashruuca A11Y
• Dukumentiyada gelitaanka MDN

FAQs shatiga

Bootstrap waxaa lagu siidaayay shatiga MIT waana xuquuqda daabacaada 2019 Twitter. La kariyey ilaa qaybo yaryar, waxaa lagu tilmaami karaa xaaladaha soo socda.

Waxay u baahan tahay inaad:

• Hayso shatiga iyo ogeysiiska xuquuqda daabacaada ee lagu daray Bootstrap's CSS iyo faylalka JavaScript marka aad u isticmaasho shaqadaada

Waxay kuu ogolaanaysaa inaad:

• Si xor ah u soo deji oo u isticmaal Bootstrap, gebi ahaan ama qayb ahaan, shakhsi ahaan, gaar ah, shirkad gudaha ah, ama ujeeddooyin ganacsi
• Ku isticmaal Bootstrap xirmooyinka ama qaybinta aad abuurto
• Wax ka beddel koodka isha
• Sii shati hoosaad si wax looga beddelo oo loogu qaybiyo Bootstrap qolo saddexaad oo aan ku jirin shatiga

Waxay kaa mamnuucday inaad:

• Hayso qorayaasha iyo milkiilayaasha shatiga mas'uuliyadda waxyeelada maadaama Bootstrap lagu bixiyo dammaanad la'aan
• Hayso abuurayaasha ama kuwa haysta xuquuqda daabacaadda ee Bootstrap
• Dib u qaybi qayb kasta oo Bootstrap ah iyada oo aan si sax ah loo nisbayn
• Isticmaal calaamad kasta oo ay leedahay Twitter si kasta oo sheegi kara ama tilmaamaysa in Twitter-ku uu taageerayo qaybintaada
• Isticmaal calaamad kasta oo ay leedahay Twitter si kasta oo sheegi kara ama muujin kara inaad abuurtay software-ka Twitter-ka ee su'aasha ah

Kaama baahna inaad:

• Ku dar isha Bootstrap lafteeda, ama wax ka beddel kasta oo aad ku samaysay, qaybin kasta oo aad isku soo ururin karto oo ay ku jirto
• U soo gudbi isbeddelada aad ku samayso Bootstrap dib ugu celi mashruuca Bootstrap (inkasta oo jawaab celintan la dhiiri geliyo)

Shatiga Bootstrap oo buuxa wuxuu ku yaalaa kaydka mashruuca wixii macluumaad dheeraad ah.

Turjumaada

Xubnaha bulshadu waxay u turjumeen waraaqaha Bootstrap luqado kala duwan. Midna si rasmi ah looma taageero waxaana laga yaabaa inaysan mar walba la socon.

• Bootstrap 中文文档 (Shiine)
• Bootstrap på Dansk (Danish)
• Bootstrap en Français (Faransiiska)
• Bootstrap auf Deutsch (Jarmal)
• Bootstrap oo Talyaani ah (Talyaani)
• Bootstrap 한국어 (Kuuriyaan)
• Bootstrap em Português do Brasil (Boortaqiiska Brazil)
• Bootstrap по-русски (Ruush)
• Bootstrap en Español (Isbaanish)
• Türkçe Bootstrap (Turki)
• Bootstrap українською (Ukrayn)
• Bootstrap-ka Việt (Vietnamese)

Ma caawino abaabulka iyo martigelinta turjumaada, kaliya waxaan ku xidhnaa iyaga.

Ma dhammaysay turjumaad cusub ama ka wanaagsan? Fur codsi jiid si aad ugu darto liiskayaga.