કન્ટેનર

તેઓ કેવી રીતે કામ કરે છે

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

બુટસ્ટ્રેપ ત્રણ અલગ અલગ કન્ટેનર સાથે આવે છે:

• .container, જે max-widthદરેક રિસ્પોન્સિવ બ્રેકપોઇન્ટ પર સેટ કરે છે
• .container-fluid, જે width: 100%તમામ બ્રેકપોઇન્ટ પર છે
• .container-{breakpoint}, જે width: 100%ઉલ્લેખિત બ્રેકપોઇન્ટ સુધી છે

નીચેનું કોષ્ટક દર્શાવે છે કે દરેક કન્ટેનરની મૂળ અને દરેક બ્રેકપોઇન્ટ સાથે કેવી રીતે max-widthસરખામણી થાય છે..container.container-fluid

તેમને ક્રિયામાં જુઓ અને અમારા ગ્રીડ ઉદાહરણમાં તેમની સરખામણી કરો .

ડિફૉલ્ટ કન્ટેનર

અમારો ડિફૉલ્ટ .containerવર્ગ એક પ્રતિભાવશીલ, નિશ્ચિત-પહોળાઈનો કન્ટેનર છે, એટલે max-widthકે દરેક બ્રેકપોઈન્ટ પર તેના ફેરફારો.

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

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

રિસ્પોન્સિવ કન્ટેનર તમને 100% પહોળા વર્ગનો ઉલ્લેખ કરવાની મંજૂરી આપે છે જ્યાં સુધી ઉલ્લેખિત બ્રેકપોઇન્ટ ન પહોંચી જાય, ત્યારબાદ અમે max-widthદરેક ઉચ્ચ બ્રેકપોઇન્ટ માટે s લાગુ કરીએ છીએ. ઉદાહરણ તરીકે, બ્રેકપોઇન્ટ પર ન પહોંચે .container-smત્યાં સુધી શરૂ કરવા માટે 100% પહોળું છે , જ્યાં તે , , , અને smસાથે સ્કેલ કરશે .mdlgxlxxl

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

પ્રવાહી કન્ટેનર

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

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

સસ

ઉપર બતાવ્યા પ્રમાણે, બુટસ્ટ્રેપ પૂર્વવ્યાખ્યાયિત કન્ટેનર વર્ગોની શ્રેણી જનરેટ કરે છે જે તમને જોઈતા લેઆઉટ બનાવવામાં મદદ કરે છે. તમે આ પૂર્વવ્યાખ્યાયિત કન્ટેનર વર્ગોને Sass નકશા (માં મળે છે _variables.scss) સંશોધિત કરીને કસ્ટમાઇઝ કરી શકો છો જે તેમને શક્તિ આપે છે:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Sass ને કસ્ટમાઇઝ કરવા ઉપરાંત, તમે અમારા Sass મિક્સિન સાથે તમારા પોતાના કન્ટેનર પણ બનાવી શકો છો.

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

અમારા સાસ નકશા અને ચલોને કેવી રીતે સંશોધિત કરવા તે અંગે વધુ માહિતી અને ઉદાહરણો માટે, કૃપા કરીને ગ્રીડ દસ્તાવેજીકરણના સાસ વિભાગનો સંદર્ભ લો .