طراحی قالب واکنش گرا با بوت استرپ 3 : قسمت 12 (آخر) - صفحه نمایش مطلب - بخش دوم

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۲۳ تیر ۱۳۹۳

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

اول قسمت دیدگاه های ارسال شده رو باهم درست میکنیم و بعد هم فرم ارسال دیدگاه.

فایل single.html رو باز کنید. مثل جلسه قبل که یه panel-body دیگه برای قسمت اطلاعات نوشته اضافه کردیم، اینبار هم یه panel-body برای قسمت نظرات اضافه میکنیم و کدهای مربوط به نمایش دیدگاه هایی که ارسال شده رو مینویسیم:

<div class="panel-body content-comment">
	<h4>دیدگاه ها</h4>
	<li class="comment">
		<div class="comment-body">
			<div class="comment-author">
				<img src="img/me.png" height="32" width="32" style="display: inline-block;">
				<cite>مهشاد کلانتری</cite>
				<span>(۲ اسفند ۱۳۹۲)</span>
				<a href="#" class="btn btn-cream pull-left">پاسخ</a>
			</div>

			<p>مرسی</p>
		</div>

		<ul class="children">
			<li class="comment admin">
				<div class="comment-body">
					<div class="comment-author">
						<img src="img/no.png" height="32" width="32" style="display: inline-block;">
						<cite>مدیر</cite>
						<span>(۲ اسفند ۱۳۹۲)</span>
						<a href="#" class="btn btn-cream pull-left">پاسخ</a>
					</div>

					<p>خواهش</p>
				</div>
				<ul class="children">
					<li class="comment">
						<div class="comment-body">
							<div class="comment-author">
								<img src="img/me.png" height="32" width="32" style="display: inline-block;">
								<cite>مهشاد</cite>
								<span>(۲ اسفند ۱۳۹۲)</span>
							</div>

							<p>:D</p>
						</div>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</div>

RWD-bootstrap3-12-1

برای دکمه ی پاسخ از کلاس btn-cream که قبلا ایجاد کرده بودیم استفاده کردیم. برای استایل دادن به این کدهایی که الان نوشتیم فایل _panels.scss رو باز کنید و کدهای زیر رو همونجایی که در تصویر مشخص شده بنویسید:

&.content-comment {
  padding: 5px 10px 10px;

  li.comment {
    list-style: none;
    padding: 10px;
    padding-bottom: 0;
    margin: 5px 0;
    background: lighten($color-yellow-light, 5%);
    border: 1px solid lighten($color-yellow, 10%);

    li.comment {
      padding-bottom: 10px;
    }

    &.admin {
      background: $color-yellow-light;
      border: 1px solid $color-yellow-dark;
    }
  }
}

RWD-bootstrap3-12-2

بوت استرپ چند مدل form داره مثل inline form و horizontal form و یه مدل اولیه هم داره که میتونید همه این مدل هارو اینجا به همراه کدهاشون ببینید.

ما برای فرم ارسال دیدگاه از مدل اولیه فرم ها استفاده کردیم. برای ایجاد این فرم اولیه کافیه در فایل single.html و درجای مناسب بنویسید bs3-form و tab رو بزنید تا کدش ایجاد بشه یا مستقیا کد زیر رو بنویسید:

<form action="" method="POST" role="form">
	<legend>Form title</legend>

	<div class="form-group">
		<label for="">label</label>
		<input type="text" class="form-control" id="" placeholder="Input field">
	</div>

	<button type="submit" class="btn btn-primary">Submit</button>
</form>

بعد مثل تصویر تغییرات رو انجام بدید تا فرم دیدگاه رو کامل کنیم:

RWD-bootstrap3-12-3

این هم کدهای فرم بعد از تغییرات:

<h4>ارسال دیدگاه</h4>
<div>آدرس ایمیل منتشر نخواهد شد. پر کردن فیلدهای * دار الزامی است.</div>

<form action="" method="POST" role="form">
	<div class="form-group">
		<label for="name">* نام:</label>
		<input type="text" class="form-control" id="name" placeholder="نام خود را وارد کنید">
	</div>

	<div class="form-group">
		<label for="email">* ایمیل:</label>
		<input type="email" class="form-control" id="email" placeholder="آدرس ایمیل خود را وارد کنید">
	</div>

	<div class="form-group">
		<label for="site">سایت:</label>
		<input type="url" class="form-control" id="site" placeholder="آدرس سایت / وبلاگ خود را وارد کنید">
	</div>

	<div class="form-group">
		<label for="comment">* نظر:</label>
		<textarea class="form-control" id="comment" placeholder="متن دیدگاه خود را وارد کنید" rows="5"></textarea>
	</div>

	<button type="submit" class="btn btn-cream">ارسال</button>
</form>

برای اینکه استایل فرم رو یکم بهتر کنیم میتونید کدهای زیر رو مثل تصویر در فایل _panels.scss اضافه کنید:

.form-control {
  @include form-control-focus($color-yellow);
}

form {
  margin-top: 10px;

  label {
    font-weight: normal;
  }

  textarea {
    height: auto;
    resize: vertical;
  }
}

RWD-bootstrap3-12-4

شاید براتون این سوال پیش اومده باشه که خط 111 تا 113 تصویر، دقیقا چه کاری انجام میده. اگر این خط رو پاک کنید و فایل single.html رو داخل مرورگرتون باز کنید، روی یکی از فیلدهای فرم کلیک کنید میبینید که به این شکل در میاد:

RWD-bootstrap3-12-5

یعنی وقتی فیلد حالت focus داشته باشند، یه بوردر و سایه آبی رنگ به فیلد اضافه میشه که من فکر میکنم برای این قالب خیلی جالب نیس و اگر رنگش با رنگ های قالب همخونی داشته باشه بهتره! به همین خاطر از میکسین form-control-focus بوت استرپ استفاده کردیم.

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

RWD-bootstrap3-12-6

خسته نباشید! امیدوارم این آموزش براتون مفید بوده باشه

[vip]

[/vip]

چه امتیازی به این مقاله می دید؟
نویسنده

نظرات کاربران

رضا

درود و سپاس از آموزش تون
البته من هنوز آغاز به فرا گیریش نکردم! چون من تو پروژم از بوت استرپ 3.3.5 بهره می برم و نسخه ای که شما آموزش دادید انگارنسبت به اونی که من بکار میبرم قدیمی تره.با این حساب آیا آموزش های شما بدرد من میخوره؟ و اینکه من با نرم افزار براکتس کار میکنم و شما با یه برنامه دیگه این آموزش رو دادید.این دو برنامه کارکردشون باهم خیلی فرق داره یا نه با براکتس هم می تونم از آموزش شما بهره ببرم؟
سپاس پیشاپیش برای پاسخ گویی تون

وحید صالحی

سلام مشکلی نیست میتونید استفاده کنید فقط کد نویسی css این دوره تحت sass هست که اون رو هم باید بلد باشید و حتما نسخه بوت استرپ باید rtl و راست چین باشه. برای آموزش تحت css میتونید در دوره آموزشی فریم ورک بوت استرپ که در سایت در حال برگزاری هست ثبت نام کنید در این دوره خیلی با جزئیات بیشتر بوت استرپ رو تدریس میکنیم
بله از براکت هم میتونید استفاده کنید
موفق باشید

مصطفی

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

Ali Abedian

سلام و ممنون از آموزش بسیار خوبتون
من این قالب رو دانلود و تبدیل به برنامه ی اندرویدی کردم.. ولی توی بلواستیک درست کار میکنه (البته چون صفحه بلواستیک نسبتا بزرگ هست، بدون تغییر دیده میشه) ولی توی موبایلم که صفحه ی کوچیکی داره ریسپانسیو میشه پستهاش و اسلایدرش، ولی اسلایدرش کار نمیکنه و جستجوش هم نمایش داده نمیشه و تب پربازدیدترین و آخرین مطلب عمل نمیکنه
در صورتی که هم هی اینها توی بلواستک درست کار میکنه

الهه گیتی روان

بسیار ممنونم . آموزش مفیدی بود . تشکر فراوان از شما . ❓ ❓ ❓

علی

سلام. بنده برای ریسپانسیو کردن قالب اماده خودم باید از چی استفاده کنم؟

لقمان آوند

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

tohidhabiby

آقا دمت گرم بسیار عالی بود و کمکم کرد ممنون

امیر

عجب آموزش توپی بود 1000 تا مطلب خونده بودم نمیتونستم قالب بزنم ! تا اینکه با سایت شما آشنا شدم ! خیلی اصولی و دقیق و قشنگ توضیح دادید هر کسی مو به مو کارایی که گفتید بدون خظا انجام بده میشه عین همون که خودتون طراحی کردید

با سپااااااااااااس

حسن

سلام من میخواستم ببینم سایت شما Cms اش چیه

وحید صالحی

وردپرس دوست عزیز…

مریم

سلام
مرسی از آموزش دقیق و کاملتون
موفق و پایدار باشید.

سیامک

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

مهشاد کلانتری

سلام
خواهش میکنم
لطف دارین
خیر

اصغر

سلام و با تشکر از آموزش خوبتون
متاسفانه قالب با ie مشکل داره. تو نسخه 10 و 11 اسکریپت هاش اجرا میشه تو نسخه های پائینتر کلا به هم می ریزه. هماهنگ بودن با ie به خاطر حجم زیاد کاربران استفاده کننده از آن مهم است . ممنون می شم مشکل رو بررسی کنید. با تشکر

مهشاد کلانتری

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

علیرضا

سلام
ببخشید دوباره cm میدم من دو تا سوال دیگه برام پیش اومده
برای طراحی قالب با بوت استرپ برای وردپرس یا کلا هر cms دیگه ای اول باید یه قالب استاتیک مثله همینی که شما زحمت اموزشش رو کشیدین تهیه کنیم ؟
و بعد توابع مخصوص وردپرس یا هر cms دیگه ای رو که میخوایم قالب برای اون قابل استفاده بشه رو جایگزین میکنیم ؟؟؟

سوال دوم : این قالب استاتیک که شما زحمت ساختش رو کشیدین محیط مدیریتی نداره که درسته ؟
یعنی تمام متن ها و کامنت هایی که داخل قالب استفاده شده مستقیما به صورت استاتیک درون فایل فایل html اون صفحه به کار رفته درسته ؟

خیلی ممنون

مهشاد کلانتری

سوال اول: بله
سوال دوم: بله

سید احسان عظیمی

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

مهشاد کلانتری

شاید اینجا کمکتون کنه

نیاز به لاگین

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