મુખ્ય સામગ્રી પર જાઓ ડૉક્સ નેવિગેશન પર જાઓ
in English

પરિચય

jsDelivr અને ટેમ્પલેટ સ્ટાર્ટર પૃષ્ઠ સાથે, પ્રતિભાવશીલ, મોબાઇલ-પ્રથમ સાઇટ્સ બનાવવા માટે વિશ્વનું સૌથી લોકપ્રિય માળખું, Bootstrap સાથે પ્રારંભ કરો.

ઝડપી શરૂઆત

તમારા પ્રોજેક્ટમાં ઝડપથી બુટસ્ટ્રેપ ઉમેરવા માંગો છો? jsDelivr નો ઉપયોગ કરો, એક મફત ઓપન સોર્સ CDN. પેકેજ મેનેજરનો ઉપયોગ કરી રહ્યાં છો અથવા સ્રોત ફાઇલો ડાઉનલોડ કરવાની જરૂર છે? ડાઉનલોડ પૃષ્ઠ પર જાઓ .

CSS

અમારી CSS લોડ કરવા માટે અન્ય તમામ સ્ટાઈલશીટ્સ પહેલા <link>તમારી સ્ટાઈલશીટને કોપી-પેસ્ટ કરો .<head>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

જે.એસ

અમારા ઘણા ઘટકોને કાર્ય કરવા માટે JavaScript નો ઉપયોગ કરવાની જરૂર છે. ખાસ કરીને, તેમને અમારા પોતાના JavaScript પ્લગઇન્સ અને પોપરની જરૂર છે . નીચેનામાંથી એકને તમારા પૃષ્ઠોના <script>અંતની નજીક, બંધ </body>ટેગની બરાબર પહેલાં, તેમને સક્ષમ કરવા માટે મૂકો .

બંડલ

અમારા બે બંડલમાંથી એક સાથે દરેક બુટસ્ટ્રેપ JavaScript પ્લગઇન અને નિર્ભરતા શામેલ કરો. બંને bootstrap.bundle.jsઅને અમારી ટૂલટિપ્સ અને પોપોવર્સ માટે પોપરનોbootstrap.bundle.min.js સમાવેશ કરો. બુટસ્ટ્રેપમાં શું શામેલ છે તે વિશે વધુ માહિતી માટે, કૃપા કરીને અમારો વિષયવસ્તુ વિભાગ જુઓ.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

અલગ

જો તમે અલગ સ્ક્રિપ્ટ્સ સોલ્યુશન સાથે જવાનું નક્કી કરો છો, તો પોપર પ્રથમ આવવું જોઈએ (જો તમે ટૂલટિપ્સ અથવા પોપોવર્સનો ઉપયોગ કરી રહ્યાં છો), અને પછી અમારા JavaScript પ્લગઈન્સ.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

મોડ્યુલ્સ

જો તમે ઉપયોગ કરો છો, તો કૃપા કરીને અમારા બુટસ્ટ્રેપને મોડ્યુલ વિભાગ તરીકે વાપરવાનો <script type="module">સંદર્ભ લો .

ઘટકો

ઉત્સુક છે કે કયા ઘટકોને સ્પષ્ટપણે અમારી JavaScript અને પોપરની જરૂર છે? નીચે દર્શાવેલ ઘટકોની લિંક પર ક્લિક કરો. જો તમે સામાન્ય પૃષ્ઠ બંધારણ વિશે બિલકુલ અચોક્કસ હો, તો ઉદાહરણ પૃષ્ઠ નમૂના માટે વાંચવાનું ચાલુ રાખો.

JavaScript જરૂરી ઘટકો બતાવો
  • બરતરફી માટે ચેતવણીઓ
  • ટૉગલ સ્ટેટ્સ અને ચેકબૉક્સ/રેડિયો કાર્યક્ષમતા માટેના બટનો
  • તમામ સ્લાઇડ વર્તણૂકો, નિયંત્રણો અને સૂચકાંકો માટે કેરોયુઝલ
  • સામગ્રીની દૃશ્��તા ટૉગલ કરવા માટે સંકુચિત કરો
  • ડિસ્પ્લે અને પોઝિશનિંગ માટે ડ્રોપડાઉન ( પોપર પણ જરૂરી છે )
  • પ્રદર્શન, સ્થિતિ અને સ્ક્રોલ વર્તન માટેના મોડલ્સ
  • પ્રતિભાવશીલ વર્તણૂકને અમલમાં મૂકવા માટે અમારા સંકુચિત પ્લગઇનને વિસ્તારવા માટે નવબાર
  • ડિસ્પ્લે, પોઝિશનિંગ અને સ્ક્રોલ વર્તન માટે ઑફકેનવાસ
  • પ્રદર્શિત કરવા અને બરતરફ કરવા માટે ટોસ્ટ્સ
  • ડિસ્પ્લે અને પોઝિશનિંગ માટે ટૂલટિપ્સ અને પોપોવર્સ ( પોપર પણ જરૂરી છે )
  • સ્ક્રોલ વર્તન અને નેવિગેશન અપડેટ્સ માટે Scrollspy

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

તમારા પૃષ્ઠોને નવીનતમ ડિઝાઇન અને વિકાસ ધોરણો સાથે સેટ કરવાની ખાતરી કરો. તેનો અર્થ એ છે કે HTML5 doctype નો ઉપયોગ કરવો અને યોગ્ય પ્રતિભાવશીલ વર્તણૂકો માટે વ્યુપોર્ટ મેટા ટેગનો સમાવેશ કરવો. તે બધાને એકસાથે મૂકો અને તમારા પૃષ્ઠો આના જેવા દેખાવા જોઈએ:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

આગલા પગલાઓ માટે, તમારી સાઇટની સામગ્રી અને ઘટકોનું લેઆઉટ શરૂ કરવા માટે લેઆઉટ દસ્તાવેજો અથવા અમારા અધિકૃત ઉદાહરણોની મુલાકાત લો.

મહત્વપૂર્ણ વૈશ્વિક

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

HTML5 doctype

બુટસ્ટ્રેપ માટે HTML5 doctype નો ઉપયોગ જરૂરી છે. તેના વિના, તમે કેટલીક ફંકી અપૂર્ણ સ્ટાઇલ જોશો, પરંતુ તેમાં સમાવેશ કરવાથી કોઈ નોંધપાત્ર હિંચકી ન હોવી જોઈએ.

<!doctype html>
<html lang="en">
  ...
</html>

રિસ્પોન્સિવ મેટા ટેગ

બુટસ્ટ્રેપ મોબાઇલ પ્રથમ વિકસાવવામાં આવ્યો છે , એક વ્યૂહરચના જેમાં અમે પહેલા મોબાઇલ ઉપકરણો માટે કોડને ઑપ્ટિમાઇઝ કરીએ છીએ અને પછી CSS મીડિયા ક્વેરીઝનો ઉપયોગ કરીને જરૂરી ઘટકોને સ્કેલ કરીએ છીએ. બધા ઉપકરણો માટે યોગ્ય રેન્ડરિંગ અને ટચ ઝૂમિંગની ખાતરી કરવા માટે, તમારામાં પ્રતિભાવશીલ વ્યુપોર્ટ મેટા ટેગ ઉમેરો <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

તમે સ્ટાર્ટર ટેમ્પલેટમાં આનું એક ઉદાહરણ જોઈ શકો છો .

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

CSS માં વધુ સરળ કદ માટે, અમે વૈશ્વિક box-sizingમૂલ્યને માંથી content-boxપર સ્વિચ કરીએ છીએ border-box. આ સુનિશ્ચિત paddingકરે છે કે તત્વની અંતિમ ગણતરી કરેલ પહોળાઈને અસર કરતું નથી, પરંતુ તે Google નકશા અને Google કસ્ટમ શોધ એંજીન જેવા કેટલાક તૃતીય-પક્ષ સોફ્ટવેરમાં સમસ્યા ઊભી કરી શકે છે.

દુર્લભ પ્રસંગે તમારે તેને ઓવરરાઇડ કરવાની જરૂર છે, નીચેની જેમ કંઈક વાપરો:

.selector-for-some-widget {
  box-sizing: content-box;
}

ઉપરોક્ત સ્નિપેટ સાથે, નેસ્ટેડ એલિમેન્ટ્સ-માર્ગે જનરેટ કરેલી સામગ્રી સહિત ::beforeઅને —તે માટે ::afterઉલ્લેખિત તમામ વારસામાં મેળવશે .box-sizing.selector-for-some-widget

CSS ટ્રિક્સ પર બોક્સ મોડેલ અને કદ બદલવા વિશે વધુ જાણો .

રીબૂટ કરો

સુધારેલ ક્રોસ-બ્રાઉઝર રેન્ડરિંગ માટે, અમે સામાન્ય HTML ઘટકોને સહેજ વધુ અભિપ્રાયયુક્ત રીસેટ્સ પ્રદાન કરતી વખતે સમગ્ર બ્રાઉઝર્સ અને ઉપકરણોમાં અસંગતતાને સુધારવા માટે રીબૂટનો ઉપયોગ કરીએ છીએ.

સમુદાય

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

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

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