Buusuu

Bootstrap (yeroo ammaa v3.4.1) karaalee salphaa muraasa dafanii jalqabuu danda'an qaba, tokkoon tokkoon isaanii sadarkaa ogummaa fi haala itti fayyadama adda addaa hawwatu. Fedhii addaa keessaniif maaltu akka mijatu ilaaluuf dubbisaa.

jsDelivr jedhamuun beekama

Namoonni jsDelivr irratti argaman tolaan deeggarsa CDN Bootstrap's CSS fi JavaScript ni kennu. Hidhamtoota jsDelivr kana qofa fayyadamaa .

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Bower waliin dhaabuu

Akkasumas Bootstrap's Less, CSS, JavaScript, fi qubeewwan Bower fayyadamuun fe'uu fi bulchuu dandeessa :

bower install bootstrap

npm waliin fe'i

Bootstrap npm fayyadamuunis fe'uu dandeessu :

npm install bootstrap@3

require('bootstrap')ifteessitoota jQuery Bootstrap hunda wanta jQuery irratti ni fe'a. Moojulichi mataan bootstrapisaa homaa hin ergu. /js/*.jsFaayilota galmee sadarkaa olaanaa paakeejii jalatti fe'uudhaan ifteessitoota jQuery Bootstrap dhuunfaan harkaan fe'uu dandeessa .

Bootstrap's package.jsonfurtuuwwan armaan gadii jalatti meetadaataa dabalataa tokko tokko of keessaa qaba:

• less- daandii gara faayilii madda Less guddaa Bootstrap
• style- daandii gara CSS Bootstrap hin xiqqaafne kan qindaa'inoota durtii fayyadamuun dursee qindaa'e (dhuunfachiisuun hin jiru)

Composer waliin fe'i

Akkasumas Bootstrap's Less, CSS, JavaScript, fi qubeewwan Composer fayyadamuun fe'uu fi bulchuu dandeessa :

composer require twbs/bootstrap

Durdurii ofumaa Less/Sass'f barbaachisaadha

Bootstrap durtii gurguraa CSS ilaaluuf Autoprefixer fayyadama . Yoo Bootstrap madda isaa Less/Sass irraa qindeessaa jirta ta'ee fi Gruntfile keenya hin fayyadamne ta'e, Autoprefixer adeemsa ijaarsa kee keessatti ofuma keetii walitti makuu si barbaachisa. Yoo Bootstrap dursee qindaa'e fayyadamaa jirta ta'e ykn Gruntfile keenya fayyadamaa jirta ta'e, Autoprefixer duraan Gruntfile keenya keessatti waan walitti makameef waa'ee kanaa yaadda'uun si hin barbaachisu.

Waan dabalame

Bootstrap bifa lamaatiin buufamuu danda'a, isaan keessaa galmeewwanii fi faayiloota armaan gadii ni argattu, qabeenya waliigalaa loojikiidhaan garee gochuu fi garaagarummaa qindaa'ee fi xiqqaate lamaanuu kennuu.

Bootstrap dursee qindaa'e

Erga buufattee booda, caasaa (kan qindaa'e) Bootstrap ilaaluuf galmee dhiibame sana unzip godhi. Waan akkanaa ni argita:

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

Kun bifa Bootstrap isa hunda caalaa bu'uuraati: faayiloota dursanii qindaa'an fayyadama saffisaa kufaatii pirojektii weeb kamiyyuu keessatti jechuun ni danda'ama. CSS fi JS ( bootstrap.*) qindaa'e, akkasumas CSS fi JS ( bootstrap.min.*) qindaa'ee fi xiqqaate ni kennina. Kaartoonni madda CSS ( bootstrap.*.map) meeshaalee guddiftuu biraawzaroota murtaa'oo wajjin fayyadamuuf ni argamu. Qubeewwan Glyphicons irraa hammatamaniiru, akkuma mata duree Bootstrap filannoo ta'e.

Koodii madda Bootstrap

Buufanni koodii madda Bootstrap qabeenya CSS, JaavaScript, fi qubee dursee qindaa'e, madda Less, JavaScript, fi galmee waliin of keessatti qabata. Caalaatti ibsuuf, kanneen armaan gadii fi kanneen biroo of keessatti qabata:

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

, less/, js/fi fonts/koodii madda qubee CSS, JS, fi mallattoo keenyaati (wal duraa duubaan). Galmeen sun dist/waan kutaa buufannaa dursee qindaa'e armaan olitti tarreeffame hunda of keessatti qabata. Galmeen docs/koodii madda galmee keenyaaf, fi examples/kan fayyadama Bootstrap of keessatti qabata. Kana bira darbee, faayilii hammatame kan biraa kamiyyuu paakeejii, odeeffannoo hayyamaa, fi misoomaaf deeggarsa kenna.

CSS fi JavaScript qindeessuu

Bootstrap sirna ijaarsa isaaf Grunt fayyadama , malawwan mijataa unkaa wajjin hojjechuuf. Akkaataa koodii keenya itti qindeessinu, qormaata itti gaggeessinu fi kkfti.

Grunt fe'uu

Grunt fe'uuf jalqaba node.js (kan npm of keessaa qabu) buufachuu fi fe'uu qabda. npm jechuun moojuulota node packaged jechuudha fi karaa hirkattummaa misoomaa karaa node.js bulchuuf gargaarudha.

1. grunt-cliwaliin akka addunyaatti fe'i npm install -g grunt-cli.
2. Gara galmee hundee qajeeli /bootstrap/, sana booda fiigi npm install. npm package.jsonfaayilii ilaalee ofumaan hirkattummaa naannoo barbaachisoo achitti tarreeffaman ni fe'a.

Yeroo xumuramu, ajajoota Grunt adda addaa sarara ajajaa irraa kennaman hojjechuu ni dandeessa.

Ajajoota Grunt jiran

grunt dist(CSS fi JavaScript qofa qindeessuu)

Galmee faayilii /dist/CSS fi JaavaScript qindaa'ee fi xiqqaa ta'een irra deebi'ee uuma. Akka fayyadamaa Bootstrap tti, kun akka idileetti ajaja ati barbaaddudha.

grunt watch(Ilaaluu)

Faayilota madda Xiqqaa ilaalaa fi yeroo jijjiirama qusattu hunda ofumaan gara CSStti irra deebi'ee qindeessa.

grunt test(Qorannoo fiigi) .

JSHint hojjeta fi qormaata QUnit biraawzaroota dhugaa keessatti galata Karma .

grunt docs(Qabeenya docs ijaaruu & qorachuu)

CSS, JavaScript, fi qabeenya biroo kan yeroo galmee naannootti karaa bundle exec jekyll serve.

grunt(Waan hundumaa guutummaatti ijaaraa fi qormaata fiigi)

CSS fi JavaScript qindeessa fi xiqqeessa, marsariitii galmee ijaara, mirkaneessaa HTML5 docs irratti hojjeta, qabeenya Customizer deebisee uuma, fi kkf. Jekyll barbaada . Yeroo baayyee barbaachisaa kan ta'e yoo Bootstrap mataa isaa irratti hacking gootan qofa.

Rakkoo furuu

Yoo hirkattummaa fe'uu ykn ajajoota Grunt hojjechuu irratti rakkoon si mudate, jalqaba /node_modules/galmee npm'n uumame haqi. Sana booda, irra deebiʼii fiigi npm install.

Unkaa bu'uuraa

Unkaa HTML bu'uuraa kanaan jalqabi, ykn fakkeenyota kana fooyyessi . Unkaalee fi fakkeenyota keenya akka barbaaddanitti akka madaqxan abdii qabna.

Galmee Bootstrap xiqqaa ta'een hojjechuu jalqabuuf HTML armaan gadii waraabi.

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

Fakkeenyaaf

Unkaa bu'uuraa armaan olii irratti qaamolee hedduu Bootstrap waliin ijaari. Bootstrap fedhii pirojektii dhuunfaa keessanii wajjin akka walsimutti akka dhuunfattan fi akka madaqxan isin jajjabeessina.

Fakkeenya armaan gadii hundaaf koodii madda kuusaa Bootstrap buufachuudhaan argadhu . docs/examples/Fakkeenyonni galmee keessatti argamuu danda'u .

Framework fayyadamuun

Unka jalqabaa

Bu'uuraalee malee homaa miti: CSS fi JavaScript qabduu waliin qindeesse.

Mata duree bootstrap jedhu

Muuxannoo mul'ataan fooyya'eef mata duree Bootstrap filannoo fe'i.

Giriidota

Fakkeenyota dachaa qindaa'inoota tarjaa sadarkaa afran hunda waliin, man'ee, fi kkf.

Jumbotroon jedhamuun beekama

Naannoo jumbotron navbar fi tarjaawwan tarjaa bu'uuraa tokko tokkoon ijaari.

Jumbotron dhiphoo

Qabduu durtii fi jumbotron dhiphisuudhaan fuula amala caalaa ijaari.

Navbars hojiidhaan

Navbar jedhama

Unkaa bu'uuraa ol'aanaa kan qabiyyee dabalataa tokko tokko waliin navbar of keessatti hammate.

Navbar gubbaa istaatiksii

Unkaa bu'uuraa ol'aanaa qabiyyee dabalataa tokko tokko waliin navbar gubbaa static qabu.

Navbar dhaabbataa ta'e

Unkaa bu'uuraa ol'aanaa qabiyyee dabalataa tokko tokko waliin navbar gubbaa dhaabbataa qabu.

Qaamolee amala

Uwwisuu

Unka fuula tokkoo fuula jalqabaa salphaa fi bareedaa ijaaruuf.

Kaarooseelii

Navbar fi carousel dhuunfachiisi, sana booda qaamolee haaraa tokko tokko dabali.

Blog

Haalata biloogii salphaa tarjaa lamaa kan navigeeshinii amala, mataduree fi gosa qabu.

Daashboordii

Caasaa bu'uuraa daashboordii bulchiinsaa barruu cinaa dhaabbataa fi navbar qabuuf.

Fuula seensaa

Haala unkaa amala fi dizaayinii mallattoo salphaa unkaa keessatti.

Haqa qabeessa nav

Navbar amala hidhamtoota sirrii ta'an waliin uumi. Mataa ol qaba! Baay'ee Safarii michuu miti.

Miilaa maxxantuu

Yeroo qabiyyeen isa caalaa gabaabaa ta'e jala galtee mul'ataa irratti maxxansi.

Miila maxxansaa navbar waliin

Jalqaba gara jalaa mul'ataa irratti navbar dhaabbataa gubbaatti qabsiisi.

Yaalii

Bootstrap deebii hin kennine

Salphaatti deebii Bootstrap per docs keenyaa hojii irraa oolchuu .

Kanfaasiin ala ta'e

Bootstrap waliin fayyadamuuf sajoo qajeelcha kanfaasiin ala jijjiiramuu danda'u ijaari.

Meeshaalee

Bootlint jedhamuun beekama

Bootlint meeshaaBootstrap HTML linter ofiisaa ti. Fuulota marsariitii Bootstrap fayyadamaa jiran keessatti dogoggora HTML beekamoo ta'an hedduu karaa madaalawaa "vanilla" ta'een ofumaan sakatta'a. Qaamonni/wiijetoota Vanilla Bootstrap kutaaleen isaanii DOM caasaa murtaa'e waliin akka walsimu barbaadu. Bootlint fakkeenyota qaamolee Bootstrap HTML sirritti caaseffame qabaachuu isaanii sakatta'a. Dogoggorri beekamoo ta'an tokkollee guddina pirojektii keetii akka hin saffisiifneef Bootlint gara Bootstrap web development toolchain kee irratti dabaluu yaadaa.

Hawaasa

Misooma Bootstrap yeroo yeroon hordofaa fi qabeenya gargaaru kanaan hawaasa bira gahaa.

• The Official Bootstrap Blog dubbisaa fi subscribe godhaa .
• Bootstrappers biroo wajjin IRC fayyadamuun irc.freenode.netsarvarii keessatti, ##bootstrap channel keessatti haasa'i .
• Gargaarsa Bootstrap fayyadamuuf, StackOverflow irratti gaafadhu mallattoo fayyadamuuntwitter-bootstrap-3 .
• Developers jecha furtuu paakeejiiwwan yeroo karaa npm ykn mala geejjibaa walfakkaataa bootstrapraabsan dalagaa Bootstrap fooyyessanii ykn dabalan irratti fayyadamuu qabu argannoo guddaa argachuuf.
• Fakkeenya kaka'umsaa namoota Bootstrap waliin ijaaran Bootstrap Expo irratti argadhu .

Akkasumas oduu haaraa fi viidiyoo muuziqaa ajaa'ibaa argachuuf @getbootstrap Twitter irratti hordofuu dandeessu .

Deebii kennuu hanqisuu

Bootstrap fuula keessan ofumaan guddina iskiriinii adda addaatiif madaqsa. Fuulli kee akka fakkeenya deebii hin kennine kanaatti akka hojjetu akkamitti amala kana hanqisuu dandeessu kunooti .

Tarkaanfiiwwan deebii fuula hanqisuuf

1. Buufata ilaalchaa galmeewwan CSS<meta> keessatti caqafame dhiisi
2. Tokkoon tokkoo sadarkaa tarjaa bal'ina tokkoon kan widthirratti irra darbi , fakkeenyaaf Kun Bootstrap CSS durtii booda akka dhufu mirkaneessi. Filannoodhaan gaaffiiwwan miidiyaa wajjin ykn filannoo-fu tokko tokko irraa fagaachuu dandeessa ..containerwidth: 970px !important;!important
3. Yoo navbar fayyadamte, amala navbar kuffisuu fi babal'isuu hunda haqi.
4. Haalata tarjaadhaaf, .col-xs-*gitaalee dabalataan, ykn bakka, kanneen giddu galeessaa/guddaa fayyadami. Hin yaadda'inaa, giiriin meeshaa dabalataa xiqqaa ta'e gara furmaata hundaatti madaala.

Ammas IE8'f Respond.js si barbaachisa (gaaffiin miidiyaa keenyaa ammallee waan jiruuf, adeemsifamuu waan qabuuf). Kunis "mobile site" gama Bootstrap hanqisa.

Unka bootstrap deebii kennuu hanqifame waliin

Tarkaanfiiwwan kana fakkeenyaaf hojiirra oolchineerra. Jijjiirama addaa hojiirra oole ilaaluuf koodii madda isaa dubbisi.

Fakkeenya deebii hin kennine ilaali

Deeggarsa biraawzarii fi meeshaa

Bootstrap biraawzaroota deeskitooppii fi mobaayilaa haaraa keessatti akka gaariitti akka hojjetu ijaarameera, jechuunis biraawzaroota durii akkaataa adda addaatiin agarsiisuu danda'u, guutummaatti hojii qabaatus, agarsiisa qaamolee murtaa'oo.

Biraawzaroota deeggaraman

Addatti ammoo, biraawzarootaa fi waltajjiiwwan armaan gadii kanneen haaraa ta’an ni deeggarra .

Biraawzaroota filannoo kanneen WebKit, Blink, ykn Gecko isa haaraa fayyadaman, kallattiinis ta'e karaa API ilaalcha weeb waltajjii, ifatti hin deeggaraman. Haa ta'u malee, Bootstrap (yeroo baay'ee) biraawzaroota kana keessattis sirritti agarsiisuu fi hojjechuu qaba. Odeeffannoon deeggarsa addaa dabalataa armaan gaditti kennameera.

Meeshaalee moobaayilaa

Walumaagalatti, Bootstrap tokkoon tokkoon waltajjii guddaa biraawzaroota durtii gosoota haaraa ni deeggara. Hubadhaa, biraawzaroota bakka bu'aa (kan akka Opera Mini, haalata Turbo Opera Mobile, UC Browser Mini, Amazon Silk) akka hin deeggaramne.

Biraawzaroota deeskitooppii

Haaluma walfakkaatuun, irra caalaan biraawzaroota deeskitooppii gosootni haaraan ni deeggaraman.

Windows irratti, Internet Explorer 8-11 ni deeggarra .

Firefox tiif, gadhiifama tasgabbaa'aa idilee isa haaraatiin alatti, akkasumas gosa Firefox isa haaraa Gadhiifama Deeggarsa Dheeraa (ESR) ni deeggarra.

Akka ofiisaatti, Bootstrap Chromium fi Chrome for Linux, Firefox for Linux, fi Internet Explorer 7, akkasumas Microsoft Edge keessatti akka gaariitti ilaaluu fi amala qabaachuu qaba, haa ta'u malee isaan ifatti hin deeggaramne.

Tarree dogongora biraawzarii Bootstrap waliin wal'aansoo qabuu qabu tokko tokkoof, Wall of browser bugs keenya ilaali .

Interneetii Eksploorarii 8 fi 9

Internet Explorer 8 fi 9 akkasumas ni deeggaramu, haa ta'u malee, maaloo qabeentota CSS3 tokko tokko fi elementoonni HTML5 guutummaatti biraawzaroota kanaan akka hin deeggaramne beekaa. Dabalataanis, Internet Explorer 8 deeggarsa gaaffii miidiyaa dandeessisuuf Respond.js fayyadamuu barbaada.

Deeggarsa biraawzari amaloota CSS3 fi HTML5 bal'inaan argachuuf Can I use... daawwadhu .

Internet Explorer 8 fi Respond.js jedhamuun beekamu

Yeroo Respond.js naannoo misoomaa fi oomishaa keessan Internet Explorer 8 keessatti fayyadamtan of eeggannoowwan armaan gadii irraa of eeggadhaa.

Respond.js fi CSS qaxxaamuraa domeenii

Respond.js CSS domeenii adda addaa (sub) irratti keessummeefame waliin fayyadamuun (fakkeenyaaf, CDN irratti) qindeessaa dabalataa tokko tokko barbaada. Bal'ina isaaf docs Respond.js ilaali .

Deebii.js fifile://

Sababa seera nageenya biraawzariin, Respond.js fuula karaa pirootokoolii ilaalaman waliin hin hojjetu file://(akka yeroo faayilii HTML naannoo banu). IE8 keessatti amaloota deebii kennan qorachuuf, fuula kee HTTP(S) irratti ilaali. Bal'ina isaaf docs Respond.js ilaali .

Deebii.js fi@import

Respond.js CSS karaa @import. Keessattuu, qindeessootni Drupal tokko tokko akka fayyadaman beekamaadha @import. Bal'ina isaaf docs Respond.js ilaali .

Internet Explorer 8 fi saanduqa-saayizii gochuu

IE8 yeroo , , , ykn box-sizing: border-box;waliin walitti makamu guutummaatti hin deeggaru . Sababa sanaaf, v3.0.1 irraa eegalee, kana booda s irratti hin fayyadamnu.min-widthmax-widthmin-heightmax-heightmax-width.container

Internet Explorer 8 fi @font-face jedhamuun beekama

@font-faceIE8 yeroo waliin walitti makamu dhimmoota tokko tokko qaba :before. Bootstrap walnyaatinsa sana Glyphicons isaa waliin fayyadama. Yoo fuul-barruun tokko kaa'ame, fi hantuutee malee foddaa irratti fe'ame (jechuunis qaree haaromsaa rukuti ykn iframe keessatti waan tokko fe'i) sana booda fuul-barruun osoo qubee hin fe'iin dura agarsiifama. Fuula (qaama) irratti olkaasuun mallattoolee tokko tokko agarsiisaa fi mallattoolee hafan irratti olkaasuun warra sanas agarsiisa. Bal'ina isaaf lakkofsa #13863 ilaali .

Haalawwan walsimsiisaa IE

Bootstrap haalata walsimsiisaa Internet Explorer durii keessatti hin deeggaramu. Haalata agarsiisaa isa haaraa IEf fayyadamaa akka jirtu mirkaneeffachuuf, <meta>mallattoo sirrii fuula kee keessatti hammachuu yaadaa:

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

Meeshaalee sirreeffama banuun haalata galmee mirkaneessi: dhiibiitii F12"Haalata Galmee" ilaali.

Mallattoon kun galmeewwanii fi fakkeenyota Bootstrap hunda keessatti hammatamee tokkoon tokkoon gosa Internet Explorer deeggaramee keessatti agarsiisa gaarii ta'e mirkaneessuuf.

Odeeffannoo dabalataaf gaaffii StackOverflow kana ilaali .

Internet Explorer 10 kan Windows 8 fi Windows Phone 8 keessatti argamu

Internet Explorer 10 bal'ina meeshaa bal'ina buufata ilaalchaa irraa adda hin baasu , kanaaf gaaffiiwwan miidiyaa Bootstrap's CSS keessatti sirnaan hin hojiirra oolchu. Akka idileetti kana sirreessuuf CSS saffisaa qofa itti dabalta:

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

Haa ta'u malee, kun meeshaalee Windows Phone 8 versions Update 3 (aka GDR3) caalaa dullooman hojjetaniif hin hojjetu , sababiin isaas meeshaaleen akkasii ilaalcha dhiphoo "bilbila" osoo hin taane irra caalaa ilaalcha desktop akka agarsiisan waan taasisuuf. Kana furuuf, dogongora sana irra darbuuf CSS fi JavaScript armaan gadii hammachuu qabda .

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

Odeeffannoo dabalataa fi qajeelfama itti fayyadamaaf, Windows Phone 8 fi Device-Width dubbisi .

Akka heads up tti, kana galmee fi fakkeenyota Bootstrap hunda keessatti akka agarsiisaatti hammachina.

Safarii dhibbeentaa naannessuu

Motorri agarsiisaa versions Safari duraa v7.1 for OS X fi Safari for iOS v8.0 lakkoofsa iddoowwan kurnyee .col-*-1gita giiridii keenya keessatti fayyadaman irratti rakkina tokko tokko qaba ture. Kanaafuu osoo tarjaawwan tarjaa dhuunfaa 12 qabaattee, tarreewwan tarjaawwan biroo wajjin wal bira qabamee yoo ilaalamu gabaabsee akka dhufan hubatta. Safari/iOS fooyyessuu bira darbee, furmaata tokko tokko qabda:

• .pull-rightHiriirsa jabaa-mirgaa argachuuf tarjaa tarjaa kee isa dhumaa irratti dabali
• Safari'f marsaa mudaa hin qabne argachuuf dhibbeentaa keessan harkaan jijjiiri (filannoo jalqabaa caalaa rakkisaa)

Moodaalota, navbar, fi kiiboordii dhugaa

Overflow fi scroll gochuu

Deeggarsi overflow: hiddenon the <body>element iOS fi Android keessatti baayyee daangeffamaadha. Kanaaf, yeroo ati gubbaa ykn jala moodaalii biraawzaroota meeshaalee sanaa keessaa tokko bira darbitu, <body>qabiyyeen sun garagalchuu ni jalqaba. Dogoggora Chrome #175502 ( Chrome v40 keessatti sirreeffame) fi dogongora WebKit #153852 ilaali .

Dirreewwan barruu iOS fi garagalchuu

IOS 9.3 irraa eegalee, moodaaliin tokko banaa ta'ee osoo jiruu, yoo tuqaan jalqabaa sochii qaxxaamuraa daangaa barreeffamaa <input>ykn a keessa jiraate <textarea>, <body>qabiyyeen moodaalichaa jala jiru bakka moodaalichaa ofii isaatii ni qaxxaamurama. Dogoggora WebKit #153856 ilaali .

Kiiboodii dhugaa (virtual keyboards).

Akkasumas, hubadhu yoo navbar dhaabbataa fayyadamaa jirta ta'e ykn galtee moodaalii keessaa fayyadamaa jirta ta'e, iOS dogongora agarsiisaa kan yeroo kiiboordii dhugaa kaka'u bakka elementoota dhaabbataa hin haaromsine qaba. Kanaaf furmaata muraasni elementoota kee gara position: absoluteykn sa'aatii xiyyeeffannoo irratti waamuun iddoo harkaan sirreessuuf yaaluun dabalata. Kun Bootstrap'n hin qabamu, kanaaf furmaata kamtu application keessaniif gaarii akka ta'e murteessuu kan keessan ta'a.

Navbar Gadi Bu'uu

Elementiin .dropdown-backdropkun iOS irratti nav keessatti hin fayyadamu sababa walxaxiinsa z-indexing irraa kan ka'e. Kanaaf, navbars keessatti tarreewwan cufuuf, kallattiin elementii gadi bu'aa cuqaasuu qabda (ykn elementii biraa kamiyyuu kan taatee cuqaasuu iOS keessatti dhukaasu ).

Browser guddisuu

Fuula guddisuun qaamolee tokko tokko keessatti artifaaktii agarsiisaa dhiyeessuun waan hin oolle, Bootstrap fi weeb hafe keessatti. Dhimmicha irratti hundaa'uun sirreessuu dandeenya ta'a (dursa barbaadi sana booda yoo barbaachisaa ta'e dhimma tokko banaa). Haa ta’u malee, yeroo baay’ee furmaata kallatti hacky workarounds malee waan hin qabneef kanneen bira darbuuf carraaqna.

Sticky :hover/ :focusmobaayila irratti

Hovering dhugaa irra caalaan touchscreens irratti kan hin danda'amne ta'us, irra caalaan browser browsers deeggarsa hovering fakkeessuun :hover"sticky" godhu. Jecha biraatiin, :hoverakkaataaleen erga elementii tokko tuqee booda hojii irra oolchuu kan jalqaban yoo ta'u, erga fayyadamaan elementii biraa tokko tokko tuqee booda qofa hojii irra oolchuu dhaabu. Kunis :hoverhaalawwan Bootstrap akka hin barbaadamnetti "stuck" ta'an browser akkasii irratti taasisuu danda'a. Browseroonni moobaayilaa tokko tokkos :focushaala walfakkaatuun maxxanuu ni godhu. Yeroo ammaa dhimmoota kanaaf furmaanni salphaan akkaataa akkasii guutummaatti haquu malee hin jiru.

Maxxansa

Biraawzaroota ammayyaa tokko tokko keessattillee maxxansuun quirky ta'uu danda'a.

Keessattuu, Chrome v32 irraa eegalee fi qindaa'inoota margina osoo hin ilaalin, Chrome yeroo fuula marsariitii maxxansu gaaffii miidiyaa furu bal'ina viewport guddina waraqaa fiizikaalaa caalaa baay'ee dhiphoo ta'e fayyadama. Kunis yeroo maxxansuu tarjaa xiqqaa dabalataa Bootstrap osoo hin eegin akka hojiirra oolu taasisuu danda'a. Bal'ina tokko tokkoof dhimma #12078 fi Chrome bug #273306 ilaali. Furmaata yaadame:

• Giriidii xiqqaa dabalataa hammadhuutii fuul-barruun kee isa jalatti fudhatama akka qabu mirkaneessi.
• @screen-*Waraqaan maxxansaa kee akka dabalataa-xiqqaa caalaa guddaa ta'etti akka ilaalamu gatiiwwan jijjiiramoota Xiqqaa dhuunfachiisi .
• Qabxiilee ciccituu hammangaa tarjaa miidiyaa maxxansaa qofaaf jijjiiruuf gaaffiiwwan miidiyaa amala dabali.

Akkasumas, akka Safari v8.0, fixed-width .containers Safari yeroo maxxansu hammangaa qubee xiqqaa hin baratamne akka fayyadamu gochuu danda'a. Bal'ina isaaf #14868 fi dogongora WebKit #138192 ilaali. Kanaaf furmaanni ta'uu danda'u tokko CSS armaan gadii dabaluudha:

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

Andirooyidii istookii biraawzari

Sanduuqa keessaa ba'ee, Android 4.1 (fi illee kanneen haaraa gadhiifaman tokko tokko fakkaata) appii Browser waliin akka filannoo web browser durtii (faallaa Chrome) waliin ergama. Kan nama dhibu, appiin Browser bugs baay'ee fi walumaa galatti CSS waliin wal hin simne qaba.

Menuuwwan filadhu

Elementiiwwan irratti <select>, biraawzariin istookii Andirooyidii yoo jiraate border-radiusfi/ykn borderhojiirra oole to'annoo cinaa hin agarsiisu. ( Bal'ina isaaf gaaffii StackOverflow kana<select> ilaali.) CSS nama mufachiisu haquuf fi akka elementii unstyled ta'etti Android stock browser irratti agarsiisuuf cuqqaa koodii armaan gadii fayyadami . Urgaa'uun bakka bu'aa fayyadamaa Chrome, Safari, fi Mozilla browsers gidduu seenuun ni hambisa.

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

Fakkeenya arguu barbaadduu? Demo JS Bin kana ilaalaa.

Mirkaneessitoota

Muuxannoo gaarii biraawzaroota durii fi dogoggora qabaniif kennuudhaaf, Bootstrap bakka hedduutti hack biraawzari CSS fayyadamuun CSS addaa gara gosoota biraawzaroota murtaa'anitti xiyyeeffachuun dogoggora biraawzaroota keessa jiran ofuma isaaniitii irratti hojjechuuf. Hacks kunniin CSS validators sirrii miti jedhanii akka komatan gochuun isaanii hubatamaadha. Bakka lamatti, akkasumas amaloota CSS dhiiguu-qarqara ammallee guutummaatti sadarkaa hin qabne fayyadamna, garuu kunniin fooyya'iinsa tarkaanfataadhaaf qulqulluu ta'ee fayyadamu.

Akeekkachiisni mirkaneessuu kun qabatamaan dhimma hin qaban sababiin isaas kutaan CSS keenyaa inni hacky hin taane guutummaatti mirkaneessaa fi kutaaleen hacky kutaa hacky hin taane sirnaan hojjechuu waan hin gufachiifneef, kanarraa ka'uun maaliif itti yaadnee akeekkachiisa addaa kana tuffannu.

Barreeffamoonni HTML keenyas akkasuma sababa dogoggora Firefox murtaa'eef furmaata hammachuu keenyaatiin akeekkachiisa mirkaneessuu HTML salphaa fi bu'aa hin qabne tokko tokko qabu .

Deeggarsa qaama sadaffaa

Ilaginoota qaama sadaffaa ykn dabalataa kamiyyuu ifatti kan hin deeggarre ta'us, pirojektoota keessan keessatti dhimmoota mudachuu danda'an hambisuuf gargaaruuf gorsa faayidaa qabu tokko tokko ni kennina.

Sanduuqa-saayizii gochuu

Software qaama sadaffaa tokko tokko, Google Maps fi Google Custom Search Engine dabalatee, Bootstrap waliin waldhaban sababa * { box-sizing: border-box; }, seera akkas paddinggodhu bal'ina shallagame dhumaa elementii tokkoo irratti dhiibbaa hin qabu. Waa'ee moodeela saanduqaa fi safara CSS Tricks irratti caalaatti baradhu .

Haalata irratti hundaa'uun, akka barbaachisummaa isaatti irra darbuu dandeessa (Filannoo 1) ykn safara saanduqa naannoolee guutuuf deebisanii saaguu dandeessa (Filannoo 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();
}

Dhaqqabummaa

Bootstrap istaandaardii weeb waliigalaa hordofa fi—tattaaffii dabalataa xiqqaadhaan—saayitoota warra AT fayyadamaniif dhaqqabamaa ta’an uumuuf itti fayyadamuun ni danda’ama .

Navigeeshinii darbi

Yoo navigeeshiniin kee hidhannoo hedduu of keessaa qabuu fi qabiyyee ijoo DOM keessa jiru dura dhufe, Skip to main contentnavigeeshinii dura hidhaa dabali (ibsa salphaadhaaf, barruu Pirojektii A11Y kana hidhannoo navigeeshinii darbuu ilaali ). Gitaa fayyadamuun .sr-onlyhidhaa darbuu mul'ataan ni dhoksa, fi .sr-only-focusablegitaan hidhaan al tokko xiyyeeffate akka mul'atu ni mirkaneessa (fayyadamtoota kiiboordii ijaa qabaniif).

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

Mata dureewwan man'ee ta'an

Yeroo mataduree ( <h1>- <h6>) man'eessu, mataduree galmee kee inni jalqabaa <h1>. Mata dureewwan itti aanan loojikiidhaan fayyadamuu qabu <h2>- <h6>akka dubbistoonni iskiriinii gabatee qabiyyee fuula keetiif ijaaruu danda'anitti.

HTML CodeSniffer fi Penn State's AccessAbility irraa caalaatti baradhu .

Faallaa halluu

Yeroo ammaa, walnyaatinsa halluu durtii Bootstrap keessatti argaman tokko tokko (kan akka gita qaree akkaataa adda addaa , halluuwwan calaqqisiisoo koodii tokko tokko uggura koodii bu'uuraatiif fayyadaman , gita gargaaraa .bg-primary duubbee haalata , fi halluu hidhaa durtii yeroo duubbee adii irratti fayyadamtu) reeshiyoo walfaallaa gadi aanaa qabu ( reeshiyoo gorfame 4.5:1 gadi ). Kunis fayyadamtoota ijaan arguu gadi aanaa qaban ykn halluu hin qabne irratti rakkoo fiduu danda’a. Halluuwwan durtii kun walfaallaa fi dubbifamuu isaanii guddisuuf fooyya'uu barbaachisuu danda'a.

Qabeenya dabalataa

• "HTML Codesniffer" bookmarklet dhimmoota dhaqqabummaa adda baasuuf
• Meeshaalee Qopheessitoota Dhaqqabummaa Chrome's extension
• Xiinxala Walfaallaa Halluu
• Pirojektii A11Y jedhamu
• Dokumantarii dhaqqabummaa MDN

Gaaffiiwwan Hayyamaa

Bootstrap hayyama MIT jalatti kan gadhiifame yoo ta'u, mirga waraabbii 2019 Twitter qaba. Gara xixiqqootti yoo bilcheefame, haalawwan armaan gadiitiin ibsamuu danda’a.

Innis: 1.1.

• Hayyamaa fi beeksisa mirga waraabbii yeroo hojiiwwan kee keessatti fayyadamtu faayiloota CSS fi JavaScript Bootstrap keessatti hammataman eegi

Akka ati:

• Bootstrap, guutummaatti ykn gartokkoon, kaayyoo dhuunfaa, dhuunfaa, keessoo dhaabbataa, ykn daldalaaf bilisaan buufadhuu fi itti fayyadami
• Paakeejii ykn raabsa uumtu keessatti Bootstrap fayyadami
• Koodii madda fooyyessuu
• Bootstrap qaama sadaffaa hayyama keessatti hin hammatamneef fooyyessuu fi raabsuuf hayyama xiqqaa kenni

Akka hin taane si dhorka:

• Bootstrap wabii malee waan kennameef barreessitootaa fi abbootii hayyamaa miidhaan irra gaheef itti gaafatamummaa jala oolchi
• Uumtoota ykn abbootii mirga waraabbii Bootstrap itti gaafatamummaa jala galchi
• Qabxii Bootstrap kamiyyuu maqaa sirrii malee irra deebi'ii raabsi
• Mallattoolee Twitter qabu kamiyyuu karaa Twitter raabsa keessan akka raggaasisu ibsuu ykn agarsiisuu danda’uun fayyadami
• Mallattoolee Twitter qabu kamiyyuu karaa kamiinuu softiweeri Twitter gaaffii keessa jiru akka uumte ibsuu ykn agarsiisuu danda’uun fayyadami

Akkas akka gootan isin hin gaafatu:

• Madda Bootstrap mataa isaa, ykn fooyya'iinsa ati isa irratti goote kamiyyuu, irra deebi'ii raabsuu kamiyyuu kan isa hammate keessatti walitti qabuu dandeessu keessatti hammachiisi
• Jijjiiramoota Bootstrap irratti gootan gara pirojektii Bootstrap tti deebisuu (yaadni akkasii jajjabeeffamus)

Hayyamni Bootstrap guutuun odeeffannoo dabalataaf kuusaa pirojektii keessatti argama.

Hiikkaawwan

Miseensonni hawaasaa galmee Bootstrap gara afaanota adda addaatti hiikaniiru. Tokkollee akka ofiisaatti kan deeggaramee fi yeroo hunda yeroo isaa eeggate ta’uu dhiisuu danda’a.

• Bootstrap 中文文档 (Afaan Chaayinaa) .
• Bootstrap på Dansk (Deenmaark) Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo.
• Bootstrap en Français (Afaan Faransaayii) .
• Bootstrap auf Deutsch (Afaan Jarmanii) .
• Bootstrap afaan Xaaliyaanii (Xaaliyaanii) .
• Bootstrap 한국어 (Afaan Kooriyaa) .
• Bootstrap em Português do Brasil (Afaan Poortugaal Biraazil) .
• Bootstrap по-русски (Afaan Raashiyaa) .
• Bootstrap en Español (Afaan Ispeen) .
• Türkçe Bootstrap (Afaan Turkii) .
• Bootstrap українською (Afaan Yukireen) .
• Bootstrap bằng tiếng Việt (Afaan Veetnaam) Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo.

Hiikkaa qindeessuuf ykn keessummeessuuf hin gargaarru, isaan qofa link goona.

Hiikkaa haaraa ykn fooyya'aa ta'e xumurtee? Tarree keenyatti dabaluudhaaf gaaffii harkisaa bani.