وسط چین کردن در بوت استرپ
سلام .. خسته نباشید ... من form خودمو با بوت استرپ درست کردم فقط چه طوری میتونم این فرم خودمو با بوت استرپ راست چین یا وسط صفحه بزارم ... میخواستم کلاس برای این کار چی هست ؟ ممنون
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
روش های مختلفی وجود داره.
کدهای مرتبط رو قرار بدین تا بهتر بشه نوشت درین باره. از سطر row و ستون ها، تا فرم رو قرار بدین.
هم می تونید از ساختار شبکه بندی استفاده کنید (grid system) و هم کلاس mx-auto.
یه سوال دیگه هم داشتم الان خود فرم اومد وسط ولی میخوام خود container هم وسط قرار بگیره و یکی دیگه این که وقتی به label ها کلاس text-right میدم سمت راست نمیاذ .. میشه کدها رو بزارم ببنیین ؟
بله کدهاتون رو قرار بدین تا بهتر بشه متوجه منظورتون شدش.
از خروجی کدها هم عکس قرار بدید بهتره.
<!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>
عکس تون نمایش داده نشدش.
ببینید، زمانی که می خواید به زبان فارسی سایتی رو طراحی کنید، بهترین کار اینه که از نسخه های بوت استرپ راستچین شده استفاده کنید که مدام مجبور نشید دونه به دونه عناصر رو راستچین کنید.
یک نسخه راستچین رو که به نظرم نسخه ی خوبی هم هستش می تونید ازینجا دریافت کنید:
http://abs.aryavandidad.com/fa-ir/getstarted
و نکته دیگه هم اینکه همون ابتدا جهت عناصر صفحه رو راست به چپ کنید، بدین صورت:
<html lang="fa" dir="rtl">
@milad
این چیزی که شما گفتید بی فایدس ؛ زمانی که المنت ها رو توی css خودمون چپ چین ، راست چین کنیم دیگه این بدرد نمیخوره
@cfarhad
به درستی متوجه نشدم منظورتون رو.
در مثالی که اول زده شد و مورد سوال بود، اگر از همون ابتدای کار، صفحه راست به چپ شده بودش (rtl)، نیاز نبود که همین عنصر label رو بخوان دومرتبه ببرند سمت راست، چون از اول سمت راست قرار می گرفت.
می تونید امتحان کنید تا نتیجه رو ببینید.
@milad
سلام .. ممنون از پاسخ گوییی ... یعنی نیاز نیست که دیگه فایل های بوت استرپ انگلیسی رو من تو مسیر بزارم ؟ همین فایل هایی اریا کافیه ؟
سلام
خواهش می کنم
بله، آریا اینجوری هستش، یعنی فقط کافیه فایل بوت استرپ آریا رو بزارید اضافه کنید به سند html.
البته جهت صفحه رو هم همونطور که اشاره کردم، در ابتدا باید از راست به چپ کنید.
(برخی راستچین های دیگه هم هستند، واسه اونا نیازه نسخه انگلیسی هم باشه، ولی آریا اینطوری نیستش)
سلام ...ممنونم مرسی ... ببخشید من سوالاتم زیاد شد یه سوال دیگه هم داشتم ... الان من میخوام خود قالب فرم بیاد وسط نه فقط input ها ....
من میخوام مرکز صفحه باشه اینو باید چه طوری بگم ؟
سلامت باشید
بهترین روش اینه که شما از ساختار شبکه ای (grid system) برای این مقوله استفاده کنید، تا وقتی که عرض صفحه زیاد هستش، بیاد وسط و وقتی که عرض کم میشه هم ساختار بهم نریزه.
همیشه سعی کنید سه کلاس container, row, col-*-adad هارو تودرتو استفاده کنید.
ازینجا مطالعه کنید:
https://getbootstrap.com/docs/4.3/layout/grid/
بنظرم استفاده از فلکس باکس برای وسط چین و .. کردن گزینه خوبیه
<div class="d-flex justify-content-center align-items-center w-100">
<form action="#">
<!-- محتوا -->
</form>
</div>
@mrrayo
درسته بنظرت این کار ؟ دو سال پیش این سوال مطرح شده بعد دو سال داری جواب میدی بنظرت این بنده خدا تو این مشکل گیر کرده هنوز ؟
هدف بنده از ارسال پاسخ برای تاپیک ها چیز دیگست جناب و خودم هم دارم میخونم. وقتی شما نمیدونی پس لزومی نداره که وقت هدر بدید و این همه تایپ کنید.
روز خوش
@erfanmohseni406