બુટસ્ટ્રેપ સાથે પ્રારંભ કરો

બુટસ્ટ્રેપ એક શક્તિશાળી, ફીચરથી ભરપૂર ફ્રન્ટએન્ડ ટૂલકીટ છે. પ્રોટોટાઇપથી લઈને પ્રોડક્શન સુધી - મિનિટોમાં કંઈપણ બનાવો.

આ પૃષ્ઠ પર

ઝડપી શરૂઆત

બુટસ્ટ્રેપના ઉત્પાદન-તૈયાર CSS અને JavaScriptને CDN મારફતે કોઈપણ બિલ્ડ સ્ટેપ્સની જરૂર વગર સામેલ કરીને પ્રારંભ કરો. આ બુટસ્ટ્રેપ કોડપેન ડેમો સાથે વ્યવહારમાં જુઓ .

તમારા પ્રોજેક્ટ રૂટમાં નવી index.htmlફાઇલ બનાવો. મોબાઇલ ઉપકરણોમાં યોગ્ય પ્રતિભાવશીલ વર્તન<meta name="viewport"> માટે ટેગનો પણ સમાવેશ કરો .
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>
```

બુટસ્ટ્રેપના CSS અને JSનો સમાવેશ કરો. બંધ થતાં પહેલાં અમારા CSS માટે ટેગ અને અમારા JavaScript બંડલ (પોઝિશનિંગ ડ્રોપડાઉન, પોપર્સ અને ટૂલટિપ્સ માટે પોપર સહિત) માટે <link>ટેગ મૂકો . અમારી CDN લિંક્સ વિશે વધુ જાણો .<head><script></body>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

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

CDN લિંક્સ

સંદર્ભ તરીકે, અહીં અમારી પ્રાથમિક CDN લિંક્સ છે.

વર્ણન	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
જે.એસ	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

તમે સામગ્રી પૃષ્ઠમાં સૂચિબદ્ધ અમારા કોઈપણ વધારાના બિલ્ડ્સ મેળવવા માટે CDN નો ઉપયોગ પણ કરી શકો છો .

આગામી પગલાં

બુટસ્ટ્રેપ ઉપયોગ કરે છે તે કેટલીક મહત્વપૂર્ણ વૈશ્વિક પર્યાવરણ સેટિંગ્સ વિશે થોડું વધુ વાંચો .
અમારા વિષયવસ્તુ વિભાગમાં બુટસ્ટ્રેપમાં શું સમાવવામાં આવ્યું છે તે વિશે વાંચો અને નીચે JavaScript જરૂરી ઘટકોની સૂચિ વાંચો.
થોડી વધુ શક્તિ જોઈએ છે? પેકેજ મેનેજર દ્વારા સ્ત્રોત ફાઇલોનો સમાવેશ કરીને બુટસ્ટ્રેપ સાથે બનાવવાનું વિચારો .
સાથે મોડ્યુલ તરીકે બુટસ્ટ્રેપનો ઉપયોગ કરવા <script type="module">માંગો છો? મહેરબાની કરીને અમારા બુટસ્ટ્રેપનો ઉપયોગ મોડ્યુલ વિભાગ તરીકે કરો.

જેએસ ઘટકો

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

JavaScript જરૂરી ઘટકો બતાવો

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

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

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

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 ઘટકોને સહેજ વધુ અભિપ્રાયયુક્ત રીસેટ્સ પ્રદાન કરતી વખતે સમગ્ર બ્રાઉઝર્સ અને ઉપકરણોમાં અસંગતતાને સુધારવા માટે રીબૂટનો ઉપયોગ કરીએ છીએ.

સમુદાય

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

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

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