راست چین کردن در سایتی که از بوت استرپ هم استفاده می کند [بایگانی]

shahin53

دوشنبه 11 تیر 1397, 20:41 عصر

سلام دوستان
من یک مشکل عجبب برخورد کردم.
اگه ممکن است راهنمایی کنید:

من یک کد html خیلی ساده نوشته ام. و در این کد در تگ
html
گفته ام:
dir="rtl"
این کد را نوشته ام تا جهت صفحه از چپ چین به راست چین تغییر کند.
اما اگر من لینک به بوت استرپ داده باشم این تغییر انجام نمی شود.
ایا تداخلی بین استفاده از بوت استرپ و تغییر
direction
وجود دارد؟

کد من خیلی ساده است اگر لطف کنید نگاهی به ان بیندازید ممنون میشوم:

<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/boot...tstrap.min.css">
<style type="text/css">
p{
direction: rtl
}
</style>
</head>
<body>

<div class="container">

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>

<p> hello I am Studen</p>

</div>

</body>
</html>

hooman_the1

دوشنبه 11 تیر 1397, 22:10 عصر

سلام
چیزی به نام تداخل نداریم . در مورد استایل هایی که چند بار تعریف شدند آخرین استایل به تگ اعمال میشه و چون بوت استرپ در بالاترین لول اعمال شده ، هر استایلی که بعدا بدید ( در اینجا راست چین کردن ) اولویت داره .
من تگ های شما رو کپی کردم و تو بروزر درست نشون داده میشه و نوشته ها راست چین هستند . البته نیازی هم به ایجاد استایل جداگانه نبود . کلاس های راست چین بوت استرپ رو اعمال کنید.

shahin53

سه شنبه 12 تیر 1397, 19:55 عصر

اینکه برای شما کارکرده دلیلش اینه که لینک بوت استرپ در این سایت ناقص نمایش داده شده.
شما یک لینک معتبر بگذارید امکان نداره کار کنه.
دلیلش اینه که
text-align: left

یعنی اینجوری کار می کنه:

p{ text-align: right;}

حالا تمرین درست برای داشتن یک سایت دوزبانه چیه؟ سایتی که هم انگلیسی داره هم فارسی. کلی سایت در جهان هست که اینطورین. چطور میشه با بوت استرپی که حتی با تگ ایمپورتنت هم نمیشه دایرکشن رو عوض کرد
سایت هم راست چین هم چپ چین داشت؟

hooman_the1

چهارشنبه 13 تیر 1397, 22:52 عصر

محددا سلام
حرف شما تا حدی درسته
من کد شما رو توی dreamweaver نوشتم ، که طبیعتا اگه فایل صحیح لینک نشه خطا می ده ، پس فایل bootstrap درست Attach شده .
اما ... چون من پیرمردم با ورژن عهد بوق 3.3.7 که روی لوکال داشتم تست کردم درست کار کرد . اما با ورژن 4.1.1 حرف شما کاملا صحیحه .
فکر کنم جواب من رو به دقت نخوندید ؛ اصلا احتیاجی به این کارها نیست برای تنظیم align ها توی بوت استرپ . فقط کافیه از کلی کلاس که خود بوت استرپ داره استفاده کنید مثلا برای inline ها از .text-right و کلاس هایی مثل .justify-content و ... استفاده کنید . هر جا خواستید راست چین ، هر جا خواستید وسط و ...

shahin53

پنج شنبه 14 تیر 1397, 19:20 عصر

اخه گاهی باید راست چین بشه گاهی چپ چین این رو چطور پشتیبانی کنم.

مثلا من یک جدول دارم که در انگلیسی اینطوری میفته:

name family phone
اما در فارسی این طور باید بشه:
نام نام خانوادگی شماره تلفن

من فکر می کردم اگه دایرکشن رو عوض کنم همه چی اتوماتیک درست میشه.
الان که میبینم این طور نیست نمی دونم باید چطور این مساله رو پیاده کنم

shahin53

یک شنبه 14 مرداد 1397, 15:43 عصر

محددا سلام
حرف شما تا حدی درسته
من کد شما رو توی dreamweaver نوشتم ، که طبیعتا اگه فایل صحیح لینک نشه خطا می ده ، پس فایل bootstrap درست Attach شده .
اما ... چون من پیرمردم با ورژن عهد بوق 3.3.7 که روی لوکال داشتم تست کردم درست کار کرد . اما با ورژن 4.1.1 حرف شما کاملا صحیحه .
فکر کنم جواب من رو به دقت نخوندید ؛ اصلا احتیاجی به این کارها نیست برای تنظیم align ها توی بوت استرپ . فقط کافیه از کلی کلاس که خود بوت استرپ داره استفاده کنید مثلا برای inline ها از .text-right و کلاس هایی مثل .justify-content و ... استفاده کنید . هر جا خواستید راست چین ، هر جا خواستید وسط و ...

من از text-right استفاده کردم و تونستم تگ های block مثل p رو راست چین کنم اما تگ span رو نمی تونم راست چین کنم.
مثلا در کد زیر انتظار دارم که نوشته ها سمت راست قرار بگیرن که نمی گیرن:

<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

</head>
<body>

<div class="container">

<span class="text-right">نام</span>
<span>شاهین</span>

</div>

</body>
</html>

ممکنه راهنمایی کنید

shahin53

یک شنبه 14 مرداد 1397, 16:22 عصر

محددا سلام
حرف شما تا حدی درسته
من کد شما رو توی dreamweaver نوشتم ، که طبیعتا اگه فایل صحیح لینک نشه خطا می ده ، پس فایل bootstrap درست Attach شده .
اما ... چون من پیرمردم با ورژن عهد بوق 3.3.7 که روی لوکال داشتم تست کردم درست کار کرد . اما با ورژن 4.1.1 حرف شما کاملا صحیحه .
فکر کنم جواب من رو به دقت نخوندید ؛ اصلا احتیاجی به این کارها نیست برای تنظیم align ها توی بوت استرپ . فقط کافیه از کلی کلاس که خود بوت استرپ داره استفاده کنید مثلا برای inline ها از .text-right و کلاس هایی مثل .justify-content و ... استفاده کنید . هر جا خواستید راست چین ، هر جا خواستید وسط و ...

من از text-right استفاده کردم و تونستم تگ های block مثل p رو راست چین کنم اما تگ span رو نمی تونم راست چین کنم.
مثلا در کد زیر انتظار دارم که نوشته ها سمت راست قرار بگیرن که نمی گیرن:

<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

</head>
<body>

<div class="container">

<span class="text-right">نام</span>
<span>شاهین</span>

</div>

</body>
</html>

ممکنه راهنمایی کنید. من برای اینکه کار کنه از
float:right
استفاده کردم اما فک نکنم کار درستی باشه

mRizvandi

چهارشنبه 21 آذر 1397, 18:36 عصر

سلام
از آریا بوت استرپ (http://abs.aryavandidad.com)استفاده کنید و تنها کاری که باید انجام بدید این هست که به تگ html جهت بدید. بقیه موارد مطابق با جهت تگ html اصلاح می شوند و نیازی به لود فایلهای مجزا هم نیست. همچنین آریا بوت استرپ نسخه ای است که فقط چپ چین و راست چین رو پشتیبانی می کنه و هیچ تغییر دیگری هم در فایل اصلی بوت استرپ داده نشده.
http://barnamenevis.org/showthread.php?547479-%D8%A2%D8%B1%DB%8C%D8%A7-%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-(%DA%A9%D8%AA%D8%A7%D8%A8%D8%AE%D8%A7%D9%86%D9%87-%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D8%AF%D9%88%DA%AF%D8%A7%D9%86%D9%87-%DA%86%D9%BE-%DA%86%DB%8C%D9%86-%D9%88-%D8%B1%D8%A7%D8%B3%D8%AA-%DA%86%DB%8C%D9%86)