આરટીએલ

અમારા લેઆઉટ, ઘટકો અને ઉપયોગિતાઓમાં બુટસ્ટ્રેપમાં જમણે-થી-ડાબે ટેક્સ્ટ માટે સમર્થન કેવી રીતે સક્ષમ કરવું તે જાણો.

આ પૃષ્ઠ પર

પરિચિત થાઓ

અમે અમારા પ્રારંભ પરિચય પૃષ્ઠ દ્વારા વાંચીને પહેલા બુટસ્ટ્રેપથી પરિચિત થવાની ભલામણ કરીએ છીએ . એકવાર તમે તેમાંથી પસાર થઈ જાઓ, RTL કેવી રીતે સક્ષમ કરવું તે માટે અહીં વાંચવાનું ચાલુ રાખો.

તમે RTLCSS પ્રોજેક્ટ પર પણ વાંચવા માગી શકો છો , કારણ કે તે RTL પ્રત્યેના અમારા અભિગમને શક્તિ આપે છે.

પ્રાયોગિક લક્ષણ

RTL સુવિધા હજી પણ પ્રાયોગિક છે અને કદાચ વપરાશકર્તા પ્રતિસાદ અનુસાર વિકસિત થશે. કંઈક જોવા મળ્યું છે અથવા સૂચવવા માટે કોઈ સુધારો છે? એક મુદ્દો ખોલો , અમને તમારી આંતરદૃષ્ટિ મેળવવાનું ગમશે.

જરૂરી HTML

બુટસ્ટ્રેપ-સંચાલિત પૃષ્ઠોમાં RTL સક્ષમ કરવા માટે બે કડક આવશ્યકતાઓ છે.

તત્વ dir="rtl"પર સેટ કરો .<html>
તત્વ પર યોગ્ય langવિશેષતા ઉમેરો, જેમ કે.lang="ar"<html>

ત્યાંથી, તમારે અમારા CSSનું RTL સંસ્કરણ શામેલ કરવું પડશે. ઉદાહરણ તરીકે, RTL સક્ષમ સાથે અમારી કમ્પાઇલ અને મિનિફાઇડ CSS માટેની સ્ટાઇલશીટ અહીં છે:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

સ્ટાર્ટર ટેમ્પલેટ

તમે આ સંશોધિત RTL સ્ટાર્ટર ટેમ્પલેટમાં પ્રતિબિંબિત ઉપરની આવશ્યકતાઓ જોઈ શકો છો.

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

    <title>مرحبا بالعالم!</title>
  </head>
  <body>
    <h1>مرحبا بالعالم!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL ઉદાહરણો

અમારા કેટલાક RTL ઉદાહરણોમાંથી એક સાથે પ્રારંભ કરો .

અભિગમ

બુટસ્ટ્રેપમાં RTL સપોર્ટ બનાવવાનો અમારો અભિગમ બે મહત્વપૂર્ણ નિર્ણયો સાથે આવે છે જે અમે અમારા CSS કેવી રીતે લખીએ છીએ અને તેનો ઉપયોગ કરીએ છીએ તેના પર અસર કરે છે:

પ્રથમ, અમે તેને RTLCSS પ્રોજેક્ટ સાથે બનાવવાનું નક્કી કર્યું . આ અમને LTR થી RTL પર ખસેડતી વખતે ફેરફારો અને ઓવરરાઇડ્સને સંચાલિત કરવા માટે કેટલીક શક્તિશાળી સુવિધાઓ આપે છે. તે અમને એક કોડબેઝમાંથી બુટસ્ટ્રેપના બે વર્ઝન બનાવવાની પણ પરવાનગી આપે છે.
બીજું, અમે લોજિકલ પ્રોપર્ટી અભિગમ અપનાવવા માટે મુઠ્ઠીભર દિશાત્મક વર્ગોનું નામ બદલી નાખ્યું છે. તમારામાંથી મોટાભાગના લોકોએ અમારી ફ્લેક્સ યુટિલિટીઝને આભારી લોજિકલ પ્રોપર્ટીઝ સાથે પહેલેથી જ ક્રિયાપ્રતિક્રિયા કરી છે - તેઓ દિશા ગુણધર્મોને બદલે છે જેમ કે leftઅને rightતરફેણમાં . તે વર્ગના નામો અને મૂલ્યોને કોઈપણ ઓવરહેડ વિના LTR અને RTL માટે યોગ્ય બનાવે છે.startend

ઉદાહરણ તરીકે, .ml-3for ની જગ્યાએ margin-left, ઉપયોગ કરો .ms-3.

RTL સાથે કામ કરવું, અમારા સ્ત્રોત Sass અથવા કમ્પાઇલ કરેલ CSS દ્વારા, જોકે અમારા ડિફોલ્ટ LTRથી ઘણું અલગ ન હોવું જોઈએ.

સ્ત્રોતમાંથી કસ્ટમાઇઝ કરો

જ્યારે કસ્ટમાઇઝેશનની વાત આવે છે , ત્યારે ચલ, નકશા અને મિક્સિનનો લાભ લેવાનો પ્રિફર્ડ રસ્તો છે. આ અભિગમ RTL માટે સમાન રીતે કાર્ય કરે છે, ભલે તે સંકલિત ફાઇલોમાંથી પોસ્ટ-પ્રોસેસ કરેલ હોય, RTLCSS કેવી રીતે કાર્ય કરે છે તેના માટે આભાર .

કસ્ટમ RTL મૂલ્યો

RTLCSS મૂલ્ય નિર્દેશોનો ઉપયોગ કરીને , તમે વેરિયેબલ આઉટપુટને RTL માટે અલગ મૂલ્ય બનાવી શકો છો. $font-weight-boldઉદાહરણ તરીકે, સમગ્ર કોડબેઝ માટે વજન ઘટાડવા માટે , તમે /*rtl: {value}*/વાક્યરચનાનો ઉપયોગ કરી શકો છો:

$font-weight-bold: 700 #{/* rtl:600 */} !default;

જે અમારા ડિફોલ્ટ CSS અને RTL CSS માટે નીચેનાને આઉટપુટ કરશે:

/* bootstrap.css */
dt {
  font-weight: 700 /* rtl:600 */;
}

/* bootstrap.rtl.css */
dt {
  font-weight: 600;
}

વૈકલ્પિક ફોન્ટ સ્ટેક

જો તમે કસ્ટમ ફોન્ટનો ઉપયોગ કરી રહ્યાં હોવ, તો ધ્યાન રાખો કે બધા ફોન્ટ બિન-લેટિન મૂળાક્ષરોને સપોર્ટ કરતા નથી. પાન-યુરોપિયનમાંથી અરબી કુટુંબમાં સ્વિચ કરવા માટે, તમારે /*rtl:insert: {value}*/ફોન્ટ પરિવારોના નામોને સંશોધિત કરવા માટે તમારા ફોન્ટ સ્ટેકમાં ઉપયોગ કરવાની જરૂર પડી શકે છે.

ઉદાહરણ તરીકે, Helvetica Neue WebfontLTR થી Helvetica Neue ArabicRTL પર સ્વિચ કરવા માટે, તમારો Sass કોડ આના જેવો દેખાય છે:

$font-family-sans-serif:
  Helvetica Neue #{"/* rtl:insert:Arabic */"},
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  Arial,
  // Linux
  "Noto Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

એક જ સમયે LTR અને RTL

એક જ પૃષ્ઠ પર LTR અને RTL બંનેની જરૂર છે? RTLCSS સ્ટ્રિંગ નકશા માટે આભાર , આ એકદમ સરળ છે. તમારા @imports ને વર્ગ સાથે લપેટો, અને RTLCSS માટે કસ્ટમ નામ બદલવાનો નિયમ સેટ કરો:

/* rtl:begin:options: {
  "autoRename": true,
  "stringMap":[ {
    "name": "ltr-rtl",
    "priority": 100,
    "search": ["ltr"],
    "replace": ["rtl"],
    "options": {
      "scope": "*",
      "ignoreCase": false
    }
  } ]
} */
.ltr {
  @import "../node_modules/bootstrap/scss/bootstrap";
}
/*rtl:end:options*/

Sass પછી RTLCSS ચલાવ્યા પછી, તમારી CSS ફાઈલોમાંના દરેક પસંદગીકારને .ltr, અને .rtlRTL ફાઈલો માટે પ્રીપેન્ડ કરવામાં આવશે. હવે તમે એક જ પેજ પર બંને ફાઈલોનો ઉપયોગ કરી શકો છો, અને એક અથવા બીજી દિશાનો ઉપયોગ કરવા માટે ફક્ત .ltrતમારા .rtlઘટકોના રેપરનો ઉપયોગ કરી શકો છો.

કિસ્સાઓ અને જાણીતી મર્યાદાઓ

જ્યારે આ અભિગમ સમજી શકાય તેવું છે, કૃપા કરીને નીચેના પર ધ્યાન આપો:

સ્વિચ કરતી વખતે .ltrઅને .rtl, ખાતરી કરો કે તમે ઉમેરો dirઅને તે langમુજબ વિશેષતાઓ.
બંને ફાઇલો લોડ કરવી એ વાસ્તવિક કામગીરીની અડચણ હોઈ શકે છે: કેટલાક ઑપ્ટિમાઇઝેશનને ધ્યાનમાં લો , અને કદાચ તેમાંથી એક ફાઇલને અસુમેળ રીતે લોડ કરવાનો પ્રયાસ કરો .
form-validation-state()નેસ્ટિંગ શૈલીઓ આ રીતે અમારા મિક્સિનને હેતુ મુજબ કામ કરતા અટકાવશે , આથી તમારે તેને જાતે જ થોડો બદલવો પડશે. જુઓ #31223 .

બ્રેડક્રમ્બ સેપરેટર એ એકમાત્ર કેસ છે જેને તેના પોતાના તદ્દન નવા વેરીએબલની જરૂર હોય $breadcrumb-divider-flippedછે — એટલે કે — ડિફોલ્ટિંગ $breadcrumb-divider.