اذهب إلى المحتوى

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


Mohamad Ibrahim3

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

الشعار (Logo)

logo.thumb.png.0f486ddbdef3defa74fdbf0c8

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

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

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

نموذج البحث

search.thumb.png.d61824dc3af5dba9200f493

سيتمّ الاستفادة من بعض مُكوّنات 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.thumb.png.ca700d9ca1245d2d5e8af8c

سيتمّ استخدام مُكوّنات التنقل، والّتي تحتوي على قائمة بالروابط، وسيتم استخدام الصنف 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)

page-header.thumb.png.57833ed395a60d2cde

سيتمّ استخدام الصنف 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)

aside.thumb.png.5fc205c8848c6fdbf7e586f5

لن يتمّ استخدام المُكوّن 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)

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

sidebar.thumb.png.70fb2a9f24b00c19c3363c

سيتمّ استخدام المُكوّن 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)

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

quotation.thumb.png.718ada27d3033e82b8f9

يشبه هذا الجزء إلى حدٍ كبير المُكوّن 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)

main-content.thumb.png.12a4009bf6762120b

تمّ بالفعل إتمام جميع التنسيقات اللازمة للنص الخاصّ بالمُحتوى، وعليه فإن كل ما يجب عمله هو إضافة ثلاثة فقرات (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;

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

our-team.thumb.png.a2b672d8313763d999e5d

أوّلًا، سيتمّ إضافة رأسيّة هذا القسم (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.thumb.png.febafe0b8c422b9bd3da8af

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

<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)

twitter-feed.thumb.png.c6414cf303b3501a1

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

<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)

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

sitemap.thumb.png.a0241847d67e80a35a0ca4

<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-buttons.thumb.png.721c8749be8cbec

سيتمّ وضع جميع الروابط (الأزرار) داخل قسم وبالصنف 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) أسفله مع نصّ حق النشر.

copyright.thumb.png.5892f2729f5fac259046

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

<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.


تفاعل الأعضاء

أفضل التعليقات



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...