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

<div class="row" id="row3">
  <div class="col-xs-12 text-center"><h2>Our Team</h2></div>
  <div class="col-md-6 col-lg-4 text-center"></div>
  <div class="col-md-6 col-lg-4 text-center"></div>
  <div class="col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-0 text-center"></div>
</div>

در نهایت باید درون این ستون ها محتوا قرار بدیم. 3 تگ p برای عکس , تیتر و توضیح قرار میدیم. برای تیتر و توضیح یک استایل شخصی مینویسم. شما هم میتونید با توجه به سلیقتون استایل بنویسید. اما برای تصویر میتونید از کلاس های بوت استرپ استفاده کنید. بوت استرپ کلاس های مخصوصی برای تصاویر داره. از جمله img-circle و img-thumbnail که میتونه یک تصویر رو به شکل دایره نمایش بده و یا به شکل بند انگشتی. برای این کافیه ابتدا به تصویرتون کلاس img رو اختصاص بدین و سپس یکی از کلاس های img-rounded , img-circle و img-thumbnail رو اضافه کنید. برای رسپانسیو شدن تصویرتون (عرض 100% والد) هم میتونید کلاس img-responsive رو اضافه کنید. برای زیباتر شدن صفحه چند خط استایل دادم که میتونید در نسخه 5 مشاهده کنید. (یادتون نره که عرض صفحه رو تغییر بدید  )
این قسمت هم اضافه شد. حالا یه مساله مهم.
فرض کنید مشتریه شما ازتون خواسته که بین قسمت های "خدمات ما" و "اعضای ما" یک بخش جدید رو اضافه کنید و کاملا ناگهانی هم این ویژگی رو خواسته. 
ساختار سطربندی در بوت استرپ در اینجا به کمک ما میاد. به تصویر زیر دقت کنید.

​

برای اضافه کردن سطر جدید میان دو سطر فقط کافیه که یک div با کلاس row و یک شناسه جدید بین دو سطرتون درج کنید. من در اینجا شناسه newrow رو انتخاب کردم و انتخاب نام این شناسه ها کاملا دلخواهه.
حالا برای مثال در این قسمت یه جمله معروف رو در مورد محوریت سایتمون مینویسیم. از کلاس های آماده بوت استرپ کمک میگیریم. خیلی راحت کد زیر رو از سایت بوت استرپ کپی میکنیم و درون div#newrow استفاده می کنیم.

<div class="row" id="newrow">
  <blockquote class="text-center">
    <p>We love our users , They reward us by staying our users</p>
    <footer>Steve Jobs in <cite title="Source Title">WWDC</cite></footer>
  </blockquote>
</div>

<div class="row" id="rowContact">
  <div class="col-lg-8"></div>
  <div class="col-lg-4"></div>
</div>

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

<form>
  <div class="form-group">
    <label for="forname">Your Name:</label>
    <input type="text" class="form-control" id="formname" placeholder="Name...">
  </div>
  <div class="form-group">
    <label for="formemail">Your Email:</label>
    <input type="email" class="form-control" id="formemail" placeholder="Email...">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">Your Massage:</label>
    <textarea class="form-control" rows="4"></textarea>
  </div>
  <button type="submit" class="btn btn-default">Send!</button>
</form>

در بخش سمت راست یا همون ستونی که 4 واحد رو به خودش اختصاص میده باید آدرس رو بنویسیم. جالب اینه که برای این قسمت هم کد آماده هست.
نسخه شماره 7 رو در اینجا ببینید.
در آخر هم کافیه یه سطر رو به عنوان فوتر سایت ایجاد کنید و متن کپی رایتتون رو در داخلش بنویسید.

<div class="row" id="footer">
  <h5 class="text-center">&copy; 2015 <a href="http://www.majidonline.com/">Majidonline</a></h5>
</div>

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