رفتن به مطلب

تاپيك سوالات و نظرات آموزش بوت استرپ 3


پست های پیشنهاد شده

سلام خسته نباشید

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

خب حالا وقتی تو سایز گوشی یا همون xs اینارو میخوام ستون بندی کنم که بیاد زیر هم نمیشه ! ینی زیر هم نمیاد نمیدونم مشکل از کجا هستش و اینکه اگه هم زیر هم بیاد یه خورده چهره سایت زیاد مناسب و شکیل نمیشه ! از دوستان خواهش میکنم که راهنمایی بفرمایند در این نوع مواقع چیکار باید کرد !

با تشکر

لینک به ارسال

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>

را امتحان کنید.

لینک به ارسال

کسی جواب منو نداد

جواب شما را دادم دیگه

کلاس collapse و navbar-collapse و data-toggle برابر با collapse و data-target برابر با سلکتور مورد نظر برای تبدیل dive به یک کلید در دیوایس های مربوط به تپلت و مو.بایل است که در صورت کلیک روش دایو مورد نظر به صورت یک کشوی عمودی باز می شه و ظاهر سایت را به هم نمی ریزه

لینک به ارسال

من یک آیکون خاصی رو میخوام که مثلا در glyphicon بوت استرپ موجود نیست، واسه همین یک دونه آیکون منطقی هم نیست به نظرم که برم و کل font-awesome رو هم اضافه کنم به پروژه ام، در این شرایط بهترین راهکاری که پیشنهاد میدید چیه؟ میشه یک فونت آیکون رو از یک جا دیگه کپی کنم و به glyphicon های بوت استرپ اضافه کنم؟

لینک به ارسال

کسی از دوستان جواب منو نمیده ؟

شما سئوالت رو یکبار دیگه تکرار کن چون من فکر می کنم دوبار جوابتون رو دادم

من یک آیکون خاصی رو میخوام که مثلا در glyphicon بوت استرپ موجود نیست، واسه همین یک دونه آیکون منطقی هم نیست به نظرم که برم و کل font-awesome رو هم اضافه کنم به پروژه ام، در این شرایط بهترین راهکاری که پیشنهاد میدید چیه؟ میشه یک فونت آیکون رو از یک جا دیگه کپی کنم و به glyphicon های بوت استرپ اضافه کنم؟

به سایت fontello.com برید و کل آیکونهایی را که می خواهید انتخاب و دانلود کنید و کلا جایگزین glyphicon کنید

لینک به ارسال

خیلی خوبه ولی یک پیشنهاد

اون گرید بندی ها خیلی سخت هستند.فکر می کنم گه تو حالت های مختلف یک فایل ازش آماده کنی و برای دانلود بگذاری خیلی خوب می شد.

لینک به ارسال
خیلی خوبه ولی یک پیشنهاد اون گرید بندی ها خیلی سخت هستند.فکر می کنم گه تو حالت های مختلف یک فایل ازش آماده کنی و برای دانلود بگذاری خیلی خوب می شد.

نسخه های زیادی توی اینترنت هستن ، بستگی به کار شما داره که چجوری میخواین ازشون استفاده کنین:

http://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp

لینک به ارسال
  • 1 ماه بعد...

سلام

ببخشید من اصلا متوجه نشدم که کد زیر دقیقا چه کاری رو میکنه ؟


<!-- 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>

الان تو مرورگر به صورت زیر هست :

24626143561714717071_Untitled.png

بعد از زوم کردن :

1458114356171488570_Untitled2.png

لینک به ارسال

به زوم ربطی نداره کلاسهای


col-xs-XX
col-sm-XX
col-md-XX
col-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 در هر خط نمایش داده می شود

لینک به ارسال

سلام

ممنون بابت توضیحات

سایت من سه ستون داره

1- باید چیکار کنم که هنگام نمایش در موبایل ، فقط ستون وسط نمایش داده بشه و ستون چپ و راست ، پایین پایین نمایش داده بشن ؟ مثل سایت دانلودها

2- منوی اصلی سایت روباید چطوری رسپانسیو کنم (نمایش اون آیکون منو در حالت رسپانسیو) ؟

لینک به ارسال

اگر از یک نسخه بوت استراپ که به درستی 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>

لینک به ارسال

اگر از یک نسخه بوت استراپ که به درستی 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>

لینک به ارسال

بحث نمایش آیکون ارتباطی به گرید نمودن نداره

نحوه ایجادش رو در این نشانی ببینید

صفحه را در تپلت و موبایل و دسکتاپ ببینید و متوجه تفاوتش بشوید و در حالت دسکتاپ روی آیکون کد بزنید تا ساختار کدهاش هم نمایش داده بشه

http://codex-parsi.ir/jquery-mobile/collapse.php

کدها دقیقا باید در همونجایی که هستند قرار بگیرند دیگه !


<div class="clearfix hidden-md hidden-lg visible-xs visible-sm"> </div>

بعد از بسته شدن div مربوط به گرید بخش مطالب

تمامشون در یک row قرار می گیرند

لینک به ارسال

خیلی ممنون

ترتیب ، در قالب من به صورت زیر هست :


<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>

یعنی اول منوی سمت راست ، محتوا ، منوی سمت چپ

برای اینکه به بوت استرپ بگم اول از همه محتوا رو نشون بده و بعدش بلوک سمت چپ و راست ، باید چه کار کنم ؟

لینک به ارسال

خوب من که ترتیب درستش رو براتون گذاشتم

http://forum.wp-pars..._80#entry210581

حرف شما متین

اما قالب من به صورت زیر هست :

ستون سمت چپ ..................محتوا................. ستون سمت راست

اما اگه بخوام ترتیب اونا رو تغییر بدم و به قول کد شما محتوا ........... ستون سمت راست ............ ستون سمت چپ انجام بدم ، قالب بهم میریزه و مثل عکس زیر میشه :

45205143665561240655_Untitled.png

ویرایش شده توسط site
لینک به ارسال

فقط ترتیب را نباید تغییر بدهید باید


pull-right
و
pull-left

رو هم به ترتیبی که تو کد هست بهش اضافه کنید.

لینک به ارسال

در ضمن لینکی که دادم با این روش فرق می کنه یعنی در دیوایس های مختلف منوی اول رو به صورتهای مختلف نمایش می ده و در موبایل مخفیش می کنه و با کلیک روی آیکونی که در نوار بالایی سایت اضافه می شه به صورت کشویی لودش می کنه

روش این لینک

http://codex-parsi.ir/jquery-mobile/collapse.php

و این تایپیک دو روش کاملا مختلفند

که من روش لینک اول رو پیشنهاد می کنم

شما باید کلاس های بوت استراپتون رو به اون کلاس ها تغییر بدید

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

لینک به ارسال

(( روش مورد تایید شما در کجا آموزش داده شده است ؟ ))

من از قبل به ستون ها و متحوا ، width و float دادم . اینا رو باید حذف کنم ؟

float رو حذف کردم اما درست نشد

وقتی هم که width رو حذف میکنم ، باکس مربوطه ، عرضش کل صفحه رو میگیره

مثلا محتوا عرضش 490 هست

ستون سمت راست و چپ هم عرض هرکدومشون 210 است

اگه کد width رو حذف کنم ، عرض اون باکس کل صفحه رو اشغال میکنه

من هرکاری کردم آخرش به صورت زیر شد :

40927143669111034397_dfd.png

این هم یک عکس از inspect element :

در عکس زیر مشاهده بفرمایید ، من محتوا ، ستون سمت چپ ، ستون سمت راست را در داخل یک row گذاشتم اما row مربوطه ، فقط محتوا رو اشغال کرده است

27127143669144015612_112.png

ویرایش شده توسط site
لینک به ارسال

اول اینکه موقع کار کردن با بوت استراپ به هیچ وجه نباید دستی width بدید به هیچ کدوم از عناصر صفحه

همینطور float به چپ و راست

بوت استراپ برای هر حالتی کلاسی داره و تمام قواعد از ابتدا تا انتها باید طبق اصولش انجام بشه

اگر می خواهید تغییری در اندازه ای بدید حتما باید مقدارش رو در کلاسش اصلاح کنید که کار بسیار سختیه

حتی padding و margin هم نباید به سمت چپ و راست بدید

دوم اینکه اگه توی نمایش اولیه اول ستون سمت چپ را مشاهده می کنید معنیش اینه که استایلتون درست راست به چپ نشده و ترکیبات اصلی توش به هم ریخته اند توی بوت استراپ سیصد مرتبه left های مختلف تعریف شدند و دویست مرتبه هم right های مختلف منظورم خواصی مثل


float:left;
clear:left;
margin-left:Npx;
padding-left:Npx;

و یا کلاس هایی مثل


left
pull-left
.next.left
navbar-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 هفته بعد...

سلام

میتونم در بوت استرپ مثلا یک قسمت از قالب رو طوری طراحی کنم که مثلا در col-xs ، فلان class مشخصه هایش تغییر کنه ؟؟

لینک به ارسال
  • 11 ماه بعد...

سلام. من طی آموزش طراحی قالب واکنشگرا با بوت استرپ, فایل scssبوت استرپ رو با گامپایلر کوالا کامپایل کردم ولی با این ارور مواجه شدم و از ادامه آموزش جا موندم. خاهشن راهنماییم کنین باید اولین پروژه طراحیمو تحویل بدم.

New Picture.jpg

ویرایش شده توسط zahra-sha
لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...