site-logo site-logo
CSS - تصحیح تراز درونی (Justify Self)
نوشتن نظر کلیک کنید

CSS – تصحیح تراز درونی (Justify Self)

آخرین بروزرسانی: 

ویژگی justify-self در CSS تنظیمات پیش‌فرضی را برای تراز کردن عناصر در یک محور مربوطه در نظر می‌گیرد. به عبارت دیگر، این ویژگی به هر عنصر یک تراز پیش‌فرض برای محور مورد نظر اعمال می‌کند. این تراز برای هر عنصر به‌طور جداگانه قابل تنظیم است و می‌تواند متفاوت باشد.

به‌عنوان مثال، اگر یک عنصر در یک شبکه با دو ستون و دو ردیف داشته باشیم، با استفاده از justify-self می‌توانیم تعیین کنیم که آیا عنصر به طور پیش‌فرض در ستون اول یا دوم قرار بگیرد.

با اینکه justify-self می‌تواند برای تعیین تراز در هر دو محور (افقی و عمودی) استفاده شود، اما برخی از ویژگی‌های مرتبط با افقی شدن عناصر مانند justify-items در نظر گرفته نمی‌شود. این ویژگی برای مدیریت تراز بندی درون خود عناصر استفاده می‌شود، در حالی که justify-items برای مدیریت تراز بندی کلی اعمال می‌شود.

این ویژگی (justify-self) می‌تواند مقادیر مختلفی را بپذیرد که هرکدام تأثیر متفاوتی روی تراز بندی عناصر دارند:

  1. auto: این مقدار بر اساس ویژگی justify-items جعبه والدین تعیین می‌شود، به استثنای زمانی که جعبه والدین ندارد یا به‌طور مطلق قرار گرفته است، جایی که به طور پیش‌فرض به ‘auto’ که نرمال را نمایان می‌کند، بازمی‌گردد.

  2. normal: اثر این کلمه کلیدی بر روی حالت چیدمان تعیین می‌شود:

    • در چیدمان‌های بلوکی، این کلمه کلیدی همان start است.

    • در موقعیت مطلق، این کلمه کلیدی به عنوان “start” برای جعبه‌های جایگزین و به عنوان “stretch” برای جعبه‌های مطلق دیگر عمل می‌کند.

    • این کلمه کلیدی در چیدمان‌های سلول جدول بی‌معنی است زیرا ویژگی آن نادیده گرفته می‌شود.

    • این کلمه کلیدی در چیدمان‌های فلکس بازتاب ندارد.

    • برای عناصر شبکه، این کلمه کلیدی به عنوان یک کشیدن (stretch) عمل می‌کند، به استثنای جعبه‌هایی با نسبت جانبی یا اندازه‌های جانشین، که مانند یک شروع (start) عمل می‌کند.

  3. start: عناصر را در لبه شروع کانتینر تراز می‌کند.

  4. end: عناصر را در لبه پایانی کانتینر تراز می‌کند.

  5. center: عناصر را در وسط کانتینر تراز می‌کند.

  6. flex-start: این مقدار به عناصری که فرزندان یک جعبه فلکس نیستند، به عنوان شروع در نظر گرفته می‌شود.

  7. flex-end: این مقدار به عناصری که فرزندان یک جعبه فلکس نیستند، به عنوان پایان در نظر گرفته می‌شود.

  8. self-start: عناصر را به لبه شروع کانتینر در محور مناسب تراز می‌کند.

  9. self-end: عناصر را به لبه پایانی کانتینر در محور مناسب تراز می‌کند.

  10. left: عناصر را به لبه چپ کانتینر تراز می‌کند. این مقدار مانند “start” عمل می‌کند اگر محور ویژگی متناسب با محور خطی نباشد.

  11. right: عناصر را به لبه راست کانتینر در محور مناسب تراز می‌کند. این مقدار مانند “start” عمل می‌کند اگر محور ویژگی متناسب با محور خطی نباشد.

  12. baseline, first baseline, last baseline: این مقادیر برای تعیین تراز بنیادی یک المان نسبت به خطوط پایه (baselines) در گروه‌هایی از المان‌ها با هم ارائه می‌شود. هنگامی که از این مقادیر استفاده می‌شود، المان بازنده اولین یا آخرین خط پایه خود را با خط پایه معین شده همسطح می‌کند. اگر خطوط پایه مشخص شده نباشند، از مقدار “start” برای اولین خط پایه و “end” برای آخرین خط پایه استفاده می‌شود.

  13. stretch: وقتی از این مقدار استفاده می‌شود، وقتی ابعاد کلی المان‌ها کمتر از ظرفیت تراز بندی باشد، المان‌های با ابعاد خودکار به طور یکنواخت بزرگ‌تر می‌شوند، به محدودیت‌های بیشینه ارتفاع و عرض بستگی دارد، و ابعاد ترکیبی آن‌ها به طور کامل فضای تراز بندی را پر می‌کند.

  14. safe: وقتی مقدار “safe” استفاده می‌شود، اگر ابعاد المان از محدوده تراز بندی بیشتر باشد، المان‌ها به طوری تراز شده‌اند که به نظر می‌رسد که حالت تراز “start” برای آن‌ها اعمال شده است.

  15. unsafe: وقتی از مقدار “unsafe” استفاده می‌شود، تراز بندی مشخص شده برای المان رعایت می‌شود، بدون در نظر گرفتن ابعاد نسبی المان و ظرفیت تراز بندی.

auto Value

در این مثال، ما از ویژگی justify-self با مقدار auto استفاده می‌کنیم که به المان مورد نظر اجازه می‌دهد که عرض خود را به اندازه ممکن و مقرر شده توسط محتوای داخلی خود گسترش دهد. به عبارت دیگر، المان با این تنظیم، اندازه خود را به نحوی تنظیم می‌کند که عرض آن به اندازه محتوا درونش تعیین شود.

در اینجا، المان با کلاس item2 دارای justify-self: auto است. این باعث می‌شود المان داخلی خود را به اندازه ممکن و محتوای داخلی خود گسترش دهد و از سمت راست به چپ سیستم ترازبندی گرید را پر کند.

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
      width: 90%;
   }
   .item {
      background-color: lightgray;
   }
   .item2 {
      background-color: violet;
      justify-self: auto;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: auto</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html>

normal Value

در این مثال، ما از ویژگی justify-self با مقدار normal استفاده می‌کنیم که المان مورد نظر را به لبه چپ سلول شبکه می‌چیند. به عبارت دیگر، این تنظیم باعث می‌شود که المان داخلی (item2) به سمت چپ سلول شبکه تراز شود و عرض مورد نیاز برای نمایش محتوا به اندازه لازم اختصاص داده شود.

در اینجا، المان با کلاس item2 دارای justify-self: normal است. این باعث می‌شود المان داخلی به لبه چپ سلول شبکه تراز شود و اندازه لازم برای نمایش محتوا را به طور عادی تعیین کند.

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
   }
   .item {
      background-color: lightgray;
      width: 90%;
   }
   .item2 {
      background-color: violet;
      width: 60%;
      justify-self: normal;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: normal</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html>

stretch Value

در این مثال، ما از ویژگی justify-self با مقدار stretch استفاده می‌کنیم که باعث می‌شود المان مورد نظر (.item2) به طور کامل در عرض سلول شبکه کشیده شود و فضایی که در داخل سلول وجود دارد را پر کند.

با تنظیم justify-self به stretch برای المان داخلی با کلاس item2، عرض آن به اندازه کاملی که می‌تواند، گسترده شده و به اندازه عرض سلول شبکه کشیده می‌شود. این باعث می‌شود که محتوای داخلی به طور کامل در سلول شبکه قرار گیرد و هیچ فضای خالی اطراف آن باقی نماند.

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
       width: 90%;
   }
   .item {
      background-color: lightgray;
     
   }
   .item2 {
      background-color: violet;
      justify-self: stretch;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: stretch</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html>

start Value

در این مثال، ما از ویژگی justify-self با مقدار start استفاده می‌کنیم که باعث می‌شود المان دوم (.item2) در سلول شبکه از سمت چپ یا ابتدای سلول قرار بگیرد.

با تنظیم justify-self به start برای المان داخلی با کلاس item2، عرض آن به حداقل اندازه ممکن تنظیم شده و از سمت چپ یا ابتدای سلول شبکه قرار می‌گیرد. این باعث می‌شود که محتوای داخلی از سمت چپ یا ابتدای سلول شبکه شروع شود و به اندازه ممکن از سمت راست فضای خالی باقی بماند.

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
   }
   .item {
      background-color: lightgray;
      width: 90%;
   }
   .item2 {
      background-color: violet;
      width: 60%;
      justify-self: start;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: start</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html>

end Value

در این مثال، ما از ویژگی justify-self با مقدار end استفاده می‌کنیم که باعث می‌شود المان دوم (.item2) در سلول شبکه از سمت راست یا انتهای سلول قرار بگیرد.

با تنظیم justify-self به end برای المان داخلی با کلاس item2، عرض آن به حداکثر اندازه ممکن تنظیم شده و از سمت راست یا انتهای سلول شبکه قرار می‌گیرد. این باعث می‌شود محتوای داخلی از سمت راست یا انتهای سلول شبکه شروع شده و به اندازه ممکن از سمت چپ فضای خالی باقی بماند.

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
   }
   .item {
      background-color: lightgray;
      width: 90%;
   }
   .item2 {
      background-color: violet;
      width: 60%;
      justify-self: end;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: end</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html>

center Value

در این مثال، ما از ویژگی justify-self با مقدار center استفاده می‌کنیم که باعث می‌شود المان دوم (.item2) در مرکز سلول شبکه قرار بگیرد.

با تنظیم justify-self به center برای المان داخلی با کلاس item2، عرض آن به حداکثر اندازه ممکن تنظیم شده و از مرکز سلول شبکه قرار می‌گیرد. این باعث می‌شود محتوای داخلی در مرکز سلول قرار بگیرد و همچنین فضای خالی در دو طرف آن به صورت یکسان باقی می‌ماند.

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
   }
   .item {
      background-color: lightgray;
      width: 90%;
   }
   .item2 {
      background-color: violet;
      width: 60%;
      justify-self: center;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: center</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html>

flex-start Value

در این مثال، ما از ویژگی justify-self با مقدار flex-start استفاده می‌کنیم که باعث می‌شود المان دوم (.item2) به ابتدای (چپ) سلول شبکه منتقل شود.

با تنظیم justify-self به flex-start برای المان داخلی با کلاس item2، عرض آن به حداکثر اندازه ممکن تنظیم شده و در ابتدای سلول شبکه قرار می‌گیرد. این باعث می‌شود محتوای داخلی در ابتدای سلول قرار بگیرد و همچنین فضای خالی در سمت راست آن باقی می‌ماند.

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
   }
   .item {
      background-color: lightgray;
      width: 90%;
   }
   .item2 {
      background-color: violet;
      width: 60%;
      justify-self: flex-start;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: flex-start</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html>

flex-end Value

در این مثال، ما از ویژگی justify-self با مقدار flex-end استفاده می‌کنیم که باعث می‌شود المان دوم (.item2) به انتهای (راست) سلول شبکه منتقل شود.

با تنظیم justify-self به flex-end برای المان داخلی با کلاس item2، عرض آن به حداکثر اندازه ممکن تنظیم شده و در انتهای سلول شبکه قرار می‌گیرد. این باعث می‌شود محتوای داخلی در انتهای سلول قرار بگیرد و همچنین فضای خالی در سمت چپ آن باقی می‌ماند.

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
   }
   .item {
      background-color: lightgray;
      width: 90%;
   }
   .item2 {
      background-color: violet;
      width: 60%;
      justify-self: flex-end;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: flex-end</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html>

self-start Value

در این مثال، ما از ویژگی justify-self با مقدار self-start استفاده می‌کنیم که باعث می‌شود المان دوم (.item2) به ابتدای (چپ) سلول شبکه منتقل شود.

با تنظیم justify-self به self-start برای المان داخلی با کلاس item2، عرض آن به حداکثر اندازه ممکن تنظیم شده و در ابتدای سلول شبکه قرار می‌گیرد. این باعث می‌شود محتوای داخلی در ابتدای سلول قرار بگیرد و همچنین فضای خالی در سمت راست آن باقی می‌ماند.

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
   }
   .item {
      background-color: lightgray;
      width: 90%;
   }
   .item2 {
      background-color: violet;
      width: 60%;
      justify-self: self-start;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: self-start</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html>

self-end Value

در این مثال، ویژگی justify-self با مقدار self-end بر روی المان دوم (.item2) استفاده شده است. این باعث می‌شود المان دوم به انتهای (راست) سلول شبکه منتقل شود.

با تنظیم justify-self به self-end برای المان داخلی با کلاس item2، عرض آن به حداکثر اندازه ممکن تنظیم شده و در انتهای سلول شبکه قرار می‌گیرد. این باعث می‌شود محتوای داخلی در انتهای سلول قرار بگیرد و همچنین فضای خالی در سمت چپ آن باقی می‌ماند.

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
   }
   .item {
      background-color: lightgray;
      width: 90%;
   }
   .item2 {
      background-color: violet;
      width: 60%;
      justify-self: self-end;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: self-end</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html>

left Value

در این مثال، ویژگی justify-self با مقدار left بر روی المان دوم (.item2) استفاده شده است. این باعث می‌شود المان دوم به لبه چپ سلول شبکه منتقل شود.

با تنظیم justify-self به left برای المان داخلی با کلاس item2، عرض آن به حداکثر اندازه ممکن تنظیم شده و در لبه چپ سلول شبکه قرار می‌گیرد. این باعث می‌شود محتوای داخلی در لبه چپ سلول قرار بگیرد و همچنین فضای خالی در سمت راست آن باقی می‌ماند.

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
   }
   .item {
      background-color: lightgray;
      width: 90%;
   }
   .item2 {
      background-color: violet;
      width: 60%;
      justify-self: left;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: left</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html>

right Value

در این مثال، ویژگی justify-self با مقدار right بر روی المان دوم (.item2) استفاده شده است. این باعث می‌شود المان دوم به لبه راست سلول شبکه منتقل شود.

با تنظیم justify-self به right برای المان داخلی با کلاس item2، عرض آن به حداکثر اندازه ممکن تنظیم شده و در لبه راست سلول شبکه قرار می‌گیرد. این باعث می‌شود محتوای داخلی در لبه راست سلول قرار بگیرد و همچنین فضای خالی در سمت چپ آن باقی می‌ماند.

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
   }
   .item {
      background-color: lightgray;
      width: 90%;
   }
   .item2 {
      background-color: violet;
      width: 60%;
      justify-self: right;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: right</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html>

baseline Value

در این مثال، ویژگی justify-self با مقدار baseline بر روی المان دوم (.item2) استفاده شده است. این باعث می‌شود المان دوم بر اساس خط پایه متن درون خود درون سلول شبکه قرار گیرد.

وقتی justify-self به baseline برای المان داخلی با کلاس item2 تنظیم می‌شود، المان داخلی بر اساس خط پایه متن درون خود درون سلول شبکه قرار می‌گیرد. این به معنای آن است که محتوای داخلی به گونه‌ای قرار می‌گیرد که خط پایه متن در سلول شبکه با خط پایه متن دیگر المان‌ها منطبق شود. به عبارت دیگر، محتوای داخلی با توجه به مکان متن درون خود، در ردیفی که متنش قرار دارد، قرار می‌گیرد.

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
   }
   .item {
      background-color: lightgray;
      width: 90%;
   }
   .item2 {
      background-color: violet;
      width: 60%;
      justify-self: baseline;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: baseline</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html>

last baseline Value

در این مثال، ویژگی justify-self با مقدار last baseline بر روی المان دوم (.item2) استفاده شده است. این باعث می‌شود المان دوم بر اساس خط پایه آخرین متن درون خود درون سلول شبکه قرار گیرد.

وقتی justify-self به last baseline برای المان داخلی با کلاس item2 تنظیم می‌شود، المان داخلی بر اساس خط پایه آخرین متن درون خود درون سلول شبکه قرار می‌گیرد. این به معنای آن است که محتوای داخلی به گونه‌ای قرار می‌گیرد که خط پایه متن در سلول شبکه با خط پایه متن آخرین المان‌ها منطبق شود. به عبارت دیگر، محتوای داخلی با توجه به مکان متن درون خود، در ردیفی که متنش قرار دارد، قرار می‌گیرد ولی در آخرین ردیف از سلول.

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
   }
   .item {
      background-color: lightgray;
      width: 90%;
   }
   .item2 {
      background-color: violet;
      width: 60%;
      justify-self: last baseline;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: last baseline</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html>

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
Python - محدود کردن داده (MongoDB Limit)

Python – محدود کردن داده (MongoDB Limit)

Python MongoDB محدود کردن نتایج برای محدود کردن نتایج در MongoDB، از متد limit() استفاده می‌کنیم. متد limit() یک...

بیشتر بخوانید
Python - بروزرسانی (MongoDB Update)

Python – بروزرسانی (MongoDB Update)

به‌روزرسانی یک رکورد برای به‌روزرسانی یک رکورد یا سند در MongoDB، از متد update_one() استفاده می‌کنیم. پارامتر اول متد...

بیشتر بخوانید
Python - حذف کالکشن (MongoDB Drop Collection)

Python – حذف کالکشن (MongoDB Drop Collection)

حذف کالکشن شما می‌توانید یک جدول یا کالکشن در MongoDB را با استفاده از متد drop() حذف کنید. مثالحذف...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.