શરૂ કરી રહ્યા છીએ
બુટસ્ટ્રેપની ઝાંખી, કેવી રીતે ડાઉનલોડ અને ઉપયોગ કરવો, મૂળભૂત નમૂનાઓ અને ઉદાહરણો અને વધુ.
બુટસ્ટ્રેપની ઝાંખી, કેવી રીતે ડાઉનલોડ અને ઉપયોગ કરવો, મૂળભૂત નમૂનાઓ અને ઉદાહરણો અને વધુ.
બુટસ્ટ્રેપ (હાલમાં v3.3.7) પાસે ઝડપથી પ્રારંભ કરવાની કેટલીક સરળ રીતો છે, દરેક એક અલગ કૌશલ્ય સ્તર અને ઉપયોગના કેસને આકર્ષિત કરે છે. તમારી ચોક્કસ જરૂરિયાતોને અનુકૂળ શું છે તે જોવા માટે વાંચો.
CSS, JavaScript અને ફોન્ટ્સ કમ્પાઇલ અને મિનિફાઇડ. કોઈ દસ્તાવેજ અથવા મૂળ સ્રોત ફાઇલો શામેલ નથી.
સોર્સ લેસ, JavaScript અને ફોન્ટ ફાઇલો, અમારા દસ્તાવેજો સાથે. ઓછા કમ્પાઇલર અને કેટલાક સેટઅપની જરૂર છે.
રેલ્સ, કંપાસ અથવા ફક્ત-સાસ પ્રોજેક્ટ્સમાં સરળ સમાવેશ માટે બુટસ્ટ્રેપ ઓછાથી સાસ સુધી પોર્ટેડ .
jsDelivr પરના લોકો બુટસ્ટ્રેપના CSS અને JavaScript માટે CDN સપોર્ટ પૂરો પાડે છે. ફક્ત આ બુટસ્ટ્રેપ CDN લિંક્સનો ઉપયોગ કરો.
તમે Bower નો ઉપયોગ કરીને Bootstrap's Less, CSS, JavaScript અને ફોન્ટ્સ ઇન્સ્ટોલ અને મેનેજ પણ કરી શકો છો :
તમે npm નો ઉપયોગ કરીને બુટસ્ટ્રેપ પણ ઇન્સ્ટોલ કરી શકો છો :
require('bootstrap')
બુટસ્ટ્રેપના તમામ jQuery પ્લગઈનો jQuery ઑબ્જેક્ટ પર લોડ કરશે. મોડ્યુલ પોતે bootstrap
કંઈપણ નિકાસ કરતું નથી. તમે /js/*.js
પેકેજની ટોપ-લેવલ ડાયરેક્ટરી હેઠળ ફાઇલોને લોડ કરીને વ્યક્તિગત રીતે બુટસ્ટ્રેપના jQuery પ્લગઇન્સને જાતે લોડ કરી શકો છો.
બુટસ્ટ્રેપમાં package.json
નીચેની કી હેઠળ કેટલાક વધારાના મેટાડેટા છે:
less
- બુટસ્ટ્રેપની મુખ્ય ઓછી સ્ત્રોત ફાઇલનો પાથstyle
- બુટસ્ટ્રેપના નોન-મિનિફાઇડ CSSનો પાથ જે ડિફોલ્ટ સેટિંગ્સનો ઉપયોગ કરીને પૂર્વ કમ્પાઇલ કરવામાં આવ્યો છે (કોઈ કસ્ટમાઇઝેશન નથી)તમે કંપોઝરનો ઉપયોગ કરીને બુટસ્ટ્રેપના લેસ, સીએસએસ, જાવાસ્ક્રિપ્ટ અને ફોન્ટ્સ ઇન્સ્ટોલ અને મેનેજ પણ કરી શકો છો :
બુટસ્ટ્રેપ CSS વિક્રેતા ઉપસર્ગ સાથે વ્યવહાર કરવા માટે Autoprefixer નો ઉપયોગ કરે છે . જો તમે બુટસ્ટ્રેપને તેના ઓછા/સાસ સ્ત્રોતમાંથી કમ્પાઈલ કરી રહ્યાં છો અને અમારી ગ્રન્ટફાઈલનો ઉપયોગ કરી રહ્યાં નથી, તો તમારે તમારી બિલ્ડ પ્રક્રિયામાં ઑટોપ્રીફિક્સરને જાતે જ એકીકૃત કરવાની જરૂર પડશે. જો તમે પૂર્વસંકલિત બુટસ્ટ્રેપનો ઉપયોગ કરી રહ્યાં છો અથવા અમારી ગ્રન્ટફાઈલનો ઉપયોગ કરી રહ્યાં છો, તો તમારે આ વિશે ચિંતા કરવાની જરૂર નથી કારણ કે ઑટોપ્રીફિક્સર અમારી ગ્રન્ટફાઈલમાં પહેલેથી જ સંકલિત છે.
બુટસ્ટ્રેપ બે સ્વરૂપોમાં ડાઉનલોડ કરી શકાય તેવું છે, જેમાં તમને નીચેની ડિરેક્ટરીઓ અને ફાઇલો મળશે, જે સામાન્ય સંસાધનોને તાર્કિક રીતે જૂથબદ્ધ કરે છે અને સંકલિત અને લઘુત્તમ ભિન્નતા આપે છે.
મહેરબાની કરીને નોંધ કરો કે સ્ટાર્ટર ટેમ્પલેટમાં બતાવ્યા પ્રમાણે, તમામ JavaScript પ્લગિન્સને jQuery શામેલ કરવાની જરૂર છે . jQuery ના કયા સંસ્કરણો સપોર્ટેડ છે તે જોવા માટે અમારી સલાહ લો .bower.json
એકવાર ડાઉનલોડ થઈ ગયા પછી, (સંકલિત) બુટસ્ટ્રેપનું માળખું જોવા માટે સંકુચિત ફોલ્ડરને અનઝિપ કરો. તમે આના જેવું કંઈક જોશો:
આ બુટસ્ટ્રેપનું સૌથી મૂળભૂત સ્વરૂપ છે: લગભગ કોઈપણ વેબ પ્રોજેક્ટમાં ઝડપી ડ્રોપ-ઇન વપરાશ માટે પ્રી-કમ્પાઇલ ફાઇલો. અમે કમ્પાઇલ CSS અને JS ( bootstrap.*
), તેમજ કમ્પાઇલ અને મિનિફાઇડ CSS અને JS ( bootstrap.min.*
) પ્રદાન કરીએ છીએ. CSS સ્ત્રોત નકશા ( bootstrap.*.map
) ચોક્કસ બ્રાઉઝર્સના વિકાસકર્તા સાધનો સાથે ઉપયોગ માટે ઉપલબ્ધ છે. વૈકલ્પિક બુટસ્ટ્રેપ થીમ તરીકે, Glyphicons ના ફોન્ટ્સ શામેલ છે.
બુટસ્ટ્રેપ સોર્સ કોડ ડાઉનલોડમાં સોર્સ લેસ, જાવાસ્ક્રિપ્ટ અને દસ્તાવેજીકરણની સાથે પ્રી-કમ્પાઇલ CSS, JavaScript અને ફોન્ટ એસેટનો સમાવેશ થાય છે. વધુ વિશિષ્ટ રીતે, તેમાં નીચેના અને વધુનો સમાવેશ થાય છે:
અમારા CSS, JS અને આઇકન ફોન્ટ્સ (અનુક્રમે) માટે less/
, js/
, અને સોર્સ કોડ છે. ફોલ્ડરમાં ઉપરના પ્રી-કમ્પાઇલ ડાઉનલોડ વિભાગમાં સૂચિબદ્ધ બધું શામેલ છે fonts/
. ફોલ્ડરમાં અમારા દસ્તાવેજીકરણ અને બુટસ્ટ્રેપ વપરાશ dist/
માટેનો docs/
સ્રોત કોડ શામેલ છે . examples/
તે ઉપરાંત, કોઈપણ અન્ય સમાવિષ્ટ ફાઇલ પેકેજો, લાયસન્સ માહિતી અને વિકાસ માટે આધાર પૂરો પાડે છે.
બુટસ્ટ્રેપ તેની બિલ્ડ સિસ્ટમ માટે ગ્રંટનો ઉપયોગ કરે છે, ફ્રેમવર્ક સાથે કામ કરવા માટે અનુકૂળ પદ્ધતિઓ સાથે. આ રીતે અમે અમારા કોડને કમ્પાઇલ કરીએ છીએ, પરીક્ષણો ચલાવીએ છીએ અને વધુ.
ગ્રન્ટ ઇન્સ્ટોલ કરવા માટે, તમારે પહેલા node.js (જેમાં npm શામેલ છે) ડાઉનલોડ અને ઇન્સ્ટોલ કરવું આવશ્યક છે. npm નોડ પેકેજ્ડ મોડ્યુલો માટે વપરાય છે અને node.js દ્વારા વિકાસ નિર્ભરતાને સંચાલિત કરવાની એક રીત છે.
પછી, આદેશ વાક્યમાંથી:grunt-cli
સાથે વૈશ્વિક સ્તરે ઇન્સ્ટોલ કરો npm install -g grunt-cli
./bootstrap/
રૂટ ડિરેક્ટરી પર નેવિગેટ કરો , પછી ચલાવો npm install
. npm ફાઇલને જોશે package.json
અને ત્યાં સૂચિબદ્ધ જરૂરી સ્થાનિક નિર્ભરતાને આપમેળે ઇન્સ્ટોલ કરશે.જ્યારે પૂર્ણ થઈ જાય, ત્યારે તમે કમાન્ડ લાઇનમાંથી પૂરા પાડવામાં આવેલ વિવિધ ગ્રન્ટ આદેશોને ચલાવવા માટે સમર્થ હશો.
grunt dist
(માત્ર CSS અને JavaScript કમ્પાઇલ કરો)/dist/
કમ્પાઇલ અને મિનિફાઇડ CSS અને JavaScript ફાઇલો સાથે ડિરેક્ટરીને પુનઃજનરેટ કરે છે . બુટસ્ટ્રેપ વપરાશકર્તા તરીકે, આ સામાન્ય રીતે તમને જોઈતો આદેશ છે.
grunt watch
(જુઓ)ઓછા સ્ત્રોતની ફાઇલો જુએ છે અને જ્યારે પણ તમે ફેરફાર સાચવો છો ત્યારે તેને આપમેળે CSS પર ફરીથી કમ્પાઇલ કરે છે.
grunt test
(પરીક્ષણો ચલાવો)JSHint ચલાવે છે અને PhantomJS માં QUnit ટેસ્ટ હેડલેસ ચલાવે છે .
grunt docs
(દસ્તાવેજ સંપત્તિઓ બનાવો અને તેનું પરીક્ષણ કરો)CSS, JavaScript અને અન્ય અસ્કયામતો બનાવે છે અને તેનું પરીક્ષણ કરે છે જેનો ઉપયોગ સ્થાનિક રૂપે દ્વારા દસ્તાવેજીકરણ ચલાવતી વખતે થાય છે bundle exec jekyll serve
.
grunt
(એકદમ બધું બનાવો અને પરીક્ષણો ચલાવો)CSS અને JavaScript ને કમ્પાઈલ અને મિનિફાઈ કરે છે, ડોક્યુમેન્ટેશન વેબસાઈટ બનાવે છે, ડોક્સ સામે HTML5 વેલિડેટર ચલાવે છે, કસ્ટમાઈઝર એસેટ રિજનરેટ કરે છે અને વધુ. જેકિલની જરૂર છે. સામાન્ય રીતે માત્ર ત્યારે જ જરૂરી છે જો તમે બુટસ્ટ્રેપ પર જ હેકિંગ કરી રહ્યાં હોવ.
જો તમને નિર્ભરતા સ્થાપિત કરવામાં અથવા ગ્રન્ટ આદેશો ચલાવવામાં સમસ્યાઓનો સામનો કરવો પડે, તો પહેલા /node_modules/
npm દ્વારા જનરેટ થયેલ ડિરેક્ટરીને કાઢી નાખો. પછી, ફરીથી ચલાવો npm install
.
આ મૂળભૂત HTML ટેમ્પલેટથી પ્રારંભ કરો, અથવા આ ઉદાહરણોને સંશોધિત કરો . અમે આશા રાખીએ છીએ કે તમે અમારા નમૂનાઓ અને ઉદાહરણોને તમારી જરૂરિયાતોને અનુરૂપ બનાવીને કસ્ટમાઇઝ કરશો.
ન્યૂનતમ બુટસ્ટ્રેપ દસ્તાવેજ સાથે કામ શરૂ કરવા માટે નીચેના HTML ની નકલ કરો.
બુટસ્ટ્રેપના ઘણા ઘટકો સાથે ઉપરના મૂળભૂત નમૂના પર બનાવો. અમે તમને તમારા વ્યક્તિગત પ્રોજેક્ટની જરૂરિયાતોને અનુરૂપ બુટસ્ટ્રેપને કસ્ટમાઇઝ અને અનુકૂલન કરવા પ્રોત્સાહિત કરીએ છીએ.
બુટસ્ટ્રેપ રીપોઝીટરી ડાઉનલોડ કરીને નીચેના દરેક ઉદાહરણ માટે સ્ત્રોત કોડ મેળવો . docs/examples/
ઉદાહરણો ડિરેક્ટરીમાં મળી શકે છે .
બુટલિન્ટ એ સત્તાવાર બુટસ્ટ્રેપ HTML લિંટર ટૂલ છે. તે વેબપૃષ્ઠોમાં ઘણી સામાન્ય HTML ભૂલો માટે આપમેળે તપાસ કરે છે જે એકદમ "વેનીલા" રીતે બુટસ્ટ્રેપનો ઉપયોગ કરી રહ્યાં છે. વેનીલા બુટસ્ટ્રેપના ઘટકો/વિજેટ્સને અમુક બંધારણોને અનુરૂપ DOM ના તેમના ભાગોની જરૂર પડે છે. બુટલિન્ટ તપાસે છે કે બુટસ્ટ્રેપ ઘટકોના ઉદાહરણોમાં યોગ્ય રીતે HTML-સંરચિત છે. તમારા બુટસ્ટ્રેપ વેબ ડેવલપમેન્ટ ટૂલચેનમાં બુટલિન્ટ ઉમેરવાનું વિચારો જેથી કરીને કોઈપણ સામાન્ય ભૂલો તમારા પ્રોજેક્ટના વિકાસને ધીમું ન કરે.
બુટસ્ટ્રેપના વિકાસ પર અદ્યતન રહો અને આ મદદરૂપ સંસાધનો વડે સમુદાય સુધી પહોંચો.
irc.freenode.net
સર્વરમાં IRC નો ઉપયોગ કરીને સાથી બુટસ્ટ્રેપર્સ સાથે ચેટ કરો .twitter-bootstrap-3
પર પૂછો .bootstrap
દ્વારા વિતરણ કરતી વખતે બુટસ્ટ્રેપની કાર્યક્ષમતામાં ફેરફાર કરે છે અથવા ઉમેરે છે .તમે નવીનતમ ગપસપ અને અદ્ભુત સંગીત વિડિઓઝ માટે Twitter પર @getbootstrap ને પણ ફોલો કરી શકો છો.
બુટસ્ટ્રેપ તમારા પૃષ્ઠોને વિવિધ સ્ક્રીન માપો માટે આપમેળે સ્વીકારે છે. આ સુવિધાને કેવી રીતે અક્ષમ કરવી તે અહીં છે જેથી તમારું પૃષ્ઠ આ બિન-પ્રતિભાવશીલ ઉદાહરણની જેમ કાર્ય કરે .
<meta>
ઉલ્લેખિત વ્યૂપોર્ટને છોડી દોwidth
દરેક ગ્રીડ ટાયર માટે એક જ પહોળાઈ સાથે પર ઓવરરાઇડ કરો .container
, ઉદાહરણ તરીકે width: 970px !important;
ખાતરી કરો કે આ ડિફોલ્ટ બુટસ્ટ્રેપ CSS પછી આવે છે. તમે વૈકલ્પિક રીતે !important
મીડિયા ક્વેરીઝ સાથે અથવા અમુક પસંદગીકાર-ફૂને ટાળી શકો છો..col-xs-*
માટે, મધ્યમ/મોટા લેઆઉટ ઉપરાંત અથવા તેના સ્થાને વર્ગોનો ઉપયોગ કરો. ચિંતા કરશો નહીં, વધારાના-નાના ઉપકરણની ગ્રીડ તમામ રીઝોલ્યુશનને માપે છે.તમને હજુ પણ IE8 માટે Respond.js ની જરૂર પડશે (કારણ કે અમારી મીડિયા ક્વેરીઝ હજુ પણ છે અને પ્રક્રિયા કરવાની જરૂર છે). આ બુટસ્ટ્રેપના "મોબાઇલ સાઇટ" પાસાઓને નિષ્ક્રિય કરે છે.
અમે આ પગલાંને ઉદાહરણ પર લાગુ કર્યા છે. ચોક્કસ ફેરફારો અમલમાં જોવા માટે તેનો સ્રોત કોડ વાંચો.
Bootstrap ની જૂની આવૃત્તિમાંથી v3.x પર સ્થળાંતર કરવા માંગો છો? અમારી સ્થળાંતર માર્ગદર્શિકા તપાસો .
બુટસ્ટ્રેપ નવીનતમ ડેસ્કટૉપ અને મોબાઇલ બ્રાઉઝર્સમાં શ્રેષ્ઠ રીતે કામ કરવા માટે બનાવવામાં આવ્યું છે, એટલે કે જૂના બ્રાઉઝર્સ અલગ-અલગ રીતે પ્રદર્શિત કરી શકે છે, જોકે સંપૂર્ણપણે કાર્યાત્મક, અમુક ઘટકોના રેન્ડરિંગ્સ.
ખાસ કરીને, અમે નીચેના બ્રાઉઝર અને પ્લેટફોર્મના નવીનતમ સંસ્કરણોને સમર્થન આપીએ છીએ .
વૈકલ્પિક બ્રાઉઝર્સ કે જે વેબકિટ, બ્લિંક અથવા ગેકોના નવીનતમ સંસ્કરણનો ઉપયોગ કરે છે, પછી ભલે તે સીધા અથવા પ્લેટફોર્મના વેબ વ્યુ API દ્વારા હોય, સ્પષ્ટપણે સમર્થિત નથી. જો કે, બુટસ્ટ્રેપ (મોટા ભાગના કિસ્સાઓમાં) આ બ્રાઉઝર્સમાં પણ યોગ્ય રીતે પ્રદર્શિત અને કાર્ય કરવું જોઈએ. વધુ ચોક્કસ આધાર માહિતી નીચે આપેલ છે.
સામાન્ય રીતે કહીએ તો, બુટસ્ટ્રેપ દરેક મુખ્ય પ્લેટફોર્મના ડિફોલ્ટ બ્રાઉઝર્સના નવીનતમ સંસ્કરણોને સપોર્ટ કરે છે. નોંધ કરો કે પ્રોક્સી બ્રાઉઝર્સ (જેમ કે ઓપેરા મિની, ઓપેરા મોબાઈલનો ટર્બો મોડ, યુસી બ્રાઉઝર મિની, એમેઝોન સિલ્ક) સપોર્ટેડ નથી.
ક્રોમ | ફાયરફોક્સ | સફારી | |
---|---|---|---|
એન્ડ્રોઇડ | આધારભૂત | આધારભૂત | N/A |
iOS | આધારભૂત | આધારભૂત | આધારભૂત |
એ જ રીતે, મોટાભાગના ડેસ્કટોપ બ્રાઉઝર્સના નવીનતમ સંસ્કરણો સપોર્ટેડ છે.
ક્રોમ | ફાયરફોક્સ | ઈન્ટરનેટ એક્સપ્લોરર | ઓપેરા | સફારી | |
---|---|---|---|---|---|
મેક | આધારભૂત | આધારભૂત | N/A | આધારભૂત | આધારભૂત |
વિન્ડોઝ | આધારભૂત | આધારભૂત | આધારભૂત | આધારભૂત | આધારભૂત નથી |
Windows પર, અમે Internet Explorer 8-11 ને સપોર્ટ કરીએ છીએ .
ફાયરફોક્સ માટે, નવીનતમ સામાન્ય સ્થિર પ્રકાશન ઉપરાંત, અમે ફાયરફોક્સના નવીનતમ વિસ્તૃત સપોર્ટ રીલીઝ (ESR) સંસ્કરણને પણ સમર્થન આપીએ છીએ.
બિનસત્તાવાર રીતે, બુટસ્ટ્રેપ એ ક્રોમિયમ અને લિનક્સ માટે ક્રોમ, લિનક્સ માટે ફાયરફોક્સ અને ઈન્ટરનેટ એક્સપ્લોરર 7 તેમજ Microsoft એજમાં સારી રીતે દેખાવું અને વર્તવું જોઈએ, જો કે તે સત્તાવાર રીતે સમર્થિત નથી.
બુટસ્ટ્રેપને જે બ્રાઉઝર ભૂલોનો સામનો કરવો પડે છે તેની સૂચિ માટે, અમારી બ્રાઉઝર બગ્સની દિવાલ જુઓ .
ઈન્ટરનેટ એક્સપ્લોરર 8 અને 9 પણ સપોર્ટેડ છે, જો કે, કૃપા કરીને ધ્યાન રાખો કે કેટલીક CSS3 પ્રોપર્ટીઝ અને HTML5 તત્વો આ બ્રાઉઝર્સ દ્વારા સંપૂર્ણપણે સપોર્ટેડ નથી. વધુમાં, ઈન્ટરનેટ એક્સપ્લોરર 8 ને મીડિયા ક્વેરી સપોર્ટને સક્ષમ કરવા માટે Respond.js નો ઉપયોગ જરૂરી છે.
લક્ષણ | ઇન્ટરનેટ એક્સપ્લોરર 8 | ઇન્ટરનેટ એક્સપ્લોરર 9 |
---|---|---|
border-radius |
આધારભૂત નથી | આધારભૂત |
box-shadow |
આધારભૂત નથી | આધારભૂત |
transform |
આધારભૂત નથી | આધારભૂત, -ms ઉપસર્ગ સાથે |
transition |
આધારભૂત નથી | |
placeholder |
આધારભૂત નથી |
CSS3 અને HTML5 સુવિધાઓના બ્રાઉઝર સપોર્ટ પર વિગતો માટે શું હું ઉપયોગ કરી શકું... ની મુલાકાત લો .
Internet Explorer 8 માટે તમારા વિકાસ અને ઉત્પાદન વાતાવરણમાં Respond.js નો ઉપયોગ કરતી વખતે નીચેની ચેતવણીઓથી સાવધ રહો.
એક અલગ (સબ) ડોમેન (ઉદાહરણ તરીકે, સીડીએન પર) પર હોસ્ટ કરેલ CSS સાથે Respond.js નો ઉપયોગ કરવા માટે કેટલાક વધારાના સેટઅપની જરૂર છે. વિગતો માટે Respond.js દસ્તાવેજ જુઓ .
file://
બ્રાઉઝર સુરક્ષા નિયમોને લીધે, Respond.js file://
પ્રોટોકોલ દ્વારા જોવામાં આવતા પૃષ્ઠો સાથે કામ કરતું નથી (જેમ કે સ્થાનિક HTML ફાઇલ ખોલતી વખતે). IE8 માં પ્રતિભાવશીલ સુવિધાઓનું પરીક્ષણ કરવા માટે, તમારા પૃષ્ઠોને HTTP(S) પર જુઓ. વિગતો માટે Respond.js દસ્તાવેજ જુઓ .
@import
Respond.js એ CSS સાથે કામ કરતું નથી જેનો સંદર્ભ @import
. ખાસ કરીને, કેટલાક Drupal રૂપરેખાંકનો ઉપયોગ કરવા માટે જાણીતા છે @import
. વિગતો માટે Respond.js દસ્તાવેજ જુઓ .
જ્યારે , , , અથવા box-sizing: border-box;
સાથે જોડવામાં આવે ત્યારે IE8 સંપૂર્ણપણે સપોર્ટ કરતું નથી . તે કારણોસર, v3.0.1 મુજબ, અમે હવે s પર ઉપયોગ કરતા નથી.min-width
max-width
min-height
max-height
max-width
.container
@font-face
જ્યારે સાથે જોડવામાં આવે ત્યારે IE8 ને કેટલીક સમસ્યાઓ હોય છે :before
. બુટસ્ટ્રેપ તેના ગ્લિફિકન્સ સાથે તે સંયોજનનો ઉપયોગ કરે છે. જો કોઈ પેજ કેશ થયેલ હોય અને વિન્ડો પર માઉસ વગર લોડ થાય (એટલે કે રીફ્રેશ બટન દબાવો અથવા આઈફ્રેમમાં કંઈક લોડ કરો) તો ફોન્ટ લોડ થાય તે પહેલા પેજ રેન્ડર થઈ જાય છે. પૃષ્ઠ (બોડી) પર હોવર કરવાથી કેટલાક ચિહ્નો દેખાશે અને બાકીના ચિહ્નો પર હોવર કરવાથી તે પણ દેખાશે. વિગતો માટે અંક નંબર 13863 જુઓ .
બુટસ્ટ્રેપ જૂના ઈન્ટરનેટ એક્સપ્લોરર સુસંગતતા મોડ્સમાં સમર્થિત નથી. <meta>
તમે IE માટે નવીનતમ રેન્ડરિંગ મોડનો ઉપયોગ કરી રહ્યાં છો તેની ખાતરી કરવા માટે, તમારા પૃષ્ઠોમાં યોગ્ય ટેગ શામેલ કરવાનું વિચારો :
ડીબગીંગ ટૂલ્સ ખોલીને દસ્તાવેજ મોડની પુષ્ટિ કરો: F12"દસ્તાવેજ મોડ" દબાવો અને તપાસો.
Internet Explorer ના દરેક સપોર્ટેડ વર્ઝનમાં શક્ય શ્રેષ્ઠ રેન્ડરીંગ સુનિશ્ચિત કરવા માટે આ ટેગ બુટસ્ટ્રેપના તમામ દસ્તાવેજો અને ઉદાહરણોમાં સમાવવામાં આવેલ છે.
વધુ માહિતી માટે આ StackOverflow પ્રશ્ન જુઓ .
ઈન્ટરનેટ એક્સપ્લોરર 10 ઉપકરણની પહોળાઈને વ્યૂપોર્ટ પહોળાઈથી અલગ કરતું નથી અને તેથી બુટસ્ટ્રેપના CSSમાં મીડિયા ક્વેરીઝને યોગ્ય રીતે લાગુ કરતું નથી. સામાન્ય રીતે તમે આને ઠીક કરવા માટે ફક્ત CSS નું ઝડપી સ્નિપેટ ઉમેરશો:
જો કે, આ અપડેટ 3 (ઉર્ફે GDR3) કરતાં જૂના Windows Phone 8 વર્ઝન ચલાવતા ઉપકરણો માટે કામ કરતું નથી , કારણ કે તે આવા ઉપકરણોને સાંકડી "ફોન" દૃશ્યને બદલે મોટાભાગે ડેસ્કટૉપ વ્યૂ બતાવે છે. આને સંબોધવા માટે, તમારે બગની આસપાસ કામ કરવા માટે નીચેની CSS અને JavaScript શામેલ કરવાની જરૂર પડશે .
વધુ માહિતી અને ઉપયોગ દિશાનિર્દેશો માટે, Windows Phone 8 અને Device-Width વાંચો .
હેડ અપ તરીકે, અમે આનો સમાવેશ બુટસ્ટ્રેપના તમામ દસ્તાવેજોમાં અને નિદર્શન તરીકે ઉદાહરણોમાં કરીએ છીએ.
OS X માટે v7.1 અને iOS v8.0 માટે Safari પહેલાના સંસ્કરણોના રેન્ડરિંગ એન્જિનને અમારા .col-*-1
ગ્રીડ વર્ગોમાં ઉપયોગમાં લેવાતા દશાંશ સ્થાનોની સંખ્યા સાથે થોડી સમસ્યા હતી. તેથી જો તમારી પાસે 12 વ્યક્તિગત ગ્રીડ કૉલમ હોય, તો તમે જોશો કે કૉલમની અન્ય પંક્તિઓની સરખામણીમાં તે ટૂંકી આવી છે. Safari/iOS ને અપગ્રેડ કરવા ઉપરાંત, તમારી પાસે ઉકેલ માટે કેટલાક વિકલ્પો છે:
.pull-right
સખત-જમણી ગોઠવણી મેળવવા માટે તમારી છેલ્લી ગ્રીડ કૉલમમાં ઉમેરોoverflow: hidden
આઇઓએસ અને એન્ડ્રોઇડમાં એલિમેન્ટ માટે સપોર્ટ <body>
તદ્દન મર્યાદિત છે. તે માટે, જ્યારે તમે તેમાંથી કોઈપણ ઉપકરણના બ્રાઉઝરમાં મોડલની ઉપર અથવા નીચેથી સ્ક્રોલ કરો છો, ત્યારે <body>
સામગ્રી સ્ક્રોલ કરવાનું શરૂ કરશે. જુઓ ક્રોમ બગ #175502 (Chrome v40 માં સુધારેલ) અને WebKit બગ #153852 .
<input>
iOS 9.3 મુજબ, મોડલ ખુલ્લું હોય ત્યારે, જો સ્ક્રોલ હાવભાવનો પ્રારંભિક સ્પર્શ ટેક્સ્ટ અથવા a ની સીમામાં હોય, તો મોડલની <textarea>
નીચેની <body>
સામગ્રીને મોડલને બદલે સ્ક્રોલ કરવામાં આવશે. વેબકિટ બગ #153856 જુઓ .
ઉપરાંત, નોંધ કરો કે જો તમે ફિક્સ્ડ નેવબારનો ઉપયોગ કરી રહ્યાં છો અથવા મોડલમાં ઇનપુટ્સનો ઉપયોગ કરી રહ્યાં છો, તો iOSમાં રેન્ડરિંગ બગ છે જે વર્ચ્યુઅલ કીબોર્ડ ટ્રિગર થવા પર ફિક્સ્ડ એલિમેન્ટ્સની સ્થિતિને અપડેટ કરતું નથી. આના માટેના કેટલાક ઉપાયોમાં તમારા તત્વોને રૂપાંતરિત કરવા position: absolute
અથવા પોઝિશનિંગને મેન્યુઅલી સુધારવાનો પ્રયાસ કરવા માટે ફોકસ પર ટાઈમરનો ઉપયોગ કરવાનો સમાવેશ થાય છે. આ બુટસ્ટ્રેપ દ્વારા નિયંત્રિત કરવામાં આવતું નથી, તેથી તમારી એપ્લિકેશન માટે કયો ઉકેલ શ્રેષ્ઠ છે તે નક્કી કરવાનું તમારા પર છે.
z- ઇન્ડેક્સીંગની .dropdown-backdrop
જટિલતાને કારણે નેવમાં iOS પર તત્વનો ઉપયોગ થતો નથી. આમ, નેવબાર્સમાં ડ્રોપડાઉન બંધ કરવા માટે, તમારે ડ્રોપડાઉન એલિમેન્ટ (અથવા કોઈપણ અન્ય ઘટક જે iOS માં ક્લિક ઇવેન્ટને ફાયર કરશે ) પર સીધું જ ક્લિક કરવું પડશે.
પૃષ્ઠ ઝૂમિંગ અનિવાર્યપણે કેટલાક ઘટકોમાં, બૂટસ્ટ્રેપ અને બાકીના વેબ બંનેમાં રેન્ડરિંગ આર્ટિફેક્ટ રજૂ કરે છે. સમસ્યાના આધારે, અમે તેને ઠીક કરી શકીએ છીએ (પહેલા શોધો અને પછી જો જરૂર હોય તો સમસ્યા ખોલો). જો કે, અમે આને અવગણીએ છીએ કારણ કે તેમની પાસે હેકી વર્કઅરાઉન્ડ સિવાય કોઈ સીધો ઉકેલ નથી.
:hover
/ :focus
મોબાઇલ પરમોટાભાગની ટચસ્ક્રીન પર વાસ્તવિક હોવરિંગ શક્ય ન હોવા છતાં, મોટાભાગના મોબાઇલ બ્રાઉઝર્સ હોવરિંગ સપોર્ટનું અનુકરણ કરે છે અને :hover
"સ્ટીકી" બનાવે છે. બીજા શબ્દોમાં કહીએ તો, :hover
કોઈ તત્વને ટેપ કર્યા પછી શૈલીઓ લાગુ થવાનું શરૂ થાય છે અને વપરાશકર્તા કોઈ અન્ય ઘટકને ટેપ કર્યા પછી જ લાગુ કરવાનું બંધ કરે છે. આના કારણે આવા બ્રાઉઝર્સ પર બુટસ્ટ્રેપની :hover
સ્થિતિ અનિચ્છનીય રીતે "અટકી" થઈ શકે છે. કેટલાક મોબાઇલ બ્રાઉઝર પણ :focus
આ જ રીતે સ્ટીકી બનાવે છે. આવી શૈલીઓને સંપૂર્ણપણે દૂર કરવા સિવાય આ સમસ્યાઓ માટે હાલમાં કોઈ સરળ ઉકેલ નથી.
કેટલાક આધુનિક બ્રાઉઝર્સમાં પણ, પ્રિન્ટિંગ વિચિત્ર હોઈ શકે છે.
ખાસ કરીને, Chrome v32 મુજબ અને માર્જિન સેટિંગ્સને ધ્યાનમાં લીધા વિના, Chrome વેબપેજ છાપતી વખતે મીડિયા પ્રશ્નોનું નિરાકરણ કરતી વખતે ભૌતિક કાગળના કદ કરતાં નોંધપાત્ર રીતે સાંકડી વ્યૂપોર્ટ પહોળાઈનો ઉપયોગ કરે છે. આના પરિણામે બુટસ્ટ્રેપની વધારાની-નાની ગ્રીડ છાપતી વખતે અણધારી રીતે સક્રિય થઈ શકે છે. કેટલીક વિગતો માટે અંક #12078 અને ક્રોમ બગ #273306 જુઓ. સૂચવેલ ઉપાયો:
@screen-*
જેથી કરીને તમારા પ્રિન્ટર પેપરને વધારાના-નાના કરતાં મોટું ગણવામાં આવે.ઉપરાંત, Safari v8.0 મુજબ, નિશ્ચિત-પહોળાઈ .container
s સફારીને પ્રિન્ટ કરતી વખતે અસામાન્ય રીતે નાના ફોન્ટ કદનો ઉપયોગ કરવા માટેનું કારણ બની શકે છે. વધુ વિગતો માટે # 14868 અને વેબકિટ બગ #138192 જુઓ. આ માટે એક સંભવિત ઉકેલ નીચેની CSS ઉમેરી રહ્યું છે:
બૉક્સની બહાર, Android 4.1 (અને દેખીતી રીતે કેટલીક નવી રિલીઝ પણ) બ્રાઉઝર એપ્લિકેશન સાથે પસંદગીના ડિફોલ્ટ વેબ બ્રાઉઝર તરીકે મોકલે છે (ક્રોમથી વિપરીત). કમનસીબે, બ્રાઉઝર એપ્લિકેશનમાં સામાન્ય રીતે CSS સાથે ઘણી બધી બગ્સ અને અસંગતતાઓ છે.
તત્વો પર <select>
, Android સ્ટોક બ્રાઉઝર બાજુના નિયંત્રણો પ્રદર્શિત કરશે નહીં જો ત્યાં કોઈ border-radius
અને/અથવા border
લાગુ હોય. ( વિગતો માટે આ સ્ટેકઓવરફ્લો પ્રશ્ન<select>
જુઓ.) વાંધાજનક CSSને દૂર કરવા અને એન્ડ્રોઇડ સ્ટોક બ્રાઉઝર પર અનસ્ટાઇલ કરેલ ઘટક તરીકે રેન્ડર કરવા માટે નીચેના કોડના સ્નિપેટનો ઉપયોગ કરો. વપરાશકર્તા એજન્ટ સુંઘવાનું ક્રોમ, સફારી અને મોઝિલા બ્રાઉઝર્સમાં દખલ કરવાનું ટાળે છે.
ઉદાહરણ જોવા માંગો છો? આ JS બિન ડેમો તપાસો.
જૂના અને બગડેલ બ્રાઉઝર્સને શ્રેષ્ઠ સંભવિત અનુભવ પ્રદાન કરવા માટે, બુટસ્ટ્રેપ બ્રાઉઝર્સમાં જ બગ્સની આસપાસ કામ કરવા માટે ચોક્કસ બ્રાઉઝર વર્ઝન માટે વિશિષ્ટ CSS ને લક્ષ્ય બનાવવા માટે ઘણી જગ્યાએ CSS બ્રાઉઝર હેક્સનો ઉપયોગ કરે છે. આ હેક્સ સમજી શકાય તે રીતે CSS માન્યકર્તાઓને ફરિયાદ કરે છે કે તેઓ અમાન્ય છે. કેટલાક સ્થળોએ, અમે બ્લીડિંગ-એજ CSS સુવિધાઓનો પણ ઉપયોગ કરીએ છીએ જે હજુ સુધી સંપૂર્ણ પ્રમાણિત નથી, પરંતુ તેનો ઉપયોગ પ્રગતિશીલ વૃદ્ધિ માટે થાય છે.
આ માન્યતા ચેતવણીઓ વ્યવહારમાં કોઈ વાંધો નથી કારણ કે અમારા CSS નો બિન-હેકી ભાગ સંપૂર્ણપણે માન્ય કરે છે અને હેકી ભાગો બિન-હેકી ભાગની યોગ્ય કામગીરીમાં દખલ કરતા નથી, તેથી શા માટે અમે આ ચોક્કસ ચેતવણીઓને જાણીજોઈને અવગણીએ છીએ.
ચોક્કસ ફાયરફોક્સ બગ માટેના ઉકેલના અમારા સમાવેશને કારણે અમારા HTML દસ્તાવેજોમાં પણ કેટલીક તુચ્છ અને અસંગત HTML માન્યતા ચેતવણીઓ છે .
જ્યારે અમે સત્તાવાર રીતે કોઈપણ તૃતીય પક્ષ પ્લગઈન્સ અથવા એડ-ઓનને સમર્થન આપતા નથી, અમે તમારા પ્રોજેક્ટ્સમાં સંભવિત સમસ્યાઓ ટાળવા માટે કેટલીક ઉપયોગી સલાહ આપીએ છીએ.
કેટલાક તૃતીય પક્ષ સોફ્ટવેર, જેમાં Google નકશા અને Google કસ્ટમ સર્ચ એન્જિનનો સમાવેશ થાય છે, બુટસ્ટ્રેપ સાથે * { box-sizing: border-box; }
, એક નિયમ જે તેને બનાવે છે તે padding
ઘટકની અંતિમ ગણતરી કરેલ પહોળાઈને અસર કરતું નથી. CSS ટ્રિક્સ પર બોક્સ મોડેલ અને કદ બદલવા વિશે વધુ જાણો .
સંદર્ભના આધારે, તમે જરૂર મુજબ ઓવરરાઇડ કરી શકો છો (વિકલ્પ 1) અથવા સમગ્ર પ્રદેશો માટે બૉક્સનું કદ ફરીથી સેટ કરી શકો છો (વિકલ્પ 2).
બુટસ્ટ્રેપ સામાન્ય વેબ માપદંડોને અનુસરે છે અને-ન્યૂનતમ વધારાના પ્રયત્નો સાથે- એટીનો ઉપયોગ કરતા લોકો માટે ઍક્સેસિબલ હોય તેવી સાઇટ્સ બનાવવા માટે તેનો ઉપયોગ કરી શકાય છે .
જો તમારા નેવિગેશનમાં ઘણી બધી લિંક્સ હોય અને DOM માં મુખ્ય સામગ્રીની પહેલાં આવે, Skip to main content
તો નેવિગેશન પહેલાં એક લિંક ઉમેરો (સાદા સમજૂતી માટે, નેવિગેશન લિંક્સ છોડો પર આ A11Y પ્રોજેક્ટ લેખ જુઓ ). વર્ગનો ઉપયોગ કરવાથી .sr-only
સ્કીપ લિંકને દૃષ્ટિની રીતે છુપાવવામાં આવશે, અને .sr-only-focusable
વર્ગ એ સુનિશ્ચિત કરશે કે એકવાર ધ્યાન કેન્દ્રિત કર્યા પછી લિંક દૃશ્યક્ષમ બને છે (દ્રષ્ટા કીબોર્ડ વપરાશકર્તાઓ માટે).
ક્રોમમાં લાંબા સમયથી રહેલી ખામીઓ/બગ્સને કારણે ( ક્રોમિયમ બગ ટ્રેકરમાં અંક 262171 જુઓ ) અને ઈન્ટરનેટ એક્સ્પ્લોરર (આ લેખ ઇન-પેજ લિંક્સ અને ફોકસ ઓર્ડર પર જુઓ ), તમારે ખાતરી કરવી પડશે કે તમારી સ્કીપ લિંકનું લક્ષ્ય ઉમેરીને ઓછામાં ઓછું પ્રોગ્રામેટિકલી ફોકસેબલ છે tabindex="-1"
.
વધુમાં, તમે ટાર્ગેટ પર દેખાતા ફોકસ સંકેતને સ્પષ્ટપણે દબાવવા માગી શકો છો (ખાસ કરીને ક્રોમ હાલમાં tabindex="-1"
જ્યારે માઉસ વડે ક્લિક કરવામાં આવે ત્યારે તત્વો પર ફોકસ સેટ કરે છે) #content:focus { outline: none; }
.
નોંધ કરો કે આ બગ તમારી સાઇટનો ઉપયોગ કરતી અન્ય કોઈપણ ઇન-પેજ લિંક્સને પણ અસર કરશે, તેને કીબોર્ડ વપરાશકર્તાઓ માટે નકામું રેન્ડર કરશે. તમે લિંક લક્ષ્યો તરીકે કાર્ય કરતા અન્ય તમામ નામના એન્કર/ફ્રેગમેન્ટ ઓળખકર્તાઓમાં સમાન સ્ટોપ-ગેપ ફિક્સ ઉમેરવાનું વિચારી શકો છો.
જ્યારે નેસ્ટિંગ હેડિંગ ( <h1>
- <h6>
), તમારું પ્રાથમિક દસ્તાવેજ હેડર હોવું જોઈએ <h1>
. અનુગામી મથાળાઓએ તાર્કિક ઉપયોગ કરવો જોઈએ <h2>
- <h6>
જેમ કે સ્ક્રીન રીડર્સ તમારા પૃષ્ઠો માટે સામગ્રીનું કોષ્ટક બનાવી શકે.
HTML CodeSniffer અને Penn State's AccessAbility પર વધુ જાણો .
હાલમાં, બુટસ્ટ્રેપમાં ઉપલબ્ધ કેટલાક ડિફૉલ્ટ રંગ સંયોજનો (જેમ કે વિવિધ સ્ટાઇલવાળા બટન વર્ગો, મૂળભૂત કોડ બ્લોક્સ માટે ઉપયોગમાં લેવાતા કેટલાક કોડ હાઇલાઇટિંગ રંગો , .bg-primary
સંદર્ભિત પૃષ્ઠભૂમિ સહાયક વર્ગ અને જ્યારે સફેદ પૃષ્ઠભૂમિ પર ઉપયોગ કરવામાં આવે ત્યારે ડિફોલ્ટ લિંક રંગ) નીચા કોન્ટ્રાસ્ટ રેશિયો ( 4.5:1 ના ભલામણ કરેલ ગુણોત્તરથી નીચે ). આનાથી ઓછી દ્રષ્ટિ ધરાવતા અથવા રંગ અંધ હોય તેવા વપરાશકર્તાઓને સમસ્યા થઈ શકે છે. આ ડિફૉલ્ટ રંગો તેમના કોન્ટ્રાસ્ટ અને સુવાચ્યતા વધારવા માટે સંશોધિત કરવાની જરૂર પડી શકે છે.
બુટસ્ટ્રેપ MIT લાયસન્સ હેઠળ બહાર પાડવામાં આવ્યો છે અને તે કૉપિરાઇટ 2016 Twitter છે. નાના ટુકડાઓમાં ઉકાળીને, તેને નીચેની શરતો સાથે વર્ણવી શકાય છે.
વધુ માહિતી માટે સંપૂર્ણ બુટસ્ટ્રેપ લાઇસન્સ પ્રોજેક્ટ રીપોઝીટરીમાં સ્થિત છે.
સમુદાયના સભ્યોએ બુટસ્ટ્રેપના દસ્તાવેજોનો વિવિધ ભાષાઓમાં અનુવાદ કર્યો છે. કોઈ પણ સત્તાવાર રીતે સમર્થિત નથી અને તે હંમેશા અપ ટૂ ડેટ હોઈ શકે નહીં.
અમે અનુવાદોને ગોઠવવામાં અથવા હોસ્ટ કરવામાં મદદ કરતા નથી, અમે ફક્ત તેમની સાથે લિંક કરીએ છીએ.
નવો અથવા વધુ સારો અનુવાદ સમાપ્ત કર્યો? તેને અમારી સૂચિમાં ઉમેરવા માટે પુલ વિનંતી ખોલો.