تصميم صفحة موقع باستخدام 3 Bootstrap - الجزء الثّاني

تمّ التطرّف في الجزء الأوّل من هذا الشرح إلى الخطوات الأوّليّة في بناء صفحة باستخدام إطار عمل 3 Bootstrap، في الجزء الثّاني، سيتم استكمال تصميم الصّفحة بدءًا من الشعار وانتهاءً بذيل الصّفحة.

الشعار (Logo)

سيتمّ إضافة الشعار إلى رأس الصّفحة كما في التّالي:

<header>
  <a href="/"><img src="images/logo.png" alt="Logo"></a>
</header>

سيتمّ الاكتفاء بإدراج صورة الشعار وبدون إضافة أية تنسيقات.

نموذج البحث

سيتمّ الاستفادة من بعض مُكوّنات Bootstrap بغرض إنشاء نموذج البحث، سيتمّ إنشاء نموذج ضمن السطر في رأسيّة الصّفحة، كما سيتمّ إزاحة هذا النموذج إلى جهة اليمين، على أنّ يَملك هذا الحقل الصنف form-control وعنونة (label)

وسيحتوي النموذج على المُكوّن (input groups)، ومهمته إزالة الفراغ بين حقل الإدخال النصّي (input text) والزر (button)، كما لو أنّه يقوم بدمجهم كعنصر واحد، ولذلك سيتمّ استخدام الصنف input-group، ولعنصر الإدخال (input) سيتمّ استخدام الصنف form-control ولقسم الزر سيتمّ استخدام الصنف input-group-btn.

ومن ثُمّ سيتمّ إضافة الصنف btn-primary للزر، والذي سيمنح الزر لونًا بارزًا وحدودًا بارزةً.

<header>
...
<form name="search" action="#" method="get" class="form-inline form-search pull-right">
  <div class="input-group">
    <input class="form-control" id="searchInput" type="text" name="search" placeholder="Search">
    <div class="input-group-btn">
      <button type="submit" class="btn btn-primary">GO</button>
    </div>
  </div>
</form>
</header>

سيتمّ في الخطوة التّالية ضبط عرض صندوق البحث إلى القيمة 200px:

body {
  ...

  .wrapper {
    ...

    header {
      ...

      .form-search {
        width: 200px;
      }
    }
  }
}

شريط التنقل

سيتمّ استخدام مُكوّنات التنقل، والّتي تحتوي على قائمة بالروابط، وسيتم استخدام الصنف navbar-nav لشريط التنقل، والذي يُطبّق تنسيقًا خاصًّا لشريط التنقل.

<nav class="navbar navbar-default">
  <ul class="nav navbar-nav">
    <li><a href="/home/">Home</a></li>
    <li class="active"><a href="/about/">About us</a></li>
    <li><a href="/services/">Services</a></li>
    <li><a href="/partners/">Partners</a></li>
    <li><a href="/customers/">Customers</a></li>
    <li><a href="/projects/">Projects</a></li>
    <li><a href="/careers/">Careers</a></li>
    <li><a href="/contact/">Contact</a></li>
  </ul>
</nav>

كما سيتمّ إضافة هذه المُتغيّرات وذلك بهدف جعل تنسيق شريط التنقل أكثر توافقيّةً مع الصّفحة.

/* navigation menu height */
@navbar-height: 37px;

/* additional paddings */
@nav-link-padding: 10px 30px;

/* background for menu items */
@navbar-default-bg: @panel-bg;

/* text color in the menu items */
@navbar-default-link-color: #b2b2b2;

/* for the mouse hover - the same color */
@navbar-default-link-hover-color: @navbar-default-link-color;

/* background of the active menu item */
@navbar-default-link-active-bg: @brand-primary;

/* text color of the active menu item */
@navbar-default-link-active-color: #fff;

كما سيتمّ إضافة التعديلات التّالية على ملفّ التنسيق الخاصّ بالمشروع، بغرض تخصيص الخط المُستخدم لشريط التنقل، وذلك بجعل الحروف كبيرة (uppercase)، وضبط نوع وحجم الخط.

body {
  ...
  .wrapper {
    ...
    .navbar a {
      text-transform: uppercase;
      font: 14px @brand-font;
    }
  }
}

عنوان الصّفحة (Page Header)

سيتمّ استخدام الصنف heading مع عنوان الصّفحة:

<div class="heading">
    <h1>About us</h1>
</div>

وبالتنسيق التّالي:

body {
  ...

  .wrapper {
    ...

    .heading {
      height: 40px;
      background: transparent url(../images/h1-bg.png);
      margin: 30px 0;
      padding-left: 20px;

      h1 {
        display: inline-block;
        color: #7e7e7e;
        font: normal 40px/40px 'Oswald', sans-serif;
        background: url(../images/bg.png);
        margin: 0;
        padding: 0 10px;
        text-transform: uppercase;
      }
    }
  }
}

تمّ في الشيفرة السابقة تعيين صورة خلفية للعنوان (h1)، وتنسيق الخط، ليظهر العنوان بالشكل السابق.

القائمة الفرعيّة (Submenu)

لن يتمّ استخدام المُكوّن navigation مع القائمة الفرعيّة، حيثُ أنّه لا يناسب التنسيق، بدلًا من ذلك سيتمّ استخدام المُكوّن group list، وكل عنصر من هذا المكوّن سيملك الصنف list-group-item. مع الانتباه أنّ القائمة الفرعيّة يجب توضع داخل الوسم aside:

<aside class="col-md-7">
  <ul class="list-group submenu">
    <li class="list-group-item active">Lorem ipsum</li>
    <li class="list-group-item"><a href="/donec/">Donec tincidunt laoreet</a></li>
    <li class="list-group-item"><a href="/vestibulum/">Vestibulum elit</a></li>
    <li class="list-group-item"><a href="/etiam/">Etiam pharetra</a></li>
    <li class="list-group-item"><a href="/phasellus/">Phasellus placerat</a></li>
    <li class="list-group-item"><a href="/cras/">Cras et nisi vitae odio</a></li>
  </ul>
</aside>

إن الإعدادات الخاصّة بالمكوّنات تظهر أنّ جميع القوائم المُجمّعة (grouped lists) تستخدم خلفيّة وحدود المكوّن panel:

@list-group-bg: @panel-bg;
@list-group-border: @panel-inner-border;

ومن ثُمّ سيتمّ تطبيق التنسيقات التّالية على القائمة الفرعيّة:

body {
  ...

  .wrapper {
    ...

    .submenu {
      margin-bottom: 30px;

      li {
        display: list-item;
        font: 300 14px @brand-font;
        list-style-position: inside;
        list-style-type: square;
        padding: 10px;
        text-transform: uppercase;

        &.active {
          color: @brand-primary;
        }

        a {
          color: @text-color;
          text-decoration: none;

          &:hover {
              color: @text-color;
          }
        }
      }
     }
  }
}

تمت إضافة هامش سفلي باستخدام margin-bottom، والتخفيف من حدّة الخط، وتغيير التنسيق الخاصّ بعناصر القائمة باستخدام الخاصّيّة list-style-type لتكون مُربّعة (square)، ومن أجل الروابط تمّ ضبط اللّون، والحروف لتكون حروفًا كبيرةً، الجدير بالذكر هنا أنّ الإشارة & (ampersand) هي جزء من صياغة LESS، والّتي سيتمّ استبدالها بالمُحدّد الأب (parent selector).

الشريط الجانبي (Sidebar)

سيتمّ إضافة صورة تُشير إلى عنوان مكتب العمل، وذلك أسفل القائمة الفرعيّة.

سيتمّ استخدام المُكوّن panel من مكوّنات Bootstrap، وذلك باستخدام الأصناف الفرعيّة منه وهي panel-primary من أجل تلوين العنوان، و يحتوي هذا المكوّن على كتلة علويّة وتستخدم الصنف panel-heading، وكتلة المُحتوى وتستخدم الصنف panel-body، كما سيتمّ استخدام الصنف img-responsive لصورة خريطة الموقع، وذلك من أجل الحصول تجاوبيّة لها على مُختلف قياسات الشاشة (responsiveness).

<aside class="col-md-7">
  ...
  <div class="panel panel-primary">
    <div class="panel-heading">Our offices</div>
    <div class="panel-body">
      <img src="images/map.png" class="img-responsive" alt="Our offices">
    </div>
  </div>
</aside>

تمّ بالفعل سابقًا ضبط لون لخلفيّة المكوّن panel وذلك في خصائص Bootstrap وذلك عبر المُتغيّر panel-bg، والآن ما سيتمّ عمله هو تغيير لون الحدود الخاصّة به، وسيتم استخدام اللون الرمادي المُعيّن سابقًا بالمُتغيّر @panel-inner-border:

@panel-primary-border: @panel-inner-border;

سيتم الحاجة أيضًا إلى تغيير بعض التنسيق الافتراضي للمكوّن panel، وهذه التغييرات لا يُمكن تغييرها بواسطة المُتغيّرات:

.panel {
  box-shadow: none;
  .panel-heading {
    font: 14px @brand-font;
    text-transform: uppercase;
    padding: 10px;
  }

  .panel-body {
    padding: 10px;
  }
}

تمّ في الشيفرة السابقة إزالة الظل الخاصّ بالمكوّن panel وضبط الحشوة padding وضبط الخط.

الاقتباس (Quotation)

سيتمّ الشروع بالعمل على تصميم المحتوى، وفي البداية سيتمّ إضافة الاقتباس:

يشبه هذا الجزء إلى حدٍ كبير المُكوّن Jumbotron، والذي سيتمّ الاستفادة منه هنا، وذلك عبر إضافته داخل عمود المُحتوى (col-md-17):

<section class="col-md-17">
  <div class="jumbotron">
    <blockquote>
      <p>
        "Quisque in enim velit, at dignissim est. nulla ul corper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat."
      </p>
      <small>John Doe, Lorem Ipsum</small>
    </blockquote>
  </div>
</section>

باستخدام مُتغيّرات المكوّن jumbotron سيتمّ تعيين اللّون الأبيض للخط، وضبط لون الخلفية إلى قيمة المُتغيّر @brand-primary وهو ذو القيمة #29c5e6:

@jumbotron-bg: @brand-primary;
@jumbotron-color: #fff;

كما سيتمّ إضافة بعض التنسيق:

body {
  ...
  .wrapper {
  ...
  .jumbotron {
    border-radius: 0;
    padding: 0;
    margin: 0;

    blockquote {
    border-left: none;

    p {
      font: 300 italic 33px @brand-font;
      text-transform: uppercase;
      margin-bottom: 0;
    }

    small {
      text-align: right;
      color: #1D8EA6;
      font: 300 20px @brand-font;

      &:before {
      content: '';
      }
    }
    }
  }
  }
}

تمّ إزالة الزوايا الدائريّة باستخدام الخاصّيّة border-radius، وتنسيق الخط ليتناسق مع بقيّة التصميم.

المُحتوى الرئيسي (Main content)

تمّ بالفعل إتمام جميع التنسيقات اللازمة للنص الخاصّ بالمُحتوى، وعليه فإن كل ما يجب عمله هو إضافة ثلاثة فقرات (paragraphs) مع النصّ الخاصّ بها:

<p>Lorem ipsum dolor sit amet...</p>
<p>Donec vel nisl nibh...</p>
<p>Donec vel nisl nibh...</p>

سيتمّ في الخطوة التّالية إضافة صورتين، أسفل المُحتوى الكتابي السابق، ولذلك سيتمّ استخدام عمودين:

<div class="row">
  <div class="col-md-12">
    <img src="images/about-1.png" alt="" class="thumbnail">
  </div>
  <div class="col-md-12">
    <img src="images/about-2.png" alt="" class="thumbnail">
  </div>
</div>

يُعطي الصنف thumbnail تنسيقًا جميلًا للصور، ومن دون إضافة المزيد من التنسيق، ما سيتمّ عمله فقط هو تعديل الحشوة (padding) ولون الحدود (border):

@thumbnail-padding: 1px;
@thumbnail-border: #c9c9c9;

القسم الخاصّ بفريق العمل

أوّلًا، سيتمّ إضافة رأسيّة هذا القسم (header):

<h2>Our team</h2>

وبالتنسيق التّالي:

body {
  ...
  .wrapper {
    ...
    h2 {
      background: none repeat scroll 0 0 #29C5E6;
      color: #fff;
      font: 300 30px @brand-font;
      padding: 0 10px;
      text-transform: uppercase;
    }
  }
}

سيتمّ إضافة div وبالصنف team، والذي يحتوي بطاقات فريق العمل، حيثُ أنّ كل كرت هو عمود وبعرض مساوي إلى أربعة أعمدة من النّظام الشبكي، وجميعها تحتوي على إزاحة بعمود واحد ما عدا الكرت الأول من كل صفّ، وتُطبّق هذه الإزاحة باستخدام الصنف col-sm-offset-1، ويتألّف كل كرت من صورة والوصف الوظيفي لكل عضو من أعضاء الفريق.

<div class="team">
  <div class="row">
    <div class="col col-sm-4">
      <img src="images/team/Doe.jpg" alt="John Doe" class="thumbnail">
      <div class="caption">
        <h3>John Doe</h3>
        <p>ceo</p>
      </div>
    </div>
    <div class="col col-sm-4 col-sm-offset-1">
      <img src="images/team/Pittsley.jpg" alt="Saundra Pittsley" class="thumbnail">
      <div class="caption">
        <h3>Saundra Pittsley</h3>
        <p>team leader</p>
      </div>
    </div>
    ...
  </div>
  <div class="row">
    <div class="col col-sm-4">
      <img src="images/team/Nobriga.jpg" alt="Ericka Nobriga" class="thumbnail">
      <div class="caption">
        <h3>Ericka Nobriga</h3>
        <p>art director</p>
      </div>
    </div>
    <div class="col col-sm-4 col-sm-offset-1">
      <img src="images/team/Rousselle.jpg" alt="Cody Rousselle" class="thumbnail">
      <div class="caption">
        <h3>Cody Rousselle</h3>
        <p>senior ui designer</p>
      </div>
    </div>
    ...
  </div>
</div>

سيتمّ إضافة التنسيق التّالي إلى ملفّ التنسيق بهدف مُلائمة المُحتوى السابق مع التصميم:

body {
  ...
  .wrapper {
  ...
  .team {
    .row {
    margin-top: 20px;

    .col {
      white-space:  nowrap;

      .thumbnail {
        margin-bottom: 5px;
      }
    }

    .col-sm-offset-1 {
      margin-left: 3.7%;
    }

    .caption {
      h3 {
      font: 300 16px @brand-font;
      margin: 0;
      }

      p {
      font: 300 14px @brand-font;
      color: @brand-primary;
      margin: 0;
      }
    }
    }
  }
  }
}

تمّ التعديل في الشيفرة السابقة على الصنف col-sm-offset-1، حيثُ أنّ الهامش الخاصّ به واسعٌ نوعًا ما، ولذلك تمّ تحديده بالقيمة 3.7%.

تصميم ذيل الصّفحة

يتألّف ذيل الصّفحة من أربعة أجزاء رئيسية:

• تغذية توتير (Twitter feed)
• خريطة الموقع (site map)
• روابط الشبكات الاجتماعيّة (social links)
• الشعار مع نص حقّ النشر (logo with copyright text)

سيتمّ في البداية إنشاء الحاوية الرئيسيّة لذيل الصّفحة، والأعمدة الخاصّة بكل جزء:

<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-xs-12 twitter"></div>
      <div class="col-md-4 col-xs-12 sitemap"></div>
      <div class="clearfix visible-sm visible-xs"></div>
      <div class="col-md-6 col-xs-12 social"></div>
      <div class="col-md-6 col-xs-12 footer-logo"></div>
    </div>
  </div>
</footer>

سيتمّ تنسيق ذيل الصّفحة على الشكل التّالي:

footer {
  background: #7e7e7e;
  color: #dbdbdb;
  font-size: 11px;
  overflow: hidden;

  .container {
    height: 110px;
    padding: 10px 0;
  }
}

يَظهر وسم ذيل الصّفحة (footer) على كامل عرض الشاشة، بينما تظهر الحاوية الداخليّة بالمُنتصف، ولاصطفاف العناصر داخل ذيل الصّفحة تم استخدام نظام الأعمدة.

تغدية توتير (Twitter feed)

صياغة تغذية توتير هي على الشكل التّالي:

<div class="col-md-8 col-xs-12 twitter">
  <h3>Twitter feed</h3>
  <time datetime="2015-03-03"><a href="#">03 mar</a></time>
  <p>In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug</p>
</div>

والتنسيق هو على الشكل التّالي:

body {
  ...
  footer {
    ...
    .container {
      ...
      h3 {
        border-bottom: 1px solid #919191;
        color: #ffffff;
        font-size: 14px;
        line-height: 21px;
        font-family: @brand-font;
        margin: 0 0 10px;
        text-transform: uppercase;
      }

      p {
        margin: 5px 0;
      }

      .twitter {
        p {
          padding-right: 15px;
        }

        time a {
          color: #b4aeae;
          text-decoration: underline;
        }
      }
    }
  }
}

تمّ تخصيص تنسيق جميع العناوين بذيل الصّفحة وذلك للخط والهوامش، واستخدام الحروف الكبيرة، وذلك باستخدام الخاصّيّة text-transform، ومن أجل الرابط الّذي يعرض التاريخ، تمّ ضبط اللّون والخطّ السفلي (underlining).

خريطة الموقع (Sitemap)

تتألّف خريطة الموقع من عمودين متساويين محتويان على روابط:

<div class="col-md-4 col-xs-12 sitemap">
  <h3>Sitemap</h3>
  <div class="row">
    <div class="col-md-12">
      <a href="/home/">Home</a>
      <a href="/about/">About</a>
      <a href="/services/">Services</a>
    </div>
    <div class="col-md-12">
      <a href="/partners/">Partners</a>
      <a href="/customers/">Support</a>
      <a href="/contact/">Contact</a>
    </div>
  </div>
</div>

سيتمّ تطبيق التنسيق التّالي، والذي يَخصّ اللّون والخطّ والهامش الخاصّ بالروابط:

body {
  ...
  footer {
    ...
    .container  {
      ...
      a {
        color: #dbdbdb;
      }

      .sitemap a {
        display: block;
        font-size: 12px;
        margin-bottom: 5px;
      }
    }
  }
}

الأيقونات الاجتماعيّة

سيتمّ وضع جميع الروابط (الأزرار) داخل قسم وبالصنف social:

<div class="col-md-4 col-xs-12 social">
  <h3>Social networks</h3>
  <a href="http://twitter.com/" class="social-icon twitter"></a>
  <a href="http://facebook.com/" class="social-icon facebook"></a>
  <a href="http://plus.google.com/" class="social-icon google-plus"></a>
  <a href="http://vimeo.com/" class="social-icon-small vimeo"></a>
  <a href="http://youtube.com/" class="social-icon-small youtube"></a>
  <a href="http://flickr.com/" class="social-icon-small flickr"></a>
  <a href="http://instagram.com/" class="social-icon-small instagram"></a>
  <a href="/rss/" class="social-icon-small rss"></a>
</div>

وللتنسيق الروابط ضمن ذيل الصّفحة سيتمّ تطبيق التّالي:

body {
  ...
  footer {
    ...
    .container {
      ...
      .social {
        .social-icon {
          width: 30px;
          height: 30px;
          background: url(../images/social.png) no-repeat;
          display: inline-block;
          margin-right: 10px;
        }

        .social-icon-small  {
          width: 16px;
          height: 16px;
          background: url(../images/social-small.png) no-repeat;
          display: inline-block;
          margin: 5px 6px 0 0;
        }

        .twitter { background-position: 0 0; }
        .facebook { background-position: -30px 0; }
        .google-plus { background-position: -60px 0; }
        .vimeo { background-position: 0 0; }
        .youtube { background-position: -16px 0; }
        .flickr { background-position: -32px 0; }
        .instagram { background-position: -48px 0; }
        .rss { background-position: -64px 0; }
      }
    }
  }
}

تمّ في الشيفرة السابقة استخدام أسلوب ما يُعرف بالاسم sprites، وهو أسلوب شائع يُستخدم في تسريع تحميل الصّفحة وذلك عن طريق جمع مجموعة من الصور في صورة واحدة، وعليه فالمتصفّح سيطلب صورة واحدة بدلًا من عدّة صور، أي طلبًا واحدًا بدلًا من طلبات عدّة، في المشروع الحالي تمّ تقسيم الأيقونات الاجتماعيّة إلى صورتين الأولى بالاسم social.png والثانية بالاسم social-small.png، واستخدام كلْ منها كخلفيّة باستخدام الخاصّيّة background وتحديد موضع كل خلفيّة باستخدام الخاصّيّة background-position، على أنّ يتمّ التبديل بين كل رابط وما يخصّه من شعار.

نص حقّ النشر

سيتمّ استخدام صورة ذات رابط للشعار، وفقرة (paragraph) أسفله مع نصّ حق النشر.

ستكون الصياغة على الشكل التّالي:

<div class="col-md-8 col-xs-12 footer-logo">
  <a href="/"><img src="images/footer-logo.png" alt="Whitesquare logo"></a>
  <p>Copyright © 2015 Whitesquare.</p>
</div>

سيتمّ تنسيق هذا القسم بشكل مُشابه للقسم السابق، مع اختلاف وحيد، وهو الإزاحة إلى جهة اليمين:

body {
  ...
  .footer {
    ...
    .container {
      ...
      .footer-logo {
        float: right;
        margin-top: 20px;
        font-size: 10px;
        text-align: right;

        a {
          text-decoration: underline;
        }
      }
    }
  }
}

الختام

يكون إلى هنا قد تمّ الانتهاء من تصميم كامل الصّفحة، يُمكن الوصول إلى الملفّات المصدريّة الخاصّة بالمشروع بتحميلها أو استعراض تصميم المشروع من هنا.

ترجمة – وبتصرّف – للمقال Page layout with Bootstrap 3 part 2.