وسط چین کردن در بوت استرپ

- 3 هفته پیش
توسط میلاد آپدیت شد
Mozhgan Nematnezhad ( 2040 تجربه )
3 هفته پیش

سلام .. خسته نباشید ... من form خودمو با بوت استرپ درست کردم فقط چه طوری میتونم این فرم خودمو با بوت استرپ راست چین یا وسط صفحه بزارم ... میخواستم کلاس برای این کار چی هست ؟ ممنون

میلاد ( 99530 تجربه )
3 هفته پیش
تخصص : طراح رابط کاربری - Front-End

روش های مختلفی وجود داره.
کدهای مرتبط رو قرار بدین تا بهتر بشه نوشت درین باره. از سطر row و ستون ها، تا فرم رو قرار بدین.

هم می تونید از ساختار شبکه بندی استفاده کنید (grid system) و هم کلاس mx-auto.

Mozhgan Nematnezhad ( 2040 تجربه )
3 هفته پیش

یه سوال دیگه هم داشتم الان خود فرم اومد وسط ولی میخوام خود container هم وسط قرار بگیره و یکی دیگه این که وقتی به label ها کلاس text-right میدم سمت راست نمیاذ .. میشه کدها رو بزارم ببنیین ؟

میلاد ( 99530 تجربه )
3 هفته پیش
تخصص : طراح رابط کاربری - Front-End

بله کدهاتون رو قرار بدین تا بهتر بشه متوجه منظورتون شدش.
از خروجی کدها هم عکس قرار بدید بهتره.

Mozhgan Nematnezhad ( 2040 تجربه )
3 هفته پیش
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link  rel="stylesheet" href="../style/bootstrap.min.css"/>
    <title>login</title>
</head>
<body>
        <div class=" m-5" id="login" >
            <div class="card shadow"  style="width:650px">
            <form action="login.php" method="post" style="width:400px" class="mx-auto">
                <div class="form-group row">
                    <label for="eamil" class="text-right m-2">:ایمیل</label>
                    <input type="email"  name="email" id="email" class="form-control" placeholder="لطفا ایمیل خود را وارد کنید"><br><br>
                </div>

                <div class="form-group">
                    <label for="pass"  class="text-right">:پسورد</label>
                    <input type="password"  name="password" id="pass"  class="form-control" placeholder="لطفا پسورد خود را وارد کنید"><br><br>
                </div>

                <div class="form-group">
                <button type="submit"  class="btn btn-primary" name="login" value="ورود">ورود </button>
                </div> 
            </form>
            </div>
        </div>
Mozhgan Nematnezhad ( 2040 تجربه )
3 هفته پیش
میلاد ( 99530 تجربه )
3 هفته پیش
تخصص : طراح رابط کاربری - Front-End

عکس تون نمایش داده نشدش.

ببینید، زمانی که می خواید به زبان فارسی سایتی رو طراحی کنید، بهترین کار اینه که از نسخه های بوت استرپ راستچین شده استفاده کنید که مدام مجبور نشید دونه به دونه عناصر رو راستچین کنید.

یک نسخه راستچین رو که به نظرم نسخه ی خوبی هم هستش می تونید ازینجا دریافت کنید:
http://abs.aryavandidad.com/fa-ir/getstarted

میلاد ( 99530 تجربه )
3 هفته پیش
تخصص : طراح رابط کاربری - Front-End

و نکته دیگه هم اینکه همون ابتدا جهت عناصر صفحه رو راست به چپ کنید، بدین صورت:

<html lang="fa" dir="rtl">
فرهاد ( 12350 تجربه )
3 هفته پیش
تخصص : برنامه نویس

@milad
این چیزی که شما گفتید بی فایدس ؛ زمانی که المنت ها رو توی css خودمون چپ چین ، راست چین کنیم دیگه این بدرد نمیخوره

میلاد ( 99530 تجربه )
3 هفته پیش
تخصص : طراح رابط کاربری - Front-End

@cfarhad
به درستی متوجه نشدم منظورتون رو.

در مثالی که اول زده شد و مورد سوال بود، اگر از همون ابتدای کار، صفحه راست به چپ شده بودش (rtl)، نیاز نبود که همین عنصر label رو بخوان دومرتبه ببرند سمت راست، چون از اول سمت راست قرار می گرفت.
می تونید امتحان کنید تا نتیجه رو ببینید.

Mozhgan Nematnezhad ( 2040 تجربه )
3 هفته پیش

@milad
سلام .. ممنون از پاسخ گوییی ... یعنی نیاز نیست که دیگه فایل های بوت استرپ انگلیسی رو من تو مسیر بزارم ؟ همین فایل هایی اریا کافیه ؟

میلاد ( 99530 تجربه )
3 هفته پیش
تخصص : طراح رابط کاربری - Front-End

سلام
خواهش می کنم
بله، آریا اینجوری هستش، یعنی فقط کافیه فایل بوت استرپ آریا رو بزارید اضافه کنید به سند html.
البته جهت صفحه رو هم همونطور که اشاره کردم، در ابتدا باید از راست به چپ کنید.

(برخی راستچین های دیگه هم هستند، واسه اونا نیازه نسخه انگلیسی هم باشه، ولی آریا اینطوری نیستش)

Mozhgan Nematnezhad ( 2040 تجربه )
3 هفته پیش

سلام ...ممنونم مرسی ... ببخشید من سوالاتم زیاد شد یه سوال دیگه هم داشتم ... الان من میخوام خود قالب فرم بیاد وسط نه فقط input ها ....
من میخوام مرکز صفحه باشه اینو باید چه طوری بگم ؟

میلاد ( 99530 تجربه )
3 هفته پیش
تخصص : طراح رابط کاربری - Front-End

سلامت باشید
بهترین روش اینه که شما از ساختار شبکه ای (grid system) برای این مقوله استفاده کنید، تا وقتی که عرض صفحه زیاد هستش، بیاد وسط و وقتی که عرض کم میشه هم ساختار بهم نریزه.

همیشه سعی کنید سه کلاس container, row, col-*-adad هارو تودرتو استفاده کنید.
ازینجا مطالعه کنید:
https://getbootstrap.com/docs/4.3/layout/grid/

برای ارسال پاسخ باید وارد سایت شوید