MasouDdl 65 ارسال شده در فروردین 94 گزارش بازنشر ارسال شده در فروردین 94 سلام خسته نباشیدیک مشکلی که برا من بوجود اومده تو طراحی با بوت استرپ اینه که به طور مثال داخل هدر سایت چند قسمت وجود دااره .. مثلا دو تا لوگو .. معرفی کوتاه از سایت .. سرچ !خب حالا وقتی تو سایز گوشی یا همون xs اینارو میخوام ستون بندی کنم که بیاد زیر هم نمیشه ! ینی زیر هم نمیاد نمیدونم مشکل از کجا هستش و اینکه اگه هم زیر هم بیاد یه خورده چهره سایت زیاد مناسب و شکیل نمیشه ! از دوستان خواهش میکنم که راهنمایی بفرمایند در این نوع مواقع چیکار باید کرد !با تشکر نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در فروردین 94 گزارش بازنشر ارسال شده در فروردین 94 1. قوانین رو بخونید زمان انتظار برای پاسخ 24 ساعته و فرستادن اسپن و آپ کردن قبل از 24 ساعت ممنوعه 2. <div class="navbar navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Default</a> </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">فعال </a></li> <li><a href="#">پیوند </a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">منوی کشویی <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">یک اکشن </a></li> <li><a href="#">یک اکشن دیگر </a></li> <li><a href="#">هرچیز دیگر </a></li> <li class="divider"></li> <li class="dropdown-header">عنوان منوی کشویی</li> <li><a href="#">یک پیوند </a></li> <li><a href="#">یک پیوند دیگر</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <input type="text" class="form-control col-lg-8" placeholder="Search"> </form> <ul class="nav navbar-nav navbar-left"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">نام کاربری <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#"><i class="fa fa-user text-warning"></i> پروفایل شما</a></li> <li><a href="#"><i class="fa fa-key text-danger"></i> تغییر رمز ورود</a></li> <li><a href="#"><i class="fa fa-dashboard text-warning"></i> پیشخوان </a></li> <li class="divider"></li> <li><a href="#"><i class="fa fa-question-circle text-info"></i> راهنمای استفاده</a></li> </ul> </li> </ul> </div></div>را امتحان کنید. 1 نقل قول لینک به ارسال
M.Javad 684 ارسال شده در فروردین 94 گزارش بازنشر ارسال شده در فروردین 94 کسی جواب منو نداد نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در فروردین 94 گزارش بازنشر ارسال شده در فروردین 94 کسی جواب منو ندادجواب شما را دادم دیگه کلاس collapse و navbar-collapse و data-toggle برابر با collapse و data-target برابر با سلکتور مورد نظر برای تبدیل dive به یک کلید در دیوایس های مربوط به تپلت و مو.بایل است که در صورت کلیک روش دایو مورد نظر به صورت یک کشوی عمودی باز می شه و ظاهر سایت را به هم نمی ریزه 3 نقل قول لینک به ارسال
behnamy01 12 ارسال شده در اردیبهشت 94 گزارش بازنشر ارسال شده در اردیبهشت 94 من یک آیکون خاصی رو میخوام که مثلا در glyphicon بوت استرپ موجود نیست، واسه همین یک دونه آیکون منطقی هم نیست به نظرم که برم و کل font-awesome رو هم اضافه کنم به پروژه ام، در این شرایط بهترین راهکاری که پیشنهاد میدید چیه؟ میشه یک فونت آیکون رو از یک جا دیگه کپی کنم و به glyphicon های بوت استرپ اضافه کنم؟ نقل قول لینک به ارسال
MasouDdl 65 ارسال شده در اردیبهشت 94 گزارش بازنشر ارسال شده در اردیبهشت 94 کسی از دوستان جواب منو نمیده ؟ نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در اردیبهشت 94 گزارش بازنشر ارسال شده در اردیبهشت 94 کسی از دوستان جواب منو نمیده ؟شما سئوالت رو یکبار دیگه تکرار کن چون من فکر می کنم دوبار جوابتون رو دادم من یک آیکون خاصی رو میخوام که مثلا در glyphicon بوت استرپ موجود نیست، واسه همین یک دونه آیکون منطقی هم نیست به نظرم که برم و کل font-awesome رو هم اضافه کنم به پروژه ام، در این شرایط بهترین راهکاری که پیشنهاد میدید چیه؟ میشه یک فونت آیکون رو از یک جا دیگه کپی کنم و به glyphicon های بوت استرپ اضافه کنم؟به سایت fontello.com برید و کل آیکونهایی را که می خواهید انتخاب و دانلود کنید و کلا جایگزین glyphicon کنید 4 نقل قول لینک به ارسال
alireza1375 892 ارسال شده در اردیبهشت 94 گزارش بازنشر ارسال شده در اردیبهشت 94 خیلی خوبه ولی یک پیشنهاداون گرید بندی ها خیلی سخت هستند.فکر می کنم گه تو حالت های مختلف یک فایل ازش آماده کنی و برای دانلود بگذاری خیلی خوب می شد. 1 نقل قول لینک به ارسال
علی زینلی 2114 ارسال شده در اردیبهشت 94 گزارش بازنشر ارسال شده در اردیبهشت 94 خیلی خوبه ولی یک پیشنهاد اون گرید بندی ها خیلی سخت هستند.فکر می کنم گه تو حالت های مختلف یک فایل ازش آماده کنی و برای دانلود بگذاری خیلی خوب می شد. نسخه های زیادی توی اینترنت هستن ، بستگی به کار شما داره که چجوری میخواین ازشون استفاده کنین:http://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp 1 نقل قول لینک به ارسال
site 79 ارسال شده در تیر 94 گزارش بازنشر ارسال شده در تیر 94 سلامببخشید من اصلا متوجه نشدم که کد زیر دقیقا چه کاری رو میکنه ؟<!-- Stack the columns on mobile by making one full-width and the other half-width --><div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div></div><!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --><div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div></div><!-- Columns are always 50% wide, on mobile and desktop --><div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div></div>الان تو مرورگر به صورت زیر هست :بعد از زوم کردن : نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در تیر 94 گزارش بازنشر ارسال شده در تیر 94 به زوم ربطی نداره کلاسهایcol-xs-XXcol-sm-XXcol-md-XXcol-lg-XXکه بجای XX یک عدد از یک تا دوازده توشون قرار داره به ترتیب صفحات رو برای سایزهایخیلی کوچک (موبایل های معمولی)کوچک(موبایلهای لمسی و تپلتهای کوچک)متوسط (تپلتهای بالای 7 اینچ و لپتابهای زیر 13 اینچ)بزرگ (لپ تاپ بالای 13 اینچ و سیستم های معمولی)به دوازده تا یک بخش گرید می کنندیعنی <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 1<div><div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 2<div><div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 3<div><div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 4<div><div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 5<div><div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 6<div>در اولین سایز گفته شده دو div در هر خط در سایز دوم سه div در هر خط در سایز سوم جهار div و در سایز آخر شش div در هر خط نمایش داده می شود 3 نقل قول لینک به ارسال
site 79 ارسال شده در تیر 94 گزارش بازنشر ارسال شده در تیر 94 سلامممنون بابت توضیحاتسایت من سه ستون داره1- باید چیکار کنم که هنگام نمایش در موبایل ، فقط ستون وسط نمایش داده بشه و ستون چپ و راست ، پایین پایین نمایش داده بشن ؟ مثل سایت دانلودها2- منوی اصلی سایت روباید چطوری رسپانسیو کنم (نمایش اون آیکون منو در حالت رسپانسیو) ؟ نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در تیر 94 گزارش بازنشر ارسال شده در تیر 94 اگر از یک نسخه بوت استراپ که به درستی rtl شده باشه استفاده می کنید <div class="col-xs-12 col-md-8 col-lg-4">محتوای حلقه های اصلی سایت</div><div class="clearfix hidden-md hidden-lg visible-xs visible-sm"> </div><div class="col-xs-6 col-md-2 col-lg-4 pull-right">محتوا سایدبار سمت راست<div><div class="col-xs-6 col-md-2 col-lg-4 pull-left">محتوا سایدبار سمت چپ<div> 3 نقل قول لینک به ارسال
site 79 ارسال شده در تیر 94 گزارش بازنشر ارسال شده در تیر 94 اگر از یک نسخه بوت استراپ که به درستی rtl شده باشه استفاده می کنید<div class="col-xs-12 col-md-8 col-lg-4">محتوای حلقه های اصلی سایت</div><div class="clearfix hidden-md hidden-lg visible-xs visible-sm"> </div><div class="col-xs-6 col-md-2 col-lg-4 pull-right">محتوا سایدبار سمت راست<div><div class="col-xs-6 col-md-2 col-lg-4 pull-left">محتوا سایدبار سمت چپ<div>خیلی ممنون1- آیا برای هر سمت (راست - وسط - چپ ) نیاز به یک row می باشد ؟ یا اینکه کل این 3 قسمت در یک row باید قرار بگیرد ؟2- کد زیر دقیقا باید در کجای قالب قرار بگیرد ؟<div class="clearfix hidden-md hidden-lg visible-xs visible-sm"> </div> نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در تیر 94 گزارش بازنشر ارسال شده در تیر 94 بحث نمایش آیکون ارتباطی به گرید نمودن نداره نحوه ایجادش رو در این نشانی ببینید صفحه را در تپلت و موبایل و دسکتاپ ببینید و متوجه تفاوتش بشوید و در حالت دسکتاپ روی آیکون کد بزنید تا ساختار کدهاش هم نمایش داده بشهhttp://codex-parsi.ir/jquery-mobile/collapse.phpکدها دقیقا باید در همونجایی که هستند قرار بگیرند دیگه !<div class="clearfix hidden-md hidden-lg visible-xs visible-sm"> </div>بعد از بسته شدن div مربوط به گرید بخش مطالب تمامشون در یک row قرار می گیرند 3 نقل قول لینک به ارسال
site 79 ارسال شده در تیر 94 گزارش بازنشر ارسال شده در تیر 94 خیلی ممنونترتیب ، در قالب من به صورت زیر هست :<div class="col-xs-6 col-md-2 col-lg-4 pull-right">محتوا سایدبار سمت راست<div><div class="col-xs-12 col-md-8 col-lg-4">محتوای حلقه های اصلی سایت</div><div class="clearfix hidden-md hidden-lg visible-xs visible-sm"> </div><div class="col-xs-6 col-md-2 col-lg-4 pull-left">محتوا سایدبار سمت چپ<div>یعنی اول منوی سمت راست ، محتوا ، منوی سمت چپبرای اینکه به بوت استرپ بگم اول از همه محتوا رو نشون بده و بعدش بلوک سمت چپ و راست ، باید چه کار کنم ؟ نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در تیر 94 گزارش بازنشر ارسال شده در تیر 94 خوب من که ترتیب درستش رو براتون گذاشتم 2 نقل قول لینک به ارسال
site 79 ارسال شده در تیر 94 گزارش بازنشر ارسال شده در تیر 94 (ویرایش شده) خوب من که ترتیب درستش رو براتون گذاشتمhttp://forum.wp-pars..._80#entry210581حرف شما متیناما قالب من به صورت زیر هست :ستون سمت چپ ..................محتوا................. ستون سمت راستاما اگه بخوام ترتیب اونا رو تغییر بدم و به قول کد شما محتوا ........... ستون سمت راست ............ ستون سمت چپ انجام بدم ، قالب بهم میریزه و مثل عکس زیر میشه : ویرایش شده تیر 94 توسط site نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در تیر 94 گزارش بازنشر ارسال شده در تیر 94 فقط ترتیب را نباید تغییر بدهید باید pull-rightوpull-leftرو هم به ترتیبی که تو کد هست بهش اضافه کنید. 2 نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در تیر 94 گزارش بازنشر ارسال شده در تیر 94 در ضمن لینکی که دادم با این روش فرق می کنه یعنی در دیوایس های مختلف منوی اول رو به صورتهای مختلف نمایش می ده و در موبایل مخفیش می کنه و با کلیک روی آیکونی که در نوار بالایی سایت اضافه می شه به صورت کشویی لودش می کنه روش این لینک http://codex-parsi.ir/jquery-mobile/collapse.phpو این تایپیک دو روش کاملا مختلفند که من روش لینک اول رو پیشنهاد می کنم شما باید کلاس های بوت استراپتون رو به اون کلاس ها تغییر بدیدخوب به لینک دقت کنید در حالت کامپیوتر دقیقا از لحاظ ستون بندی عین قالب شماست 2 نقل قول لینک به ارسال
site 79 ارسال شده در تیر 94 گزارش بازنشر ارسال شده در تیر 94 (ویرایش شده) (( روش مورد تایید شما در کجا آموزش داده شده است ؟ ))من از قبل به ستون ها و متحوا ، width و float دادم . اینا رو باید حذف کنم ؟float رو حذف کردم اما درست نشدوقتی هم که width رو حذف میکنم ، باکس مربوطه ، عرضش کل صفحه رو میگیرهمثلا محتوا عرضش 490 هستستون سمت راست و چپ هم عرض هرکدومشون 210 استاگه کد width رو حذف کنم ، عرض اون باکس کل صفحه رو اشغال میکنهمن هرکاری کردم آخرش به صورت زیر شد :این هم یک عکس از inspect element :در عکس زیر مشاهده بفرمایید ، من محتوا ، ستون سمت چپ ، ستون سمت راست را در داخل یک row گذاشتم اما row مربوطه ، فقط محتوا رو اشغال کرده است ویرایش شده تیر 94 توسط site نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در تیر 94 گزارش بازنشر ارسال شده در تیر 94 اول اینکه موقع کار کردن با بوت استراپ به هیچ وجه نباید دستی width بدید به هیچ کدوم از عناصر صفحههمینطور float به چپ و راستبوت استراپ برای هر حالتی کلاسی داره و تمام قواعد از ابتدا تا انتها باید طبق اصولش انجام بشهاگر می خواهید تغییری در اندازه ای بدید حتما باید مقدارش رو در کلاسش اصلاح کنید که کار بسیار سختیهحتی padding و margin هم نباید به سمت چپ و راست بدیددوم اینکه اگه توی نمایش اولیه اول ستون سمت چپ را مشاهده می کنید معنیش اینه که استایلتون درست راست به چپ نشده و ترکیبات اصلی توش به هم ریخته اند توی بوت استراپ سیصد مرتبه left های مختلف تعریف شدند و دویست مرتبه هم right های مختلف منظورم خواصی مثلfloat:left;clear:left;margin-left:Npx;padding-left:Npx;و یا کلاس هایی مثلleftpull-left.next.leftnavbar-leftهست که از مجموع این پونصد مورد سی چهل تاشون نباید تغییر کنند و ما بقی موارد باید جای left و right با هم عوض بشندسوم اینکه قاعده ساخت یک صفحه گرید شده در بوت استراپ به این شکله<div class="row"><div class="bg-danger col-xs-12"><span class="after"> </span></div><div class="bg-info col-xs-11"><span class="after"> </span></div><div class="bg-warning col-xs-1"><span class="after"> </span></div><div class="bg-success col-xs-2"><span class="after"> </span></div><div class="bg-primary col-xs-10"><span class="after"> </span></div><div class="bg-info col-xs-9"><span class="after"> </span></div><div class="bg-warning col-xs-3"><span class="after"> </span></div><div class="bg-success col-xs-4"><span class="after"> </span></div><div class="bg-primary col-xs-8"><span class="after"> </span></div><div class="bg-info col-xs-7"><span class="after"> </span></div><div class="bg-warning col-xs-5"><span class="after"> </span></div><div class="bg-success col-xs-6"><span class="after"> </span></div><div class="bg-danger col-xs-6"><span class="after"> </span></div><div class="bg-info col-xs-10"><span class="after"> </span></div><div class="bg-warning col-xs-1"><span class="after"> </span></div><div class="bg-primary col-xs-1"><span class="after"> </span></div><div class="bg-danger col-xs-2"><span class="after"> </span></div><div class="bg-info col-xs-3"><span class="after"> </span></div><div class="bg-danger col-xs-7"><span class="after"> </span></div><div class="bg-success col-xs-4"><span class="after"> </span></div><div class="bg-primary col-xs-4"><span class="after"> </span></div><div class="bg-info col-xs-4"><span class="after"> </span></div><div class="bg-warning col-xs-3"><span class="after"> </span></div><div class="bg-success col-xs-3"><span class="after"> </span></div><div class="bg-info col-xs-3"><span class="after"> </span></div><div class="bg-danger col-xs-3"><span class="after"> </span></div><div class="bg-warning col-xs-2"><span class="after"> </span></div><div class="bg-success col-xs-2"><span class="after"> </span></div><div class="bg-info col-xs-2"><span class="after"> </span></div><div class="bg-warning col-xs-2"><span class="after"> </span></div><div class="bg-primary col-xs-2"><span class="after"> </span></div><div class="bg-danger col-xs-2"><span class="after"> </span></div><div class="bg-info col-xs-1"><span class="after"> </span></div><div class="bg-warning col-xs-1"><span class="after"> </span></div><div class="bg-success col-xs-1"><span class="after"> </span></div><div class="bg-danger col-xs-1"><span class="after"> </span></div><div class="bg-info col-xs-1"><span class="after"> </span></div><div class="bg-warning col-xs-1"><span class="after"> </span></div><div class="bg-success col-xs-1"><span class="after"> </span></div><div class="bg-info col-xs-1"><span class="after"> </span></div><div class="bg-danger col-xs-1"><span class="after"> </span></div><div class="bg-warning col-xs-1"><span class="after"> </span></div><div class="bg-success col-xs-1"><span class="after"> </span></div><div class="bg-info col-xs-1"><span class="after"> </span></div></div>که این می شه نتیجه اشhttps://jsfiddle.net/fakhar/jh7d6u2p/قالب شما تا وقتی به این شکل نرسه یک قالب غیر استاندارده و نمیشه در موردش نظر دادچهارم اینکهمجموع دو ستون کناری شما یک row ایجاد نمی کنند باید هر سه ستون اصلی (دو ستون کناری و یک ستون میانی) رو داخل یک row قرار بدیدو پنجم هم اینکه شما باید با قوانین بوت استراپ کد نویسی کنید نه اینکه کدتون رو با سلیقه خودتون بنویسید و بعدش بخواهید بوت استرپ مشکلاتش رو برطرف کنه 3 نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در تیر 94 گزارش بازنشر ارسال شده در تیر 94 یک نکته دیگه ایراد قالب رو نمی شه توی تصویر تشخیص داد نشانی آنلاین بگذارید 2 نقل قول لینک به ارسال
site 79 ارسال شده در مرداد 94 گزارش بازنشر ارسال شده در مرداد 94 سلاممیتونم در بوت استرپ مثلا یک قسمت از قالب رو طوری طراحی کنم که مثلا در col-xs ، فلان class مشخصه هایش تغییر کنه ؟؟ نقل قول لینک به ارسال
zahra-sha 0 ارسال شده در تیر 95 گزارش بازنشر ارسال شده در تیر 95 (ویرایش شده) سلام. من طی آموزش طراحی قالب واکنشگرا با بوت استرپ, فایل scssبوت استرپ رو با گامپایلر کوالا کامپایل کردم ولی با این ارور مواجه شدم و از ادامه آموزش جا موندم. خاهشن راهنماییم کنین باید اولین پروژه طراحیمو تحویل بدم. ویرایش شده تیر 95 توسط zahra-sha نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .