in English

પરિચય

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

ઝડપી શરૂઆત

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

CSS

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

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

જે.એસ

અમારા ઘણા ઘટકોને કાર્ય કરવા માટે JavaScript નો ઉપયોગ કરવાની જરૂર છે. ખાસ કરીને, તેમને jQuery , Popper , અને અમારા પોતાના JavaScript પ્લગિન્સની જરૂર છે. અમે jQuery ના સ્લિમ બિલ્ડનો ઉપયોગ કરીએ છીએ , પરંતુ સંપૂર્ણ સંસ્કરણ પણ સપોર્ટેડ છે.

નીચેનામાંથી એકને તમારા પૃષ્ઠોના <script>અંતની નજીક, બંધ </body>ટેગની બરાબર પહેલાં, તેમને સક્ષમ કરવા માટે મૂકો . jQuery પહેલા આવવું જોઈએ, પછી પોપર, અને પછી અમારા JavaScript પ્લગઈન્સ.

બંડલ

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

અલગ

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

ઘટકો

ઉત્સુક છે કે કયા ઘટકોને સ્પષ્ટપણે jQuery, અમારી 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, shrink-to-fit=no">

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

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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, shrink-to-fit=no">

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

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

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-4) પર અમલીકરણ મદદ મળી શકે છે.
  • વિકાસકર્તાઓએ પેકેજો પર કીવર્ડનો ઉપયોગ કરવો જોઈએ જે મહત્તમ શોધક્ષમતા માટે npm અથવા સમાન ડિલિવરી મિકેનિઝમ bootstrapદ્વારા વિતરણ કરતી વખતે બુટસ્ટ્રેપની કાર્યક્ષમતામાં ફેરફાર કરે છે અથવા ઉમેરે છે .

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

CSPs અને એમ્બેડેડ SVG

કેટલાક બુટસ્ટ્રેપ ઘટકોમાં અમારા CSSમાં એમ્બેડેડ SVG ને બ્રાઉઝર્સ અને ઉપકરણો પર સતત અને સરળતાથી સ્ટાઇલ ઘટકોનો સમાવેશ થાય છે. વધુ કડક CSP રૂપરેખાંકનો ધરાવતી સંસ્થાઓ માટે , અમે અમારા એમ્બેડેડ SVGs (જે તમામ મારફતે લાગુ કરવામાં આવે છે background-image)ના તમામ ઉદાહરણોનું દસ્તાવેજીકરણ કર્યું છે જેથી કરીને તમે તમારા વિકલ્પોની વધુ સારી રીતે સમીક્ષા કરી શકો.

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