ઝાંખી

તમારા બુટસ્ટ્રેપ પ્રોજેક્ટને ગોઠવવા માટેના ઘટકો અને વિકલ્પો, જેમાં રેપિંગ કન્ટેનર, એક શક્તિશાળી ગ્રીડ સિસ્ટમ, લવચીક મીડિયા ઑબ્જેક્ટ અને રિસ્પોન્સિવ યુટિલિટી ક્લાસનો સમાવેશ થાય છે.

કન્ટેનર

કન્ટેનર એ બુટસ્ટ્રેપમાં સૌથી મૂળભૂત લેઆઉટ ઘટક છે અને અમારી ડિફોલ્ટ ગ્રીડ સિસ્ટમનો ઉપયોગ કરતી વખતે જરૂરી છે . પ્રતિભાવશીલ, નિશ્ચિત-પહોળાઈના કન્ટેનર (એટલે max-width​​કે દરેક બ્રેકપોઈન્ટ પર તેના ફેરફારો) અથવા પ્રવાહી-પહોળાઈ (એટલે ​​કે તે હંમેશા 100%પહોળી રહે છે)માંથી પસંદ કરો.

જ્યારે કન્ટેનર નેસ્ટેડ કરી શકાય છે, મોટાભાગના લેઆઉટને નેસ્ટેડ કન્ટેનરની જરૂર હોતી નથી.

<div class="container">
  <!-- Content here -->
</div>

.container-fluidવ્યૂપોર્ટની સમગ્ર પહોળાઈમાં ફેલાયેલા સંપૂર્ણ પહોળાઈના કન્ટેનર માટે ઉપયોગ કરો .

<div class="container-fluid">
  ...
</div>

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

બુટસ્ટ્રેપ સૌપ્રથમ મોબાઇલ તરીકે વિકસાવવામાં આવ્યું હોવાથી, અમે અમારા લેઆઉટ અને ઇન્ટરફેસ માટે સમજદાર બ્રેકપોઇન્ટ્સ બનાવવા માટે કેટલીક મીડિયા ક્વેરીઝનો ઉપયોગ કરીએ છીએ. આ બ્રેકપોઇન્ટ્સ મોટે ભાગે ન્યૂનતમ વ્યુપોર્ટ પહોળાઈ પર આધારિત હોય છે અને વ્યૂપોર્ટ બદલાતાની સાથે અમને તત્વોને વધારવાની મંજૂરી આપે છે.

બુટસ્ટ્રેપ મુખ્યત્વે નીચેની મીડિયા ક્વેરી રેન્જનો ઉપયોગ કરે છે-અથવા બ્રેકપોઇન્ટ્સ-અમારા લેઆઉટ, ગ્રીડ સિસ્ટમ અને ઘટકો માટે અમારા સ્ત્રોત Sass ફાઇલોમાં.

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

અમે Sass માં અમારું સ્ત્રોત CSS લખીએ છીએ, અમારી બધી મીડિયા ક્વેરીઝ Sass મિક્સન્સ દ્વારા ઉપલબ્ધ છે:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

અમે અવારનવાર મીડિયા ક્વેરીઝનો ઉપયોગ કરીએ છીએ જે બીજી દિશામાં જાય છે (આપેલ સ્ક્રીનનું કદ અથવા નાનું ):

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

ફરી એકવાર, આ મીડિયા ક્વેરીઝ Sass mixins દ્વારા પણ ઉપલબ્ધ છે:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

ન્યૂનતમ અને મહત્તમ બ્રેકપોઇન્ટ પહોળાઈનો ઉપયોગ કરીને સ્ક્રીનના કદના એક સેગમેન્ટને લક્ષ્ય બનાવવા માટે મીડિયા ક્વેરીઝ અને મિક્સિન્સ પણ છે.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

આ મીડિયા ક્વેરીઝ સાસ મિક્સિન્સ દ્વારા પણ ઉપલબ્ધ છે:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

એ જ રીતે, મીડિયા ક્વેરીઝ બહુવિધ બ્રેકપોઇન્ટ પહોળાઈને ફેલાવી શકે છે:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

સમાન સ્ક્રીન કદ શ્રેણીને લક્ષ્ય બનાવવા માટે Sass મિક્સિન હશે:

@include media-breakpoint-between(md, xl) { ... }

ઝેડ-ઇન્ડેક્સ

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

આ ઉચ્ચ મૂલ્યો એક મનસ્વી સંખ્યાથી શરૂ થાય છે, આદર્શ રીતે તકરારને ટાળવા માટે પૂરતી ઊંચી અને ચોક્કસ. અમને અમારા સ્તરીય ઘટકોમાં આના પ્રમાણભૂત સમૂહની જરૂર છે - ટૂલટિપ્સ, પોપોવર્સ, નેવબાર્સ, ડ્રોપડાઉન્સ, મોડલ્સ-જેથી અમે વર્તણૂકોમાં વ્યાજબી રીતે સુસંગત રહી શકીએ. 100ત્યાં કોઈ કારણ નથી કે અમે + અથવા + નો ઉપયોગ કરી શક્યા નથી 500.

અમે આ વ્યક્તિગત મૂલ્યોના કસ્ટમાઇઝેશનને પ્રોત્સાહિત કરતા નથી; તમારે એક બદલવું જોઈએ, તમારે તે બધાને બદલવાની જરૂર છે.

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

ઘટકોની અંદર ઓવરલેપિંગ બોર્ડર્સને હેન્ડલ કરવા માટે (દા.ત., ઇનપુટ જૂથોમાં બટનો અને ઇનપુટ્સ), અમે , , અને ડિફોલ્ટ, હોવર અને સક્રિય સ્થિતિઓ માટે નીચા સિંગલ ડિજિટ z-indexમૂલ્યોનો ઉપયોગ કરીએ છીએ. હોવર/ફોકસ/સક્રિય પર, અમે ભાઈ-બહેન તત્વો પર તેમની સરહદ બતાવવા માટે ઉચ્ચ મૂલ્ય સાથે કોઈ ચોક્કસ ઘટકને મોખરે લાવીએ છીએ .123z-index