
سلام دوستان
در این قسمت قراره فایل 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; } }
خسته نباشید. بخش نظرات رو هم در قسمت بعدی درست میکنیم.
سلام
سایت بسیار پرمحتوایی دراین
فقط ای کاش این آموزش ها را به صورت کلیپ آموزشی می گذاشتین م
منون
به زودی دوره آموزشی بوت استرپ رو به صورت ویدیویی برگزار خواهیم کرد .
خیلی عالیه , کی پنل نویسی شروع میشه ؟
درود میشه برای قسمت نظرات از پلاگین bootstrapvalidator هم استفاده کنید ؟؟ دعای خیر پشت سرتون میادا 😀
سلام خود بوت استرپ کلی کلاس های validation داره که با کمی جی کوئری میشه باهاش رفت فضا 🙂
خب پس چرا این فضاپیمایی ها رو به ما هم یاد نمی دید؟:| 😀
لطفا اگه میشه یه آموزش به حالت مثال کاربردی از این کلاس ها بذارید. ❓
شما برین داخل دایکیونت خودش در بخش فرم ها پیداشون میکنی،بعد ترکیب این کلاس با جی کوئری میشه راحت Validation های خوبی به دست آورد.فکر می کنید همون کتابخونه که گفتین چطوره درست شده؟؟؟از فا که نیومده همین کارارو رو کرده.