શરૂઆત કરવી · બુટસ્ટ્રેપ ગુજરાતીમાં

બુટસ્ટ્રેપ (હાલમાં v3.4.1) પાસે ઝડપથી પ્રારંભ કરવાની કેટલીક સરળ રીતો છે, દરેક એક અલગ કૌશલ્ય સ્તર અને ઉપયોગ કેસને આકર્ષિત કરે છે. તમારી ચોક્કસ જરૂરિયાતોને અનુકૂળ શું છે તે જોવા માટે વાંચો.

બુટસ્ટ્રેપ

CSS, JavaScript અને ફોન્ટ્સ કમ્પાઇલ અને મિનિફાઇડ. કોઈ દસ્તાવેજ અથવા મૂળ સ્રોત ફાઇલો શામેલ નથી.

બુટસ્ટ્રેપ ડાઉનલોડ કરો

સ્ત્રોત કોડ

સોર્સ લેસ, JavaScript અને ફોન્ટ ફાઇલો, અમારા દસ્તાવેજો સાથે. ઓછા કમ્પાઇલર અને કેટલાક સેટઅપની જરૂર છે.

સ્ત્રોત ડાઉનલોડ કરો

સસ

રેલ્સ, કંપાસ અથવા ફક્ત-સાસ પ્રોજેક્ટ્સમાં સરળ સમાવેશ માટે બુટસ્ટ્રેપ ઓછાથી સાસ સુધી પોર્ટેડ .

સાસ ડાઉનલોડ કરો

jsDelivr

jsDelivr પરના લોકો બુટસ્ટ્રેપના CSS અને JavaScript માટે CDN સપોર્ટ પૂરો પાડે છે. ફક્ત આ 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>

બોવર સાથે ઇન્સ્ટોલ કરો

તમે Bower નો ઉપયોગ કરીને Bootstrap's Less, CSS, JavaScript અને ફોન્ટ્સ ઇન્સ્ટોલ અને મેનેજ પણ કરી શકો છો :

bower install bootstrap

npm સાથે ઇન્સ્ટોલ કરો

તમે npm નો ઉપયોગ કરીને બુટસ્ટ્રેપ પણ ઇન્સ્ટોલ કરી શકો છો :

npm install bootstrap@3

require('bootstrap')બુટસ્ટ્રેપના તમામ jQuery પ્લગઈનો jQuery ઑબ્જેક્ટ પર લોડ કરશે. મોડ્યુલ પોતે bootstrapકંઈપણ નિકાસ કરતું નથી. તમે /js/*.jsપેકેજની ટોપ-લેવલ ડાયરેક્ટરી હેઠળ ફાઇલોને લોડ કરીને વ્યક્તિગત રીતે બુટસ્ટ્રેપના jQuery પ્લગઇન્સને જાતે લોડ કરી શકો છો.

બુટસ્ટ્રેપમાં package.jsonનીચેની કી હેઠળ કેટલાક વધારાના મેટાડેટા છે:

less- બુટસ્ટ્રેપની મુખ્ય ઓછી સ્ત્રોત ફાઇલનો પાથ
style- બુટસ્ટ્રેપના નોન-મિનિફાઇડ CSSનો પાથ જે ડિફોલ્ટ સેટિંગ્સનો ઉપયોગ કરીને પૂર્વ કમ્પાઇલ કરવામાં આવ્યો છે (કોઈ કસ્ટમાઇઝેશન નથી)

કંપોઝર સાથે ઇન્સ્ટોલ કરો

તમે કંપોઝરનો ઉપયોગ કરીને બુટસ્ટ્રેપના લેસ, સીએસએસ, જાવાસ્ક્રિપ્ટ અને ફોન્ટ્સ ઇન્સ્ટોલ અને મેનેજ પણ કરી શકો છો :

composer require twbs/bootstrap

ઓછા/સાસ માટે ઑટોપ્રીફિક્સર જરૂરી છે

બુટસ્ટ્રેપ CSS વિક્રેતા ઉપસર્ગ સાથે વ્યવહાર કરવા માટે Autoprefixer નો ઉપયોગ કરે છે . જો તમે બુટસ્ટ્રેપને તેના ઓછા/સાસ સ્ત્રોતમાંથી કમ્પાઈલ કરી રહ્યાં છો અને અમારી ગ્રન્ટફાઈલનો ઉપયોગ કરી રહ્યાં નથી, તો તમારે તમારી બિલ્ડ પ્રક્રિયામાં ઑટોપ્રીફિક્સરને જાતે જ એકીકૃત કરવાની જરૂર પડશે. જો તમે પૂર્વસંકલિત બુટસ્ટ્રેપનો ઉપયોગ કરી રહ્યાં છો અથવા અમારી ગ્રન્ટફાઈલનો ઉપયોગ કરી રહ્યાં છો, તો તમારે આ વિશે ચિંતા કરવાની જરૂર નથી કારણ કે ઑટોપ્રીફિક્સર અમારી ગ્રન્ટફાઈલમાં પહેલેથી જ સંકલિત છે.

બુટસ્ટ્રેપ બે સ્વરૂપોમાં ડાઉનલોડ કરી શકાય તેવું છે, જેમાં તમને નીચેની ડિરેક્ટરીઓ અને ફાઇલો મળશે, જે સામાન્ય સંસાધનોને તાર્કિક રીતે જૂથબદ્ધ કરે છે અને સંકલિત અને લઘુત્તમ ભિન્નતા આપે છે.

jQuery જરૂરી છે

મહેરબાની કરીને નોંધ કરો કે સ્ટાર્ટર ટેમ્પલેટમાં બતાવ્યા પ્રમાણે, તમામ JavaScript પ્લગિન્સને jQuery શામેલ કરવાની જરૂર છે . jQuery ના કયા સંસ્કરણો સપોર્ટેડ છે તે જોવા માટે અમારી સલાહ લો .bower.json

પૂર્વસંકલિત બુટસ્ટ્રેપ

એકવાર ડાઉનલોડ થઈ ગયા પછી, (સંકલિત) બુટસ્ટ્રેપનું માળખું જોવા માટે સંકુચિત ફોલ્ડરને અનઝિપ કરો. તમે આના જેવું કંઈક જોશો:

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

આ બુટસ્ટ્રેપનું સૌથી મૂળભૂત સ્વરૂપ છે: લગભગ કોઈપણ વેબ પ્રોજેક્ટમાં ઝડપી ડ્રોપ-ઇન વપરાશ માટે પ્રી-કમ્પાઇલ ફાઇલો. અમે કમ્પાઇલ CSS અને JS ( bootstrap.*), તેમજ કમ્પાઇલ અને મિનિફાઇડ CSS અને JS ( bootstrap.min.*) પ્રદાન કરીએ છીએ. CSS સ્ત્રોત નકશા ( bootstrap.*.map) ચોક્કસ બ્રાઉઝર્સના વિકાસકર્તા સાધનો સાથે ઉપયોગ માટે ઉપલબ્ધ છે. વૈકલ્પિક બુટસ્ટ્રેપ થીમ તરીકે, Glyphicons ના ફોન્ટ્સ શામેલ છે.

બુટસ્ટ્રેપ સ્ત્રોત કોડ

બુટસ્ટ્રેપ સોર્સ કોડ ડાઉનલોડમાં સોર્સ લેસ, જાવાસ્ક્રિપ્ટ અને દસ્તાવેજીકરણની સાથે પ્રી-કમ્પાઇલ CSS, JavaScript અને ફોન્ટ એસેટનો સમાવેશ થાય છે. વધુ વિશિષ્ટ રીતે, તેમાં નીચેના અને વધુનો સમાવેશ થાય છે:

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

અમારા 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 ચલાવે છે અને વાસ્તવિક બ્રાઉઝર્સમાં QUnit પરીક્ષણો ચલાવે છે કર્મને આભારી છે .

`grunt docs`(દસ્તાવેજ સંપત્તિઓ બનાવો અને તેનું પરીક્ષણ કરો)

CSS, JavaScript અને અન્ય અસ્કયામતો બનાવે છે અને તેનું પરીક્ષણ કરે છે જેનો ઉપયોગ સ્થાનિક રૂપે દ્વારા દસ્તાવેજીકરણ ચલાવતી વખતે થાય છે bundle exec jekyll serve.

`grunt`(એકદમ બધું બનાવો અને પરીક્ષણો ચલાવો)

CSS અને JavaScript ને કમ્પાઈલ અને મિનિફાઈ કરે છે, ડોક્યુમેન્ટેશન વેબસાઈટ બનાવે છે, ડોક્સ સામે HTML5 વેલિડેટર ચલાવે છે, કસ્ટમાઈઝર એસેટ રિજનરેટ કરે છે અને વધુ. જેકિલની જરૂર છે. સામાન્ય રીતે માત્ર ત્યારે જ જરૂરી છે જો તમે બુટસ્ટ્રેપ પર જ હેકિંગ કરી રહ્યાં હોવ.

મુશ્કેલીનિવારણ

જો તમને નિર્ભરતા સ્થાપિત કરવામાં અથવા ગ્રન્ટ આદેશો ચલાવવામાં સમસ્યાઓનો સામનો કરવો પડે, તો પહેલા /node_modules/npm દ્વારા જનરેટ થયેલ ડિરેક્ટરીને કાઢી નાખો. પછી, ફરીથી ચલાવો npm install.

આ મૂળભૂત HTML ટેમ્પલેટથી પ્રારંભ કરો, અથવા આ ઉદાહરણોને સંશોધિત કરો . અમે આશા રાખીએ છીએ કે તમે અમારા નમૂનાઓ અને ઉદાહરણોને તમારી જરૂરિયાતોને અનુરૂપ બનાવીને કસ્ટમાઇઝ કરશો.

ન્યૂનતમ બુટસ્ટ્રેપ દસ્તાવેજ સાથે કામ શરૂ કરવા માટે નીચેના HTML ની નકલ કરો.

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

બુટસ્ટ્રેપના ઘણા ઘટકો સાથે ઉપરના મૂળભૂત નમૂના પર બનાવો. અમે તમને તમારા વ્યક્તિગત પ્રોજેક્ટની જરૂરિયાતોને અનુરૂપ બુટસ્ટ્રેપને કસ્ટમાઇઝ અને અનુકૂલન કરવા પ્રોત્સાહિત કરીએ છીએ.

બુટસ્ટ્રેપ રીપોઝીટરી ડાઉનલોડ કરીને નીચેના દરેક ઉદાહરણ માટે સ્ત્રોત કોડ મેળવો . docs/examples/ઉદાહરણો ડિરેક્ટરીમાં મળી શકે છે .

ફ્રેમવર્કનો ઉપયોગ કરીને

સ્ટાર્ટર ટેમ્પલેટ

બેઝિક્સ સિવાય કંઈ નહીં: કન્ટેનર સાથે CSS અને JavaScript કમ્પાઇલ કરેલું.

બુટસ્ટ્રેપ થીમ

દૃષ્ટિની ઉન્નત અનુભવ માટે વૈકલ્પિક બુટસ્ટ્રેપ થીમ લોડ કરો.

ગ્રીડ્સ

ચારેય સ્તરો, નેસ્ટિંગ અને વધુ સાથે ગ્રીડ લેઆઉટના બહુવિધ ઉદાહરણો.

જમ્બોટ્રોન

નવબાર અને કેટલાક મૂળભૂત ગ્રીડ કૉલમ સાથે જમ્બોટ્રોનની આસપાસ બનાવો.

સાંકડી જમ્બોટ્રોન

ડિફૉલ્ટ કન્ટેનર અને જમ્બોટ્રોનને સંકુચિત કરીને વધુ કસ્ટમ પૃષ્ઠ બનાવો.

ક્રિયામાં નવબાર્સ

નવબાર

સુપર બેઝિક ટેમ્પલેટ જેમાં કેટલીક વધારાની સામગ્રી સાથે નેવબારનો સમાવેશ થાય છે.

સ્ટેટિક ટોપ નવબાર

કેટલીક વધારાની સામગ્રી સાથે સ્થિર ટોચના નેવબાર સાથેનો સુપર મૂળભૂત નમૂનો.

સ્થિર નવબાર

કેટલીક વધારાની સામગ્રી સાથે નિશ્ચિત ટોચના નેવબાર સાથેનો સુપર મૂળભૂત નમૂનો.

કસ્ટમ ઘટકો

આવરણ

સરળ અને સુંદર હોમ પેજ બનાવવા માટે એક-પૃષ્ઠનો નમૂનો.

હિંડોળા

નેવબાર અને કેરોયુઝલને કસ્ટમાઇઝ કરો, પછી કેટલાક નવા ઘટકો ઉમેરો.

બ્લોગ

કસ્ટમ નેવિગેશન, હેડર અને પ્રકાર સાથે સરળ બે-કૉલમ બ્લોગ લેઆઉટ.

ડેશબોર્ડ

નિશ્ચિત સાઇડબાર અને નેવબાર સાથે એડમિન ડેશબોર્ડ માટે મૂળભૂત માળખું.

સાઇન ઇન પેજ

સરળ સાઇન ઇન ફોર્મ માટે કસ્ટમ ફોર્મ લેઆઉટ અને ડિઝાઇન.

વાજબી નેવ

વાજબી લિંક્સ સાથે કસ્ટમ નેવબાર બનાવો. હેડ અપ! ખૂબ સફારી મૈત્રીપૂર્ણ નથી.

સ્ટીકી ફૂટર

જ્યારે સામગ્રી તેના કરતા ટૂંકી હોય ત્યારે વ્યુપોર્ટના તળિયે ફૂટર જોડો.

નવબાર સાથે સ્ટીકી ફૂટર

ટોચ પર નિશ્ચિત નવબાર સાથે વ્યુપોર્ટની નીચે ફૂટર જોડો.

પ્રયોગો

બિન-પ્રતિભાવ બુટસ્ટ્રેપ

અમારા દસ્તાવેજો દીઠ બુટસ્ટ્રેપની પ્રતિભાવને સરળતાથી અક્ષમ કરો .

ઑફ-કેનવાસ

બુટસ્ટ્રેપ સાથે ઉપયોગ કરવા માટે ટૉગલ કરી શકાય તેવું ઑફ-કેનવાસ નેવિગેશન મેનૂ બનાવો.

બુટલિંટ

બુટલિન્ટ એ સત્તાવાર બુટસ્ટ્રેપ HTML લિંટર ટૂલ છે. તે વેબપૃષ્ઠોમાં ઘણી સામાન્ય HTML ભૂલો માટે આપમેળે તપાસ કરે છે જે એકદમ "વેનીલા" રીતે બુટસ્ટ્રેપનો ઉપયોગ કરી રહ્યાં છે. વેનીલા બુટસ્ટ્રેપના ઘટકો/વિજેટ્સને અમુક બંધારણોને અનુરૂપ DOM ના તેમના ભાગોની જરૂર પડે છે. બુટલિન્ટ તપાસે છે કે બુટસ્ટ્રેપ ઘટકોના ઉદાહરણોમાં યોગ્ય રીતે HTML-સંરચિત છે. તમારા બુટસ્ટ્રેપ વેબ ડેવલપમેન્ટ ટૂલચેનમાં બુટલિન્ટ ઉમેરવાનું વિચારો જેથી કરીને કોઈપણ સામાન્ય ભૂલો તમારા પ્રોજેક્ટના વિકાસને ધીમું ન કરે.

બુટસ્ટ્રેપના વિકાસ પર અદ્યતન રહો અને આ મદદરૂપ સંસાધનો વડે સમુદાય સુધી પહોંચો.

સત્તાવાર બુટસ્ટ્રેપ બ્લોગ વાંચો અને સબ્સ્ક્રાઇબ કરો .
##બૂટસ્ટ્રેપ ચેનલમાંirc.freenode.net સર્વરમાં IRC નો ઉપયોગ કરીને સાથી બુટસ્ટ્રેપર્સ સાથે ચેટ કરો .
બુટસ્ટ્રેપનો ઉપયોગ કરવામાં મદદ માટે, ટેગનો ઉપયોગ કરીને સ્ટેકઓવરફ્લોtwitter-bootstrap-3 પર પૂછો .
વિકાસકર્તાઓએ પેકેજો પર કીવર્ડનો ઉપયોગ કરવો જોઈએ જે મહત્તમ શોધક્ષમતા માટે npm અથવા સમાન ડિલિવરી મિકેનિઝમ bootstrapદ્વારા વિતરણ કરતી વખતે બુટસ્ટ્રેપની કાર્યક્ષમતામાં ફેરફાર કરે છે અથવા ઉમેરે છે .
બુટસ્ટ્રેપ એક્સ્પોમાં બુટસ્ટ્રેપ વડે લોકો બનાવવાના પ્રેરણાદાયી ઉદાહરણો શોધો .

તમે નવીનતમ ગપસપ અને અદ્ભુત સંગીત વિડિઓઝ માટે Twitter પર @getbootstrap ને પણ ફોલો કરી શકો છો.

બુટસ્ટ્રેપ તમારા પૃષ્ઠોને વિવિધ સ્ક્રીન માપો માટે આપમેળે સ્વીકારે છે. આ સુવિધાને કેવી રીતે અક્ષમ કરવી તે અહીં છે જેથી તમારું પૃષ્ઠ આ બિન-પ્રતિભાવશીલ ઉદાહરણની જેમ કાર્ય કરે .

પૃષ્ઠ પ્રતિભાવ નિષ્ક્રિય કરવાનાં પગલાં

CSS ડૉક્સમાં<meta> ઉલ્લેખિત વ્યૂપોર્ટને છોડી દો
widthદરેક ગ્રીડ ટાયર માટે એક જ પહોળાઈ સાથે પર ઓવરરાઇડ કરો .container, ઉદાહરણ તરીકે width: 970px !important;ખાતરી કરો કે આ ડિફોલ્ટ બુટસ્ટ્રેપ CSS પછી આવે છે. તમે વૈકલ્પિક રીતે !importantમીડિયા ક્વેરીઝ સાથે અથવા અમુક પસંદગીકાર-ફૂને ટાળી શકો છો.
જો નેવબાર વાપરી રહ્યા હો, તો તમામ નેવબાર સંકુચિત અને વિસ્તરતી વર્તણૂકને દૂર કરો.
ગ્રીડ લેઆઉટ .col-xs-*માટે, મધ્યમ/મોટા લેઆઉટ ઉપરાંત અથવા તેના સ્થાને વર્ગોનો ઉપયોગ કરો. ચિંતા કરશો નહીં, વધારાના-નાના ઉપકરણની ગ્રીડ તમામ રીઝોલ્યુશનને માપે છે.

તમને હજુ પણ IE8 માટે Respond.js ની જરૂર પડશે (કારણ કે અમારી મીડિયા ક્વેરીઝ હજુ પણ છે અને પ્રક્રિયા કરવાની જરૂર છે). આ બુટસ્ટ્રેપના "મોબાઇલ સાઇટ" પાસાઓને નિષ્ક્રિય કરે છે.

પ્રતિભાવ અક્ષમ સાથે બુટસ્ટ્રેપ નમૂનો

અમે આ પગલાંને ઉદાહરણ પર લાગુ કર્યા છે. ચોક્કસ ફેરફારો અમલમાં જોવા માટે તેનો સ્રોત કોડ વાંચો.

બિન-પ્રતિભાવશીલ ઉદાહરણ જુઓ

v2.x થી v3.x પર સ્થળાંતર

Bootstrap ની જૂની આવૃત્તિમાંથી v3.x પર સ્થળાંતર કરવા માંગો છો? અમારી સ્થળાંતર માર્ગદર્શિકા તપાસો .

બુટસ્ટ્રેપ નવીનતમ ડેસ્કટૉપ અને મોબાઇલ બ્રાઉઝર્સમાં શ્રેષ્ઠ રીતે કામ કરવા માટે બનાવવામાં આવ્યું છે, એટલે કે જૂના બ્રાઉઝર્સ અલગ-અલગ રીતે પ્રદર્શિત કરી શકે છે, જોકે સંપૂર્ણપણે કાર્યાત્મક, અમુક ઘટકોના રેન્ડરિંગ્સ.

સપોર્ટેડ બ્રાઉઝર્સ

ખાસ કરીને, અમે નીચેના બ્રાઉઝર અને પ્લેટફોર્મના નવીનતમ સંસ્કરણોને સમર્થન આપીએ છીએ .

વૈકલ્પિક બ્રાઉઝર્સ કે જે વેબકિટ, બ્લિંક અથવા ગેકોના નવીનતમ સંસ્કરણનો ઉપયોગ કરે છે, પછી ભલે તે સીધા અથવા પ્લેટફોર્મના વેબ વ્યુ API દ્વારા હોય, સ્પષ્ટપણે સમર્થિત નથી. જો કે, બુટસ્ટ્રેપ (મોટા ભાગના કિસ્સાઓમાં) આ બ્રાઉઝર્સમાં પણ યોગ્ય રીતે પ્રદર્શિત અને કાર્ય કરવું જોઈએ. વધુ ચોક્કસ આધાર માહિતી નીચે આપેલ છે.

મોબાઇલ ઉપકરણો

સામાન્ય રીતે કહીએ તો, બુટસ્ટ્રેપ દરેક મુખ્ય પ્લેટફોર્મના ડિફોલ્ટ બ્રાઉઝર્સના નવીનતમ સંસ્કરણોને સપોર્ટ કરે છે. નોંધ કરો કે પ્રોક્સી બ્રાઉઝર્સ (જેમ કે ઓપેરા મિની, ઓપેરા મોબાઈલનો ટર્બો મોડ, યુસી બ્રાઉઝર મિની, એમેઝોન સિલ્ક) સપોર્ટેડ નથી.

	ક્રોમ	ફાયરફોક્સ	સફારી
એન્ડ્રોઇડ	આધારભૂત	આધારભૂત	N/A
iOS	આધારભૂત	આધારભૂત	આધારભૂત

ડેસ્કટોપ બ્રાઉઝર્સ

એ જ રીતે, મોટાભાગના ડેસ્કટોપ બ્રાઉઝર્સના નવીનતમ સંસ્કરણો સપોર્ટેડ છે.

	ક્રોમ	ફાયરફોક્સ	ઈન્ટરનેટ એક્સપ્લોરર	ઓપેરા	સફારી
મેક	આધારભૂત	આધારભૂત	N/A	આધારભૂત	આધારભૂત
વિન્ડોઝ	આધારભૂત	આધારભૂત	આધારભૂત	આધારભૂત	આધારભૂત નથી

Windows પર, અમે Internet Explorer 8-11 ને સપોર્ટ કરીએ છીએ .

ફાયરફોક્સ માટે, નવીનતમ સામાન્ય સ્થિર પ્રકાશન ઉપરાંત, અમે ફાયરફોક્સના નવીનતમ વિસ્તૃત સપોર્ટ રીલીઝ (ESR) સંસ્કરણને પણ સમર્થન આપીએ છીએ.

બિનસત્તાવાર રીતે, બુટસ્ટ્રેપ એ ક્રોમિયમ અને લિનક્સ માટે ક્રોમ, લિનક્સ માટે ફાયરફોક્સ અને ઈન્ટરનેટ એક્સપ્લોરર 7 તેમજ Microsoft એજમાં સારી રીતે દેખાવું અને વર્તવું જોઈએ, જો કે તે સત્તાવાર રીતે સમર્થિત નથી.

બુટસ્ટ્રેપને જે બ્રાઉઝર ભૂલોનો સામનો કરવો પડે છે તેની સૂચિ માટે, અમારી બ્રાઉઝર બગ્સની દિવાલ જુઓ .

ઇન્ટરનેટ એક્સપ્લોરર 8 અને 9

ઈન્ટરનેટ એક્સપ્લોરર 8 અને 9 પણ સપોર્ટેડ છે, જો કે, કૃપા કરીને ધ્યાન રાખો કે કેટલીક CSS3 પ્રોપર્ટીઝ અને HTML5 તત્વો આ બ્રાઉઝર્સ દ્વારા સંપૂર્ણપણે સપોર્ટેડ નથી. વધુમાં, ઈન્ટરનેટ એક્સપ્લોરર 8 ને મીડિયા ક્વેરી સપોર્ટને સક્ષમ કરવા માટે Respond.js નો ઉપયોગ જરૂરી છે.

લક્ષણ	ઇન્ટરનેટ એક્સપ્લોરર 8	ઇન્ટરનેટ એક્સપ્લોરર 9
`border-radius`	આધારભૂત નથી	આધારભૂત
`box-shadow`	આધારભૂત નથી	આધારભૂત
`transform`	આધારભૂત નથી	આધારભૂત, `-ms`ઉપસર્ગ સાથે
`transition`	આધારભૂત નથી
`placeholder`	આધારભૂત નથી

CSS3 અને HTML5 સુવિધાઓના બ્રાઉઝર સપોર્ટ પર વિગતો માટે શું હું ઉપયોગ કરી શકું... ની મુલાકાત લો .

Internet Explorer 8 અને Respond.js

Internet Explorer 8 માટે તમારા વિકાસ અને ઉત્પાદન વાતાવરણમાં Respond.js નો ઉપયોગ કરતી વખતે નીચેની ચેતવણીઓથી સાવધ રહો.

Respond.js અને ક્રોસ-ડોમેન CSS

એક અલગ (સબ) ડોમેન (ઉદાહરણ તરીકે, સીડીએન પર) પર હોસ્ટ કરેલ CSS સાથે Respond.js નો ઉપયોગ કરવા માટે કેટલાક વધારાના સેટઅપની જરૂર છે. વિગતો માટે Respond.js દસ્તાવેજ જુઓ .

Respond.js અને`file://`

બ્રાઉઝર સુરક્ષા નિયમોને લીધે, Respond.js file://પ્રોટોકોલ દ્વારા જોવામાં આવતા પૃષ્ઠો સાથે કામ કરતું નથી (જેમ કે સ્થાનિક HTML ફાઇલ ખોલતી વખતે). IE8 માં પ્રતિભાવશીલ સુવિધાઓનું પરીક્ષણ કરવા માટે, તમારા પૃષ્ઠોને HTTP(S) પર જુઓ. વિગતો માટે Respond.js દસ્તાવેજ જુઓ .

Respond.js અને`@import`

Respond.js એ CSS સાથે કામ કરતું નથી જેનો સંદર્ભ @import. ખાસ કરીને, કેટલાક Drupal રૂપરેખાંકનો ઉપયોગ કરવા માટે જાણીતા છે @import. વિગતો માટે Respond.js દસ્તાવેજ જુઓ .

ઈન્ટરનેટ એક્સપ્લોરર 8 અને બોક્સ-સાઈઝિંગ

જ્યારે , , , અથવા box-sizing: border-box;સાથે જોડવામાં આવે ત્યારે IE8 સંપૂર્ણપણે સપોર્ટ કરતું નથી . તે કારણોસર, v3.0.1 મુજબ, અમે હવે s પર ઉપયોગ કરતા નથી.min-widthmax-widthmin-heightmax-heightmax-width.container

ઇન્ટરનેટ એક્સપ્લોરર 8 અને @ફોન્ટ-ફેસ

@font-faceજ્યારે સાથે જોડવામાં આવે ત્યારે IE8 ને કેટલીક સમસ્યાઓ હોય છે :before. બુટસ્ટ્રેપ તેના ગ્લિફિકન્સ સાથે તે સંયોજનનો ઉપયોગ કરે છે. જો કોઈ પેજ કેશ થયેલ હોય અને વિન્ડો પર માઉસ વગર લોડ થાય (એટલે કે રીફ્રેશ બટન દબાવો અથવા આઈફ્રેમમાં કંઈક લોડ કરો) તો ફોન્ટ લોડ થાય તે પહેલા પેજ રેન્ડર થઈ જાય છે. પૃષ્ઠ (બોડી) પર હોવર કરવાથી કેટલાક ચિહ્નો દેખાશે અને બાકીના ચિહ્નો પર હોવર કરવાથી તે પણ દેખાશે. વિગતો માટે અંક નંબર 13863 જુઓ .

IE સુસંગતતા સ્થિતિઓ

બુટસ્ટ્રેપ જૂના ઈન્ટરનેટ એક્સપ્લોરર સુસંગતતા મોડ્સમાં સમર્થિત નથી. <meta>તમે IE માટે નવીનતમ રેન્ડરિંગ મોડનો ઉપયોગ કરી રહ્યાં છો તેની ખાતરી કરવા માટે, તમારા પૃષ્ઠોમાં યોગ્ય ટેગ શામેલ કરવાનું વિચારો :

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

ડીબગીંગ ટૂલ્સ ખોલીને દસ્તાવેજ મોડની પુષ્ટિ કરો: F12"દસ્તાવેજ મોડ" દબાવો અને તપાસો.

Internet Explorer ના દરેક સપોર્ટેડ વર્ઝનમાં શક્ય શ્રેષ્ઠ રેન્ડરીંગ સુનિશ્ચિત કરવા માટે આ ટેગ બુટસ્ટ્રેપના તમામ દસ્તાવેજો અને ઉદાહરણોમાં સમાવવામાં આવેલ છે.

વધુ માહિતી માટે આ StackOverflow પ્રશ્ન જુઓ .

Windows 8 અને Windows Phone 8 માં Internet Explorer 10

ઈન્ટરનેટ એક્સપ્લોરર 10 ઉપકરણની પહોળાઈને વ્યૂપોર્ટ પહોળાઈથી અલગ કરતું નથી અને તેથી બુટસ્ટ્રેપના CSSમાં મીડિયા ક્વેરીઝને યોગ્ય રીતે લાગુ કરતું નથી. સામાન્ય રીતે તમે આને ઠીક કરવા માટે ફક્ત CSS નું ઝડપી સ્નિપેટ ઉમેરશો:

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

જો કે, આ અપડેટ 3 (ઉર્ફે GDR3) કરતાં જૂના Windows Phone 8 વર્ઝન ચલાવતા ઉપકરણો માટે કામ કરતું નથી , કારણ કે તે આવા ઉપકરણોને સાંકડી "ફોન" દૃશ્યને બદલે મોટાભાગે ડેસ્કટૉપ વ્યૂ બતાવે છે. આને સંબોધવા માટે, તમારે બગની આસપાસ કામ કરવા માટે નીચેની CSS અને JavaScript શામેલ કરવાની જરૂર પડશે .

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

વધુ માહિતી અને ઉપયોગ દિશાનિર્દેશો માટે, 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 .

iOS ટેક્સ્ટ ફીલ્ડ્સ અને સ્ક્રોલિંગ

<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 મુજબ, નિશ્ચિત-પહોળાઈ .containers સફારીને પ્રિન્ટ કરતી વખતે અસામાન્ય રીતે નાના ફોન્ટ કદનો ઉપયોગ કરવા માટેનું કારણ બની શકે છે. વધુ વિગતો માટે # 14868 અને વેબકિટ બગ #138192 જુઓ. આ માટે એક સંભવિત ઉકેલ નીચેની CSS ઉમેરી રહ્યું છે:

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

એન્ડ્રોઇડ સ્ટોક બ્રાઉઝર

બૉક્સની બહાર, Android 4.1 (અને દેખીતી રીતે કેટલીક નવી રિલીઝ પણ) બ્રાઉઝર એપ્લિકેશન સાથે પસંદગીના ડિફોલ્ટ વેબ બ્રાઉઝર તરીકે મોકલે છે (ક્રોમથી વિપરીત). કમનસીબે, બ્રાઉઝર એપ્લિકેશનમાં સામાન્ય રીતે CSS સાથે ઘણી બધી બગ્સ અને અસંગતતાઓ છે.

મેનુ પસંદ કરો

તત્વો પર <select>, Android સ્ટોક બ્રાઉઝર બાજુના નિયંત્રણો પ્રદર્શિત કરશે નહીં જો ત્યાં કોઈ border-radiusઅને/અથવા borderલાગુ હોય. ( વિગતો માટે આ સ્ટેકઓવરફ્લો પ્રશ્ન<select> જુઓ.) વાંધાજનક CSSને દૂર કરવા અને એન્ડ્રોઇડ સ્ટોક બ્રાઉઝર પર અનસ્ટાઇલ કરેલ ઘટક તરીકે રેન્ડર કરવા માટે નીચેના કોડના સ્નિપેટનો ઉપયોગ કરો. વપરાશકર્તા એજન્ટ સુંઘવાનું ક્રોમ, સફારી અને મોઝિલા બ્રાઉઝર્સમાં દખલ કરવાનું ટાળે છે.

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

ઉદાહરણ જોવા માંગો છો? આ JS બિન ડેમો તપાસો.

માન્યકર્તાઓ

જૂના અને બગડેલ બ્રાઉઝર્સને શ્રેષ્ઠ સંભવિત અનુભવ પ્રદાન કરવા માટે, બુટસ્ટ્રેપ બ્રાઉઝર્સમાં જ બગ્સની આસપાસ કામ કરવા માટે ચોક્કસ બ્રાઉઝર વર્ઝન માટે વિશિષ્ટ CSS ને લક્ષ્ય બનાવવા માટે ઘણી જગ્યાએ CSS બ્રાઉઝર હેક્સનો ઉપયોગ કરે છે. આ હેક્સ સમજી શકાય તે રીતે CSS માન્યકર્તાઓને ફરિયાદ કરે છે કે તેઓ અમાન્ય છે. કેટલાક સ્થળોએ, અમે બ્લીડિંગ-એજ CSS સુવિધાઓનો પણ ઉપયોગ કરીએ છીએ જે હજુ સુધી સંપૂર્ણ પ્રમાણિત નથી, પરંતુ તેનો ઉપયોગ પ્રગતિશીલ વૃદ્ધિ માટે થાય છે.

આ માન્યતા ચેતવણીઓ વ્યવહારમાં કોઈ વાંધો નથી કારણ કે અમારા CSS નો બિન-હેકી ભાગ સંપૂર્ણપણે માન્ય કરે છે અને હેકી ભાગો બિન-હેકી ભાગની યોગ્ય કામગીરીમાં દખલ કરતા નથી, તેથી શા માટે અમે આ ચોક્કસ ચેતવણીઓને જાણીજોઈને અવગણીએ છીએ.

ચોક્કસ ફાયરફોક્સ બગ માટેના ઉકેલના અમારા સમાવેશને કારણે અમારા HTML દસ્તાવેજોમાં પણ કેટલીક તુચ્છ અને અસંગત HTML માન્યતા ચેતવણીઓ છે .

જ્યારે અમે સત્તાવાર રીતે કોઈપણ તૃતીય પક્ષ પ્લગઈન્સ અથવા એડ-ઓનને સમર્થન આપતા નથી, અમે તમારા પ્રોજેક્ટ્સમાં સંભવિત સમસ્યાઓ ટાળવા માટે કેટલીક ઉપયોગી સલાહ આપીએ છીએ.

બોક્સ-કદીકરણ

કેટલાક તૃતીય પક્ષ સોફ્ટવેર, જેમાં Google નકશા અને Google કસ્ટમ સર્ચ એન્જિનનો સમાવેશ થાય છે, બુટસ્ટ્રેપ સાથે * { box-sizing: border-box; }, એક નિયમ જે તેને બનાવે છે તે paddingઘટકની અંતિમ ગણતરી કરેલ પહોળાઈને અસર કરતું નથી. CSS ટ્રિક્સ પર બોક્સ મોડેલ અને કદ બદલવા વિશે વધુ જાણો .

સંદર્ભના આધારે, તમે જરૂર મુજબ ઓવરરાઇડ કરી શકો છો (વિકલ્પ 1) અથવા સમગ્ર પ્રદેશો માટે બૉક્સનું કદ ફરીથી સેટ કરી શકો છો (વિકલ્પ 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();
}

બુટસ્ટ્રેપ સામાન્ય વેબ માપદંડોને અનુસરે છે અને-ન્યૂનતમ વધારાના પ્રયત્નો સાથે- એટીનો ઉપયોગ કરતા લોકો માટે ઍક્સેસિબલ હોય તેવી સાઇટ્સ બનાવવા માટે તેનો ઉપયોગ કરી શકાય છે .

જો તમારા નેવિગેશનમાં ઘણી બધી લિંક્સ હોય અને DOM માં મુખ્ય સામગ્રીની પહેલાં આવે, Skip to main contentતો નેવિગેશન પહેલાં એક લિંક ઉમેરો (સાદા સમજૂતી માટે, નેવિગેશન લિંક્સ છોડો પર આ A11Y પ્રોજેક્ટ લેખ જુઓ ). વર્ગનો ઉપયોગ કરવાથી .sr-onlyસ્કીપ લિંકને દૃષ્ટિની રીતે છુપાવવામાં આવશે, અને .sr-only-focusableવર્ગ એ સુનિશ્ચિત કરશે કે એકવાર ધ્યાન કેન્દ્રિત કર્યા પછી લિંક દૃશ્યક્ષમ બને છે (દ્રષ્ટા કીબોર્ડ વપરાશકર્તાઓ માટે).

ક્રોમમાં લાંબા સમયથી રહેલી ખામીઓ/બગ્સને કારણે ( ક્રોમિયમ બગ ટ્રેકરમાં અંક 262171 જુઓ ) અને ઈન્ટરનેટ એક્સ્પ્લોરર (આ લેખ ઇન-પેજ લિંક્સ અને ફોકસ ઓર્ડર પર જુઓ ), ��મારે ખાતરી કરવી પડશે કે તમારી સ્કીપ લિંકનું લક્ષ્ય ઉમેરીને ઓછામાં ઓછું પ્રોગ્રામેટિકલી ફોકસેબલ છે tabindex="-1".

વધુમાં, તમે ટાર્ગેટ પર દેખાતા ફોકસ સંકેતને સ્પષ્ટપણે દબાવવા માગી શકો છો (ખાસ કરીને ક્રોમ હાલમાં tabindex="-1"જ્યારે માઉસ વડે ક્લિક કરવામાં આવે ત્યારે તત્વો પર ફોકસ સેટ કરે છે) #content:focus { outline: none; }.

નોંધ કરો કે આ બગ તમારી સાઇટનો ઉપયોગ કરતી અન્ય કોઈપણ ઇન-પેજ લિંક્સને પણ અસર કરશે, તેને કીબોર્ડ વપરાશકર્તાઓ માટે નકામું રેન્ડર કરશે. તમે લિંક લક્ષ્યો તરીકે કાર્ય કરતા અન્ય તમામ નામના એન્કર/ફ્રેગમેન્ટ ઓળખકર્તાઓમાં સમાન સ્ટોપ-ગેપ ફિક્સ ઉમેરવાનું વિચારી શકો છો.

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

નેસ્ટેડ હેડિંગ

જ્યારે નેસ્ટિંગ હેડિંગ ( <h1>- <h6>), તમારું પ્રાથમિક દસ્તાવેજ હેડર હોવું જોઈએ <h1>. અનુગામી મથાળાઓએ તાર્કિક ઉપયોગ કરવો જોઈએ <h2>- <h6>જેમ કે સ્ક્રીન રીડર્સ તમારા પૃષ્ઠો માટે સામગ્રીનું કોષ્ટક બનાવી શકે.

HTML CodeSniffer અને Penn State's AccessAbility પર વધુ જાણો .

રંગ વિરોધાભાસ

હાલમાં, બુટસ્ટ્રેપમાં ઉપલબ્ધ કેટલાક ડિફૉલ્ટ રંગ સંયોજનો (જેમ કે વિવિધ સ્ટાઇલવાળા બટન વર્ગો, મૂળભૂત કોડ બ્લોક્સ માટે ઉપયોગમાં લેવાતા કેટલાક કોડ હાઇલાઇટિંગ રંગો , .bg-primary સંદર્ભિત પૃષ્ઠભૂમિ સહાયક વર્ગ અને જ્યારે સફેદ પૃષ્ઠભૂમિ પર ઉપયોગ કરવામાં આવે ત્યારે ડિફોલ્ટ લિંક રંગ) નીચા કોન્ટ્રાસ્ટ રેશિયો ( 4.5:1 ના ભલામણ કરેલ ગુણોત્તરથી નીચે ). આનાથી ઓછી દ્રષ્ટિ ધરાવતા અથવા રંગ અંધ હોય તેવા વપરાશકર્તાઓને સમસ્યા થઈ શકે છે. આ ડિફૉલ્ટ રંગો તેમના કોન્ટ્રાસ્ટ અને સુવાચ્યતા વધારવા માટે સંશોધિત કરવાની જરૂર પડી શકે છે.

વધારાના સંસાધનો

બુટસ્ટ્રેપ MIT લાયસન્સ હેઠળ બહાર પાડવામાં આવ્યો છે અને તે કૉપિરાઇટ 2019 Twitter છે. નાના ટુકડાઓમાં ઉકાળીને, તેને નીચેની શરતો સાથે વર્ણવી શકાય છે.

તમારે આની જરૂર છે:

જ્યારે તમે તમારા કાર્યોમાં તેનો ઉપયોગ કરો છો ત્યારે બુટસ્ટ્રેપની CSS અને JavaScript ફાઇલોમાં લાઇસન્સ અને કૉપિરાઇટ નોટિસનો સમાવેશ રાખો

તે તમને પરવાનગી આપે છે:

વ્યક્તિગત, ખાનગી, કંપનીના આંતરિક અથવા વ્યાપારી હેતુઓ માટે, સંપૂર્ણ અથવા આંશિક રીતે, બુટસ્ટ્રેપને મુક્તપણે ડાઉનલોડ કરો અને ઉપયોગ કરો
તમે બનાવો છો તે પેકેજો અથવા વિતરણોમાં બુટસ્ટ્રેપનો ઉપયોગ કરો
સ્ત્રોત કોડમાં ફેરફાર કરો
લાયસન્સમાં સમાવેલ નથી તેવા તૃતીય પક્ષોને બુટસ્ટ્રેપને સંશોધિત કરવા અને વિતરિત કરવા માટે સબલાઈસન્સ આપો

તે તમને પ્રતિબંધિત કરે છે:

લેખકો અને લાયસન્સ માલિકોને નુકસાન માટે જવાબદાર રાખો કારણ કે બુટસ્ટ્રેપ વોરંટી વિના પ્રદાન કરવામાં આવે છે
બુટસ્ટ્રેપના સર્જકો અથવા કૉપિરાઇટ ધારકોને જવાબદાર રાખો
યોગ્ય એટ્રિબ્યુશન વિના બુટસ્ટ્રેપના કોઈપણ ભાગને ફરીથી વિતરિત કરો
Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution
Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question

It does not require you to:

Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
બુટસ્ટ્રેપ પ્રોજેક્ટમાં તમે જે ફેરફારો કરો છો તે પાછા બૂટસ્ટ્રેપ પ્રોજેક્ટમાં સબમિટ કરો (જોકે આવા પ્રતિસાદને પ્રોત્સાહિત કરવામાં આવે છે)

વધુ માહિતી માટે સંપૂર્ણ બુટસ્ટ્રેપ લાઇસન્સ પ્રોજેક્ટ રીપોઝીટરીમાં સ્થિત છે.

સમુદાયના સભ્યોએ બુટસ્ટ્રેપના દસ્તાવેજોનો વિવિધ ભાષાઓમાં અનુવાદ કર્યો છે. કોઈ પણ સત્તાવાર રીતે સમર્થિત નથી અને તે હંમેશા અપ ટૂ ડેટ હોઈ શકે નહીં.

અમે અનુવાદોને ગોઠવવામાં અથવા હોસ્ટ કરવામાં મદદ કરતા નથી, અમે ફક્ત તેમની સાથે લિંક કરીએ છીએ.

નવો અથવા વધુ સારો અનુવાદ સમાપ્ત કર્યો? તેને અમારી સૂચિમાં ઉમેરવા માટે પુલ વિનંતી ખોલો.

શરૂ કરી રહ્યા છીએ

ડાઉનલોડ કરો