މައިގަނޑު ކޮންޓެންޓަށް ސްކިޕް ކުރާށެވެ ޑޮކްސް ނެވިގޭޝަނަށް ސްކިޕް ކުރާށެވެ
in English

އާރުޓީއެލް އެވެ

އަޅުގަނޑުމެންގެ ލޭއައުޓް، ކޮމްޕޯނެންޓް، އަދި ޔުޓިލިޓީސް ހުރަސްކޮށް ބޫޓްސްޓްރެޕްގައި ކަނާތުން ވާތް ފަރާތަށް ލިޔުމަށް ސަޕޯޓް އެނެބަލް ކުރާނެ ގޮތް ދަސްކުރައްވާށެވެ.

މި ޞަފްޙާގައެވެ

އަހުލުވެރިވާށެވެ

އަޅުގަނޑުމެން ލަފާދެނީ ފުރަތަމަ ބޫޓްސްޓްރެޕް އަށް އަހުލުވެރިވުމަށް އަޅުގަނޑުމެންގެ ގެޓިންގ ސްޓާރޓެޑް އިންޓްރޮޑަކްޝަން ޕޭޖް ކިޔައިގެންނެވެ . އެކަން ދުއްވައި ނިމުމުން، އާރުޓީއެލް އެނެބަލް ކުރާނެ ގޮތް މިތަނުން ކިޔުން ކުރިއަށް ގެންދާށެވެ.

You may also want to read up on the RTLCSS project , އެއީ އާރުޓީއެލްއާ މެދު އަޅުގަނޑުމެންގެ އުސޫލަށް ބާރު ލިބޭތީ.

އެކްސްޕެރިމެންޓަލް ފީޗާ އެވެ

އާރުޓީއެލް ފީޗާއަކީ އަދިވެސް ތަޖުރިބާކާރު ފީޗާއެއް ކަމަށާއި ޔޫޒަރުންގެ ފީޑްބެކަށް ބަލާއިރު ތަރައްގީވާނެ ކަމަށް ބެލެވެ އެވެ. އެއްޗެއް ފެނިއްޖެތޯ ނުވަތަ ލަފާދޭން ރަނގަޅު ކަމެއް އޮތްތޯ؟ Open an issue , އަޅުގަނޑުމެން ވަރަށް އުފާވާނެ ތިޔަބޭފުޅުންގެ ވިސްނުންތައް ލިބޭތޯ.

ބޭނުންވާ އެޗްޓީއެމްއެލް

ބޫޓްސްޓްރެޕް ޕަވަރޑް ޕޭޖްތަކުގައި އާރްޓީއެލް އެނެބަލް ކުރުމަށް ހަރުކަށި ދެ ޝަރުތެއް ވެއެވެ.

  1. އެލިމެންޓްގެ dir="rtl"މައްޗަށް ސެޓް ކުރާށެވެ .<html>
  2. އެލިމެންޓްގެ މައްޗަށް އެކަށީގެންވާ langއެޓްރިބިއުޓެއް، ފަދައިން އިތުރުކުރުން.lang="ar"<html>

އެތަނުން އަޅުގަނޑުމެންގެ ސީއެސްއެސްގެ އާރްޓީއެލް ވަރޝަނެއް ހިމަނަން ޖެހޭނެއެވެ. މިސާލަކަށް، މިއީ އާރްޓީއެލް އެނެބަލްކޮށްފައި ހުންނަ އަޅުގަނޑުމެންގެ ކޮމްޕައިލްކޮށް މިނިފައިޑް ސީއެސްއެސް އަށް ސްޓައިލްޝީޓް އެވެ:

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

ސްޓާޓަރ ޓެމްޕްލޭޓް

މި ބަދަލުކުރެވިފައިވާ އާރްޓީއެލް ސްޓާޓަރ ޓެމްޕްލޭޓުން މަތީގައިވާ ޝަރުޠުތައް ރިފްލެކްޓްވާތަން ފެނިވަޑައިގަންނަވާނެއެވެ.

<!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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

އާރުޓީއެލްގެ މިސާލުތައް

އަޅުގަނޑުމެންގެ ބައެއް އާރުޓީއެލް މިސާލުތަކުގެ ތެރެއިން އެއް މިސާލުން ފަށައިގަންނަވާށެވެ .

ކުރިމަތިލުން

ބޫޓްސްޓްރެޕް އަށް އާރުޓީއެލް ސަޕޯޓް ބިނާކުރުމަށް އަޅުގަނޑުމެންގެ އުސޫލު އަންނަނީ އަޅުގަނޑުމެންގެ ސީއެސްއެސް ލިޔެ ބޭނުންކުރާ ގޮތަށް އަސަރުކުރާ މުހިންމު ދެ ނިންމުމަކާއެކު:

  1. ފުރަތަމަ އަޅުގަނޑުމެން ނިންމީ އާރުޓީއެލްސީއެސްއެސް ޕްރޮޖެކްޓާއެކު އެތަން ބިނާކުރަން. މިއީ އެލްޓީއާރު އިން އާރުޓީއެލް އަށް ބަދަލުވާއިރު ބަދަލުތަކާއި އޮވަރރައިޑްތައް މެނޭޖްކުރުމަށް ބޭނުންވާ ބައެއް ވަރުގަދަ ފީޗާސްތައް އަޅުގަނޑުމެންނަށް ލިބިގެންދާ ކަމެކެވެ. އަދި އެއް ކޯޑްބޭސްއަކުން ބޫޓްސްޓްރެޕްގެ ދެ ވަރޝަން ބިލްޑް ކުރުމުގެ ފުރުސަތު ވެސް ލިބިގެންދެއެވެ.

  2. ދެވަނަ ކަމަކަށް، އަޅުގަނޑުމެން މިވަނީ ލޮޖިކަލް ޕްރޮޕަޓީސް އެޕްރޯޗެއް ގެންގުޅުމަށްޓަކައި އަތްމަތި ދަތި ޑިރެކްޝަނަލް ކްލާސްތަކަށް ނަން ބަދަލުކޮށްފައެވެ. ތިޔަބޭފުޅުންގެ ތެރެއިން ގިނަ ބަޔަކު މިހާރުވެސް އަޅުގަނޑުމެންގެ ފްލެކްސް ޔުޓިލިޓީސްގެ ސަބަބުން ލޮޖިކަލް ޕްރޮޕަޓީތަކާ މުޢާމަލާތު ކުރައްވާފައި ވެއެވެ-އެއީ ޑިރެކްޝަން ޕްރޮޕަޓީތަކުގެ ބަދަލުގައި leftއަދި rightއިން ފަވާރ startއަދި end. އެއީ އެއްވެސް އޯވަހެޑެއް ނެތި ކްލާސް ނަންތަކާއި އަގުތައް އެލްޓީއާރު އަދި އާރުޓީއެލް އަށް އެކަށީގެންވާ ގޮތަކަށް ހެދުމެވެ.

މިސާލަކަށް .ml-3for ގެ ބަދަލުގައި margin-leftބޭނުން ކުރާށެވެ .ms-3.

އާރުޓީއެލް އާއި އެކު މަސައްކަތް ކުރުމަކީ، އަޅުގަނޑުމެންގެ ސޯސް ސާސް ނުވަތަ ކޮމްޕައިލް ކުރެވިފައިވާ ސީއެސްއެސް މެދުވެރިކޮށް، އަޅުގަނޑުމެންގެ ޑިފޯލްޓް އެލްޓީއާރު އާއި މާބޮޑު ތަފާތެއް ވެގެން ނުވާނެއެވެ.

ސޯސް އިން ކަސްޓަމައިޒް ކުރުން

ކަސްޓަމައިޒޭޝަން އަށް ވާހަކަ ދައްކާއިރު ، އިސްކަންދެވޭ ގޮތަކީ ވެރިއޭބަލްސް، މެޕްސް، އަދި މިކްސިންސްގެ ފައިދާ ނެގުމެވެ. މި އުސޫލު އާރްޓީއެލް އަށް ވެސް މަސައްކަތް ކުރަނީ ހަމަ އެގޮތަށް، ކޮމްޕައިލް ކުރެވިފައިވާ ފައިލްތަކުން ޕޯސްޓް ޕްރޮސެސް ކުރެވުނު ނަމަވެސް، އާރްޓީއެލްސީއެސްއެސް މަސައްކަތް ކުރާ ގޮތުގެ ސަބަބުންނެވެ .

ކަސްޓަމް އާރްޓީއެލް ވެލިއުސް

RTLCSS value directives ބޭނުންކޮށްގެން , ވެރިއޭބަލް އައުޓްޕުޓެއް އާރްޓީއެލް އަށް ތަފާތު ވެލިއުއެއް ހެދިދާނެއެވެ. މިސާލަކަށް، $font-weight-boldމުޅި ކޯޑްބޭސް އަށް ބަރުދަން ކުޑަކުރުމަށްޓަކައި، /*rtl: {value}*/ސިންޓެކްސް ބޭނުންކުރެވިދާނެއެވެ:

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

އަޅުގަނޑުމެންގެ ޑިފޯލްޓް ސީއެސްއެސް އަދި އާރުޓީއެލް ސީއެސްއެސް އަށް ތިރީގައިވާ ގޮތަށް އައުޓްޕުޓް ކުރާނެ އެއްޗެއް:

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

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

ބަދަލު ފޮންޓް ސްޓޭކް

ކަސްޓަމް ފޮންޓެއް ބޭނުންކުރާ ހާލަތުގައި، ހުރިހާ ފޮންޓަކުން ލެޓިން ނޫން އަކުރުތަކަށް ސަޕޯޓް ނުކުރާކަން ސަމާލުކަން ދޭށެވެ. /*rtl:insert: {value}*/ޕެން-ޔޫރަޕިއަން އާއިލާއިން އަރަބި އާއިލާއަށް ބަދަލުވުމަށްޓަކައި، ފޮންޓް އާއިލާތަކުގެ ނަންތައް ބަދަލުކުރުމަށްޓަކައި ފޮންޓް ސްޓޭކްގައި ބޭނުންކުރަން ޖެހިދާނެއެވެ .

މިސާލަކަށް، Helvetica Neue Webfontފޯރ އެލްޓީއާރ އިން Helvetica Neue Arabicފޯރ އާރްޓީއެލް އަށް ބަދަލުވުމަށްޓަކައި، ތިބާގެ ސާސް ކޯޑް މިގޮތަށް ފެންނާނެއެވެ:

$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;

އެލްޓީއާރު އާއި އާރުޓީއެލް އެއްފަހަރާ

އެއް ޕޭޖެއްގައި އެލްޓީއާރު އާއި އާރުޓީއެލް ވެސް ބޭނުންވޭތޯ؟ ޝުކުރިއްޔާ RTLCSS String Maps , މިއީ ކިތަންމެހާވެސް ސީދާ ކަމެކެވެ. ތިބާގެ @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*/

ސާސް ދެން RTLCSS ހިންގުމަށްފަހު، ތިބާގެ ސީއެސްއެސް ފައިލްތަކުގައިވާ ކޮންމެ ސެލެކްޓަރެއް ޕްރީޕެންޑް ވާނީ .ltr, އަދި .rtlއާރްޓީއެލް ފައިލްތަކަށް. މިހާރު ތިބާއަށް އެއް ޞަފްޙާއެއްގައި ދެ ފައިލްވެސް ބޭނުންކުރެވޭނެ، އަދި ފަސޭހައިން ބޭނުންކުރެވޭނީ .ltrނުވަތަ .rtlތިބާގެ ކޮމްޕޯނެންޓްސް ރެޕަރސް ތަކުގައި އެއް ނުވަތަ އަނެއް ދިމާލެއް ބޭނުންކުރެވޭނެއެވެ.

އެޖް ކޭސްތަކާއި އެނގޭ ލިމިޓެޝަންތަކެވެ

މި އުސޫލަކީ ވިސްނޭ އުސޫލެއް ކަމުގައި ވިޔަސް، ތިރީގައިވާ ކަންކަމަށް ސަމާލުކަން ދެއްވުން އެދެމެވެ.

  1. އަދި ބަދަލުކުރާއިރު .ltr، އެއަށް ރިޢާޔަތްކޮށް އެޑްކޮށް އެޓްރިބިއުޓްސް .rtlކުރާކަން ޔަޤީންކުރައްވާށެވެ .dirlang
  2. ދެ ފައިލް ވެސް ލޯޑް ކުރުމަކީ ހަގީގީ ޕާފޯމަންސް ބޮޓްލެނެކަކަށް ވެދާނެ: ކޮންމެވެސް އޮޕްޓިމައިޒޭޝަން އަށް ވިސްނާލައްވާ , އަދި ފަހަރެއްގައި އެ ފައިލްތަކުގެ ތެރެއިން އެއް ފައިލް އެސިންކްރޮނަސްކޮށް ލޯޑް ކުރަން މަސައްކަތް ކުރައްވާށެވެ .
  3. މިގޮތަށް ނެސްޓިންގ ސްޓައިލްސް ކުރުމުން އަހަރެމެންގެ form-validation-state()މިކްސިން ގަސްތުކުރި ގޮތަށް މަސައްކަތް ނުކުރެވޭނެ ކަމަށާއި، މިހެން ވުމުން އަމިއްލައަށް ތަންކޮޅެއް ޓްވީކް ކުރަން ޖެހޭނެ ކަމަށެވެ. #31223 ބައްލަވާށެވެ .

އެ ރޮށި ކޮޅު ކޭސް އެވެ

ބްރޭޑްކްރަމްބް ސެޕަރޭޓަރަކީ އޭގެ އަމިއްލަ މުޅިން އައު ވެރިއޭބަލް ބޭނުންވާ ހަމައެކަނި ކޭސް— އެއީ $breadcrumb-divider-flipped—ޑިފޯލްޓް ކުރުން $breadcrumb-divider.

އިތުރު ވަސީލަތްތައް