RTL

ኣብ ቡትስትራፕ ኣብ መላእ ኣቀማምጣና፡ ኣካላትናን ዩቲሊቲታትናን ንየማን ናብ ጸጋም ዝጸሓፍ ጽሑፍ ደገፍ ብኸመይ ከም እተኽእል ተማሃር።

ኣብዚ ገጽ

ተላለዩ።

መጀመርታ ምስ ቡትስትራፕ ክትላለዩ ንመክር ብመንገዲ ምጅማር መእተዊ ገጽና ብምንባብ ። ምስ ጎየኻዮ፡ RTL ብኸመይ ከም እተኽእሎ ኣብዚ ምንባብ ቀጽል።

You may also want to read up on the RTLCSS project , ምኽንያቱ ንኣቀራርባና RTL ሓይሊ ስለ ዝህቦ።

ናይ ፈተነ ባህሪ

እቲ ናይ RTL ባህሪ ጌና ፈተነ ዝኾነ ኮይኑ ምናልባት ብመሰረት ግብረ መልሲ ተጠቀምቲ ክምዕብል እዩ። ገለ ነገር ርኢኻ ወይስ ዝሕብር ምምሕያሽ ኣለካ? Open an issue , ርድኢትኩም ክንረክብ ንፈቱ።

ዘድሊ ኤችቲኤምኤል

ኣብ ብቡትስትራፕ ዝሰርሑ ገጻት RTL ንምንቅስቓስ ክልተ ጽኑዓት ረቛሒታት ኣለዉ።

dir="rtl"ኣብ ልዕሊ እቲ <html>ባእታ ተቐሚጡ ።
ኣብቲ ባእታ langከም ፣ ዝኣመሰለ ግቡእ ባህሪ ወስኽ ።lang="ar"<html>

ካብኡ ጀሚርካ ድማ ናይ CSSና RTL ስሪት ከተካትት ከድልየካ እዩ። ንኣብነት፡ ንዝተጠርነፈን ዝተቐነሰን CSS ምስ RTL enabled ቅዲ ጽሑፍ እንሆ፤

<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 ናብ Bootstrap ንምህናጽ እንጥቀመሉ ኣገባብ ክልተ ኣገደስቲ ውሳኔታት ሒዙ ይመጽእ እዩ፡ እዚ ድማ ንCSSና ብኸመይ ከም እንጽሕፎን እንጥቀመሉን ዝጸሉ እዩ፤

መጀመርታ ብፕሮጀክት RTLCSS ክንሃንጾ ወሲንና ። እዚ ካብ LTR ናብ RTL ክንሰጋገር ከለና ለውጥታትን ምግዳፍን ንምምሕዳር ገለ ሓያላት ባህርያት ይህበና። ብተወሳኺ ካብ ሓደ ኮድቤዝ ክልተ ስሪት ቡትስትራፕ ክንሃንጽ የኽእለና።
ካልኣይ፡ ንኣጻብዕ ዝቑጸሩ ኣንፈታዊ ክፍልታት፡ ስነ-መጐታዊ ባህርያት ኣቀራርባ ንምኽታል ዳግማይ ኣስማትናዮም ኣለና። መብዛሕትኹም ድሮ ሳላ ፍሌክስ ዩቲሊቲታትና ምስ ስነ-መጐታዊ ባህርያት ተራኺብኩም ኣለኹም-ንሳቶም ከምን leftዝድግፉን ናይ ኣንፈት ባህርያት rightይትክኡን . እዚ ድማ ነቲ ናይ ክፍሊ ኣስማትን ክብርታትን ብዘይ ዝኾነ ልዕለ-ዋጋ ንLTRን RTLን ዝምጥን ይገብሮ።startend

ንኣብነት ኣብ ክንዲ .ml-3ን ፡ ን margin-leftተጠቐም .ms-3።

ምስ RTL ምስራሕ፣ ብመንገዲ ምንጪና Sass ወይ ዝተጠርነፈ CSS፣ ካብቲ ነባሪ LTRና ግን ብዙሕ ክፍለ የብሉን።

ካብ ምንጪ ምምዕርራይ

When it comes to customization , እቲ ዝምረጽ መንገዲ ንተለዋዋጢ ረቛሒታት፡ ካርታታትን ሚክሲንን ምጥቃም እዩ። እዚ ኣገባብ ን RTL ሓደ ዓይነት ይሰርሕ፣ ዋላ ካብቶም ዝተጠርነፉ ፋይላት ድሕሪ ምምስራሕ ይኹን፣ ሳላ RTLCSS ከመይ ከም ዝሰርሕ .

ብሕታዊ RTL ክብርታት

RTLCSS value directives ብምጥቃም ፣ ንሓደ ተለዋዋጢ ውጽኢት ን 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 Webfontfor LTR ናብ Helvetica Neue Arabicfor RTL ንምቕያር ናይ 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 String Maps , እዚ ጽቡቕ ቅኑዕ እዩ። s ናትካ @importብክላስ ጠቕልሎ፣ ን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 then RTLCSS, ነፍሲ ወከፍ መምረጺ ኣብ CSS ፋይላትካ ብ .ltr, ከምኡ ውን .rtlን RTL ፋይላት ቅድሚኡ ክኸውን እዩ። ሕጂ ንኽልቲኦም ፋይላት ኣብ ሓደ ገጽ ክትጥቀመሎም ትኽእል ኢኻ፣ ከምኡ’ውን ብቐሊሉ .ltrወይ .rtlኣብ ናትካ ናይ ኣካላት መጠቕለሊታት ተጠቒምካ ሓደ ወይ እቲ ካልእ ኣንፈት ክትጥቀም ትኽእል።

ወሰን ጉዳያትን ዝፍለጡ ድሩትነትን

እዚ ኣገባብ እዚ ርዱእ እኳ እንተኾነ፡ በጃኹም ነዞም ዝስዕቡ ኣቓልቦ ሃቡ፤

.ltrከምኡ’ውን ክትቅይር ከለኻ ፡ ብኡ መሰረት ከም እትውስኽን ባህርያት ከም እትውስኽን .rtlኣረጋግጽ ።dirlang
ክልቲኦም ፋይላት ምጽዓን ናይ ብሓቂ ናይ ኣፈጻጽማ ዕንቅፋት ክኸውን ይኽእል እዩ: ገለ ምምሕያሽ ኣብ ግምት ኣእቱ , ምናልባት ድማ ሓደ ካብቶም ፋይላት ብዘይተሓላለኸ ክትጽዕኖም ፈትኑ .
ቅዲታት ምድቃል በዚ መንገዲ form-validation-state()ሚክሲንና ከምቲ ዝተሓሰበሉ ከይሰርሕ ክኽልክሎ እዩ፣ በዚ ኸምዚ ቁሩብ ባዕልኻ ክትቅይሮ ይጠልብ። #31223 ርአ ።

እቲ ናይ እንጀራ መፍለዪ እቲ እንኮ ናይ ገዛእ ርእሱ ፍጹም ሓድሽ ተለዋዋጢ ዝጠልብ ጉዳይ እዩ— ማለት $breadcrumb-divider-flipped—ነባሪ ናብ $breadcrumb-divider.

RTL