પરિચય

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-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

જે.એસ

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

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

બંડલ

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

<script src="https://code.jquery.com/jquery-3.5.1.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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

અલગ

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

<script src="https://code.jquery.com/jquery-3.5.1.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-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

ઘટકો

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

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

બરતરફી માટે ચેતવણીઓ
ટૉગલ સ્ટેટ્સ અને ચેકબૉક્સ/રેડિયો કાર્યક્ષમતા માટેના બટનો
તમામ સ્લાઇડ વર્તણૂકો, નિયંત્રણો અને સૂચકાંકો માટે કેરોયુઝલ
સામગ્રીની દૃશ્યતા ટૉગલ કરવા માટે સંકુચિત કરો
પ્રદર્શિત કરવા અને સ્થિતિ માટે ડ્રોપડાઉન (પણ Popper.js જરૂરી છે )
પ્રદર્શન, સ્થિતિ અને સ્ક્રોલ વર્તન માટેના મોડલ્સ
પ્રતિભાવશીલ વર્તણૂકને અમલમાં મૂકવા માટે અમારા સંકુચિત પ્લગઇનને વિસ્તારવા માટે નવબાર
પ્રદર્શિત કરવા અને બરતરફ કરવા માટે ટોસ્ટ્સ
ડિસ્પ્લે અને પોઝિશનિંગ માટે ટૂલટિપ્સ અને પોપોવર્સ (પણ Popper.js જરૂરી છે )
સ્ક્રોલ વર્તન અને નેવિગેશન અપડેટ્સ માટે 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-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 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://code.jquery.com/jquery-3.5.1.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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.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-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" 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 ઘટકોને સહેજ વધુ અભિપ્રાયયુક્ત રીસેટ્સ પ્રદાન કરતી વખતે સમગ્ર બ્રાઉઝર્સ અને ઉપકરણોમાં અસંગતતાને સુધારવા માટે રીબૂટનો ઉપયોગ કરીએ છીએ.

સમુદાય

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

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

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