بوت استرپی شو! 6#

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

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

<div class="col-lg-6">
    <img class="img img-thumbnail img-responsive" src="" alt="">
</div>

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

<span class="badge">100%</span>

<ul class="list-group">
  <li class="list-group-item">Phase 1 <span class="badge">100%</span></li>
  <li class="list-group-item">Phase 2 <span class="badge">95%</span></li>
  <li class="list-group-item">Phase 3 <span class="badge">80%</span></li>
  <li class="list-group-item">Phase 4 <span class="badge">45%</span></li>
  <li class="list-group-item">Phase 5 <span class="badge">15%</span></li>
</ul>

<p>Persons: 16</p>
<p>Time: 180h</p>
<p>Status: <span class="label label-warning">In Progress</span></p>
<p>Share in: 
  <div class="btn-group" role="group" aria-label="...">
    <a href="#" class="btn btn-primary">Facebook</a>
    <a href="#" class="btn btn-info">twitter</a>
    <a href="#" class="btn btn-danger">g+</a>
  </div>
</p>

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

<div class="row">
    <div class="col-md-8 col-lg-6"></div>
    <div class="col-md-4 col-lg-3"></div>
    <div class="hidden-md col-lg-3"></div>
</div>

<div class="row">
    <div class="col-sm-12 col-md-8 col-lg-6"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 hidden-md col-lg-3"></div>
</div>

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-6"></div>
    <div class="hidden-xs col-sm-6 col-md-4 col-lg-3"></div>
    <div class="hidden-xs col-sm-6 hidden-md col-lg-3"></div>
</div>

<div class="row">
  <div class="col-xs-12 col-md-10">
    <h3>Bootstrap Project</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque obcaecati doloremque laboriosam provident, doloribus 
    illum tenetur perspiciatis ad quod dignissimos distinctio vel amet laborum eos omnis alias ratione voluptatibus quae 
    dolorum, repellat. Ad blanditiis dignissimos voluptates amet autem maxime aut, assumenda voluptatibus corrupti illo ab 
    ut voluptatem. Deleniti nemo, optio est at, saepe temporibus illum rem explicabo, quod assumenda voluptas eveniet neque 
    perferendis cumque, dolore?</p>
  </div>
</div>

<nav>
  <ul class="pager">
    <li class="disabled"><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

<div class="row">
  <div class="col-lg-3"></div>
  <div class="col-lg-9"></div>
</div>

<div class="col-lg-9">
  <div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
      <span class="sr-only">80% Complete (success)</span>
    </div>
  </div>
</div>

<div class="col-lg-3">
  <button class="btn btn-info">Show Progress</button>
</div>

برای اینکه ظاهر بهتری داشته باشیم , ابتدا ارتفاع نوار پیشرفت رو هم اندازه دکمه می کنیم. کافیه با سلکتورهای CSS , نوارمون رو انتخاب کنیم و ارتفاع مورد نیازش رو بهش بدیم. حالا باید فضای بین این دو المان رو پر کنیم.
در حالت عادی دکمه ها به اندازه متنی که درونشون قرار داره فضا اشغال میکنن و من این رو نمیخوام. بلکه می خوام که عرض اون هم متناسب با عرض صفحه نمایشگر یا همون سایزمون (lg,md,sm,xs) باشه. پس اول دکمه رو در یک ستون قرار میدم ( در اینجا یک ستون سه واحدی) و سپس کلاس btn-block رو بهش اضافه می کنم که تمام عرض ممکن رو (3 واحد) در بر بگیره. حالا خیلی راحت کافیه برای سایز های دیگه (md,sm,xs) عرض ستون هامون رو مشخص کنیم تا دکمه ای که در داخل ستون قرار داره ستون رو کامل در بر بگیره. من سایز ستون ها رو مشخص کردم و می تونید در نسخه 13 این تغییرات رو ببینید. (عرض مرورگرتون رو تغییر بدید)

نوبتی هم باشه , نوبت میرسه به بخش نظرات. تقریبا در هر سایتی شما یک بخش برای نظرات دارید. اگر بخواین طرحی شبیه طرح کامنت ها در فیسبوک پیاده سازی کنید , بوت استرپ خیلی کمکتون کرده. خیلی
کافیه یه نگاهی به بخش media در بوت استرپ بندازین. اولش شاید یکم پیچیده باشه ولی من سعی میکنم واضح براتون توضیح بدم...

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

به کد بالا دقت کنید. قطعه کد بالا یک media محسوب میشه. به تمامی اجزای یک کامنت مثل تصویر شخص, تیتر کامنت و متن کامنت یک مدیا میگن.

حالا بیایم اجزای یک مدیا رو معرفی کنیم.

در تصویر بالا ساختار یک مدیا رو توضیح دادم. حالا کافیه بعد از آخرین سطرمون یک ستون ایجاد کنیم تا نظراتمون رو زیرش لیست کنیم. من به ستونم عرض کامل رو ندادم چون دوست نداشتم بخش نظرات هم مثل بخش محتوای اصلی , تمام عرض صفحه رو در بر بگیره.
چند تا از این media ها رو پشت هم کپی کنید تا به نسخه 14 برسید.
حالا میخوام کامنت ها رو با حالت reply بچینم. یعنی یه کامنت میتونه جواب یک کامنت دیگه باشه.در واقع یک media جواب یک media ی دیگست. فقط کافیه تمام media ی دوم رو در انتهای div.media-body اول اضافه کنیم. مثل کد زیر:

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    <div class="media">
      <div class="media-left">
        <a href="#">
          <img class="media-object" src="..." alt="...">
        </a>
      </div>
      <div class="media-body">
        <h4 class="media-heading">Media heading</h4>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>
    </div>        
  </div>
</div>

نتیجه نهایی کار رو می تونید در نسخه نهایی ببینید. 

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