ورود

View Full Version : حرفه ای: قرار گرفتن لایه ها به صورت ریسپانسیو روی هم توسط بوت استرپ


سعید کشاورز
سه شنبه 07 بهمن 1393, 14:51 عصر
سلام دوستان..یه سوال فنی ...
به عکس شماره یک دقت کنید..از من خواسته شده تا این حالت رو به صورت ریسپانسیو اجرا کنم...من 2 تا قاب عکس دارم که داخلش مطالب قرار میگیره..توی عکس شماره 1 مشخصه چی میگم..حالا می خوام وقتی کاربر با موبایل مشاهده میکنه به صورت عکس شماره دو بشه...
مشکل اینجاست که داخل فریم چجوری میتونم این کارو انجام بدم که وقتی مرورگر کوچیک میشه اون قاب با محتوی بهم نریزن؟
از دستورات push و pull هم استفاده کردم ولی بارم بهم میریزه...
کسی نطری داره چجوری بتونم با بوت استپر این کارو انجام بدم؟
ravand
چهارشنبه 08 بهمن 1393, 07:56 صبح
الان اگه دقت کنی دو تا تصویر که افتاده پایین جاش نمیشه. من معمولا توی نسخه ی مبایل میام اون دو تا عکس رو عرضش رو بیشتر میکنم.
البته اگه درست منظور شما رو فهمیده باشم.
سعید کشاورز
چهارشنبه 08 بهمن 1393, 09:42 صبح
الان اگه دقت کنی دو تا تصویر که افتاده پایین جاش نمیشه. من معمولا توی نسخه ی مبایل میام اون دو تا عکس رو عرضش رو بیشتر میکنم.
البته اگه درست منظور شما رو فهمیده باشم.
منظور من چیز دیگس...
ببینید من دوتا عکس دارم که به صورت فریم هستن ..قراره که داخلشون محتوی قرار بگیره...این کد رو در نظر بگیرین


<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div id="left-frame" class="col-md-6 col-xs-12">
Mohtava inja gharar migirad
</div>
<div id="right-frame" class="col-md-6 col-xs-12">
Mohtava inja gharar migirad
</div>
</div>
</div>
</body>
</html>
حالا این فریم هارو نمیدونم به چه صورت وارد کنم؟ مثلا background-image استفاده کنم یا از تگ img
چون محتوای من باید داخل فریم باشه که وقتی فریم کوچیک میشه محتوای اون هم کوچیک بشه...
اگه بتونید این مورد رو با یه سورس کوچیک بهم نشون بدین ممنون میشم..
ravand
چهارشنبه 08 بهمن 1393, 09:46 صبح
اینو به تگ img بده شاید حل شه:

class="img-responsive"
به این شکل:

<img src="vasat.png" class="img-responsive" alt="Responsive image">
سعید کشاورز
چهارشنبه 08 بهمن 1393, 10:25 صبح
خوب از این کلاس استفاده کنید یه مشکلی وجود داره اونم اینکه من اون قسمت محتوی رو یه Div در نظر میگیرم وقتی img کوچیک بشه باید متناسب با اون اون div محتوی هم کوچیک بشه...
من اومدم یه تگ img درست کردم و کنارش هم یه یه div گذاشتم و با دستور Pull اون div رو انداختم روی img...این کار روی لپ تاپ درست نشون میده اما وقتی مرورگر رو کوچیک میکنم اون تگ div که محتوی داخلش هست میوفته زیر تگ img
البته یه راه به ذهنم رسید اونم اینکه واسه حالت موبایل او قریم رو حذف کنم ...