બહેતર, ઝડપી, મજબૂત વેબ ડેવલપમેન્ટ માટેના અમારો અભિગમ સહિત, બુટસ્ટ્રેપના ઇન્ફ્રાસ્ટ્રક્ચરના મુખ્ય ભાગો પર લોડાઉન મેળવો.

HTML5 doctype

બુટસ્ટ્રેપ અમુક HTML તત્વો અને CSS ગુણધર્મોનો ઉપયોગ કરે છે જેને HTML5 doctypeનો ઉપયોગ કરવાની જરૂર હોય છે. તમારા બધા પ્રોજેક્ટ્સની શરૂઆતમાં તેને શામેલ કરો.

<!doctype html>
<html lang="en">
  ...
</html>

પહેલા મોબાઈલ

બુટસ્ટ્રેપ 2 સાથે, અમે ફ્રેમવર્કના મુખ્ય પાસાઓ માટે વૈકલ્પિક મોબાઇલ મૈત્રીપૂર્ણ શૈલીઓ ઉમેરી છે. બુટસ્ટ્રેપ 3 સાથે, અમે શરૂઆતથી જ મોબાઈલ ફ્રેન્ડલી પ્રોજેક્ટને ફરીથી લખ્યો છે. વૈકલ્પિક મોબાઇલ શૈલીઓ ઉમેરવાને બદલે, તેઓ સીધા જ મુખ્ય ભાગમાં શેકવામાં આવે છે. હકીકતમાં, બુટસ્ટ્રેપ પ્રથમ મોબાઇલ છે . મોબાઇલ ફર્સ્ટ સ્ટાઇલ અલગ ફાઇલોને બદલે સમગ્ર લાઇબ્રેરીમાં મળી શકે છે.

યોગ્ય રેન્ડરિંગ અને ટચ ઝૂમિંગની ખાતરી કરવા માટે, તમારામાં વ્યૂપોર્ટ મેટા ટેગ ઉમેરો <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

user-scalable=noતમે વ્યૂપોર્ટ મેટા ટેગમાં ઉમેરીને મોબાઇલ ઉપકરણો પર ઝૂમિંગ ક્ષમતાઓને અક્ષમ કરી શકો છો . આ ઝૂમિંગને અક્ષમ કરે છે, એટલે કે વપરાશકર્તાઓ માત્ર સ્ક્રોલ કરવામાં સક્ષમ છે, અને પરિણામે તમારી સાઇટ મૂળ એપ્લિકેશન જેવી થોડી વધુ અનુભવે છે. એકંદરે, અમે દરેક સાઇટ પર આની ભલામણ કરતા નથી, તેથી સાવધાની રાખો!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

ટાઇપોગ્રાફી અને લિંક્સ

બુટસ્ટ્રેપ મૂળભૂત વૈશ્વિક પ્રદર્શન, ટાઇપોગ્રાફી અને લિંક શૈલીઓ સેટ કરે છે. ખાસ કરીને, અમે:

પર સેટ background-color: #fff;કરોbody
@font-family-baseઅમારા ટાઇપોગ્રાફિક આધાર તરીકે , @font-size-base, અને @line-height-baseવિશેષતાઓનો ઉપયોગ કરો
દ્વારા વૈશ્વિક લિંક રંગ સેટ કરો @link-colorઅને ફક્ત તેના પર જ લિંક અન્ડરલાઇન્સ લાગુ કરો:hover

આ શૈલીઓ અંદર મળી શકે છે scaffolding.less.

Normalize.css

સુધારેલ ક્રોસ-બ્રાઉઝર રેન્ડરીંગ માટે, અમે Normalize.css નો ઉપયોગ કરીએ છીએ, જે Nicolas Gallagher અને Jonathan Neal દ્વારા એક પ્રોજેક્ટ છે .

કન્ટેનર

બુટસ્ટ્રેપને સાઇટની સામગ્રીને લપેટવા અને અમારી ગ્રીડ સિસ્ટમ રાખવા માટે એક સમાવિષ્ટ તત્વની જરૂર છે. તમે તમારા પ્રોજેક્ટમાં ઉપયોગ કરવા માટે બેમાંથી એક કન્ટેનર પસંદ કરી શકો છો. નોંધ કરો કે, paddingઅને વધુને લીધે, બેમાંથી કોઈ કન્ટેનર નેસ્ટેબલ નથી.

.containerપ્રતિભાવ નિશ્ચિત પહોળાઈના કન્ટેનર માટે ઉપયોગ કરો .

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

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

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

બુટસ્ટ્રેપમાં રિસ્પોન્સિવ, મોબાઇલ ફર્સ્ટ ફ્લુઇડ ગ્રીડ સિસ્ટમનો સમાવેશ થાય છે જે ઉપકરણ અથવા વ્યૂપોર્ટના કદમાં વધારો થતાં 12 કૉલમ સુધી યોગ્ય રીતે સ્કેલ કરે છે. તેમાં સરળ લેઆઉટ વિકલ્પો માટે પૂર્વવ્યાખ્યાયિત વર્ગો તેમજ વધુ સિમેન્ટીક લેઆઉટ જનરેટ કરવા માટે શક્તિશાળી મિશ્રણનો સમાવેશ થાય છે .

પરિચય

ગ્રીડ સિસ્ટમ્સનો ઉપયોગ પંક્તિઓ અને કૉલમ્સની શ્રેણી દ્વારા પૃષ્ઠ લેઆઉટ બનાવવા માટે થાય છે જે તમારી સામગ્રી ધરાવે છે. બુટસ્ટ્રેપ ગ્રીડ સિસ્ટમ કેવી રીતે કામ કરે છે તે અહીં છે:

યોગ્ય ગોઠવણી અને પેડિંગ માટે પંક્તિઓ .container(નિશ્ચિત-પહોળાઈ) અથવા (સંપૂર્ણ-પહોળાઈ) ની અંદર મૂકવી આવશ્યક છે ..container-fluid
કૉલમના આડા જૂથો બનાવવા માટે પંક્તિઓનો ઉપયોગ કરો.
સામગ્રી કૉલમમાં મૂકવી જોઈએ, અને માત્ર કૉલમ જ પંક્તિઓના તાત્કાલિક બાળકો હોઈ શકે છે.
પૂર્વવ્યાખ્યાયિત ગ્રીડ વર્ગો જેમ કે .rowઝડપથી .col-xs-4ગ્રીડ લેઆઉટ બનાવવા માટે ઉપલબ્ધ છે. વધુ સિમેન્ટીક લેઆઉટ માટે ઓછા મિક્સિનનો પણ ઉપયોગ કરી શકાય છે.
કૉલમ દ્વારા ગટર (કૉલમની સામગ્રી વચ્ચેના અંતર) બનાવે છે padding. .rowતે પેડિંગ પ્રથમ અને છેલ્લા કૉલમ માટે s પર નકારાત્મક માર્જિન દ્વારા પંક્તિઓમાં ઑફસેટ છે .
નકારાત્મક માર્જિન શા માટે નીચેના ઉદાહરણો આઉટડેંટ છે. તે એટલા માટે છે કે ગ્રીડ કૉલમ્સની અંદરની સામગ્રી બિન-ગ્રીડ સામગ્રી સાથે લાઇન અપ છે.
ગ્રીડ કૉલમ તમે સ્પેન્ડ કરવા માંગો છો તે બાર ઉપલબ્ધ કૉલમની સંખ્યાનો ઉલ્લેખ કરીને બનાવવામાં આવે છે. ઉદાહરણ તરીકે, ત્રણ સમાન કૉલમ ત્રણનો ઉપયોગ કરશે .col-xs-4.
જો એક પંક્તિમાં 12 થી વધુ કૉલમ મૂકવામાં આવે, તો વધારાના કૉલમનું દરેક જૂથ, એક એકમ તરીકે, નવી લાઇન પર લપેટી જશે.
ગ્રીડ વર્ગો બ્રેકપોઇન્ટ માપો કરતા વધારે અથવા સમાન સ્ક્રીનની પહોળાઈ ધરાવતા ઉપકરણો પર લાગુ થાય છે અને નાના ઉપકરણો પર લક્ષિત ગ્રીડ વર્ગોને ઓવરરાઇડ કરે છે. તેથી, દા.ત. કોઈપણ .col-md-*વર્ગને એલિમેન્ટ પર લાગુ કરવાથી માત્ર મધ્યમ ઉપકરણો પર જ નહીં પરંતુ જો .col-lg-*વર્ગ હાજર ન હોય તો મોટા ઉપકરણો પર પણ તેની સ્ટાઈલને અસર કરશે.

આ સિદ્ધાંતોને તમારા કોડમાં લાગુ કરવા માટેના ઉદાહરણો જુઓ.

મીડિયા પ્રશ્નો

અમારી ગ્રીડ સિસ્ટમમાં મુખ્ય બ્રેકપોઇન્ટ્સ બનાવવા માટે અમે અમારી ઓછી ફાઇલોમાં નીચેની મીડિયા ક્વેરીઝનો ઉપયોગ કરીએ છીએ.

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

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

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

અમે ક્યારેક-ક્યારેક આ મીડિયા ક્વેરીઝ પર max-widthCSS ને ઉપકરણોના સાંકડા સેટ સુધી મર્યાદિત કરવા માટેનો સમાવેશ કરીએ છીએ.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

ગ્રીડ વિકલ્પો

જુઓ કે કેવી રીતે બુટસ્ટ્રેપ ગ્રીડ સિસ્ટમના પાસાઓ હાથવગા ટેબલ સાથે બહુવિધ ઉપકરણો પર કામ કરે છે.

	વધારાના નાના ઉપકરણો ફોન (<768px)	નાના ઉપકરણોની ગોળીઓ (≥768px)	મધ્યમ ઉપકરણો ડેસ્કટોપ (≥992px)	મોટા ઉપકરણો ડેસ્કટોપ્સ (≥1200px)
ગ્રીડ વર્તન	દરેક સમયે આડું	શરૂ કરવા માટે સંકુચિત, બ્રેકપોઇન્ટ ઉપર આડી
કન્ટેનર પહોળાઈ	કોઈ નહીં (ઓટો)	750px	970px	1170px
વર્ગ ઉપસર્ગ	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
કૉલમનો #	12
કૉલમની પહોળાઈ	ઓટો	~62px	~81px	~97px
ગટરની પહોળાઈ	30px (સ્તંભની દરેક બાજુએ 15px)
નેસ્ટેબલ	હા
ઑફસેટ્સ	હા
કૉલમ ક્રમ	હા

ઉદાહરણ: સ્ટેક્ડ-ટુ-હોરીઝોન્ટલ

ગ્રીડ વર્ગોના એક જ સેટનો ઉપયોગ કરીને .col-md-*, તમે એક મૂળભૂત ગ્રીડ સિસ્ટમ બનાવી શકો છો જે ડેસ્કટોપ (મધ્યમ) ઉપકરણો પર આડી બનતા પહેલા મોબાઇલ ઉપકરણો અને ટેબ્લેટ ઉપકરણો (વધારાની નાની થી નાની શ્રેણી) પર સ્ટેકથી શરૂ થાય છે. કોઈપણમાં ગ્રીડ કૉલમ મૂકો .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

ઉદાહરણ: પ્રવાહી કન્ટેનર

કોઈપણ નિશ્ચિત-પહોળાઈના ગ્રીડ લેઆઉટને તમારા બાહ્યતમને માં બદલીને પૂર્ણ-પહોળાઈના લેઆઉટમાં .containerફેરવો .container-fluid.

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

ઉદાહરણ: મોબાઇલ અને ડેસ્કટોપ

તમારી કૉલમ ફક્ત નાના ઉપકરણોમાં સ્ટેક કરવા નથી માંગતા? .col-xs-* .col-md-*તમારા કૉલમમાં ઉમેરીને વધારાના નાના અને મધ્યમ ઉપકરણ ગ્રીડ વર્ગોનો ઉપયોગ કરો. તે બધું કેવી રીતે કાર્ય કરે છે તેના વધુ સારા વિચાર માટે નીચેનું ઉદાહરણ જુઓ.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

ઉદાહરણ: મોબાઇલ, ટેબ્લેટ, ડેસ્કટોપ

.col-sm-*ટેબ્લેટ વર્ગો સાથે હજી વધુ ગતિશીલ અને શક્તિશાળી લેઆઉટ બનાવીને પાછલા ઉદાહરણ પર બનાવો .

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

ઉદાહરણ: કૉલમ રેપિંગ

જો એક પંક્તિમાં 12 થી વધુ કૉલમ મૂકવામાં આવે, તો વધારાના કૉલમનું દરેક જૂથ, એક એકમ તરીકે, નવી લાઇન પર લપેટી જશે.

.col-xs-9

.col-xs-4
9 + 4 = 13 > 12 થી, આ 4-કૉલમ-વાઇડ ડિવ નવી લાઇન પર એક સંલગ્ન એકમ તરીકે આવરિત થાય છે.

.col-xs-6
અનુગામી કૉલમ નવી લાઇન સાથે ચાલુ રહે છે.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

રિસ્પોન્સિવ કૉલમ ફરીથી સેટ કરે છે

ઉપલબ્ધ ગ્રીડના ચાર સ્તરો સાથે તમે એવા મુદ્દાઓમાં ભાગ લેવા માટે બંધાયેલા છો જ્યાં, અમુક બ્રેકપોઇન્ટ્સ પર, તમારી કૉલમ એકદમ યોગ્ય રીતે સાફ થતી નથી કારણ કે એક બીજા કરતા ઉંચી છે. તેને ઠીક કરવા માટે, a .clearfixઅને અમારા રિસ્પોન્સિવ યુટિલિટી ક્લાસના સંયોજનનો ઉપયોગ કરો .

.col-xs-6 .col-sm-3
તમારા વ્યૂપોર્ટનું કદ બદલો અથવા ઉદાહરણ માટે તમારા ફોન પર તેને તપાસો.

.col-xs-6 .col-sm-3

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

રિસ્પોન્સિવ બ્રેકપોઇન્ટ્સ પર કૉલમ ક્લિયરિંગ ઉપરાંત, તમારે ઑફસેટ્સ, પુશ અથવા પુલ્સને ફરીથી સેટ કરવાની જરૂર પડી શકે છે . ગ્રીડના ઉદાહરણમાં આને ક્રિયામાં જુઓ .

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

ગટર દૂર કરો

એક પંક્તિમાંથી ગટર દૂર કરો અને તે .row-no-guttersવર્ગ સાથેના કૉલમ છે.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

કૉલમ ઑફસેટિંગ

.col-md-offset-*વર્ગોનો ઉપયોગ કરીને કૉલમને જમણી તરફ ખસેડો . આ વર્ગો કૉલમ દ્વારા કૉલમના ડાબા માર્જિનમાં વધારો કરે છે *. ઉદાહરણ તરીકે, ચાર કૉલમ પર .col-md-offset-4ખસે છે..col-md-4

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

તમે .col-*-offset-0વર્ગો સાથે નીચલા ગ્રીડ સ્તરોમાંથી ઑફસેટ્સને પણ ઓવરરાઇડ કરી શકો છો.

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

નેસ્ટિંગ કૉલમ

તમારી સામગ્રીને ડિફોલ્ટ ગ્રીડ સાથે નેસ્ટ કરવા માટે, હાલની કૉલમમાં એક નવો .rowઅને કૉલમનો સેટ ઉમેરો . નેસ્ટેડ પંક્તિઓમાં કૉલમનો સમૂહ શામેલ હોવો જોઈએ જે 12 અથવા તેથી ઓછા ઉમેરે છે (તે જરૂરી નથી કે તમે બધી ઉપલબ્ધ 12 કૉલમનો ઉપયોગ કરો)..col-sm-*.col-sm-*

સ્તર 1: .col-sm-9

સ્તર 2: .col-xs-8 .col-sm-6

સ્તર 2: .col-xs-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

કૉલમ ક્રમ

.col-md-push-*અમારા બિલ્ટ-ઇન ગ્રીડ કૉલમનો ક્રમ અને .col-md-pull-*મોડિફાયર વર્ગો સાથે સરળતાથી બદલો .

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

ઓછા મિશ્રણ અને ચલો

ઝડપી લેઆઉટ માટે પ્રીબિલ્ટ ગ્રીડ વર્ગો ઉપરાંત , બુટસ્ટ્રેપમાં તમારા પોતાના સરળ, સિમેન્ટીક લેઆઉટને ઝડપથી જનરેટ કરવા માટે ઓછા ચલો અને મિક્સિન્સનો સમાવેશ થાય છે.

ચલો

ચલો કૉલમની સંખ્યા, ગટરની પહોળાઈ અને મીડિયા ક્વેરી પોઈન્ટ કે જ્યાંથી ફ્લોટિંગ કૉલમ શરૂ કરવા તે નક્કી કરે છે. અમે ઉપરોક્ત દસ્તાવેજીકૃત પૂર્વવ્યાખ્યાયિત ગ્રીડ વર્ગો તેમજ નીચે સૂચિબદ્ધ વૈવિધ્યપૂર્ણ મિશ્રણો માટે આનો ઉપયોગ કરીએ છીએ.

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

મિક્સિન્સ

વ્યક્તિગત ગ્રીડ કૉલમ્સ માટે સિમેન્ટીક CSS જનરેટ કરવા માટે ગ્રીડ વેરીએબલ્સ સાથે મિક્સિનનો ઉપયોગ કરવામાં આવે છે.

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

ઉદાહરણ ઉપયોગ

તમે તમારા પોતાના વૈવિધ્યપૂર્ણ મૂલ્યોમાં ચલોને સંશોધિત કરી શકો છો, અથવા ફક્ત તેમના ડિફોલ્ટ મૂલ્યો સાથે મિક્સિનનો ઉપયોગ કરી શકો છો. વચ્ચેના અંતર સાથે બે-કૉલમ લેઆઉટ બનાવવા માટે ડિફૉલ્ટ સેટિંગ્સનો ઉપયોગ કરવાનું અહીં ઉદાહરણ છે.

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

હેડિંગ

તમામ HTML શીર્ષકો, <h1>મારફતે <h6>, ઉપલબ્ધ છે. .h1દ્વારા .h6વર્ગો પણ ઉપલબ્ધ છે, જ્યારે તમે મથાળાની ફોન્ટ સ્ટાઇલ સાથે મેચ કરવા માંગતા હોવ પરંતુ તેમ છતાં તમારું ટેક્સ્ટ ઇનલાઇન પ્રદર્શિત થાય તેવું ઇચ્છો છો.

h1. બુટસ્ટ્રેપ હેડિંગ	સેમીબોલ્ડ 36px
h2. બુટસ્ટ્રેપ હેડિંગ	સેમીબોલ્ડ 30px
h3. બુટસ્ટ્રેપ હેડિંગ	સેમીબોલ્ડ 24px
h4. બુટસ્ટ્રેપ હેડિંગ	સેમીબોલ્ડ 18px
h5. બુટસ્ટ્રેપ હેડિંગ	સેમીબોલ્ડ 14px
h6. બુટસ્ટ્રેપ હેડિંગ	સેમીબોલ્ડ 12px

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<small>સામાન્ય ટેગ અથવા .smallવર્ગ સાથે કોઈપણ મથાળામાં હળવા, ગૌણ ટેક્સ્ટ બનાવો .

h1. બુટસ્ટ્રેપ હેડિંગ સેકન્ડરી ટેક્સ્ટ

h2. બુટસ્ટ્રેપ હેડિંગ સેકન્ડરી ટેક્સ્ટ

h3. બુટસ્ટ્રેપ હેડિંગ સેકન્ડરી ટેક્સ્ટ

h4. બુટસ્ટ્રેપ હેડિંગ સેકન્ડરી ટેક્સ્ટ

h5. બુટસ્ટ્રેપ હેડિંગ સેકન્ડરી ટેક્સ્ટ

h6. બુટસ્ટ્રેપ હેડિંગ સેકન્ડરી ટેક્સ્ટ

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

શારીરિક નકલ

બુટસ્ટ્રેપનું વૈશ્વિક ડિફોલ્ટ 14pxfont-size છે , જેમાં 1.428 છે . આ અને તમામ ફકરાઓ પર લાગુ થાય છે. વધુમાં, (ફકરા) તેમની ગણતરી કરેલ રેખા-ઊંચાઈ (ડિફૉલ્ટ રૂપે 10px) ના અડધા તળિયે માર્જિન મેળવે છે.line-height<body><p>

નુલ્લમ ક્વિસ રિસસ એગેટ ઉર્ના મોલીસ ઓર્નારે વેલ ઇયુ લીઓ. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. નુલ્લમ આઈડી ડોલર આઈડી નિભ અલ્ટ્રીસીસ વાહન.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

લીડ બોડી કોપી

એક ફકરો ઉમેરીને અલગ બનાવો .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. ડ્યુસ મોલીસ, તે બિન કોમોડો લેક્ટસ છે.

<p class="lead">...</p>

લેસ સાથે બિલ્ટ

ટાઇપોગ્રાફિક સ્કેલ variables.less માં બે ઓછા ચલો પર આધારિત છે : @font-size-baseઅને @line-height-base. પ્રથમ સમગ્ર ઉપયોગમાં લેવાતો આધાર ફોન્ટ-કદ છે અને બીજો આધાર રેખા-ઊંચાઈ છે. અમે અમારા તમામ પ્રકારના અને વધુના માર્જિન, પેડિંગ્સ અને લાઇન-હાઇટ્સ બનાવવા માટે તે ચલોનો અને કેટલાક સરળ ગણિતનો ઉપયોગ કરીએ છીએ. તેમને કસ્ટમાઇઝ કરો અને બુટસ્ટ્રેપ અપનાવે છે.

ઇનલાઇન ટેક્સ્ટ ઘટકો

ચિહ્નિત ટેક્સ્ટ

અન્ય સંદર્ભમાં તેની સુસંગતતાને કારણે ટેક્સ્ટના રનને હાઇલાઇટ કરવા માટે, <mark>ટેગનો ઉપયોગ કરો.

તમે માર્ક ટેગનો ઉપયોગ કરી શકો છોહાઇલાઇટટેક્સ્ટ

You can use the mark tag to <mark>highlight</mark> text.

કાઢી નાખેલ ટેક્સ્ટ

કાઢી નાખવામાં આવેલ ટેક્સ્ટના બ્લોક્સ સૂચવવા માટે <del>ટેગનો ઉપયોગ કરો.

~~ટેક્સ્ટની આ લાઇનનો અર્થ કાઢી નાખેલ ટેક્સ્ટ તરીકે ગણવામાં આવે છે.~~

<del>This line of text is meant to be treated as deleted text.</del>

સ્ટ્રાઇકથ્રુ ટેક્સ્ટ

ટેક્સ્ટના બ્લોક્સ કે જે હવે સંબંધિત નથી તે દર્શાવવા માટે <s>ટેગનો ઉપયોગ કરો.

~~ટેક્સ્ટની આ પંક્તિનો અર્થ એ છે કે તે હવે સચોટ નથી.~~

<s>This line of text is meant to be treated as no longer accurate.</s>

દાખલ કરેલ ટેક્સ્ટ

દસ્તાવેજમાં ઉમેરણો સૂચવવા માટે <ins>ટેગનો ઉપયોગ કરો.

ટેક્સ્ટની આ પંક્તિને દસ્તાવેજમાં વધારા તરીકે ગણવામાં આવે છે.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

રેખાંકિત ટેક્સ્ટ

ટેક્સ્ટને રેખાંકિત કરવા માટે <u>ટેગનો ઉપયોગ કરો.

ટેક્સ્ટની આ લાઇન રેખાંકિત તરીકે રેન્ડર થશે

<u>This line of text will render as underlined</u>

હળવા વજનની શૈલીઓ સાથે HTML ના મૂળભૂત ભાર ટૅગ્સનો ઉપયોગ કરો.

નાનું લખાણ

ઇનલાઇન અથવા ટેક્સ્ટના બ્લોક્સ પર ભાર મૂકવા માટે <small>, માતાપિતાના કદના 85% પર ટેક્સ્ટ સેટ કરવા માટે ટેગનો ઉપયોગ કરો. font-sizeશીર્ષક તત્વો નેસ્ટેડ તત્વો માટે તેમના પોતાના મેળવે <small>છે.

તમે વૈકલ્પિક રીતે .smallકોઈપણ ની જગ્યાએ ઇનલાઇન તત્વનો ઉપયોગ કરી શકો છો <small>.

ટેક્સ્ટની આ લાઇનને ફાઇન પ્રિન્ટ તરીકે ગણવામાં આવે છે.

<small>This line of text is meant to be treated as fine print.</small>

બોલ્ડ

ભારે ફોન્ટ-વજન સાથે ટેક્સ્ટના સ્નિપેટ પર ભાર મૂકવા માટે.

ટેક્સ્ટની નીચેની સ્નિપેટ બોલ્ડ ટેક્સ્ટ તરીકે રેન્ડર કરવામાં આવી છે .

<strong>rendered as bold text</strong>

ત્રાંસી

ઇટાલિક સાથે ટેક્સ્ટના સ્નિપેટ પર ભાર મૂકવા માટે.

ટેક્સ્ટની નીચેની સ્નિપેટ ઇટાલિક લખાણ તરીકે પ્રસ્તુત કરવામાં આવી છે .

<em>rendered as italicized text</em>

વૈકલ્પિક તત્વો

નિઃસંકોચ ઉપયોગ કરો <b>અને <i>HTML5 માં. <b>વધારાના મહત્વ આપ્યા વિના શબ્દો અથવા શબ્દસમૂહોને પ્રકાશિત કરવા માટે છે જ્યારે <i>મોટે ભાગે અવાજ, તકનીકી શબ્દો વગેરે માટે છે.

સંરેખણ વર્ગો

ટેક્સ્ટ ગોઠવણી વર્ગો સાથે ઘટકોમાં ટેક્સ્ટને સરળતાથી ફરીથી ગોઠવો.

ડાબે સંરેખિત ટેક્સ્ટ.

મધ્યમાં સંરેખિત ટેક્સ્ટ.

જમણે સંરેખિત ટેક્સ્ટ.

વાજબી લખાણ.

કોઈ રેપ ટેક્સ્ટ નથી.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

પરિવર્તન વર્ગો

ટેક્સ્ટ કેપિટલાઇઝેશન વર્ગો સાથે ઘટકોમાં ટેક્સ્ટને રૂપાંતરિત કરો.

લોઅરકેસ ટેક્સ્ટ.

અપરકેસ કરેલ ટેક્સ્ટ.

કેપિટલ લખાણ.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

સંક્ષેપ

<abbr>હોવર પર વિસ્તૃત સંસ્કરણ બતાવવા માટે સંક્ષેપ અને ટૂંકાક્ષરો માટે HTML ના તત્વનું શૈલીયુક્ત અમલીકરણ . એટ્રિબ્યુટ સાથેના titleસંક્ષેપોમાં હળવા ડોટેડ બોટમ બોર્ડર અને હોવર પર હેલ્પ કર્સર હોય છે, જે હોવર પર અને સહાયક ટેક્નોલોજીના વપરાશકર્તાઓને વધારાના સંદર્ભ પ્રદાન કરે છે.

મૂળભૂત સંક્ષેપ

એટ્રિબ્યુટ શબ્દનું સંક્ષિપ્ત નામ attr છે .

<abbr title="attribute">attr</abbr>

આરંભવાદ

.initialismથોડા નાના ફોન્ટ-સાઇઝ માટે સંક્ષેપમાં ઉમેરો .

કાતરી બ્રેડ પછી HTML એ શ્રેષ્ઠ વસ્તુ છે.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

સરનામાં

નજીકના પૂર્વજ અથવા સમગ્ર કાર્ય માટે સંપર્ક માહિતી પ્રસ્તુત કરો. સાથે તમામ રેખાઓ સમાપ્ત કરીને ફોર્મેટિંગ સાચવો <br>.

Twitter, Inc.
1355 માર્કેટ સ્ટ્રીટ, સ્યુટ 900
સાન ફ્રાન્સિસ્કો, CA 94103
P: (123) 456-7890

પૂરું નામ
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

બ્લોકક્વોટ્સ

તમારા દસ્તાવેજમાં અન્ય સ્ત્રોતમાંથી સામગ્રીના બ્લોક્સ ટાંકવા માટે.

ડિફૉલ્ટ બ્લોકક્વોટ

ક્વોટ તરીકે <blockquote>કોઈપણ HTML આસપાસ લપેટી . સીધા અવતરણ માટે, અમે ભલામણ કરીએ છીએ <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક પોઝ્યુર એ પહેલાથી શરૂ થાય છે.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

બ્લોકક્વોટ વિકલ્પો

સ્ટાન્ડર્ડ પર સરળ ભિન્નતા માટે શૈલી અને સામગ્રી ફેરફારો <blockquote>.

સ્ત્રોતનું નામકરણ

<footer>સ્ત્રોતને ઓળખવા માટે એક ઉમેરો . માં સ્ત્રોત કાર્યનું નામ લપેટી <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક પોઝ્યુર એ પહેલાથી શરૂ થાય છે.

સ્ત્રોત શીર્ષકમાં પ્રખ્યાત વ્યક્તિ

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

વૈકલ્પિક ડિસ્પ્લે

.blockquote-reverseજમણે સંરેખિત સામગ્રી સાથે બ્લોકક્વોટ માટે ઉમેરો .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક પોઝ્યુર એ પહેલાથી શરૂ થાય છે.

સ્ત્રોત શીર્ષકમાં પ્રખ્યાત વ્યક્તિ

<blockquote class="blockquote-reverse">
  ...
</blockquote>

યાદીઓ

અવ્યવસ્થિત

આઇટમ્સની સૂચિ જેમાં ઓર્ડર સ્પષ્ટપણે વાંધો નથી .

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
માસામાં પૂર્ણાંક મોલેસ્ટી લોરેમ
પ્રિટિયમ નિસ્લ એલિકેટમાં ફેસિલિસીસ
નુલ્લા વોલ્યુટપેટ એલીકમ વેલીટ
- ફેસેલસ iaculis neque
- પુરસ સોડેલ્સ અલ્ટ્રિસીસ
- વેસ્ટીબુલમ લાઓરેટ પોર્ટીટર સેમ
- એસી tristique libero volutpat ખાતે
Faucibus porta lacus fringilla vel
Aenean sit amet erat nc
Eget porttitor lorem

<ul>
  <li>...</li>
</ul>

આદેશ આપ્યો

આઇટમ્સની સૂચિ કે જેમાં ઓર્ડર સ્પષ્ટપણે મહત્વપૂર્ણ છે .

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
માસામાં પૂર્ણાંક મોલેસ્ટી લોરેમ
પ્રિટિયમ નિસ્લ એલિકેટમાં ફેસિલિસીસ
નુલ્લા વોલ્યુટપેટ એલીકમ વેલીટ
Faucibus porta lacus fringilla vel
Aenean sit amet erat nc
Eget porttitor lorem

<ol>
  <li>...</li>
</ol>

અનસ્ટાઇલ

list-styleયાદી વસ્તુઓ પર ડિફોલ્ટ અને ડાબો હાંસિયો દૂર કરો (ફક્ત તાત્કાલિક બાળકો માટે). આ ફક્ત તાત્કાલિક બાળકોની સૂચિ વસ્તુઓ પર લાગુ થાય છે , એટલે કે તમારે કોઈપણ નેસ્ટેડ સૂચિઓ માટે પણ વર્ગ ઉમેરવાની જરૂર પડશે.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
માસામાં પૂર્ણાંક મોલેસ્ટી લોરેમ
પ્રિટિયમ નિસ્લ એલિકેટમાં ફેસિલિસીસ
નુલ્લા વોલ્યુટપેટ એલીકમ વેલીટ
- ફેસેલસ iaculis neque
- પુરસ સોડેલ્સ અલ્ટ્રિસીસ
- વેસ્ટીબુલમ લાઓરેટ પોર્ટીટર સેમ
- એસી tristique libero volutpat ખાતે
Faucibus porta lacus fringilla vel
Aenean sit amet erat nc
Eget porttitor lorem

<ul class="list-unstyled">
  <li>...</li>
</ul>

ઇનલાઇન

બધી સૂચિ વસ્તુઓને એક જ લાઇન પર display: inline-block;અને કેટલાક હળવા પેડિંગ સાથે મૂકો.

Lorem ipsum
ફેસેલસ iaculis
Nulla volutpat

<ul class="list-inline">
  <li>...</li>
</ul>

વર્ણન

તેમના સંબંધિત વર્ણનો સાથેના શબ્દોની સૂચિ.

વર્ણન યાદીઓ: વર્ણન સૂચિ શબ્દોને વ્યાખ્યાયિત કરવા માટે યોગ્ય છે.
Euismod: વેસ્ટિબુલમ આઈડી લિગુલા પોર્ટા ફેલિસ યુઈસ્મોડ સેમ્પર એગેટ લેસીનિયા ઓડિયો સેમ એનઈસી એલિટ.; Donec id elit non mi porta gravida at eget metus.
માલેસુડા પોર્ટા: Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

આડું વર્ણન

<dl>સાથે -સાથે લાઇનમાં શરતો અને વર્ણનો બનાવો . ડિફૉલ્ટ <dl>s ની જેમ સ્ટેકથી પ્રારંભ થાય છે, પરંતુ જ્યારે નવબાર વિસ્તરે છે, તો આ કરો.

વર્ણન યાદીઓ: વર્ણન સૂચિ શબ્દોને વ્યાખ્યાયિત કરવા માટે યોગ્ય છે.
Euismod: વેસ્ટિબુલમ આઈડી લિગુલા પોર્ટા ફેલિસ યુઈસ્મોડ સેમ્પર એગેટ લેસીનિયા ઓડિયો સેમ એનઈસી એલિટ.; Donec id elit non mi porta gravida at eget metus.
માલેસુડા પોર્ટા: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: ફ્યુસે ડેપિબસ, ટેલસ એસી કર્સસ કોમોડો, ટોર્ટર મૌરીસ કન્ડીમેન્ટમ નિભ, યુટ ફર્મેન્ટમ મસા જસ્ટો સીટ એમેટ રિસસ.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

સ્વતઃ કાપવું

આડી વર્ણન સૂચિઓ એવા શબ્દોને કાપી નાખશે જે ડાબી કૉલમમાં સાથે ફિટ થવા માટે ખૂબ લાંબી છે text-overflow. સાંકડા વ્યુપોર્ટમાં, તેઓ ડિફોલ્ટ સ્ટેક કરેલા લેઆઉટમાં બદલાઈ જશે.

ઇનલાઇન

સાથે કોડના ઇનલાઇન સ્નિપેટ્સ લપેટી <code>.

ઉદાહરણ તરીકે, <section>ઇનલાઇન તરીકે આવરિત હોવું જોઈએ.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

વપરાશકર્તા ઇનપુટ

<kbd>ઇનપુટ સૂચવવા માટે નો ઉપયોગ કરો જે સામાન્ય રીતે કીબોર્ડ દ્વારા દાખલ કરવામાં આવે છે.

ડિરેક્ટરીઓ સ્વિચ કરવા માટે, ડિરેક્ટરીના cdનામ પછી ટાઈપ કરો.
સેટિંગ્સ સંપાદિત કરવા માટે, દબાવો ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

મૂળભૂત બ્લોક

<pre>કોડની બહુવિધ રેખાઓ માટે ઉપયોગ કરો . યોગ્ય રેન્ડરીંગ માટે કોડમાં કોઈપણ એંગલ કૌંસમાંથી છટકી જવાની ખાતરી કરો.

<p>અહીં નમૂનાનો ટેક્સ્ટ...</p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

તમે વૈકલ્પિક રીતે .pre-scrollableવર્ગ ઉમેરી શકો છો, જે 350px ની મહત્તમ-ઊંચાઈ સેટ કરશે અને y-અક્ષ સ્ક્રોલબાર પ્રદાન કરશે.

ચલો

ચલોને સૂચવવા માટે <var>ટેગનો ઉપયોગ કરો.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

નમૂના આઉટપુટ

પ્રોગ્રામમાંથી બ્લોકના નમૂનાનું આઉટપુટ સૂચવવા માટે <samp>ટેગનો ઉપયોગ કરો.

આ ટેક્સ્ટ કમ્પ્યુટર પ્રોગ્રામમાંથી નમૂના આઉટપુટ તરીકે ગણવામાં આવે છે.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

મૂળભૂત ઉદાહરણ

.tableમૂળભૂત સ્ટાઇલ માટે—લાઇટ પેડિંગ અને માત્ર આડા ડિવાઇડર— કોઈપણમાં બેઝ ક્લાસ ઉમેરો <table>. તે અતિ નિરર્થક લાગે છે, પરંતુ કૅલેન્ડર્સ અને તારીખ પીકર્સ જેવા અન્ય પ્લગિન્સ માટે કોષ્ટકોના વ્યાપક ઉપયોગને જોતાં, અમે અમારી કસ્ટમ કોષ્ટક શૈલીઓને અલગ કરવાનું પસંદ કર્યું છે.

વૈકલ્પિક ટેબલ કૅપ્શન.
#	પ્રથમ નામ	છેલ્લું નામ	વપરાશકર્તા નામ
1	ચિહ્ન	ઓટ્ટો	@mdo
2	જેકબ	થોર્ન્ટન	@ચરબી
3	લેરી	પક્ષી	@Twitter

<table class="table">
  ...
</table>

પટ્ટાવાળી પંક્તિઓ

.table-stripedની અંદર કોઈપણ ટેબલ પંક્તિમાં ઝેબ્રા-સ્ટ્રીપિંગ ઉમેરવા માટે ઉપયોગ કરો <tbody>.

ક્રોસ બ્રાઉઝર સુસંગતતા

પટ્ટાવાળી કોષ્ટકો :nth-childCSS પસંદગીકાર દ્વારા સ્ટાઇલ કરવામાં આવે છે, જે Internet Explorer 8 માં ઉપલબ્ધ નથી.

#	પ્રથમ નામ	છેલ્લું નામ	વપરાશકર્તા નામ
1	ચિહ્ન	ઓટ્ટો	@mdo
2	જેકબ	થોર્ન્ટન	@ચરબી
3	લેરી	પક્ષી	@Twitter

<table class="table table-striped">
  ...
</table>

બોર્ડર્ડ ટેબલ

.table-borderedકોષ્ટક અને કોષોની બધી બાજુઓ પર સરહદો માટે ઉમેરો .

#	પ્રથમ નામ	છેલ્લું નામ	વપરાશકર્તા નામ
1	ચિહ્ન	ઓટ્ટો	@mdo
2	જેકબ	થોર્ન્ટન	@ચરબી
3	લેરી	પક્ષી	@Twitter

<table class="table table-bordered">
  ...
</table>

હૉવર પંક્તિઓ

.table-hoverકોષ્ટકની હરોળ પર હોવર સ્થિતિને સક્ષમ કરવા માટે ઉમેરો <tbody>.

#	પ્રથમ નામ	છેલ્લું નામ	વપરાશકર્તા નામ
1	ચિહ્ન	ઓટ્ટો	@mdo
2	જેકબ	થોર્ન્ટન	@ચરબી
3	લેરી	પક્ષી	@Twitter

<table class="table table-hover">
  ...
</table>

કન્ડેન્સ્ડ ટેબલ

.table-condensedસેલ પેડિંગને અડધા ભાગમાં કાપીને કોષ્ટકોને વધુ સઘન બનાવવા માટે ઉમેરો .

#	પ્રથમ નામ	છેલ્લું નામ	વપરાશકર્તા નામ
1	ચિહ્ન	ઓટ્ટો	@mdo
2	જેકબ	થોર્ન્ટન	@ચરબી
3	લેરી ધ બર્ડ		@Twitter

<table class="table table-condensed">
  ...
</table>

સંદર્ભિત વર્ગો

કોષ્ટક પંક્તિઓ અથવા વ્યક્તિગત કોષોને રંગ આપવા માટે સંદર્ભિત વર્ગોનો ઉપયોગ કરો.

વર્ગ	વર્ણન
`.active`	કોઈ ચોક્કસ પંક્તિ અથવા કોષ પર હોવર રંગ લાગુ કરે છે
`.success`	સફળ અથવા સકારાત્મક ક્રિયા સૂચવે છે
`.info`	તટસ્થ માહિતીપ્રદ ફેરફાર અથવા ક્રિયા સૂચવે છે
`.warning`	એક ચેતવણી સૂચવે છે જેના પર ધ્યાન આપવાની જરૂર પડી શકે છે
`.danger`	ખતરનાક અથવા સંભવિત નકારાત્મક ક્રિયા સૂચવે છે

#	કૉલમ મથાળું	કૉલમ મથાળું	કૉલમ મથાળું
1	કૉલમ સામગ્રી	કૉલમ સામગ્રી	કૉલમ સામગ્રી
2	કૉલમ સામગ્રી	કૉલમ સામગ્રી	કૉલમ સામગ્રી
3	કૉલમ સામગ્રી	કૉલમ સામગ્રી	કૉલમ સામગ્રી
4	કૉલમ સામગ્રી	કૉલમ સામગ્રી	કૉલમ સામગ્રી
5	કૉલમ સામગ્રી	કૉલમ સામગ્રી	કૉલમ સામગ્રી
6	કૉલમ સામગ્રી	કૉલમ સામગ્રી	કૉલમ સામગ્રી
7	કૉલમ સામગ્રી	કૉલમ સામગ્રી	કૉલમ સામગ્રી
8	કૉલમ સામગ્રી	કૉલમ સામગ્રી	કૉલમ સામગ્રી
9	કૉલમ સામગ્રી	કૉલમ સામગ્રી	કૉલમ સામગ્રી

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

સહાયક તકનીકોનો અર્થ પહોંચાડવો

કોષ્ટકની પંક્તિ અથવા વ્યક્તિગત કોષમાં અર્થ ઉમેરવા માટે રંગનો ઉપયોગ માત્ર એક વિઝ્યુઅલ સંકેત પૂરો પાડે છે, જે સહાયક ટેક્નોલોજીના વપરાશકર્તાઓને જણાવવામાં આવશે નહીં - જેમ કે સ્ક્રીન રીડર્સ. ખાતરી કરો કે રંગ દ્વારા સૂચિત માહિતી કાં તો સામગ્રીમાંથી જ સ્પષ્ટ છે (સંબંધિત કોષ્ટક પંક્તિ/કોષમાં દૃશ્યમાન ટેક્સ્ટ), અથવા વૈકલ્પિક માધ્યમો દ્વારા શામેલ કરવામાં આવી છે, જેમ કે .sr-onlyવર્ગ સાથે છુપાયેલ વધારાની ટેક્સ્ટ.

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

નાના ઉપકરણો (768px હેઠળ) પર આડા સ્ક્રોલ કરવા માટે .tableકોઈપણને લપેટીને પ્રતિભાવ કોષ્ટકો બનાવો . .table-responsive768px પહોળા કરતાં મોટી કોઈપણ વસ્તુ પર જોતી વખતે, તમને આ કોષ્ટકોમાં કોઈ તફાવત દેખાશે નહીં.

વર્ટિકલ ક્લિપિંગ/કાપવું

રિસ્પોન્સિવ કોષ્ટકો ઉપયોગ કરે છે overflow-y: hidden, જે કોઈપણ સામગ્રીને ક્લિપ કરે છે જે કોષ્ટકની નીચે અથવા ટોચની ધારની બહાર જાય છે. ખાસ કરીને, આ ડ્રોપડાઉન મેનુ અને અન્ય તૃતીય-પક્ષ વિજેટોને ક્લિપ કરી શકે છે.

ફાયરફોક્સ અને ફીલ્ડસેટ્સ

ફાયરફોક્સમાં કેટલીક અજીબોગરીબ ફીલ્ડસેટ સ્ટાઇલ છે widthજે રિસ્પોન્સિવ ટેબલમાં દખલ કરે છે. આને ફાયરફોક્સ-વિશિષ્ટ હેક વિના ઓવરરાઇડ કરી શકાતું નથી જે અમે બુટસ્ટ્રેપમાં પ્રદાન કરતા નથી :

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

વધુ માહિતી માટે, આ સ્ટેક ઓવરફ્લો જવાબ વાંચો .

#	કોષ્ટકનું મથાળું	કોષ્ટકનું મથાળું	કોષ્ટકનું મથાળું	કોષ્ટકનું મથાળું	કોષ્ટકનું મથાળું	કોષ્ટકનું મથાળું
1	ટેબલ સેલ	ટેબલ સેલ	ટેબલ સેલ	ટેબલ સેલ	ટેબલ સેલ	ટેબલ સેલ
2	ટેબલ સેલ	ટેબલ સેલ	ટેબલ સેલ	ટેબલ સેલ	ટેબલ સેલ	ટેબલ સેલ
3	ટેબલ સેલ	ટેબલ સેલ	ટેબલ સેલ	ટેબલ સેલ	ટેબલ સેલ	ટેબલ સેલ

#	કોષ્ટકનું મથાળું	કોષ્ટકનું મથાળું	કોષ્ટકનું મથાળું	કોષ્ટકનું મથાળું	કોષ્ટકનું મથાળું	કોષ્ટકનું મથાળું
1	ટેબલ સેલ	ટેબલ સેલ	ટેબલ સેલ	ટેબલ સેલ	ટેબલ સેલ	ટેબલ સેલ
2	ટેબલ સેલ	ટેબલ સેલ	ટેબલ સેલ	ટેબલ સેલ	ટેબલ સેલ	ટેબલ સેલ
3	ટેબલ સેલ	ટેબલ સેલ	ટેબલ સેલ	ટેબલ સેલ	ટેબલ સેલ	ટેબલ સેલ

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

મૂળભૂત ઉદાહરણ

વ્યક્તિગત ફોર્મ નિયંત્રણો આપમેળે કેટલીક વૈશ્વિક શૈલી પ્રાપ્ત કરે છે. સાથેના તમામ ટેક્સ્ટ <input>, <textarea>અને <select>તત્વો ડિફૉલ્ટ રૂપે .form-controlસેટ કરેલ છે . શ્રેષ્ઠ અંતર માટે width: 100%;લેબલ્સ અને નિયંત્રણો લપેટી ..form-group

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

ફોર્મ જૂથોને ઇનપુટ જૂથો સાથે મિશ્રિત કરશો નહીં

ફોર્મ જૂથોને સીધા ઇનપુટ જૂથો સાથે મિશ્રિત કરશો નહીં . તેના બદલે, ફોર્મ જૂથની અંદર ઇનપુટ જૂથને માળો.

ઇનલાઇન ફોર્મ

ડાબે સંરેખિત અને ઇનલાઇન-બ્લોક નિયંત્રણો માટે તમારા ફોર્મમાં ઉમેરો .form-inline(જે એ હોવું જરૂરી નથી ). આ ફક્ત વ્યુપોર્ટની અંદરના ફોર્મ્સ પર લાગુ થાય છે જે ઓછામાં ઓછા 768px પહોળા હોય.<form>

કસ્ટમ પહોળાઈની જરૂર પડી શકે છે

width: 100%;બુટસ્ટ્રેપમાં મૂળભૂત રીતે ઇનપુટ્સ અને પસંદગીઓ લાગુ કરવામાં આવી છે. ઇનલાઇન સ્વરૂપોની અંદર, અમે તેને ફરીથી સેટ કરીએ છીએ width: auto;જેથી એક જ લાઇન પર બહુવિધ નિયંત્રણો રહી શકે. તમારા લેઆઉટ પર આધાર રાખીને, વધારાની કસ્ટમ પહોળાઈની જરૂર પડી શકે છે.

હંમેશા લેબલ્સ ઉમેરો

જો તમે દરેક ઇનપુટ માટે લેબલ શામેલ ન કરો તો સ્ક્રીન રીડર્સને તમારા ફોર્મમાં મુશ્કેલી પડશે. આ ઇનલાઇન સ્વરૂપો માટે, તમે .sr-onlyવર્ગનો ઉપયોગ કરીને લેબલ્સ છુપાવી શકો છો. સહાયક તકનીકો માટે લેબલ પ્રદાન કરવાની વધુ વૈકલ્પિક પદ્ધતિઓ છે, જેમ કે aria-label, aria-labelledbyઅથવા titleવિશેષતા. જો આમાંથી કોઈ હાજર ન હોય, તો સ્ક્રીન રીડર્સ placeholderજો હાજર હોય તો એટ્રિબ્યુટનો ઉપયોગ કરવાનો આશરો લઈ શકે છે, પરંતુ નોંધ લો કે placeholderઅન્ય લેબલિંગ પદ્ધતિઓ માટે રિપ્લેસમેન્ટ તરીકે ઉપયોગ કરવાની સલાહ આપવામાં આવતી નથી.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

આડું સ્વરૂપ

ફોર્મમાં ઉમેરીને લેબલ્સ અને ફોર્મ નિયંત્રણોના જૂથોને આડી લેઆઉટમાં ગોઠવવા માટે બુટસ્ટ્રેપના પૂર્વવ્યાખ્યાયિત ગ્રીડ વર્ગોનો ઉપયોગ કરો .form-horizontal(જે એ હોવું જરૂરી નથી <form>). આમ કરવાથી .form-groupગ્રીડ પંક્તિઓ તરીકે વર્તે છે, તેથી ની જરૂર નથી .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

સપોર્ટેડ નિયંત્રણો

ઉદાહરણ ફોર્મ લેઆઉટમાં સપોર્ટેડ પ્રમાણભૂત ફોર્મ નિયંત્રણોના ઉદાહરણો.

ઇનપુટ્સ

સૌથી સામાન્ય ફોર્મ નિયંત્રણ, ટેક્સ્ટ-આધારિત ઇનપુટ ફીલ્ડ. તમામ HTML5 પ્રકારો માટે સમર્થન શામેલ છે: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, અને color.

પ્રકાર ઘોષણા જરૂરી

ઇનપુટ્સ ફક્ત ત્યારે જ સંપૂર્ણ રીતે સ્ટાઈલ કરવામાં આવશે જો તેમની typeયોગ્ય રીતે જાહેરાત કરવામાં આવી હોય.

<input type="text" class="form-control" placeholder="Text input">

ઇનપુટ જૂથો

કોઈપણ ટેક્સ્ટ-આધારિત પહેલાં અને/અથવા પછી સંકલિત ટેક્સ્ટ અથવા બટનો ઉમેરવા માટે <input>, ઇનપુટ જૂથ ઘટક તપાસો .

ટેક્સટેરિયા

ફોર્મ નિયંત્રણ જે ટેક્સ્ટની બહુવિધ લાઇનને સપોર્ટ કરે છે. rowsઆવશ્યકતા મુજબ વિશેષતા બદલો .

<textarea class="form-control" rows="3"></textarea>

ચેકબોક્સ અને રેડિયો

ચેકબોક્સ સૂચિમાં એક અથવા અનેક વિકલ્પો પસંદ કરવા માટે છે, જ્યારે રેડિયો ઘણામાંથી એક વિકલ્પ પસંદ કરવા માટે છે.

અક્ષમ કરેલ ચેકબોક્સ અને રેડિયો સમર્થિત છે, પરંતુ માતાપિતાના હોવર પર "મંજૂર નથી" કર્સર પ્રદાન કરવા માટે , તમારે વર્ગને માતાપિતામાં <label>ઉમેરવાની જરૂર પડશે , , , અથવા ..disabled.radio.radio-inline.checkbox.checkbox-inline

ડિફૉલ્ટ (સ્ટૅક્ડ)

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

ઇનલાઇન ચેકબોક્સ અને રેડિયો

સમાન લાઇન પર દેખાતા નિયંત્રણો માટે ચેકબોક્સ અથવા રેડિયોની શ્રેણી પર .checkbox-inlineઅથવા વર્ગોનો ઉપયોગ કરો ..radio-inline

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

લેબલ ટેક્સ્ટ વિના ચેકબોક્સ અને રેડિયો

જો તમારી પાસે ની અંદર કોઈ ટેક્સ્ટ ન હોય તો <label>, ઇનપુટ તમારી અપેક્ષા મુજબ સ્થિત થયેલ છે. હાલમાં માત્ર બિન-ઇનલાઇન ચેકબોક્સ અને રેડિયો પર જ કામ કરે છે. સહાયક તકનીકો (ઉદાહરણ તરીકે, ઉપયોગ કરીને aria-label) માટે હજુ પણ અમુક સ્વરૂપનું લેબલ પ્રદાન કરવાનું યાદ રાખો.

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

પસંદ કરે છે

border-radiusનોંધ કરો કે ઘણા મૂળ પસંદગીના મેનુઓ-જેમ કે સફારી અને ક્રોમમાં-માં ગોળાકાર ખૂણાઓ હોય છે જેને ગુણધર્મો દ્વારા સુધારી શકાતા નથી .

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select>વિશેષતા સાથેના નિયંત્રણો માટે multiple, બહુવિધ વિકલ્પો મૂળભૂત રીતે બતાવવામાં આવે છે.

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

સ્થિર નિયંત્રણ

જ્યારે તમારે ફોર્મની અંદર ફોર્મ લેબલની બાજુમાં સાદો ટેક્સ્ટ મૂકવાની જરૂર હોય, ત્યારે a .form-control-staticપર વર્ગનો ઉપયોગ કરો <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

ફોકસ સ્ટેટ

અમે કેટલાક ફોર્મ નિયંત્રણો પર ડિફોલ્ટ outlineશૈલીઓ દૂર કરીએ છીએ અને box-shadowતેના સ્થાને એક લાગુ કરીએ છીએ :focus.

ડેમો `:focus`રાજ્ય

ઉપરોક્ત ઉદાહરણ ઇનપુટ અમારા દસ્તાવેજીકરણમાં કસ્ટમ શૈલીઓનો ઉપયોગ :focusકરે છે .form-control.

અપંગ રાજ્ય

disabledવપરાશકર્તાની ક્રિયાપ્રતિક્રિયાઓને રોકવા માટે ઇનપુટ પર બુલિયન વિશેષતા ઉમેરો . અક્ષમ કરેલ ઇનપુટ્સ હળવા દેખાય છે અને not-allowedકર્સર ઉમેરો.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

અક્ષમ ફીલ્ડસેટ્સ

એક સાથે બધા નિયંત્રણોને અક્ષમ disabledકરવા માટે a માં વિશેષતા ઉમેરો .<fieldset><fieldset>

ની લિંક કાર્યક્ષમતા વિશે ચેતવણી`<a>`

ડિફૉલ્ટ રૂપે, બ્રાઉઝર્સ બધા મૂળ સ્વરૂપ નિયંત્રણો ( <input>, <select>અને <button>તત્વો) <fieldset disabled>ને અક્ષમ તરીકે વર્તે છે, તેમના પર કીબોર્ડ અને માઉસ બંને ક્રિયાપ્રતિક્રિયાઓને અટકાવશે. જો કે, જો તમારા ફોર્મમાં <a ... class="btn btn-*">ઘટકોનો પણ સમાવેશ થાય છે, તો તેને ફક્ત ની શૈલી આપવામાં આવશે pointer-events: none. બટનો માટે અક્ષમ સ્થિતિ વિશેના વિભાગમાં નોંધ્યું છે તેમ (અને ખાસ કરીને એન્કર તત્વો માટેના પેટા-વિભાગમાં), આ CSS ગુણધર્મ હજુ પ્રમાણિત નથી અને ઓપેરા 18 અને નીચે, અથવા ઈન્ટરનેટ એક્સપ્લોરર 11માં સંપૂર્ણપણે સમર્થિત નથી, અને જીત્યું કીબોર્ડ વપરાશકર્તાઓને આ લિંક્સને ફોકસ કરવામાં અથવા સક્રિય કરવામાં સક્ષમ થવાથી અટકાવશો નહીં. તેથી સુરક્ષિત રહેવા માટે, આવી લિંક્સને અક્ષમ કરવા માટે કસ્ટમ JavaScript નો ઉપયોગ કરો.

ક્રોસ બ્રાઉઝર સુસંગતતા

જ્યારે બુટસ્ટ્રેપ તમામ બ્રાઉઝર્સમાં આ શૈલીઓ લાગુ કરશે, ત્યારે ઇન્ટરનેટ એક્સપ્લોરર 11 અને નીચેના disabledએટ્રિબ્યુટને સંપૂર્ણપણે સપોર્ટ કરતું નથી <fieldset>. આ બ્રાઉઝર્સમાં ફીલ્ડસેટને અક્ષમ કરવા માટે કસ્ટમ JavaScript નો ઉપયોગ કરો.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

ફક્ત વાંચવાની સ્થિતિ

readonlyઇનપુટના મૂલ્યમાં ફેરફારને રોકવા માટે ઇનપુટ પર બુલિયન વિશેષતા ઉમેરો . ફક્ત વાંચવા માટેના ઇનપુટ્સ હળવા દેખાય છે (જેમ કે અક્ષમ ઇનપુટ્સ), પરંતુ પ્રમાણભૂત કર્સર જાળવી રાખે છે.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

મદદ ટેક્સ્ટ

ફોર્મ નિયંત્રણો માટે બ્લોક લેવલ હેલ્પ ટેક્સ્ટ.

ફોર્મ નિયંત્રણો સાથે સહાય ટેક્સ્ટને સાંકળવું

હેલ્પ ટેક્સ્ટ સ્પષ્ટપણે ફોર્મ કંટ્રોલ સાથે સંકળાયેલું હોવું જોઈએ જે તે લક્ષણનો ઉપયોગ કરવા સંબંધિત છે aria-describedby. આ સુનિશ્ચિત કરશે કે સહાયક તકનીકો - જેમ કે સ્ક્રીન રીડર્સ - જ્યારે વપરાશકર્તા ધ્યાન કેન્દ્રિત કરે છે અથવા નિયંત્રણમાં પ્રવેશ કરે છે ત્યારે આ સહાય ટેક્સ્ટની જાહેરાત કરશે.

<label for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

માન્યતા જણાવે છે

બુટસ્ટ્રેપમાં ફોર્મ નિયંત્રણો પર ભૂલ, ચેતવણી અને સફળતાની સ્થિતિ માટે માન્યતા શૈલીઓનો સમાવેશ થાય છે. ઉપયોગ કરવા માટે, ઉમેરો .has-warning, .has-error, અથવા .has-successપેરેંટ એલિમેન્ટમાં. કોઈપણ .control-label, .form-control, અને .help-blockતે તત્વની અંદર માન્યતા શૈલીઓ પ્રાપ્ત થશે.

સહાયક તકનીકો અને રંગ અંધ વપરાશકર્તાઓને માન્યતા સ્થિતિ પહોંચાડવી

ફોર્મ કંટ્રોલની સ્થિતિ દર્શાવવા માટે આ માન્યતા શૈલીઓનો ઉપયોગ ફક્ત દ્રશ્ય, રંગ-આધારિત સંકેત પૂરો પાડે છે, જે સહાયક તકનીકોના વપરાશકર્તાઓ - જેમ કે સ્ક્રીન રીડર્સ - અથવા રંગ અંધ વપરાશકર્તાઓને પહોંચાડવામાં આવશે નહીં.

ખાતરી કરો કે રાજ્યનો વૈકલ્પિક સંકેત પણ પ્રદાન કરવામાં આવ્યો છે. દાખલા તરીકે, તમે ફોર્મ કંટ્રોલના ટેક્સ્ટમાં જ રાજ્ય વિશેનો સંકેત શામેલ કરી શકો છો <label>(જેમ કે નીચેના કોડ ઉદાહરણમાં છે), ગ્લાયફિકોન.sr-only શામેલ કરી શકો છો ( વર્ગનો ઉપયોગ કરીને યોગ્ય વૈકલ્પિક ટેક્સ્ટ સાથે - ગ્લિફિકોન ઉદાહરણો જુઓ ), અથવા પ્રદાન કરીને વધારાની સહાય ટેક્સ્ટ બ્લોક. ખાસ કરીને સહાયક તકનીકો માટે, અમાન્ય ફોર્મ નિયંત્રણોને પણ aria-invalid="true"વિશેષતા સોંપી શકાય છે.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

વૈકલ્પિક ચિહ્નો સાથે

તમે વૈકલ્પિક પ્રતિસાદ ચિહ્નો પણ ઉમેરી શકો છો .has-feedbackઅને યોગ્ય આયકન ઉમેરી શકો છો.

પ્રતિસાદ ચિહ્નો માત્ર ટેક્સ્ટ <input class="form-control">તત્વો સાથે કામ કરે છે.

ચિહ્નો, લેબલ્સ અને ઇનપુટ જૂથો

લેબલ વિનાના ઇનપુટ્સ માટે અને જમણી બાજુએ એડ-ઓન સાથેના ઇનપુટ જૂથો માટે પ્રતિસાદ આઇકોન્સની મેન્યુઅલ સ્થિતિ જરૂરી છે . ઍક્સેસિબિલિટી કારણોસર તમામ ઇનપુટ્સ માટે લેબલ્સ પ્રદાન કરવા માટે તમને ભારપૂર્વક પ્રોત્સાહિત કરવામાં આવે છે. જો તમે લેબલોને પ્રદર્શિત થતા અટકાવવા માંગતા હો, તો તેમને .sr-onlyવર્ગ સાથે છુપાવો. જો તમારે લેબલ વિના કરવું જ જોઈએ, topતો પ્રતિસાદ આયકનનું મૂલ્ય સમાયોજિત કરો. ઇનપુટ જૂથો માટે, rightતમારા એડનની પહોળાઈના આધારે મૂલ્યને યોગ્ય પિક્સેલ મૂલ્યમાં સમાયોજિત કરો.

આયકનનો અર્થ સહાયક તકનીકો સુધી પહોંચાડવો

એ સુનિશ્ચિત કરવા માટે કે સહાયક તકનીકો - જેમ કે સ્ક્રીન રીડર્સ - આઇકનનો અર્થ યોગ્ય રીતે વ્યક્ત કરે છે, વધારાના છુપાયેલા ટેક્સ્ટનો .sr-onlyવર્ગ સાથે સમાવેશ કરવો જોઈએ અને તે ઉપયોગથી સંબંધિત ફોર્મ નિયંત્રણ સાથે સ્પષ્ટપણે સંકળાયેલું હોવું જોઈએ aria-describedby. વૈકલ્પિક રીતે, ખાતરી કરો કે અર્થ (ઉદાહરણ તરીકે, હકીકત એ છે કે ચોક્કસ ટેક્સ્ટ એન્ટ્રી ફીલ્ડ માટે ચેતવણી છે) અન્ય કોઈ સ્વરૂપમાં અભિવ્યક્ત કરવામાં આવે છે, જેમ કે <label>ફોર્મ નિયંત્રણ સાથે સંકળાયેલ વાસ્તવિક ટેક્સ્ટને બદલવું.

જો કે નીચેના ઉદાહરણો પહેલાથી જ ટેક્સ્ટમાં તેમના સંબંધિત ફોર્મ નિયંત્રણોની માન્યતા સ્થિતિનો ઉલ્લેખ કરે છે <label>, ઉપરોક્ત તકનીક ( .sr-onlyટેક્સ્ટ અને aria-describedby) નો ઉપયોગ દૃષ્ટાંતરૂપ હેતુઓ માટે કરવામાં આવ્યો છે.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

આડા અને ઇનલાઇન સ્વરૂપોમાં વૈકલ્પિક ચિહ્નો

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

`.sr-only`છુપાયેલા લેબલ્સ સાથે વૈકલ્પિક ચિહ્નો

જો તમે .sr-onlyફોર્મ કંટ્રોલને છુપાવવા માટે ક્લાસનો ઉપયોગ કરો છો <label>(અન્ય લેબલિંગ વિકલ્પોનો ઉપયોગ કરવાને બદલે, જેમ કે aria-labelવિશેષતા), તો બુટસ્ટ્રેપ એક વખત આઇકન ઉમેરાયા પછી તેની સ્થિતિને આપમેળે સમાયોજિત કરશે.

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

માપ બદલવાનું નિયંત્રણ કરો

જેવા વર્ગોનો ઉપયોગ કરીને ઊંચાઈ સેટ કરો .input-lgઅને ગ્રીડ કૉલમ વર્ગોનો ઉપયોગ કરીને પહોળાઈ સેટ કરો .col-lg-*.

ઊંચાઈ માપન

બટનના કદ સાથે મેળ ખાતા ઊંચા અથવા ટૂંકા ફોર્મ નિયંત્રણો બનાવો.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

આડું ફોર્મ જૂથ કદ

અથવા .form-horizontalઉમેરીને અંદર ઝડપથી માપ લેબલ્સ અને ફોર્મ નિયંત્રણો ..form-group-lg.form-group-sm

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

કૉલમ કદ બદલવાનું

ઇચ્છિત પહોળાઈને સરળતાથી લાગુ કરવા માટે ગ્રીડ કૉલમ અથવા કોઈપણ કસ્ટમ પેરેંટ એલિમેન્ટમાં ઇનપુટ્સ લપેટી.

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

બટન ટૅગ્સ

<a>, <button>, અથવા <input>તત્વ પર બટન વર્ગોનો ઉપયોગ કરો .

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

સંદર્ભ-વિશિષ્ટ ઉપયોગ

<a>જ્યારે બટન વર્ગો અને તત્વોનો ઉપયોગ કરી શકાય <button>છે, ત્યારે ફક્ત <button>ઘટકોને જ અમારા nav અને navbar ઘટકોમાં સપોર્ટ કરવામાં આવે છે.

લિંક્સ બટન તરીકે કામ કરે છે

જો <a>તત્વોનો ઉપયોગ બટનો તરીકે કાર્ય કરવા માટે કરવામાં આવે છે - વર્તમાન પૃષ્ઠની અંદરના અન્ય દસ્તાવેજ અથવા વિભાગમાં નેવિગેટ કરવાને બદલે - ઇન-પેજ કાર્યક્ષમતાને ટ્રિગર કરે છે - તો તેમને પણ યોગ્ય આપવું જોઈએ role="button".

ક્રોસ-બ્રાઉઝર રેન્ડરિંગ

શ્રેષ્ઠ પ્રેક્ટિસ તરીકે, જ્યારે પણ શક્ય હોય ત્યારે ક્રોસ-બ્રાઉઝર રેન્ડરિંગને સુનિશ્ચિત કરવા માટે અમે ઘટકનો ઉપયોગ કરવાની ખૂબ ભલામણ કરીએ છીએ .<button>

અન્ય બાબતોમાં, ફાયરફોક્સ <30 માં એક બગ છે જે અમને -આધારિત બટનો સેટ કરવાથી અટકાવે line-heightછે <input>, જેના કારણે તે ફાયરફોક્સ પરના અન્ય બટનોની ઊંચાઈ સાથે બરાબર મેળ ખાતા નથી.

વિકલ્પો

ઝડપથી શૈલીયુક્ત બટન બનાવવા માટે કોઈપણ ઉપલબ્ધ બટન વર્ગોનો ઉપયોગ કરો.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

સહાયક તકનીકોનો અર્થ પહોંચાડવો

બટનમાં અર્થ ઉમેરવા માટે રંગનો ઉપયોગ કરવાથી માત્ર એક વિઝ્યુઅલ સંકેત મળે છે, જે સહાયક ટેક્નોલોજીના વપરાશકર્તાઓને જણાવવામાં આવશે નહીં - જેમ કે સ્ક્રીન રીડર્સ. ખાતરી કરો કે રંગ દ્વારા સૂચિત માહિતી કાં તો સામગ્રીમાંથી જ સ્પષ્ટ છે (બટનનું દૃશ્યમાન ટેક્સ્ટ), અથવા વૈકલ્પિક માધ્યમો દ્વારા શામેલ છે, જેમ કે .sr-onlyવર્ગ સાથે છુપાયેલ વધારાની ટેક્સ્ટ.

માપો

ફેન્સી મોટા કે નાના બટનો? .btn-lg, .btn-sm, અથવા .btn-xsવધારાના કદ માટે ઉમેરો .

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

બ્લોક લેવલ બટનો બનાવો—જે પેરેન્ટની સંપૂર્ણ પહોળાઈ સુધી ફેલાયેલા હોય— ઉમેરીને .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

સક્રિય સ્થિતિ

જ્યારે સક્રિય હોય ત્યારે બટનો દબાવેલા દેખાશે (ઘાટા પૃષ્ઠભૂમિ, ઘાટા કિનારી અને ઇનસેટ શેડો સાથે). તત્વો માટે <button>, આ દ્વારા કરવામાં આવે છે :active. <a>તત્વો માટે , તે સાથે થાય છે .active. જો કે, જો તમારે સક્રિય સ્થિતિને પ્રોગ્રામેટિકલી નકલ કરવાની જરૂર હોય તો તમે s .activeપર ઉપયોગ કરી શકો છો <button>(અને એટ્રિબ્યુટ શામેલ કરો ).aria-pressed="true"

બટન તત્વ

ઉમેરવાની જરૂર નથી :activeકારણ કે તે એક સ્યુડો-ક્લાસ છે, પરંતુ જો તમારે સમાન દેખાવને દબાણ કરવાની જરૂર હોય, તો આગળ વધો અને ઉમેરો .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

એન્કર તત્વ

.activeવર્ગને <a>બટનોમાં ઉમેરો .

પ્રાથમિક લિંક લિંક

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

અપંગ રાજ્ય

બટનોને સાથે પાછું ઝાંખું કરીને તેને ક્લિક ન કરી શકાય તેવું બનાવો opacity.

બટન તત્વ

બટનોમાં disabledવિશેષતા ઉમેરો .<button>

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

ક્રોસ બ્રાઉઝર સુસંગતતા

જો તમે disableda , Internet Explorer 9 અને નીચેની વિશેષતા ઉમેરશો તો <button>ટેક્સ્ટ ગ્રે રેન્ડર થશે જે અમે ઠીક કરી શકતા નથી.

એન્કર તત્વ

.disabledવર્ગને <a>બટનોમાં ઉમેરો .

પ્રાથમિક લિંક લિંક

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

અમે .disabledઅહીં ઉપયોગિતા વર્ગ તરીકે ઉપયોગ કરીએ છીએ, સામાન્ય .activeવર્ગની જેમ, તેથી કોઈ ઉપસર્ગની જરૂર નથી.

લિંક કાર્યક્ષમતા ચેતવણી

આ વર્ગ s pointer-events: noneની લિંક કાર્યક્ષમતાને નિષ્ક્રિય કરવાનો પ્રયાસ કરવા માટે ઉપયોગ કરે છે <a>, પરંતુ તે CSS ગુણધર્મ હજી પ્રમાણિત નથી અને તે ઓપેરા 18 અને નીચે, અથવા ઇન્ટરનેટ એક્સ્પ્લોરર 11 માં સંપૂર્ણપણે સમર્થિત નથી. વધુમાં, બ્રાઉઝર્સમાં પણ જે સપોર્ટ કરે છે pointer-events: none, કીબોર્ડ નેવિગેશન અપ્રભાવિત રહે છે, મતલબ કે દેખાતા કીબોર્ડ વપરાશકર્તાઓ અને સહાયક તકનીકોના વપરાશકર્તાઓ હજી પણ આ લિંક્સને સક્રિય કરવામાં સક્ષમ હશે. તેથી સુરક્ષિત રહેવા માટે, આવી લિંક્સને અક્ષમ કરવા માટે કસ્ટમ JavaScript નો ઉપયોગ કરો.

પ્રતિભાવ છબીઓ

.img-responsiveબુટસ્ટ્રેપ 3 માંની છબીઓને વર્ગના ઉમેરા દ્વારા પ્રતિભાવ-મૈત્રીપૂર્ણ બનાવી શકાય છે . max-width: 100%;આ , height: auto;અને ઇમેજને લાગુ પડે display: block;છે જેથી કરીને તે પિતૃ તત્વને સરસ રીતે માપી શકે.

.img-responsiveવર્ગનો ઉપયોગ કરતી છબીઓને કેન્દ્રમાં રાખવા માટે, .center-blockતેના બદલે ઉપયોગ કરો .text-center. ઉપયોગ વિશે વધુ વિગતો માટે સહાયક વર્ગો વિભાગ જુઓ.center-block .

SVG છબીઓ અને IE 8-10

ઈન્ટરનેટ એક્સપ્લોરર 8-10 માં, સાથેની SVG ઈમેજો .img-responsiveઅપ્રમાણસર કદની છે. આને ઠીક કરવા માટે, width: 100% \9;જ્યાં જરૂરી હોય ત્યાં ઉમેરો. બુટસ્ટ્રેપ આને આપમેળે લાગુ કરતું નથી કારણ કે તે અન્ય ઇમેજ ફોર્મેટમાં જટિલતાઓનું કારણ બને છે.

<img src="..." class="img-responsive" alt="Responsive image">

છબી આકાર

<img>કોઈપણ પ્રોજેક્ટમાં ઈમેજીસને સરળતાથી સ્ટાઇલ કરવા માટે એલિમેન્ટમાં વર્ગો ઉમેરો .

ક્રોસ બ્રાઉઝર સુસંગતતા

ધ્યાનમાં રાખો કે Internet Explorer 8 માં ગોળાકાર ખૂણાઓ માટે સપોર્ટનો અભાવ છે.

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

સંદર્ભિત રંગો

મુઠ્ઠીભર ભાર ઉપયોગિતા વર્ગો સાથે રંગ દ્વારા અર્થ જણાવો. આ લિંક્સ પર પણ લાગુ થઈ શકે છે અને અમારી ડિફોલ્ટ લિંક શૈલીઓની જેમ જ હોવર પર અંધારું થઈ જશે.

ફ્યુસ ડેપિબસ, ટેલસ એસી કર્સસ કોમોડો, ટોર્ટર મૌરીસ નિભ.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

વિશિષ્ટતા સાથે વ્યવહાર

કેટલીકવાર અન્ય પસંદગીકારની વિશિષ્ટતાને કારણે ભાર વર્ગો લાગુ કરી શકાતા નથી. <span>મોટા ભાગના કિસ્સાઓમાં, એક પર્યાપ્ત ઉકેલ એ છે કે તમારા ટેક્સ્ટને વર્ગ સાથે લપેટી લો .

સહાયક તકનીકોનો અર્થ પહોંચાડવો

અર્થ ઉમેરવા માટે રંગનો ઉપયોગ કરવાથી માત્ર એક વિઝ્યુઅલ સંકેત મળે છે, જે સહાયક ટેક્નોલોજીના વપરાશકર્તાઓ સુધી પહોંચાડવામાં આવશે નહીં - જેમ કે સ્ક્રીન રીડર્સ. ખાતરી કરો કે રંગ દ્વારા સૂચિત માહિતી કાં તો સામગ્રીમાંથી જ સ્પષ્ટ છે (સંદર્ભીય રંગોનો ઉપયોગ ફક્ત ટેક્સ્ટ/માર્કઅપમાં પહેલેથી જ હાજર હોય તેવા અર્થને મજબૂત કરવા માટે કરવામાં આવે છે), અથવા વૈકલ્પિક માધ્યમો દ્વારા શામેલ કરવામાં આવે છે, જેમ કે .sr-onlyવર્ગ સાથે છુપાયેલ વધારાની ટેક્સ્ટ .

સંદર્ભિત પૃષ્ઠભૂમિ

સંદર્ભિત ટેક્સ્ટ રંગ વર્ગોની જેમ, કોઈપણ સંદર્ભિત વર્ગમાં તત્વની પૃષ્ઠભૂમિને સરળતાથી સેટ કરો. એન્કર ઘટકો ટેક્સ્ટ વર્ગોની જેમ હોવર પર ઘાટા થઈ જશે.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

વિશિષ્ટતા સાથે વ્યવહાર

કેટલીકવાર અન્ય પસંદગીકારની વિશિષ્ટતાને કારણે સંદર્ભિત પૃષ્ઠભૂમિ વર્ગો લાગુ કરી શકાતા નથી. <div>કેટલાક કિસ્સાઓમાં, તમારા તત્વની સામગ્રીને વર્ગ સાથે લપેટી લેવાનો પૂરતો ઉપાય છે .

સહાયક તકનીકોનો અર્થ પહોંચાડવો

સંદર્ભિત રંગોની જેમ , ખાતરી કરો કે રંગ દ્વારા અભિવ્યક્ત થયેલ કોઈપણ અર્થ પણ એવા ફોર્મેટમાં વ્યક્ત કરવામાં આવે છે જે સંપૂર્ણ રીતે પ્રસ્તુતિકરણાત્મક નથી.

ક્લોઝ આઇકન

મોડલ અને ચેતવણીઓ જેવી સામગ્રીને કાઢી નાખવા માટે સામાન્ય બંધ આયકનનો ઉપયોગ કરો.

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

કેરેટ્સ

ડ્રોપડાઉન કાર્યક્ષમતા અને દિશા સૂચવવા માટે કેરેટ્સનો ઉપયોગ કરો. નોંધ કરો કે ડિફોલ્ટ કેરેટ ડ્રોપઅપ મેનૂમાં આપમેળે રિવર્સ થશે .

<span class="caret"></span>

ઝડપી ફ્લોટ્સ

એક તત્વને વર્ગ સાથે ડાબી કે જમણી તરફ ફ્લોટ કરો. !importantવિશિષ્ટતા સમસ્યાઓ ટાળવા માટે શામેલ છે. વર્ગોનો ઉપયોગ મિશ્રણ તરીકે પણ થઈ શકે છે.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

કેન્દ્ર સામગ્રી બ્લોક્સ

દ્વારા એક ઘટકને સેટ કરો display: blockઅને કેન્દ્રમાં મૂકો margin. મિક્સિન અને ક્લાસ તરીકે ઉપલબ્ધ છે.

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

ક્લિયરફિક્સ

પેરેંટ એલિમેન્ટમાંfloat ઉમેરીને s સરળતાથી સાફ કરો . નિકોલસ ગેલાઘર દ્વારા લોકપ્રિય બનાવેલ માઇક્રો ક્લિયરફિક્સનો ઉપયોગ કરે છે. મિક્સિન તરીકે પણ વાપરી શકાય છે..clearfix

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

સામગ્રી બતાવવી અને છુપાવવી

અને વર્ગોના ઉપયોગ સાથે એલિમેન્ટને બતાવવા અથવા છુપાવવા માટે દબાણ કરો ( સ્ક્રીન રીડર્સ માટે સહિત ). આ વર્ગો ઝડપી ફ્લોટ્સની જેમ વિશિષ્ટતાના સંઘર્ષને ટાળવા માટે ઉપયોગ કરે છે . તેઓ માત્ર બ્લોક લેવલ ટોગલીંગ માટે જ ઉપલબ્ધ છે. તેઓ મિક્સિન તરીકે પણ વાપરી શકાય છે..show.hidden!important

.hideઉપલબ્ધ છે, પરંતુ તે હંમેશા સ્ક્રીન રીડર્સને અસર કરતું નથી અને v3.0.1 મુજબ નાપસંદ છે. ઉપયોગ કરો .hiddenઅથવા .sr-onlyતેના બદલે.

વધુમાં, .invisibleતત્વની માત્ર દૃશ્યતાને ટૉગલ કરવા માટે ઉપયોગ કરી શકાય છે, એટલે displayકે તેમાં ફેરફાર કરવામાં આવ્યો નથી અને તત્વ હજુ પણ દસ્તાવેજના પ્રવાહને અસર કરી શકે છે.

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

સ્ક્રીન રીડર અને કીબોર્ડ નેવિગેશન સામગ્રી

સાથે સ્ક્રીન રીડર્સ સિવાય તમામ ઉપકરણો પર એક ઘટક છુપાવો .sr-only. જ્યારે તત્વ કેન્દ્રિત હોય ત્યારે તેને ફરીથી બતાવવા માટે .sr-onlyસાથે જોડો (દા.ત. માત્ર-કીબોર્ડ વપરાશકર્તા દ્વારા). ઍક્સેસિબિલિટી શ્રેષ્ઠ પ્રેક્ટિસને.sr-only-focusable અનુસરવા માટે જરૂરી છે . મિશ્રણ તરીકે પણ વાપરી શકાય છે.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

ઇમેજ રિપ્લેસમેન્ટ

.text-hideપૃષ્ઠભૂમિ છબી સાથે ઘટકની ટેક્સ્ટ સામગ્રીને બદલવામાં સહાય માટે વર્ગ અથવા મિક્સિનનો ઉપયોગ કરો .

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

ઝડપી મોબાઇલ-મૈત્રીપૂર્ણ વિકાસ માટે, મીડિયા ક્વેરી દ્વારા ઉપકરણ દ્વારા સામગ્રી બતાવવા અને છુપાવવા માટે આ ઉપયોગિતા વર્ગોનો ઉપયોગ કરો. જ્યારે મુદ્રિત થાય ત્યારે સામગ્રીને ટૉગલ કરવા માટે ઉપયોગિતા વર્ગોનો પણ સમાવેશ થાય છે.

મર્યાદિત ધોરણે આનો ઉપયોગ કરવાનો પ્રયાસ કરો અને સમાન સાઇટના સંપૂર્ણપણે અલગ સંસ્કરણો બનાવવાનું ટાળો. તેના બદલે, દરેક ઉપકરણની પ્રસ્તુતિને પૂરક બનાવવા માટે તેનો ઉપયોગ કરો.

ઉપલબ્ધ વર્ગો

સમગ્ર વ્યૂપોર્ટ બ્રેકપોઇન્ટમાં સામગ્રીને ટોગલ કરવા માટે ઉપલબ્ધ વર્ગોના એક અથવા સંયોજનનો ઉપયોગ કરો.

	વધારાના નાના ઉપકરણોફોન (<768px)	નાના ઉપકરણોટેબ્લેટ્સ (≥768px)	મધ્યમ ઉપકરણોડેસ્કટોપ (≥992px)	મોટા ઉપકરણોડેસ્કટોપ્સ (≥1200px)
`.visible-xs-*`	દૃશ્યમાન	છુપાયેલ	છુપાયેલ	છુપાયેલ
`.visible-sm-*`	છુપાયેલ	દૃશ્યમાન	છુપાયેલ	છુપાયેલ
`.visible-md-*`	છુપાયેલ	છુપાયેલ	દૃશ્યમાન	છુપાયેલ
`.visible-lg-*`	છુપાયેલ	છુપાયેલ	છુપાયેલ	દૃશ્યમાન
`.hidden-xs`	છુપાયેલ	દૃશ્યમાન	દૃશ્યમાન	દૃશ્યમાન
`.hidden-sm`	દૃશ્યમાન	છુપાયેલ	દૃશ્યમાન	દૃશ્યમાન
`.hidden-md`	દૃશ્યમાન	દૃશ્યમાન	છુપાયેલ	દૃશ્યમાન
`.hidden-lg`	દૃશ્યમાન	દૃશ્યમાન	દૃશ્યમાન	છુપાયેલ

v3.2.0 મુજબ, .visible-*-*દરેક બ્રેકપોઇન્ટ માટેના વર્ગો ત્રણ ભિન્નતામાં આવે છે, displayનીચે સૂચિબદ્ધ દરેક CSS પ્રોપર્ટી મૂલ્ય માટે એક.

વર્ગોનું જૂથ	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

તેથી, વધારાની નાની ( xs) સ્ક્રીનો માટે ઉદાહરણ તરીકે, ઉપલબ્ધ .visible-*-*વર્ગો છે: .visible-xs-block, .visible-xs-inline, અને .visible-xs-inline-block.

વર્ગો .visible-xs, .visible-sm, .visible-md, અને .visible-lgતે પણ અસ્તિત્વમાં છે, પરંતુ v3.2.0 મુજબ નાપસંદ કરવામાં આવ્યા છે . તેઓ લગભગ સમકક્ષ છે , સિવાય કે ટૉગલ -સંબંધિત તત્વો .visible-*-blockમાટે વધારાના વિશેષ કેસ સિવાય .<table>

વર્ગો છાપો

રેગ્યુલર રિસ્પોન્સિવ ક્લાસની જેમ, પ્રિન્ટ માટે કન્ટેન્ટ ટૉગલ કરવા માટે આનો ઉપયોગ કરો.

વર્ગો	બ્રાઉઝર	છાપો
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	છુપાયેલ	દૃશ્યમાન
`.hidden-print`	દૃશ્યમાન	છુપાયેલ

વર્ગ .visible-printપણ અસ્તિત્વમાં છે પરંતુ v3.2.0 મુજબ નાપસંદ છે. તે લગભગ સમકક્ષ છે .visible-print-block, સિવાય કે <table>-સંબંધિત તત્વો માટે વધારાના વિશેષ કેસ.

ટેસ્ટ કેસો

રિસ્પોન્સિવ યુટિલિટી ક્લાસને ચકાસવા માટે તમારા બ્રાઉઝરનું કદ બદલો અથવા વિવિધ ઉપકરણો પર લોડ કરો.

આના પર દૃશ્યક્ષમ...

લીલા ચેકમાર્ક્સ સૂચવે છે કે તત્વ તમારા વર્તમાન વ્યુપોર્ટમાં દૃશ્યમાન છે.

વધારાની નાની ✔ x-સ્મોલ પર દૃશ્યમાન

નાના ✔ નાના પર દૃશ્યમાન

મધ્યમ ✔ માધ્યમ પર દૃશ્યમાન

વિશાળ ✔ મોટા પર દૃશ્યમાન

વધારાના નાના અને નાના ✔ x-નાના અને નાના પર દૃશ્યમાન

મધ્યમ અને મોટા ✔ મધ્યમ અને મોટા પર દૃશ્યમાન

વધારાના નાના અને મધ્યમ ✔ x-નાના અને મધ્યમ પર દૃશ્યમાન

નાના અને મોટા ✔ નાના અને મોટા બંને પર દૃશ્યમાન

વધારાના નાના અને મોટા ✔ x-નાના અને મોટા પર દૃશ્યમાન

નાના અને મધ્યમ ✔ નાના અને મધ્યમ પર દૃશ્યમાન

પર છુપાયેલ...

અહીં, લીલા ચેકમાર્ક્સ એ પણ સૂચવે છે કે તત્વ તમારા વર્તમાન વ્યુપોર્ટમાં છુપાયેલ છે.

વધારાની નાની ✔ x-સ્મોલ પર છુપાયેલ

નાના ✔ નાના પર છુપાયેલ

મધ્યમ ✔ માધ્યમ પર છુપાયેલ

વિશાળ ✔ મોટા પર છુપાયેલ

વધારાના નાના અને નાના ✔ x-નાના અને નાના પર છુપાયેલ

મધ્યમ અને મોટા ✔ મધ્યમ અને મોટા પર છુપાયેલ

વધારાના નાના અને મધ્યમ ✔ x-નાના અને મધ્યમ પર છુપાયેલ

નાના અને મોટા ✔ નાના અને મોટા પર છુપાયેલ

વધારાના નાના અને મોટા ✔ x-નાના અને મોટા પર છુપાયેલ

નાના અને મધ્યમ ✔ નાના અને મધ્યમ પર છુપાયેલ

બુટસ્ટ્રેપનું સીએસએસ લેસ પર બનેલ છે, જે સીએસએસ કમ્પાઇલ કરવા માટે વેરિયેબલ્સ, મિક્સિન્સ અને ફંક્શન્સ જેવી વધારાની કાર્યક્ષમતા સાથે પ્રીપ્રોસેસર છે. અમારી કમ્પાઈલ કરેલી CSS ફાઈલોને બદલે સોર્સ લેસ ફાઈલોનો ઉપયોગ કરવા માંગતા લોકો અમે સમગ્ર ફ્રેમવર્કમાં ઉપયોગ કરીએ છીએ તે અસંખ્ય વેરીએબલ અને મિક્સિનનો ઉપયોગ કરી શકે છે.

ગ્રીડ વેરીએબલ્સ અને મિક્સિન્સ ગ્રીડ સિસ્ટમ વિભાગમાં આવરી લેવામાં આવ્યા છે .

બુટસ્ટ્રેપ કમ્પાઇલ કરી રહ્યું છે

બુટસ્ટ્રેપનો ઉપયોગ ઓછામાં ઓછી બે રીતે થઈ શકે છે: કમ્પાઈલ CSS સાથે અથવા સોર્સ લેસ ફાઈલો સાથે. ઓછી ફાઇલોને કમ્પાઇલ કરવા માટે , જરૂરી આદેશો ચલાવવા માટે તમારા વિકાસ વાતાવરણને કેવી રીતે સેટ કરવું તે માટે પ્રારંભ કરવાનું વિભાગનો સંપર્ક કરો .

તૃતીય પક્ષ સંકલન સાધનો બુટસ્ટ્રેપ સાથે કામ કરી શકે છે, પરંતુ તેઓ અમારી મુખ્ય ટીમ દ્વારા સમર્થિત નથી.

ચલો

રંગો, અંતર અથવા ફોન્ટ સ્ટેક્સ જેવા સામાન્ય રીતે ઉપયોગમાં લેવાતા મૂલ્યોને કેન્દ્રિય અને શેર કરવાના માર્ગ તરીકે સમગ્ર પ્રોજેક્ટમાં વેરિયેબલ્સનો ઉપયોગ કરવામાં આવે છે. સંપૂર્ણ વિરામ માટે, કૃપા કરીને કસ્ટમાઇઝર જુઓ .

રંગો

બે રંગ યોજનાઓનો સરળતાથી ઉપયોગ કરો: ગ્રેસ્કેલ અને સિમેન્ટીક. ગ્રેસ્કેલ રંગો સામાન્ય રીતે ઉપયોગમાં લેવાતા કાળા રંગમાં ઝડપી ઍક્સેસ પ્રદાન કરે છે જ્યારે સિમેન્ટીકમાં અર્થપૂર્ણ સંદર્ભ મૂલ્યોને સોંપવામાં આવેલા વિવિધ રંગોનો સમાવેશ થાય છે.

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

આમાંના કોઈપણ કલર વેરિયેબલનો ઉપયોગ કરો અથવા તેને તમારા પ્રોજેક્ટ માટે વધુ અર્થપૂર્ણ ચલો માટે ફરીથી સોંપો.

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

પાલખ

તમારી સાઇટના હાડપિંજરના મુખ્ય ઘટકોને ઝડપથી કસ્ટમાઇઝ કરવા માટે મુઠ્ઠીભર ચલો.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

લિંક્સ

ફક્ત એક મૂલ્ય સાથે યોગ્ય રંગ સાથે તમારી લિંક્સને સરળતાથી સ્ટાઇલ કરો.

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

નોંધ કરો કે @link-hover-colorજમણા હોવર રંગને આપમેળે બનાવવા માટે ફંક્શનનો ઉપયોગ કરે છે, ઓછામાંથી અન્ય એક અદ્ભુત સાધન. તમે darken, lighten, saturate, અને નો ઉપયોગ કરી શકો છો desaturate.

ટાઇપોગ્રાફી

થોડા ઝડપી ચલો સાથે સરળતાથી તમારો ટાઇપફેસ, ટેક્સ્ટનું કદ, અગ્રણી અને વધુ સેટ કરો. બુટસ્ટ્રેપ આનો ઉપયોગ સરળ ટાઇપોગ્રાફિક મિશ્રણ પ્રદાન કરવા માટે પણ કરે છે.

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

ચિહ્નો

તમારા ચિહ્નોના સ્થાન અને ફાઇલનામને કસ્ટમાઇઝ કરવા માટેના બે ઝડપી ચલો.

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

ઘટકો

સમગ્ર બુટસ્ટ્રેપમાં ઘટકો સામાન્ય મૂલ્યો સેટ કરવા માટે કેટલાક મૂળભૂત ચલોનો ઉપયોગ કરે છે. અહીં સૌથી વધુ ઉપયોગમાં લેવાતા છે.

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

વિક્રેતા મિશ્રણ

તમારા કમ્પાઈલ CSSમાં તમામ સંબંધિત વિક્રેતા ઉપસર્ગોને સામેલ કરીને બહુવિધ બ્રાઉઝર્સને સમર્થન આપવા માટે વેન્ડર મિક્સિન્સ એ મિક્સિન છે.

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

તમારા ઘટકોના બોક્સ મોડેલને સિંગલ મિક્સિન સાથે રીસેટ કરો. સંદર્ભ માટે, Mozilla તરફથી આ મદદરૂપ લેખ જુઓ .

ઑટોપ્રીફિક્સરની રજૂઆત સાથે v3.2.0 મુજબ મિક્સિનને નાપસંદ કરવામાં આવ્યું છે. પાછળની-સુસંગતતાને સાચવવા માટે, બુટસ્ટ્રેપ v4 સુધી બુટસ્ટ્રેપ આંતરિક રીતે મિક્સિનનો ઉપયોગ કરવાનું ચાલુ રાખશે.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

ગોળાકાર ખૂણા

આજે બધા આધુનિક બ્રાઉઝર્સ બિન-ઉપસર્ગ border-radiusમિલકતને સમર્થન આપે છે. જેમ કે, ત્યાં કોઈ .border-radius()મિક્સિન નથી, પરંતુ બુટસ્ટ્રેપમાં ઑબ્જેક્ટની ચોક્કસ બાજુ પર બે ખૂણાઓને ઝડપથી ગોળાકાર કરવા માટે શૉર્ટકટ્સ શામેલ છે.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

બોક્સ (ડ્રોપ) પડછાયાઓ

જો તમારા લક્ષ્ય પ્રેક્ષકો નવીનતમ અને શ્રેષ્ઠ બ્રાઉઝર્સ અને ઉપકરણોનો ઉપયોગ કરી રહ્યાં છે, તો ખાતરી કરો કે ફક્ત box-shadowતેની પોતાની મિલકતનો ઉપયોગ કરો. જો તમને જૂના Android (pre-v4) અને iOS ઉપકરણો (પ્રી-iOS 5) માટે સમર્થનની જરૂર હોય, તો જરૂરી ઉપસર્ગ પસંદ કરવા માટે નાપસંદ મિક્સિનનો ઉપયોગ કરો.-webkit

v3.1.0 મુજબ મિક્સિનને નાપસંદ કરવામાં આવ્યું છે, કારણ કે બુટસ્ટ્રેપ સ્ટાન્ડર્ડ પ્રોપર્ટીને સપોર્ટ કરતા નથી તેવા જૂના પ્લેટફોર્મને સત્તાવાર રીતે સમર્થન આપતું નથી. પાછળની-સુસંગતતાને સાચવવા માટે, બુટસ્ટ્રેપ v4 સુધી બુટસ્ટ્રેપ આંતરિક રીતે મિક્સિનનો ઉપયોગ કરવાનું ચાલુ રાખશે.

તમારા બૉક્સના પડછાયાઓમાં રંગોનો ઉપયોગ કરવાનું સુનિશ્ચિત કરો rgba()જેથી તેઓ બેકગ્રાઉન્ડ સાથે શક્ય તેટલું એકીકૃત રીતે ભળી જાય.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

સંક્રમણો

લવચીકતા માટે બહુવિધ મિશ્રણ. એક સાથે તમામ સંક્રમણ માહિતી સેટ કરો અથવા જરૂર મુજબ અલગ વિલંબ અને અવધિનો ઉલ્લેખ કરો.

ઑટોપ્રીફિક્સરની રજૂઆત સાથે, v3.2.0 મુજબ મિક્સિનને નાપસંદ કરવામાં આવે છે. પાછળની-સુસંગતતાને સાચવવા માટે, બુટસ્ટ્રેપ v4 સુધી બુટસ્ટ્રેપ આંતરિક રીતે મિક્સિનનો ઉપયોગ કરવાનું ચાલુ રાખશે.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

પરિવર્તનો

કોઈપણ ઑબ્જેક્ટને ફેરવો, સ્કેલ કરો, અનુવાદ કરો (ખસેડો), અથવા ત્રાંસી કરો.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

એનિમેશન

એક ઘોષણામાં CSS3 ની તમામ એનિમેશન ગુણધર્મોનો ઉપયોગ કરવા માટે એક જ મિક્સિન અને વ્યક્તિગત ગુણધર્મો માટે અન્ય મિક્સિન.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

અસ્પષ્ટતા

બધા બ્રાઉઝર્સ માટે અસ્પષ્ટતા સેટ કરો અને filterIE8 માટે ફોલબેક પ્રદાન કરો.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

પ્લેસહોલ્ડર ટેક્સ્ટ

દરેક ક્ષેત્રમાં ફોર્મ નિયંત્રણો માટે સંદર્ભ પ્રદાન કરો.

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

કૉલમ

એક તત્વની અંદર CSS દ્વારા કૉલમ જનરેટ કરો.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

ગ્રેડિયન્ટ્સ

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

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

તમે પ્રમાણભૂત બે-રંગ, રેખીય ઢાળનો કોણ પણ સ્પષ્ટ કરી શકો છો:

#gradient > .directional(#333; #000; 45deg);

જો તમને બાર્બર-સ્ટ્રાઇપ સ્ટાઇલ ઢાળની જરૂર હોય, તો તે પણ સરળ છે. ફક્ત એક રંગનો ઉલ્લેખ કરો અને અમે અર્ધપારદર્શક સફેદ પટ્ટીને ઓવરલે કરીશું.

#gradient > .striped(#333; 45deg);

પહેલા ઉપર અને તેના બદલે ત્રણ રંગોનો ઉપયોગ કરો. પ્રથમ રંગ, બીજો રંગ, બીજા રંગનો રંગ સ્ટોપ (25% જેવો ટકાવારી મૂલ્ય), અને ત્રીજો રંગ આ મિશ્રણો સાથે સેટ કરો:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

હેડ અપ! જો તમારે ક્યારેય ઢાળ દૂર કરવાની જરૂર હોય, તો filterતમે ઉમેરેલ કોઈપણ IE-વિશિષ્ટ દૂર કરવાની ખાતરી કરો. .reset-filter()તમે તેની સાથે મિક્સિનનો ઉપયોગ કરીને તે કરી શકો છો background-image: none;.

ઉપયોગિતા મિશ્રણ

યુટિલિટી મિક્સિન્સ એ મિક્સિન છે જે ચોક્કસ ધ્યેય અથવા કાર્યને હાંસલ કરવા માટે અન્યથા અસંબંધિત CSS ગુણધર્મોને જોડે છે.

ક્લિયરફિક્સ

class="clearfix"કોઈપણ તત્વ ઉમેરવાનું ભૂલી જાઓ અને તેના બદલે .clearfix()જ્યાં યોગ્ય હોય ત્યાં મિક્સિન ઉમેરો. નિકોલસ ગેલાઘરના માઇક્રો ક્લિયરફિક્સનો ઉપયોગ કરે છે .

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

આડું કેન્દ્રીકરણ

કોઈપણ તત્વને તેના માતાપિતાની અંદર ઝડપથી કેન્દ્રિત કરો. જરૂરી છે widthઅથવા max-widthસેટ કરવાની છે.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

કદ બદલવા માટે મદદગારો

ઑબ્જેક્ટના પરિમાણોને વધુ સરળતાથી સ્પષ્ટ કરો.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

માપ બદલી શકાય તેવા ટેક્સ્ટ વિસ્તારો

કોઈપણ ટેક્સ્ટેરિયા અથવા કોઈપણ અન્ય ઘટક માટે માપ બદલવાના વિકલ્પોને સરળતાથી ગોઠવો. સામાન્ય બ્રાઉઝર વર્તન ( both) માટે ડિફોલ્ટ.

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

કાપવામાં આવેલ ટેક્સ્ટ

સિંગલ મિક્સિન વડે લંબગોળ વડે ટેક્સ્ટને સરળતાથી કાપી નાખો. તત્વ હોવું blockઅથવા inline-blockસ્તર જરૂરી છે.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

રેટિના છબીઓ

બે ઇમેજ પાથ અને @1x ઇમેજના પરિમાણોનો ઉલ્લેખ કરો અને બુટસ્ટ્રેપ @2x મીડિયા ક્વેરી પ્રદાન કરશે. જો તમારી પાસે સેવા આપવા માટે ઘણી છબીઓ છે, તો એક મીડિયા ક્વેરી માં તમારી રેટિના ઇમેજ CSS મેન્યુઅલી લખવાનું વિચારો.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

જ્યારે બુટસ્ટ્રેપ ઓછા પર બનેલ છે, ત્યારે તેની પાસે સત્તાવાર Sass પોર્ટ પણ છે . અમે તેને એક અલગ GitHub રિપોઝીટરીમાં જાળવીએ છીએ અને રૂપાંતર સ્ક્રિપ્ટ સાથે અપડેટ્સને હેન્ડલ કરીએ છીએ.

શું સમાવવામાં આવેલ છે

સાસ પોર્ટ પાસે એક અલગ રેપો હોવાથી અને તે થોડા અલગ પ્રેક્ષકોને સેવા આપે છે, પ્રોજેક્ટની સામગ્રી મુખ્ય બુટસ્ટ્રેપ પ્રોજેક્ટથી ઘણી અલગ છે. આ ખાતરી કરે છે કે Sass પોર્ટ શક્ય તેટલી બધી Sass-આધારિત સિસ્ટમો સાથે સુસંગત છે.

પાથ	વર્ણન
`lib/`	રૂબી રત્ન કોડ (સાસ રૂપરેખાંકન, રેલ્સ અને કંપાસ એકીકરણ)
`tasks/`	કન્વર્ટર સ્ક્રિપ્ટ્સ (અપસ્ટ્રીમ લેસ ટુ સાસ તરફ વળવું)
`test/`	સંકલન પરીક્ષણો
`templates/`	હોકાયંત્ર પેકેજ મેનિફેસ્ટ
`vendor/assets/`	Sass, JavaScript અને ફોન્ટ ફાઇલો
`Rakefile`	આંતરિક કાર્યો, જેમ કે રેક અને કન્વર્ટ

આ ફાઇલોને ક્રિયામાં જોવા માટે Sass પોર્ટના GitHub રિપોઝીટરીની મુલાકાત લો .

સ્થાપન

સાસ માટે બુટસ્ટ્રેપ કેવી રીતે ઇન્સ્ટોલ અને ઉપયોગ કરવો તે અંગેની માહિતી માટે, GitHub રીપોઝીટરી રીડમીનો સંપર્ક કરો . તે સૌથી અદ્યતન સ્રોત છે અને તેમાં રેલ્સ, કંપાસ અને માનક સાસ પ્રોજેક્ટ્સ સાથે ઉપયોગ માટેની માહિતી શામેલ છે.

Sass માટે બુટસ્ટ્રેપ

CSS

ઝાંખી

HTML5 doctype

પહેલા મોબાઈલ

ટાઇપોગ્રાફી અને લિંક્સ

Normalize.css

કન્ટેનર

ગ્રીડ સિસ્ટમ

પરિચય

મીડિયા પ્રશ્નો

ગ્રીડ વિકલ્પો

ઉદાહરણ: સ્ટેક્ડ-ટુ-હોરીઝોન્ટલ

ઉદાહરણ: પ્રવાહી કન્ટેનર

ઉદાહરણ: મોબાઇલ અને ડેસ્કટોપ

ઉદાહરણ: મોબાઇલ, ટેબ્લેટ, ડેસ્કટોપ

ઉદાહરણ: કૉલમ રેપિંગ

રિસ્પોન્સિવ કૉલમ ફરીથી સેટ કરે છે

ગટર દૂર કરો

કૉલમ ઑફસેટિંગ

નેસ્ટિંગ કૉલમ

કૉલમ ક્રમ

ઓછા મિશ્રણ અને ચલો

ચલો

મિક્સિન્સ

ઉદાહરણ ઉપયોગ

ટાઇપોગ્રાફી

હેડિંગ

h1. બુટસ્ટ્રેપ હેડિંગ

h2. બુટસ્ટ્રેપ હેડિંગ

h3. બુટસ્ટ્રેપ હેડિંગ

h4. બુટસ્ટ્રેપ હેડિંગ

h5. બુટસ્ટ્રેપ હેડિંગ

h6. બુટસ્ટ્રેપ હેડિંગ

h1. બુટસ્ટ્રેપ હેડિંગ સેકન્ડરી ટેક્સ્ટ

h2. બુટસ્ટ્રેપ હેડિંગ સેકન્ડરી ટેક્સ્ટ

h3. બુટસ્ટ્રેપ હેડિંગ સેકન્ડરી ટેક્સ્ટ

h4. બુટસ્ટ્રેપ હેડિંગ સેકન્ડરી ટેક્સ્ટ

h5. બુટસ્ટ્રેપ હેડિંગ સેકન્ડરી ટેક્સ્ટ

h6. બુટસ્ટ્રેપ હેડિંગ સેકન્ડરી ટેક્સ્ટ

શારીરિક નકલ

લીડ બોડી કોપી

લેસ સાથે બિલ્ટ

ઇનલાઇન ટેક્સ્ટ ઘટકો

ચિહ્નિત ટેક્સ્ટ

કાઢી નાખેલ ટેક્સ્ટ

સ્ટ્રાઇકથ્રુ ટેક્સ્ટ

દાખલ કરેલ ટેક્સ્ટ

રેખાંકિત ટેક્સ્ટ

નાનું લખાણ

બોલ્ડ

ત્રાંસી

વૈકલ્પિક તત્વો

સંરેખણ વર્ગો

પરિવર્તન વર્ગો

સંક્ષેપ

મૂળભૂત સંક્ષેપ

આરંભવાદ

સરનામાં

બ્લોકક્વોટ્સ

ડિફૉલ્ટ બ્લોકક્વોટ

બ્લોકક્વોટ વિકલ્પો

સ્ત્રોતનું નામકરણ

વૈકલ્પિક ડિસ્પ્લે

યાદીઓ

અવ્યવસ્થિત

આદેશ આપ્યો

અનસ્ટાઇલ

ઇનલાઇન

વર્ણન

આડું વર્ણન

સ્વતઃ કાપવું

કોડ

ઇનલાઇન

વપરાશકર્તા ઇનપુટ

મૂળભૂત બ્લોક

ચલો

નમૂના આઉટપુટ

કોષ્ટકો

મૂળભૂત ઉદાહરણ

પટ્ટાવાળી પંક્તિઓ

ડેમો `:focus`રાજ્ય

ની લિંક કાર્યક્ષમતા વિશે ચેતવણી`<a>`

`.sr-only`છુપાયેલા લેબલ્સ સાથે વૈકલ્પિક ચિહ્નો