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

[SM-Mahdavi 5428]

وقتی بنر میزارم بهش عرض ثابت میدم باز از کادر میزنه بیرون :|

چقدر سخته کار باهاش :/

به تصاویر باید کلاس img-responsive بدید

[M.Javad 684]

یه سوال آیا لازمه برای هر ستونی که میخوایم بزاریم حتما یه کلاس row تعریف کنیم؟!به فرض مثال من سه تا ستون دارم آیا باز لازمه برای هر ستون یه سطر بزارم ؟!

من اینکارو کردم ولی همیشه از یه طرف کمی فضا زیاد میاد!!باید با مارجین درستش کنم؟!

[RedPlus 1585]

سلام ! اگه این جلسه رو ی بار دیگه بخونی ومثال ها رو ببینی فک کنم بهتر متوجه بشی !

ولی واسه هر ستون نه ! ستونهایی که کنار هم قرار میگیرین رو بزار داخله یک row ! به فرض سایدبار و محتوا سایت که کنار هم هستن داخل ی row بزار ، فوتر ربطی به اینا نداره پس داخل row جدا بزار !

مثال های لینک بالا رو ببین و با دقت بخون ! شاید بد نوشته باشم ولی شما چه واسه آموزش من چه بقیه آموزش ها هرچی متوجه نشدی اینقدر بخون تا بفهمی من خودم که اینطوریم !

در کل اگه این 3 تا ستونی که میگی در کنار هم هستن لازم نیست واسه هر کدوم ی row بسازی 3 تا رو داخل یک row بزاری کافیه!

[site 79]

سلام

من بوت استرپ رو از لینک زیر دانلود کردم :

http://muayyad-alsadi.github.io/bootstrap-rtl/

حالا باید چطوری ازش استفاده کنم ؟

باید کد های html و css رو کجا وارد کنم؟

آشنایی کمی با html و css دارم

[Mohammad Javad 54]

سلام

من بوت استرپ رو از لینک زیر دانلود کردم :

http://muayyad-alsad.../bootstrap-rtl/

حالا باید چطوری ازش استفاده کنم ؟

باید کد های html و css رو کجا وارد کنم؟

آشنایی کمی با html و css دارم

سلام

اینجا رو ببین

[site 79]

سلام

اینجا رو ببین

http://forum.wp-pars...-قالب-وردپرس-و/

سلام ممنون

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

[Mohammad Javad 54]

سلام ممنون

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

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

این سایت اصلی بوت استرپ

http://getbootstrap.com/css/

به کد هایی که برای هر چیز استفاده شده نگاه کن از همون ها هم شما میتونید برای طراحی استفاده کتید

این سایت هم جالبه

http://www.layoutit.com/build

ویرایش شده آبان 93 توسط Mohammad Javad

[site 79]

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

این سایت اصلی بوت استرپ

http://getbootstrap.com/css/

به کد هایی که برای هر چیز استفاده شده نگاه کن از همون ها هم شما میتونید برای طراحی استفاده کتید

این سایت هم جالبه

http://www.layoutit.com/build

خب اگه از بوت استرپ استفاده کنم ، چه مزیتی داره ؟ فقط رسپانسیو ؟

یا اینکه html و css گسترش یافته است ؟

[Mohammad Javad 54]

خب اگه از بوت استرپ استفاده کنم ، چه مزیتی داره ؟ فقط رسپانسیو ؟

یا اینکه html و css گسترش یافته است ؟

ببینید بوت استریپ یک فریم ورک هست که کار طراحی و ریسپانسیو رو راحت کرده

مثلا کدهای اماده ی زیادی داره که کار طراحی رو راحت تر کرده

http://getbootstrap....com/javascript/

http://getbootstrap.com/css/

http://getbootstrap.com/components/

شما با بوت استرپ راحت میتونید قالب رو ریسپانسیو و طراحی کنید

کار هم باهاش خیلی سخت نیست

اموزشش هم داخل انجمن هست

ویرایش شده آبان 93 توسط Mohammad Javad

[majid1889 733]

سلام

دوستان کسی میدونه دلیل اینکه توی طول های کمتر از 767px کل ِ تگ body به این صورته چیه ؟

padding-right: 20px;
padding-left: 20px;

اگه این استایل برداشته بشه مشکلی پیش میاد بنظرتون ؟!

[imanfakhar 26231]

دلیلش اینه که در اون سایز تمام کلاس های دیگه از دو طرف مارجین و پندینگ صفر دارند و با برداشته شدنش نوشته ها به گوشه های ویزور دیوایس می چسبند و در اغلب گوشی های موبایل می رند زیر فریم گوشی و خونده نمی شند

[M.Javad 684]

یه سوال

برای هر row باید حتما یه col بزاریم یا اگه کلا بخوایم از 100درصدش استفاده کنیم نیازی به col نیست؟!

[amirali.bk 656]

منظورتون رو از 100 درصد نفهمیدم ولی برای هر row باید col بزارید اگه میخواید ریسپانسیو بشه

[M.Javad 684]

مثلا برای ul و li ها که مثلا میخوام دسته هارو نشون بدم تو هر سطر باید برای هر li یه col بزارم؟

[imanfakhar 26231]

برای li نه col باید بگذارید نه row

به طور کلی این کلاس ها برای گرید صفحه هستند یعنی بصورت شطرنجی یا توری صفحه را ساختن

ul کلاس های خوش رو داره مثل list-group که باید به li هاش کلاس list-group-item را داد

[hesamkj 104]

سلام

<div class="container">
  <div class="row">
   <div class="hidden-lg col-md-12 col-sm-12 hidden-xs">
    <nav>
	 <h1 style="font-family: weblogmayekan"> </h1>
    </nav>
   </div>
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
    <img src="images/logo.png">
   </div>
  </div>
</div>

hidden این کد کار نمیکنه مشکلش چیه بنظرتون ؟

[imanfakhar 26231]

با چه سایز مونیتوری می بینید

این کد در سایز خیلی کوچک و خیلی بزرگ دایو را مخفی می کنه و در دو سایز میانی نمایش می ده می ده یعنی رزولیشن از 468 تا 1200

[site 79]

سلام دوستان

این بوت استرپ ، دکمه ها و رنگ ها و ... همش خاکستری هست و یکم بی روح هستش

میشه همه رنگ بندی رو مثل سایت زیر کرد ؟ :

http://drnt.ir/

[imanfakhar 26231]

سلام دوستان

این بوت استرپ ، دکمه ها و رنگ ها و ... همش خاکستری هست و یکم بی روح هستش

میشه همه رنگ بندی رو مثل سایت زیر کرد ؟ :

http://drnt.ir/

مسلمه که میشه باید به css تسلط داشته باشید و رنگهای کلاسهای مورد نظرتون رو تغییر بدید(یا من سئوال رو متوجه نشدم یا سئوال شما خیلی عجیب بود)

[imanfakhar 26231]

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

primary

danger

info

warning

success

که برای اجزای مختلف به شکلهای مختلف بکار می رند مثلا برای نوشته ها (رنگ متن) به صورت

text-danger

...

برای پس زمینه ها

bg-danger

...

برای آلرت ها

alert-danger

...

برای کلیدها

btn-danger

...

سایتی که نشونی دادید هم بوت استریپه که چند کلاسش شخصی سازی شده

[site 79]

مسلمه که میشه باید به css تسلط داشته باشید و رنگهای کلاسهای مورد نظرتون رو تغییر بدید(یا من سئوال رو متوجه نشدم یا سئوال شما خیلی عجیب بود)

سلام

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

خب مگه بوت استرپ خودش کد های آماده نیست ؟ میشه تغییراتی روش اعمال کرد ؟

[imanfakhar 26231]

کلا کدهای css آبشاری هستند یعنی اگر در خط اول داشته باشید

.div {
color:red;
}

و در خط آخر داشته باشید

.div {
color: blue
}

عنصر کلاس div به رنگ آبی دیده می شه و از رنگ قرمز صرف نظر می شه

حالا می شه یک فایل css جدید تعریف کنید و کلاسهای مورد نظرتون رو توش تغییر رنگ بدید و اونرو بعد از فایل bootstrap.css فراخوانی کنید

همچنین بوت استراپ تمام خواص را به کلاسها داده و شما می تونید با معرفی id به هر عنصر بهش خاصیت جدیدی بدید و چون id نسبت به class اولویت داره خاصیت شما همیشه ارجع تر از خاصیت بوت استراپ خواهد بود

آخرین راه هم ویرایش مستقیم فایل بوت استراپ و اعمال تغییرات روی رنگهای فعلیه

[behnamy01 12]

این مثال basic template بوت استرپ رو نگاه کنید:

http://getbootstrap....arted/#template

برای سازگاری بوت استرپ با IE اومده از کد هک استفاده کرده به صورت زیر:

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

حالا من نمیخوام مثل این از CDN استفاده کنم و رفتم اون فایل هایی که لینکش توی این هک هستش رو دانلود کردم و به صورت لوکال کنار پروژه ام گذاشتم، ولی توی همین هک یک جا نوشته:

<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

میخوام بپرسم منظورش اینه که توی لوکال کار نمیکنه، حتما باید از CDN استفاده کنم؟ راه حلی نیست؟

_________________________________________________________________________

سوال دوم: فرض کنید من 12 تا مربع کوچک (همون div های خودم) رو میخوام توی یک page بسازم به صورت 3 ردیف و هر ردیف هم چهار مربع. حالا میخوام وقتی از سایز md بزگتر بود همون 4 تا مربع توی صفحه نمایش داده بشه، ولی اگر کوچکتر بود توی هر ردیف 2تا مربع باشه، یعنی بشه 2 مربع در 6 ردیف. راه حل این موضوع توی بوت استرپ چیه؟

ویرایش شده فروردین 94 توسط behnamy01

[RedPlus 1585]

سلام !

سوال اول :

<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

این مظورش این بوده که اگه صفحه رو ذخیره یا سیو کنید این فایل js کار نمیکنه دیگه !

سوال دو :

فک کنم تو آموزش گفته باشم ی مثالی شبه همین ! اون تبلیغات بخونید فک کنم متوجه بشید . در کل :

<div class="row">
<div class="col-md-3 col-xs-6"> </div>
<div class="col-md-3 col-xs-6"> </div>
<div class="col-md-3 col-xs-6"> </div>
<div class="col-md-3 col-xs-6"> </div>
</div>

[M.Javad 684]

سلام.یه چیز عجیب اینه که وقتی فایل bootstrap.min.css رو فراخوانی میکنی تمامی استایل قالب شامل رنگ متن ها اندازه های منتن فونت ها و .... رو بهم میریزه

دقیقا باید چیکار کرد که این اتفاق نیفته؟!!