રંગ

થીમ રંગો

અમે રંગ યોજનાઓ જનરેટ કરવા માટે નાની કલર પેલેટ બનાવવા માટે તમામ રંગોના સબસેટનો ઉપયોગ કરીએ છીએ, જે બૂટસ્ટ્રેપની scss/_variables.scssફાઇલમાં સાસ વેરીએબલ્સ અને સાસ મેપ તરીકે પણ ઉપલબ્ધ છે.

આ તમામ રંગો સાસ મેપ તરીકે ઉપલબ્ધ છે $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

આ રંગોને કેવી રીતે સંશોધિત કરવા તે માટે અમારા સાસ નકશા અને લૂપ્સ દસ્તાવેજો તપાસો .

બધા રંગો

scss/_variables.scssબધા બુટસ્ટ્રેપ રંગો સાસ વેરીએબલ અને ફાઇલમાં સાસ મેપ તરીકે ઉપલબ્ધ છે . ફાઈલના કદમાં વધારો ટાળવા માટે, અમે આ દરેક ચલો માટે ટેક્સ્ટ અથવા બેકગ્રાઉન્ડ કલર ક્લાસ બનાવતા નથી. તેના બદલે, અમે થીમ પેલેટ માટે આ રંગોનો સબસેટ પસંદ કરીએ છીએ .

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

સાસ પર નોંધો

Sass પ્રોગ્રામેટિકલી વેરિયેબલ જનરેટ કરી શકતું નથી, તેથી અમે દરેક ટિન્ટ અને શેડ માટે જાતે જ વેરિયેબલ્સ બનાવ્યા છે. અમે મધ્યબિંદુ મૂલ્ય (દા.ત., $blue-500) નો ઉલ્લેખ કરીએ છીએ અને સાસના કલર ફંક્શન દ્વારા અમારા રંગોને ટિન્ટ (હળવા) અથવા શેડ (અંધારું) કરવા માટે કસ્ટમ કલર ફંક્શનનો ઉપયોગ કરીએ છીએ mix().

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

અમારા tint-color()અને shade-color()ફંક્શન્સ mix()અમારા $theme-color-intervalચલની સાથે ઉપયોગ કરે છે, જે અમે ઉત્પન્ન કરીએ છીએ તે દરેક મિશ્રિત રંગ માટે સ્ટેપ્ડ ટકાવારી મૂલ્યનો ઉલ્લેખ કરે છે. સંપૂર્ણ સ્રોત કોડ માટે scss/_functions.scssઅને ફાઇલો જુઓ .scss/_variables.scss

રંગ સાસ નકશા

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

• $colors500અમારા બધા ઉપલબ્ધ આધાર ( ) રંગોની યાદી આપે છે
• $theme-colorsતમામ સિમેન્ટીકલી નામવાળી થીમ રંગોની યાદી આપે છે (નીચે બતાવેલ)
• $graysબધા ટિન્ટ્સ અને ગ્રેના શેડ્સની યાદી આપે છે

ની અંદર scss/_variables.scss, તમને બુટસ્ટ્રેપના કલર વેરિએબલ્સ અને સાસ મેપ મળશે. અહીં $colorsસાસ નકશાનું ઉદાહરણ છે:

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

અન્ય ઘણા ઘટકોમાં તેનો ઉપયોગ કેવી રીતે થાય છે તે અપડેટ કરવા માટે નકશામાં મૂલ્યો ઉમેરો, દૂર કરો અથવા સંશોધિત કરો. કમનસીબે આ સમયે, દરેક ઘટક આ Sass નકશાનો ઉપયોગ કરતું નથી. ભાવિ અપડેટ્સ આમાં સુધારો કરવાનો પ્રયત્ન કરશે. ${color}ત્યાં સુધી, ચલો અને આ સાસ મેપનો ઉપયોગ કરવાની યોજના બનાવો.

ઉદાહરણ

તમે તમારા સાસમાં આનો ઉપયોગ કેવી રીતે કરી શકો તે અહીં છે:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

રંગ મૂલ્યો સેટ કરવા અને તેનો ઉપયોગ કરવા માટે રંગ અને પૃષ્ઠભૂમિ ઉપયોગિતા વર્ગો પણ ઉપલબ્ધ છે .colorbackground-color500

ઉપયોગિતાઓ પેદા કરી રહી છે

v5.1.0 માં ઉમેરાયેલ

બુટસ્ટ્રેપમાં દરેક કલર વેરીએબલ માટે ઉપયોગિતાઓ colorઅને ઉપયોગિતાઓનો સમાવેશ થતો નથી, પરંતુ તમે આને અમારી યુટિલિટી API અને v5.1.0 માં ઉમેરેલા અમારા વિસ્તૃત સાસ નકશા background-colorસાથે જાતે જ જનરેટ કરી શકો છો .

1. શરૂ કરવા માટે, ખાતરી કરો કે તમે અમારા ફંક્શન્સ, વેરિયેબલ્સ, મિક્સિન્સ અને ઉપયોગિતાઓ આયાત કરી છે.
2. map-merge-multiple()નવા નકશામાં બહુવિધ સાસ નકશાઓને ઝડપથી મર્જ કરવા માટે અમારા કાર્યનો ઉપયોગ કરો .
3. {color}-{level}વર્ગના નામ સાથે કોઈપણ ઉપયોગિતાને વિસ્તારવા માટે આ નવા સંયુક્ત નકશાને મર્જ કરો .

.text-purple-500અહીં એક ઉદાહરણ છે જે ઉપરોક્ત પગલાંઓનો ઉપયોગ કરીને ટેક્સ્ટ કલર યુટિલિટીઝ (દા.ત., ) જનરેટ કરે છે.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

.text-{color}-{level}આ દરેક રંગ અને સ્તર માટે નવી ઉપયોગિતાઓ જનરેટ કરશે . તમે કોઈપણ અન્ય ઉપયોગિતા અને મિલકત માટે પણ તે જ કરી શકો છો.