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

سلام دوستان

در این قسمت قراره فایل single.html رو طراحی کنیم. این فایل مربوط میشه به صفحه ای که فقط یک مطلب در اون نشون داده میشه. در سایت‌ها و وبلاگ‌ها اگر دقت کرده باشید وقتی روی " ادامه مطلب " یه مطلب کلیک میکنید وارد صفحه ای میشید که مربوط به همون مطلب هست و کل مطلبی که نوشته شده نشون داده میشه.

اولین کاری که باید انجام بدید اینه که محتوای فایل index.html رو کپی و داخل فایل single.html پیست کنید.

بعد باید محتوای درون row رو که در ابتدای قسمت 9 درست کردیم (تا thumbnailها و pagination رو داخلش قرار بدیم) پاک کنید.

حالا باید به جای این کدی که حذف کرده بودید، کد زیر رو بنویسید تا یه بلاک درست بشه که کل عرض قسمت محتوا رو اشغال کنه:

<div class="col-sm-12">

</div>

حالا داخل همین بلاک بنویسید bs3-panel:heading و tab رو بزنید یا مستقیما کدهای زیر رو بنویسید:

<div class="panel panel-default">
	<div class="panel-heading">
		<h3 class="panel-title">Panel title</h3>
	</div>
	<div class="panel-body">
		Panel content
	</div>
</div>

قبلا گفته بودم که panel بوت استرپ بهمون این اجازه رو میده که عناصرمون رو داخل یه باکس قرار بدیم و الان هم چون لازم داریم متنمون رو داخل باکس قرار بدیم از panel استفاده میکنیم. کلاس‌های panel-default و panel-title رو هم حذف کنید، چون خودمون استایل پنل رو مینویسیم پس نیازی بهشون نیست.

حالا میتونید به جای عبارت Panel title عنوان مورد نظر خودتون رو بنویسید و به جای عبارت Panel content هم محتوای مد نظرتون رو بنویسید (لینک، عکس و heading‌ها رو هم قرار بدید که اگر لازم شد بهشون استایل بدیم). تغییرات زیر رو انجام بدید:

توضیح خاصی نداره فقط اینکه به جای این کادر قرمزرنگ سومی میتونید محتوای مد نظر خودتون رو قرار بدید. کدهای کادر قرمزرنگ اخری هم برای قسمت برچسب مطالب هست. خط 122 تصویر هم مربوط میشه به آیکون برچسب بوت استرپ. این هم کدهایی که در تصویر میبینید:

<div class="row">
	<div class="col-sm-12">
		<div class="panel">
			<div class="panel-heading">
				<h3>لورم ایپسوم</h3>
			</div>
			<div class="panel-body">
				<p><a href="#">لورم ایپسوم</a> متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود <mark>ابزارهای کاربردی</mark> می‌باشد.</p>
				<a href="#">
					<img src="img/example.jpg" class="img-responsive" alt="lorem ipsum">
				</a>
				<h1>لورم ایپسوم</h1>
				<h2>لورم ایپسوم</h2>
				<h3>لورم ایپسوم</h3>
				<h4>لورم ایپسوم</h4>
				<h5>لورم ایپسوم</h5>
				<h6>لورم ایپسوم</h6>

				<div class="tagcloud">
					<i class="glyphicon glyphicon-tags"></i>
					<a href="#">وردپرس</a>
					<a href="#">wp</a>
					<a href="#">wordpress</a>
				</div>
			</div>
		</div>
	</div>
</div>

برای استایل دهی به این کدها، فایل _panels.scss رو باز کنید و کدهای زیر رو بنویسید:

.content {
  .panel-heading {
    padding: 10px 15px;
    border-bottom: 1px dashed $color-yellow;
  }

  .panel-body {
    color: #000;
    margin-bottom: 0;

    img {
      margin: 0 auto;
      background: $gray-lighter; // #eee
      padding: 3px;
    }

    .tagcloud {
      a {
        background: $gray-lighter; // #eee
        padding: 3px 7px;
        margin: 2px 0;
        text-decoration: none;
        display: inline-block;
        border-radius: 5px;

        &:hover,
        &:focus {
          background: darken($gray-lighter, 3%); // #e6e6e6
        }
      }
    }
  }
}

میتونستیم استایل‌ها رو برای خود سلکتور .panel-body و .panel-heading بنویسیم ولی از اونجایی که قبلا برای قسمت سایدبار هم از panel استفاده کرده بودیم، پس استایلهای .panel-heading و .panel-body رو برای سلکتور .content نوشتیم تا استایلها با هم قاطی نشه. این کلاس content رو هم اگر یادتون باشه در قسمت پنجم تعریف کرده بودیم و گفته بودیم که بعدا برای استایل دهی ازش استفاده میکنیم. $gray-lighter هم که از قبل در فایل _variables.scss تعریف شده بوده.

رنگ بک گراند نوشته ای که بین تگ mark قرار داره هم میتونید از طریق فایل _normalize.scss تغییر بدید:

حالا برای قسمت اطلاعات نوشته، کد زیر رو مثل تصویر به فایل single.html اضافه کنید:

<div class="panel-body content-meta">
	<span>نویسنده: <a href="#">مهشاد کلانتری</a></span>
	<time datetime="2014-02-22">12 اسفند 1392</time>
	<span>10 بازدید</span>
	<span>3 دیدگاه</span>
</div>

میتونستیم از این کدی که الان نوشتیم (کد داخل کادر قرمزرنگ)، کلاس panel-body رو حذف کنیم و این بلاک کد رو ببریم داخل همون panel-body که مطلبمون رو نوشتیم. ولی چون قراره برای این قسمت اطلاعات نوشته، border-top و border-bottom تعیین کنیم و .panel-body مقداری padding راست و چپ داره، باعث میشد که این بوردرهای ما نتونه عرض کامل بلاک مطلب رو اشغال کنه. به همین خاطر کد رو به جای اینکه داخل panel-body بنویسیم، کنار panel-body نوشتیم و کنار کلاس content-meta یه کلاس panel-body اضافه کردیم که استایل‌های panel-body رو اینجا هم اضافه کنیم.

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

&.content-meta {
  border-bottom: 1px dashed $color-yellow;
  border-top: 1px dashed $color-yellow;

  span, time {
    margin: 0 0 0 15px;
  }
}

خسته نباشید. بخش نظرات رو هم در قسمت بعدی درست میکنیم.

نویسنده

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