اجعل Bootstrap في متناول اليد


الدرس: إعداد BOOTSTRAP


الصفحة السابقة
يعد استخدام Bootstrap مباشرة أمرًا جيدًا ، لكن تعديله لجعله ملائم لما نحتاج إليه هو أفضل. لذلك ، إذا كنت ترغب في إعداد Bootstrap ، فهذا الفصل يناسبك!

الإعداد المبسط


مثال على الصفحة
لنفترض أننا أردنا إنشاء موقع مع عرض تقديمي معين. شيء بسيط ، لأنني أريد فقط أن أريك مبدأ التكوين. إليك كود HTML الأساسي:

<!DOCTYPE HTML>
<html>

  <head>
    <meta charset="utf-8">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body>
    <div class="container">
      <header class="row col-sm-12">
        <div class="page-header">
         <h1>Mon beau site<img src="images/papillon.png" class="pull-right">
        </h1>
        </div>
      </header>
      <div class="row col-sm-12">
        <nav class="col-sm-2">          
          <ul class="nav nav-pills nav-stacked">
            <li class="active"> <a href="#"> 
	  <span class="glyphicon glyphicon-home"></span> Accueil </a> </li>
            <li> <a href="#"> <span class="glyphicon glyphicon-book"></span> 
                Livres </a> </li>
            <li> 
              <a href="#"> <span class="glyphicon glyphicon-facetime-video">
                    </span> Films </a> 
            </li>
            <li> <a href="#"> 
                <span class="glyphicon glyphicon-headphones"></span> 
                Musiques </a> 
            </li>
          </ul>
        </nav>
        <section class="col-sm-10">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Bienvenue sur mon site !</h3>
            </div>
            <div class="panel-body">
              <p>
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab  
inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
enim ipsam voluptatem quia voluptas 
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos 
ratione voluptatem sequi nesciunt. Neque porro quisquam est, 
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed 
non numquam eius modi tempora incidunt ut labore et dolore 
magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum 
exercitationem ullam corporis suscipit laboriosam, nisi ut 
aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit 
in ea voluptate velit esse quam nihil molestiae consequatur, 
vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
              <p>
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
accusantium doloremque laudantium, totam rem aperiam, 
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae 
dicta sunt explicabo. Nemo enim ipsam voluptatem quia 
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni 
eos qui ratione voluptatem sequi nesciunt. Neque porro 
quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci 
 sed quia non numquam eius modi tempora incidunt ut 
labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima 
quis nostrum exercitationem ullam corporis suscipit 
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel 
reprehenderit qui in ea voluptate velit esse quam nihil 
molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas ?"
            </p>
              <p>
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 
inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
enim ipsam voluptatem quia 
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni 
eos qui ratione voluptatem sequi nesciunt. Neque porro 
quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci 
sed quia non numquam eius modi tempora incidunt ut 
labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima 
quis nostrum exercitationem ullam corporis suscipit 
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel 
reprehenderit qui in ea voluptate velit esse quam 
nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo  
pariatur?"
        </p>
            </div>
          </div>
        </section>
      </div>
      <footer class="row col-sm-12">
        <div class="panel panel-body">
          <p>Tous droits réservés par moi...</p>
        </div>
      </footer>
    </div>
  </body>

</html> 
يتم تنظيم الصفحة في 4 أجزاء:
  1. لافتة في الأعلى
  2. قائمة على اليسار
  3. المحتوى على اليمين
  4. تذييل الصفحة في الاسفل
Bootstrap يجعل هذا التصميم سهلاً. التنسيق الذي قام به Bootstrap يعطي الشكل التالي.
jQuery web
مثال على الصفحة
جرب الكود
انها ليست بالفعل سيئة للغاية مع عدم وجود قاعدة نمط المضافة! لكننا سنواصل تحسين العرض التقديمي:

body {
  background-color:#bbb;
  color:#048;      
  font-size: 12px;
  line-height: 16px;
}
a { 
  color: #028; 
}
footer { 
  text-align:center; 
}
nav {
  background-color:#bcd;
  border-radius: 8px;
  padding: 0 !important;
  border: 1px solid #ddd;
}
section { 
  padding-right: 0 !important; 
}
.panel {
  background-color: #bcd;
  border-radius: 8px;
  padding-bottom: 5px;
}
h1 {
  text-shadow: 4px 4px 5px #777;
  color: #449;
}
.nav > li > a:hover, .nav > li > a:focus {
  background-color: #cde; 
}
.panel-default > .panel-heading, .nav-pills > li.active > a, 
.nav-pills > li.active > a:hover, 
.nav-pills > li.active > a:focus {
  color: #048;
  background-color: #abc;
  border-radius: 8px;
} 
الذي يعطينا الشكل التالي.
jQuery web
نفس الصفحة منمقة
جرب الكود
مع رد فعل صحيح عندما تقلل من العرض إلى ما دون 768 بكسل ، كما هو مبين في الشكل التالي.
jQuery web
تأثير تخفيض العرض
انتهزت الفرصة لإظهار كيفية إنشاء قائمة رأسية بسهولة باستخدام Bootstrap . ولكن ما يهمنا يتعلق بالأساليب. لأن جزءًا كاملاً من الأسلوب هو في الواقع تعديل لإعدادات Bootstrap الأساسية. لقد غيرت لون الخلفية ولون المقدمة ولون الروابط وحجم الأحرف ... السؤال هو لما لا نعدّل مباشرة في Bootstrap أليس ذلك أسهل ؟ ...

إعداد عبر الإنترنت على موقع BOOTSTRAP


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

jQuery web
المكونات المحددة لصفحة العينة
نظرًا لأننا لا نستخدم أي مكون إضافي jQuery ، فإننا نقوم بإلغاء تحديد كل شيء بالزر Toggle all (انظر الشكل التالي) .
jQuery web
جميع مكونات jQuery غير محددة
في الوقت الحالي ، لا تؤخذ المتغيرات الأقل في الاعتبار. كل ما عليك فعله هو النقر على الزر في أسفل الصفحة للحصول على Bootstrap شخصي (انظر الشكل أدناه).
jQuery web
زر إنشاء
نحصل على المجلدات والملفات الممثلة في الشكل التالي.
jQuery web
الملفات التي تم إنشاؤها
لدينا أيضًا جلسة اللحاق بالركب تحتوي على رابط (انظر الشكل التالي).
jQuery web
روابط لتغيير الاعداد
لاحظ أن ملف config.json يحتوي على كل الاعدادات التي اخترناها للتو. هذا تحسن واضح مقارنة بالإصدارات السابقة من هذا المكون الذي لم يحفظ شيئًا على الإطلاق.
نحن في نهاية المطاف مع كل ما نحتاجه لموقعنا. إذا نظرنا إلى وزن ملفي CSS ، العاديين والمصغرين ، نجد 48 كيلوبايت و 39 كيلوبايت ، بينما تكون الإصدارات الكاملة 137 كيلوبايت و 113 كيلوبايت. لا يزال يتعين عليك التحقق من أن الصفحة لا تزال تعمل بشكل صحيح. سنقوم بحفظ الملف المصغر باسم جديد:

<link href="assets/css/bootstrap.min.v1_0.css" rel="stylesheet"> 
جرب الكود
المتغيرات
من الممكن أن تذهب أبعد من ذلك في التخصيص. دعونا نلقي نظرة على المتغيرات المتاحة. على سبيل المثال ، في متغيرات السقالات ، في صفحة التكوين نفسها ، نجد المتغير المتعلق بلون خلفية الصفحة @body-bg (انظر الشكل التالي) .
jQuery web
المتغير @ body-bg
بشكل تلقائي ، يتم تعيين هذه القيمة على #fff، أي اللون الأبيض. لكن لصفحتي ، أنا بحاجة إلى قيمة #bbb . لذلك يمكنني تغيير القيمة على هذا المستوى ، لذلك لن أحتاج إلى تعيين هذه الخاصية في ورقة الأنماط الشخصية الخاصة بي. ما المتغيرات الأخرى المثيرة للاهتمام في حالة صفحتنا؟ أجد على سبيل المثال المتغير @text-color (انظر الشكل التالي) .
jQuery web
المتغير @ لون النص
يمكنني إصلاحه ل #048 . سنتوقف عند هذا المثال ، وننشئ ملف Bootstrap جديدًا باستخدام هذا الإعداد. نقوم بتجميع الملف وتنزيله ومنحه اسمًا جديدًا:

<link href="assets/css/bootstrap.min.v1_1.css" rel="stylesheet"> 
يجب علينا أيضًا إزالة الأنماط التي تصبح زائدة عن الحاجة:

body {
/*  background-color:#bbb;
  color:#048; */     
  font-size: 12px;
  line-height: 16px;
}
a { 
  color: #028; 
}
footer { 
  text-align:center; 
}
nav {
  background-color:#bcd;
  border-radius: 8px;
  padding: 0 !important;
  border: 1px solid #ddd;
}
section { 
  padding-right: 0 !important; 
}
.panel {
  background-color: #bcd;
  border-radius: 8px;
  padding-bottom: 5px;
}
h1 {
  text-shadow: 4px 4px 5px #777;
  color: #449;
}
.nav > li > a:hover, .nav > li > a:focus {
  background-color: #cde; 
}
.panel-default > .panel-heading, .nav-pills > li.active > a, 
.nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
  color: #048;
  background-color: #abc;
  border-radius: 8px;
} 
جرب الكود
نحصل على نفس النتيجة. من الواضح أنه يمكننا أن نتساءل عن مصلحة المضي قدمًا للحصول على بعض قواعد الأسلوب. هو في الواقع يسبب الكثير من المتاعب دون ان نربح منه الكثير . من ناحية أخرى ، يمكن أن تصبح هذه الطريقة مثيرة للاهتمام في إطار إنشاء سمة معينة مع الكثير من الإعدادات المتغيرة.

LESS ، لغة أسلوب ديناميكي


Bootstrap قابل للتخصيص بالكامل لأنه يعتمد على LESS . إنها لغة تمد إمكانيات CSS مع المتغيرات والعمليات والوظائف. شهد الإصدار 3.1 من Bootstrap أيضًا وصول منفذ طال انتظاره على Sass ، وهي لغة أخرى لإدارة CSS . في الوقت الحالي ، يقع بشكل منفصل على صفحة GitHub .
دعونا نفعل القليل من استعراض إمكانيات أقل ...
مصادر ملفات BOOTSTRAP LESS
يمكن العثور على مصادر Bootstrap LESS في الحزمة التي تقوم بتنزيلها من الموقع (انظر الشكل أدناه) .
jQuery web
مجلد ملف Bootstrap LESS
سنأخذها كمثال لتوضيح إمكانيات LESS .
المتغيرات
إحدى الميزات الرئيسية لـ LESS هي السماح بإنشاء متغيرات وبالتالي تركيز القيم وتسهيل التعديلات. افتح الملف variables.less الذي يحدد قيمة جميع المتغيرات التي يستخدمها Bootstrap . هنا مقتطف:

...
// Buttons
// -------------------------

@btn-font-weight:                normal;

@btn-default-color:              #333;
@btn-default-bg:                 #fff;
@btn-default-border:             #ccc;
... 
يتم الإعلان عن متغير باستخدام بناء جملة بسيط: فقط استخدم الحرف @ متبوعًا باسم المتغير ، على سبيل المثال لدينا هنا المتغير @btn-default-color . يأخذ المتغير قيمة ، وهنا يكون للمتغير @btn-default-colorالقيمة 333# . ثم يمكن استخدام هذا المتغير لتعيين القيمة المقابلة. افتح الملف buttons.less وابحث عن هذه السطور:

.btn {
  ...
  &:focus {
    color: @btn-default-color;
    text-decoration: none;
  } 
نرى أننا نستخدم المتغير @btn-default-color لتعيين قيمة الخاصية color لتركيز الأزرار. لاحظ في تمرير استخدام علامة & لتسهيل كتابة التعليمات البرمجية. لنفس الفئة .btn ، يمكننا تجميع محددات في نفس الكتلة دون إعادة كتابة كل شيء. نجد أن المتغير نفسه يستخدم قليلاً في الكود:

.btn-default {
  .button-variant(
      @btn-default-color; 
      @btn-default-bg; 
    @btn-default-border);
} 
لذلك يكفي تعديل قيمة المتغير بحيث يتم تغيير كل هذه المهام باستخدام هذا الإجراء الفردي.
وإذا نظرنا إلى النتيجة ، نجد اللون #333 المعين للون الزر للتركيز:

.btn:focus {
  color: #333;
  text-decoration: none;
} 
يكون هذا التخصيص مفيدًا إذا كان منظمًا بشكل جيد ، وهذا هو الحال مع Bootstrap الذي يركّز جميع المتغيرات في نفس الملف. لا شيء يمنع أيضًا تعيين قيمة المتغير إلى متغير آخر مثل هنا:

@brand-primary:         #428bca;
   ...
@link-color:            @brand-primary; 
إدراج ملف
إمكانيات LESS بعيدة عن التوقف عند تعريف المتغيرات. يمكنك تضمين ملف مع الأمر @import . على سبيل المثال ، bootstrap.less يتضمن الملف فقط تضمينات:

...
// Core variables and mixins
@import  "variables.less";
@import  "mixins.less";

// Reset and dependencies
@import  "normalize.less";
@import  "print.less";
... 
يمكننا استيراد الملفات less أو css . إذا كان ملفًا less ، فمن الواضح أنه تتم معالجته إذا كان يحتوي على أوامر خاصة ، بينما في حالة وجود ملف css، يتم استخدامه كما هو بدون معاملة خاصة.
الخلطات
يمكننا أيضا تضمين فئة في فئة أخرى (ما يسمى mixins في لغة أقل) ، كما لو كانت خاصية. يمكن رؤيته هنا في الملف grid.less :

//Set the container width and override it for fixed navbars in media queries
.container {
  .container-fixed();
  ...
} 
نرى أن الفصل .container-fixed يستخدم كخاصية. لنلقِ نظرة على هذه الفئة المُدرجة في الملف mixins/grid.less :

// Centered container element
.container-fixed(@gutter: @grid-gutter-width) {
  margin-right: auto;
  margin-left: auto;
  padding-left:  (@gutter  / 2);
  padding-right: (@gutter  / 2);
  &:extend(.clearfix all);
} 
مع الإصدار 3.2 ، تم تحسين المزج وتوزيعها في العديد من الملفات الموجودة في مجلد mixins . هناك عدد من القواعد ، بشكل أساسي لتوسيط العنصر وحتى استدعاء آخر إلى الفئة هنا clearfix . ربما لاحظت بناء الجملة المعين مع إضافة أقواس كما لو كانت وظيفة. يذهب هذا التشبيه إلى أبعد من ذلك ، حيث يمكننا حتى نقل المُدخلات (نتحدث بعد ذلك من mixet parametric ) إلى فئة المدرجة مثل هنا في الملف button-groups.less :

.btn-group.open .dropdown-toggle {
  .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
  ...
} 
لنرى الفئة المدعوة التي لا تزال في الملف mixins/vendor-prefixes.less :

// Drop shadows
.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
} 
نرى أن هذه الفئة تؤدي تظليلًا وفقًا للمُدخل المنقول. إذا نظرنا إلى النتيجة ، لدينا ما يُطلب:

.btn-group.open .dropdown-toggle {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
} 
محددات متداخلة
يمكنك تضمين محددات في التعريف ، كما هو الحال في الملف dropdowns.less :

// Open state for the dropdown
// ---------------------------
.open {
  // Show the menu
  > .dropdown-menu {
    display: block;
  }

  // Remove the outline when :focus is triggered
  > a {
    outline: 0;
  }
} 
هذا يبسط الكتابة ويجعل الكود أكثر إحكاما. هذه هي النتيجة:

.open > .dropdown-menu {
  display: block;
}
.open > a {
  outline: 0;
} 
لقد رأينا أعلاه أنه بالنسبة للفئات الزائفة ، يمكننا استخدام العلامة & ، كما هو الحال هنا في الملف pagination.less :

.pagination {
  ...
  > li > a,
  > li > span {
    &:hover,
    &:focus {
      color: @pagination-hover-color;
      background-color: @pagination-hover-bg;
      border-color: @pagination-hover-border;
    }
  } 
نجد هذه النتيجة:

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  background-color: #eeeeee;
} 
العمليات
يمكنك أيضًا إجراء عمليات مثل هذه في الملف forms.less :

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: @line-height-computed;
  font-size: (@font-size-base * 1.5);
  line-height: inherit;
  color: @legend-color;
  border: 0;
  border-bottom: 1px solid @legend-border-color;
} 
مع النتيجة:

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
} 
نظرًا لأن حجمها الأساسي يبلغ 14 بكسل ، فإن النتيجة 14 * 1.5 تعطي 21 بكسل.
وظائف
يوجد في LESS وظائف عملية للغاية ، انظر إلى هذا الكود:

@brand-primary:         #428bca;
   ...
@link-color:            @brand-primary;
@link-hover-color:      darken(@link-color, 15%); 
نحن نستخدم الوظيفة المدمجة darken ، والتي تغمق لون النسبة الموضحة. هنا تأتي قيمة اللون من متغير قيمته نفسها مشتقة من متغير آخر! في النهاية ، قمنا بتغميق اللون بنسبة 15٪ #428bca . نجد أيضًا الوظيفة المعاكسة lighten :

@gray-dark:              lighten(#000, 20%);   // #333 
هنا ، يُخفف الأسود #000 بنسبة 20 ٪ ، مما يعطي #333 . نجد وظائف كلاسيكية أخرى مثل ceil، والتي تُرجع العدد الصحيح فورًا أكبر من القيمة:

@font-size-base:          14px;
@font-size-large:         ceil(@font-size-base * 1.25); // ~18px 
والنتيجة 14 * 1.25 هي 17.5، استدارة الزائدة تعطي 18 . نجد وظيفة floor التقريب افتراضيًا ، بالإضافة إلى العديد من الوظائف الأخرى التي يمكنك اكتشافها في الوثائق .
مثال اصطناعي
لتوضيح إمكانيات وأناقة LESS سآخذ مثالاً يجمع معظم إمكانياته من خلال تحليلها. تجد في الملف jumbotron.less هذا الكود:

.jumbotron {
  padding: @jumbotron-padding (@jumbotron-padding / 2);
  margin-bottom: @jumbotron-padding;
  color: @jumbotron-color;
  background-color: @jumbotron-bg;

  h1,
  .h1 {
    color: @jumbotron-heading-color;
  }
  p {
    margin-bottom: (@jumbotron-padding / 2);
    font-size: @jumbotron-font-size;
    font-weight: 200;
  }

  > hr {
    border-top-color: darken(@jumbotron-bg, 10%);
  }

  .container &,
  .container-fluid & {
    border-radius: @border-radius-large; 
    // Only round corners at higher resolutions if contained in a container
  }

  .container {
    max-width: 100%;
  }

  @media  screen and (min-width: @screen-sm-min) {
    padding: (@jumbotron-padding * 1.6) 0;

    .container &,
    .container-fluid & {
      padding-left:  (@jumbotron-padding * 2);
      padding-right: (@jumbotron-padding * 2);
    }

    h1,
    .h1 {
      font-size: (@font-size-base * 4.5);
    }
  }
} 
النظر في هذه التعليمات خطوة بخطوة.
خصائص مباشرة
أولاً هناك مجموعة أولى من الخصائص:

padding: @jumbotron-padding (@jumbotron-padding / 2);
margin-bottom: @jumbotron-padding;
color: @jumbotron-color;
background-color: @jumbotron-bg; 
يتم ملء القيم من المتغيرات. يمكننا العثور على قيمهم في الملف variables.less :

@jumbotron-padding:              30px;
@jumbotron-color:                inherit;
@jumbotron-bg:                   @gray-lighter; 
عليك أن تبحث قليلاً في نفس الملف للحصول على قيمة لون الخلفية:

@gray-lighter:           lighten(#000, 93.5%); // #eee 
بعد التجميع نجد القيم التالية:

.jumbotron {
  padding: 30px 15px;
  margin-bottom: 30px;
  color: inherit;
  background-color: #eee;
} 
المحددات المتداخلة
ثم هناك محددات متداخلة:

h1,
.h1 {
  color: @jumbotron-heading-color;
}
p {
  margin-bottom: (@jumbotron-padding / 2);
  font-size: @jumbotron-font-size;
  font-weight: 200;
} 
في كتل هذه المحددات ، لدينا خاصية مباشرة لـ font-weight ، والآخرين الذين تأتي قيمتهم من متغير وحتى من حساب margin-bottom . يجب عليك البحث مرة أخرى في الملف المتغير للعثور على القيم:

@jumbotron-padding:              30px;
@jumbotron-color:                inherit;
@jumbotron-font-size:            ceil((@font-size-base * 1.5)); 
نرى أن حجم النص يعتمد على البعد الأساسي للصفحة ، وهو منطقي للغاية. النتيجة بعد التجميع:

.jumbotron h1,
.jumbotron .h1 {
  color: inherit;
}
.jumbotron p {
  margin-bottom: 15px;
  font-size: 21px;
  font-weight: 200;
} 
الفئات المتداخلة
ثم نجد فئات متداخلة:

.container &,
.container-fluid & {
  border-radius: @border-radius-large; 
  // Only round corners at higher resolutions if contained in a container
} 
لاحظ استخدام عامل التشغيل التسلسلي & . لذلك نحن نريد ان نضع في المحدد الفئات container و container-fluid مع الفئة jumbotron .
المتغير @border-radius-large موجود طبعا في المتغير variables.less :

@border-radius-large:       6px; 
وبالتالي نجد منطقيا هذه النتيجة:

.container .jumbotron,
.container-fluid .jumbotron {
  border-radius: 6px;
} 
استفسارات الوسائط MEDIAS QUERIES
في النهاية ، وجدنا كتلة تتعلق بـMedias Queries :

@media  screen and (min-width: @screen-sm-min) {
  padding: (@jumbotron-padding * 1.6) 0;

  .container &,
  .container-fluid & {
    padding-left:  (@jumbotron-padding * 2);
    padding-right: (@jumbotron-padding * 2);
  }

  h1,
  .h1 {
    font-size: (@font-size-base * 4.5);
  }
} 
داخل هذه المجموعة ، لدينا نفس نوع التنظيم الذي رأيناه سابقًا باستخدام خصائص مطلعة مباشرةً ،محدد و فئة متداخلة. النتيجة تعطي:

@media  screen and (min-width: 768px) {
  .jumbotron {
    padding: 48px 0;
  }
  .container .jumbotron,
  .container-fluid .jumbotron {
    padding-right: 60px;
    padding-left: 60px;
  }
  .jumbotron h1,
  .jumbotron .h1 {
    font-size: 63px;
  }
} 
لا يزال هناك الكثير لقوله عن LESS ، لقد سمحت لك باكتشافه في وثائق الموقع التي تمت بشكل جيد للغاية.

استخدام LESS في BOOTSTRAP


برنامج لـ LESS
يمكنك تعديل Bootstrap عن طريق تعديل المتغيرات وتجميع الأدوات المقترحة ... أقترح عليك استخدام برنامج جيد جدًا: Crunch . في وقت كتابة هذه الدورة ، وجدت الإصدار 1.9.3. ميزة هذا البرنامج هو أنه يعمل على جميع أنظمة التشغيل.
برنامج مفيد آخر هو WinLess ، ولكن كما يوحي الاسم ، فهو يعمل فقط على Windows . من ناحية أخرى ، لا يسمح بإصدار الكود ، إنه راضٍ عن تجميعه. من ناحية أخرى ، لديه ميزة مغر: إنه يراقب أي تعديل للملفات المصدر وإعادة ترجمتها تلقائيا في حالة التعديل. لذا ، يمكنك فقط إجراء التغييرات في ملفات LESS ولديك الملف المترجم تلقائيًا.
البرنامج بسيط وفعال ، يمكنك إنشاء أو تعديل ملفات LESS وتجميعها في CSS . في موقع Bootstrap ، يقول المستخدمون أنهم يستخدمون Grunt ، ولا شيء يمنعك من فعل الشيء نفسه.
مثال بسيط في الاعداد
سنستأنف الاعداد الذي تم في فصل سابق من واجهة Bootstrap المبسطة ، لكن هذه المرة بالتدخل مباشرة في ملفات LESS . هنا هو الإجراء مع Crunch :
  1. استرجع جميع ملفات LESS من أحدث إصدار من Bootstrap وقم بوضعها في دليل محلي.
  2. افتح  Crunch وافتح الملف variables.less
  3. غيّر في قيم المتغيرات ذات الصلة في الملف variables.less (انظر الشكل التالي) .
  4. احفظ الإصدار الجديد من الملف variables.less
  5. افتح الملف bootstrap.less
  6. للتوافق مع التكوين السابق ، نحتاج إلى حذف العناصر غير الضرورية
  7. قم بالتحويل البرمجي(Compile) للملف bootstrap.less
  8. احفظ الملف  bootstrap.css الذي أنشأته بـ Crunch
  9. أعد تسمية الملف bootstrap.css إلى bootstrap.min.v1_2.css .
  10. قم بتحرير رابط النمط في صفحة الويب
  11. احذف الأنماط غير الضرورية في صفحة الويب
jQuery web
تغيير القيم في ملف variables.less

body {
/*        background-color:#bbb;
  color:#048;  */    
  font-size: 12px;
  line-height: 16px;
}
a { 
  color: #028; 
}
footer { 
  text-align:center; 
}
nav {
  background-color:#bcd;
  border-radius: 8px;
  padding: 0 !important;
  border: 1px solid #ddd;
}
section { 
  padding-right: 0 !important; 
}
.panel {
  background-color: #bcd;
  border-radius: 8px;
  padding-bottom: 5px;
}
h1 {
  text-shadow: 4px 4px 5px #777;
  color: #449;
}
.nav > li > a:hover, .nav > li > a:focus {
  background-color: #cde; 
}
.panel-default > .panel-heading, 
.nav-pills > li.active > a, 
.nav-pills > li.active > a:hover, 
.nav-pills > li.active > a:focus {
  color: #048;
  background-color: #abc;
  border-radius: 8px;
} 
هذا يعطي نفس العرض كما كان من قبل ، كما هو موضح في الشكل التالي.
jQuery web
الحصول على المظهر
جرب الكود
أفكار حول اعداد BOOTSTRAP باستخدام LESS
لقد رأينا الإجراء الذي يجب استخدامه مع Crunch . الملفات الوحيدة التي تم تعديلها هي bootstrap.less و variables.less . يحتوي هذا الملف الأخير على عدد من المتغيرات التي تؤثر على التخطيط العام والمكونات. على سبيل المثال ، يمكنني تغيير العناصر التالية:
  • لون خلفية الصفحة
  • لون نص الصفحة
كان يمكن أن أتدخل في هذه الأمور:
  • حجم الخطوط (تلقائيًا ارتفاع الخطوط)
  • لون الرابط
  • لون خلفية الألواح
لكن كل شيء آخر يتوافق مع التعديلات على الصفحة التي لا تدخل في نطاق الملف variable.less . يمكننا أن نتساءل فجأة ما إذا كانت اللعبة تستحق كل هذا العناء ... في سياق موقع ويب دقيق ، الجواب واضح "لا". ما الفائدة من اختراق ملفات أقل لحفظ بضعة أسطر من التعليمات البرمجية؟ يمكن أن نذهب أبعد من ذلك ونتدخل في الملفات الأخرى لإجراء جميع التعديلات اللازمة. سوف نصل تدريجياً لضبط Bootstrap بشكل كامل لموقعنا وبالتالي لدينا ملف CSS واحد فقط ليتم تحميله. يحتوي هذا التصميم على العديد من العيوب ، بما في ذلك عدم القدرة على تحديث Bootstrap دون إعادة جميع تدخلاتنا. لذلك دعونا ننظر في نهج آخر ...
نظرًا لأن لدينا LESS ، فإننا نستخدمه أيضًا في أساليبنا التكميلية. لنقم بإنشاء ملف main.less باستخدام أنماطنا في المجلد الذي يحتوي على جميع ملفات LESS .

body {
  background-color:#bbb;
  color:#048;   
  font-size: 12px;
  line-height: 16px;
}
a { 
  color: #028; 
}
footer { 
  text-align:center; 
}
nav {
  background-color:#bcd;
  border-radius: 8px;
  padding: 0 !important;
  border: 1px solid #ddd;
}
section { 
  padding-right: 0 !important; 
}
.panel {
  background-color: #bcd;
  border-radius: 8px;
  padding-bottom: 5px;
}
h1 {
  text-shadow: 4px 4px 5px #777;
  color: #449;
}
.nav > li > a:hover, .nav > li > a:focus {
  background-color: #cde; 
}
.panel-default > .panel-heading, 
.nav-pills > li.active > a, 
.nav-pills > li.active > a:hover, 
.nav-pills > li.active > a:focus {
  color: #048;
  background-color: #abc;
  border-radius: 8px;
} 
بمجرد إنشاء هذا الملف ، يجب إبلاغ الملف bootstrap.less بأنه يجب أن يؤخذ في الاعتبار (انظر الشكل التالي).
jQuery web
استيراد أنماط الصفحة
ثم مجرد تجميع كل ذلك ؛ نحصل على ملف Bootstrap مصغر يحتوي على جميع القواعد. لذلك ينتهي بنا الأمر إلى استدعاء ملف CSS واحد (يمكننا حذف النمط المتضمن في الصفحة) للحصول على نتيجة مماثلة لصفحة المثال الخاصة بنا:
جرب الكود
والنتيجة "نظيفة" للغاية ، حيث يتم تحميل ملف CSS واحد فقط ولا توجد قواعد نمط في الصفحة. من ناحية أخرى ، إذا كان هناك تحديث للقيام به ، فقط إعادة التحويل البرمجي.
اكثر من ذلك في التفكير
يعمل حل وضع القواعد في نهاية التحميل لزيادة التحميل على ملفات LESS بشكل جيد للغاية عندما يتعلق الأمر بعدد قليل من القواعد. من ناحية أخرى ، إذا كنت ترغب في إصلاح العديد من العناصر ، يجب عليك اعتماد استراتيجية أخرى. بعد عدة محاولات وصلت إلى المنظمة التالية (انظر الشكل التالي).
jQuery web
تنظيم ملفات أقل
يحتوي المجلد الفرعي less/less على ملفات Bootstrap الأصلية التي ستبقى دون تغيير. الملف _bootstrap.lessعبارة عن نسخة من الملف الأصلي bootstrap.less (أبدئه بتسطير السطر حتى يبقى أولاً في القائمة) . هو الذي سيكون بمثابة مرجع. نظرًا لأن الواردات التي تحتوي عليها تغير طريقها ، فيجب تعديلها. هنا مقتطف:

// Reset and dependencies
@import  "less/normalize.less";
@import  "less/print.less";
@import  "less/glyphicons.less"; 
الآن سوف تعمل مجموعة من هذا الملف. لوضع القواعد الخاصة سننظم بعد منطق الملفات المقدمة. من الواضح أنه سيكون لدينا ملف متغير:
jQuery web
ملف المتغيرات
سيحل هذا الملف الأصلي ، لذلك يجب أن يؤخذ في الاعتبار عند استيراد الملف bootstrap.less :

// Core variables and mixins
//@import  "less/variables.less";
@import  "variables.less";
@import  "less/mixins.less"; 
في حالة صفحتنا ، سنقوم بتغيير عدد من هذه المتغيرات:

@brand-primary:         #abc;
...
@body-bg:               #bbb;
...
@text-color:            #048;
...
@link-color:            #028;
...
@font-size-base:        12px;
...
@nav-link-hover-bg:     #cde;
...
@panel-bg:              #bcd; 
عندما يتم استنفاذ إمكانيات هذه المتغيرات ، يجب أن تعامل المكونات واحدة تلو الآخرى. على سبيل المثال للنوع:

//
// Type
// --------------------------------------------------

h1 {
  text-shadow: 4px 4px 5px #777;
  color: #449;
  font-size: 36px;
} 
وضعنا قواعد للعلامة h1 التي هي عنوان الصفحة. نظرًا لأن هذه القاعدة ستتجاوز تلك الموجودة في الملف ، less/less/type.less يجب عليك ملء الملف بشكل صحيح _bootstrap.less :

// Core CSS
@import  "less/type.less";
@import  "type.less"; 
وبالتالي فإن قواعدنا الخاصة تفرط في القواعد العامة.
يتم نفس الشيء بالنسبة للابحار باستخدام الملف navs.less :

//
// Navs
// --------------------------------------------------

nav {
  background-color:#bcd;
  border-radius: 8px;
  padding: 0 !important;
  border: 1px solid #ddd;
}

.nav-pills > li.active > a, 
.nav-pills > li.active > a:hover, 
.nav-pills > li.active > a:focus {
  color: #048;
} 
ولوحة مع panels.less :


//
// Panels
// --------------------------------------------------

.panel {
  border-radius: 8px;
}

.panel-default > .panel-heading, 
.nav-pills > li.active > a, 
.nav-pills > li.active > a:hover, 
.nav-pills > li.active > a:focus {
  color: #048;
  background-color: #abc;
  border-radius: 8px;
} 
وفي _bootstrap.less :

...
@import  "less/navs.less";
@import  "navs.less";
...
@import  "less/panels.less";
@import  "panels.less";
... 
يبقى فقط وضع القواعد العامة في الملف main.less :

section { 
  padding-right: 0 !important; 
}

footer { 
  text-align:center; 
} 
متابعة إبلاغ الملف _bootstrap.less :

// Divers
@import  "main.less"; 
من خلال تجميع كل هذا ، نحصل على نفس النتيجة كما كان من قبل ، لكن هذه المرة قمنا بتنظيم الكود جيدًا ونبقي الملفات الأصلية سليمة ، مما يبسط التحديثات.
الخلطات MIXINS
الشبكة مع MIXINS
هناك ملف مثير جدا للاهتمام هو mixins.less الذي يحتوي على كافة واردات mixin ووضعها في مجلد less/mixins (التي ذكرتها في الفصل السابق من هذه الدروس) . لفهم فائدتها ، يجب طرح سؤال صغير. يتم وضع فئات Bootstrap مباشرة في كود HTML . من خلال القيام بذلك ، يعتمد الكود بشكل كبير على Bootstrap . وعلاوة على ذلك، يتحرك هذا النهج بعيدا عن المبدأ الأساسي للكثير من محتوى منفصل من النموذج. عندما أكتب هذا الكود في مثالي:

<div class="row col-sm-12">
  <nav class="col-sm-2">   ...  </nav>
  <section class="col-sm-10">   ...  </section>
</div> 
أقول بوضوح أنني أريد صفًا يحتوي على عمودين يشير إلى نسبة كل منهما. إذا لم أستخدم Bootstrap ، فستكون أنماطي هي التي ستقرر ذلك فقط. من ناحية أخرى ، إذا كنت أرغب في تغيير الإطار يومًا ما ، يجب أن أتدخل على مستوى كود HTML الخاص بي. سنرى كيفية إنشاء شبكة باستخدام LESS فقط. انظر إلى هذه الأجزاء من الملف mixins/grid.less :

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  margin-left:  (@gutter  / -2);
  margin-right: (@gutter  / -2);
  &:extend(.clearfix all);
}
...
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  (@gutter  / 2);
  padding-right: (@gutter  / 2);

  @media (min-width: @screen-sm) {
    float: left;
    width: percentage((@columns  / @grid-columns));
  }
} 
هناك نوعان من mixins المثيرة للاهتمام في مثالنا: make-row() و make-sm-column() . سنستخدم هذه mixins في مثالنا عن طريق تعديل كود HTML :

<!DOCTYPE HTML>
<html>

  <head>
    <meta charset="utf-8">
    <link href="assets/css/bootstrap.min.v1_4.css" rel="stylesheet">
  </head>

  <body>
    <div class="container">
      <header>
        <div class="page-header">
          <h1>Mon beau site<img src="images/papillon.png" class="pull-right">
        </h1>
        </div>
      </header>
      <div class="contenu">
        <nav>          
          <ul class="nav nav-pills nav-stacked">
            <li class="active"> <a href="#"> 
                <span class="glyphicon glyphicon-home"></span>  
                Accueil </a> 
            </li>
            <li> <a href="#"> <span class="glyphicon glyphicon-book"></span>
                  Livres </a> 
            </li>
            <li> <a href="#"> <span class="glyphicon glyphicon-facetime-video">
                </span>  Films </a> 
            </li>
            <li> <a href="#"> <span class="glyphicon glyphicon-headphones">
                </span>  Musiques </a> 
            </li>
          </ul>
        </nav>
        <!-- <div class="clearfix visible-xs"></div> -->
        <section>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Bienvenue sur mon site !</h3>
            </div>
            <div class="panel-body">
              <p>
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
accusantium doloremque laudantium, totam rem aperiam, 
eaque ipsa quae ab illo inventore veritatis et quasi architecto 
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem 
quia voluptas sit aspernatur aut odit aut fugit, sed quia 
consequuntur magni dolores eos qui ratione voluptatem sequi 
nesciunt. Neque porro quisquam est, 
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci 
velit, sed quia non numquam eius modi tempora incidunt ut 
labore et dolore 
magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, 
quis nostrum exercitationem ullam corporis suscipit laboriosam,
 nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum 
 iure reprehenderit qui in ea voluptate velit esse quam nihil 
 molestiae consequatur, vel illum qui dolorem eum fugiat quo 
 voluptas nulla pariatur?"
            </p>
              <p>
"Sed ut perspiciatis unde omnis iste natus error sit voluptate
 accusantium doloremque laudantium, totam rem aperiam, 
eaque ipsa quae ab illo inventore veritatis et quasi 
architecto beatae vitae dicta sunt explicabo. Nemo enim
 ipsam voluptatem quia 
voluptas sit aspernatur aut odit aut fugit, sed quia 
consequuntur magni dolores eos qui ratione voluptatem 
sequi nesciunt. Neque porro 
quisquam est, qui dolorem ipsum quia dolor sit amet, 
consectetur, adipisci velit, sed quia non numquam eius 
modi tempora incidunt ut 
labore et dolore magnam aliquam quaerat voluptatem. 
Ut enim ad minima veniam, quis nostrum exercitationem 
ullam corporis suscipit 
laboriosam, nisi ut aliquid ex ea commodi consequatur?
 Quis autem vel eum iure reprehenderit qui in ea voluptate 
 velit esse quam 
nihil molestiae consequatur, vel illum qui dolorem eum fugiat 
quo voluptas nulla pariatur?"</p>
              <p>
"Sed ut perspiciatis unde omnis iste natus 
error sit voluptatem accusantium doloremque laudantium, 
totam rem aperiam, 
eaque ipsa quae ab illo inventore veritatis et quasi 
architecto beatae vitae dicta sunt explicabo. Nemo enim 
ipsam voluptatem quia 
voluptas sit aspernatur aut odit aut fugit, sed quia 
consequuntur magni dolores eos qui ratione voluptatem 
sequi nesciunt. Neque porro 
quisquam est, qui dolorem ipsum quia dolor sit amet, 
consectetur, adipisci velit, sed quia non numquam eius 
modi tempora incidunt ut 
labore et dolore magnam aliquam quaerat voluptatem. 
Ut enim ad minima veniam, quis nostrum exercitationem 
ullam corporis suscipit 
laboriosam, nisi ut aliquid ex ea commodi consequatur? 
Quis autem vel eum iure reprehenderit qui in ea voluptate 
velit esse quam 
nihil molestiae consequatur, vel illum qui dolorem eum 
fugiat quo voluptas nulla pariatur?"</p>
            </div>
          </div>
        </section>
      </div>
      <footer>
        <div class="panel panel-body">
          <p>Tous droits réservés par moi...</p>
        </div>
      </footer>
    </div>
  </body>

</html> 
أنا حذفت الفئات row ، col-sm-2، col-sm-10 و col-sm-12 واضاف عادل الطبقة contenu . أصبح الكود الآن أكثر "نظافة" ، لكنني بحاجة إلى تحديث ملفي main.less :

.contenu, header, footer {
  .make-row();
  .make-sm-column(12);
}

nav {
    .make-sm-column(2);
}

section { 
  padding-right: 0 !important; 
  .make-sm-column(10);
}

footer { 
  text-align:center; 
} 
جرب الكود
هذا مجرد مثال صغير على إمكانيات mixins و أنصحك باستكشاف إمكانيات هذه الملفات.
الصور " الشبكية "RETINA
لنأخذ مثالًا آخر على فائدة المزج مع مشكلة الصور المسماة "الشبكية". تم إنشاء هذا المصطلح بواسطة Apple لتعيين الشاشات بدقة عالية ( 320 نقطة في البوصة لـ IPhone 4 و 5) . أندرويد ، نتحدث عن HDPI . مهما كان المصطلح المستخدم ، فإن المشكلة هي نفسها. لكن ما هذا؟ إذا كان لديك صورة بحجم 100 × 100 بكسل ، على سبيل المثال ، فسيتم عرضها على شاشة بدقة قياسية. ومع ذلك ، مع شاشة عالية الدقة ، سيتم تمديد الصورة ولن تكون جميلة. هل هو بسبب دقة الشاشة؟ ليس تماما. هذا يرجع بشكل أساسي إلى أن الجهاز لا يبدو واعياً للقرار الذي لديه. على سبيل المثال ، iPhone 4 بدقة 320 نقطة في البوصة وعرض شاشة 640 بكسل تعتقد أن لديها 320 بكسل فقط. فجأة ستظهر صورتنا التي تبلغ 100 بكسل من الجانب غير واضحة. لذلك ، يتمثل الحل في ضبط نسبة البكسل (النسبة بين البكسل الفعلي والبكسل المعلنة). إليك المزيج المقترح من Bootstrap لحل هذه المشكلة:

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
} 
نرى أننا نلعب بالفعل على نسبة البكسل. لاستخدام هذا mixin ، يجب عليك إدخال المُدخلات:
  • صورة بالحجم الأساسي ( على سبيل المثال 100px * 100px )
  • حجم الصورة الأساسي مزدوج (200 بكسل * 200 بكسل)
  • قاعدة العرض بالبكسل
  • ارتفاع قاعدة بالبكسل
بشكل ملموس ، سنكتب هذه القاعدة:

.img-retina("image_de_base.jpg", "image_double.jpg", 100px, 100px); 
وسيتم تلقائيا إنشاء قواعد النمط بالنسبة لنا!
الاستخدام الديناميكي لـ LESS
في المثال السابق ، قمنا بتجميع ملف CSS باستخدام Crunch ووضعه في الموقع. هناك طريقة ديناميكية لاستخدام LESS وهي الإشارة مباشرة إلى الملف المصدر ، وكذلك لتوفير ملف Javascript لتفسيره عند الوصول. هذا جانب عميل أثقل من الطرق لا يبدو لي مناسبًا حقًا في وضع الإنتاج ، ولكنه هو الجانب الموصى به في الموقع المرجعي. ومع ذلك ، يمكن أن تجد مبررها في مرحلة التطوير لاختبار الإعدادات الجديدة بسرعة.
لنأخذ مثال صفحتنا هذه المرة مع هذا الإجراء. هنا هو الفرق في الرأس:

<link rel="stylesheet/less" href="less/_bootstrap.less">
<script src="assets/js/less.min.js"></script> 
من الواضح أن هذا يعمل فقط إذا وضعت كل ملفات LESS الضرورية على الخادم. ستلاحظ وقت تحميل طويل نسبيا. ولكن بعد ذلك ، فقط قم بتغيير عنصر في ملف LESS للحصول على النتيجة. على سبيل المثال ، إذا قمت بتغيير لون الخلفية في الملف variables.less ، فما عليك سوى إعادة تحميل الصفحة لمشاهدة النتيجة على الفور. هناك عنصر آخر يجب مراعاته هو المسار إلى الرموز التي يجب ضبطها وفقًا لذلك.

وهناك THEME ل BOOTSTRAP


THEME اختياري
يحتوي Bootstrap الإصدار 3 على سمة اختيارية. دعونا نرى ما نقترحه على هذا الموضوع الموصوف بأنه تحسين "تجربتنا البصرية". لذلك ، سوف نقوم باختباره على صفحة المثال الخاصة بنا ، وهو ما يكفي لإحالة الملف:

<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-theme.min.css" rel="stylesheet"> 
جرب الكود
لكي تكون على دراية بالاختلافات ، يعرض الشكل التالي نسختين من شريط التنقل.
jQuery web
لا شريط تأثير وشريط مع موضوع Bootstrap
من السهل أن نرى أن الشريط الأصلي "مسطح" ، في حين أن الشريط الجديد relief . يتم تحقيق التأثير من خلال التدرج اللوني. إذا نظرنا في الكود ، نجد في الواقع إعلانًا متدرجًا:

.navbar-inverse {
  background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222 100%);
  background-image:      -o-linear-gradient(top, #3c3c3c 0%, #222 100%);
  background-image: -webkit-gradient(linear, 
                                    left top, 
                                    left bottom, 
                                    from(#3c3c3c), 
                                    to(#222));
  background-image:linear-gradient(to bottom, 
                                #3c3c3c 0%, 
                                #222 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(
      startColorstr='#ff3c3c3c', 
      endColorstr='#ff222222', 
      GradientType=0
      );
  filter: progid:DXImageTransform.Microsoft.gradient(
      enabled = false
      );
  background-repeat: repeat-x;
} 
إنه نفس الشيء بالنسبة للزر:

.btn-primary {
  background-image: -webkit-linear-gradient(top, #337ab7 0%, 
                                            #265a88 100%);
  background-image:  -o-linear-gradient(top, #337ab7 0%, #265a88 100%);
  background-image: -webkit-gradient(linear, 
                            left top, left bottom, 
                            from(#337ab7), 
                            to(#265a88));
  background-image:linear-gradient(to bottom, 
                    #337ab7 0%, 
                    #265a88 100%
                    );
  filter: progid:DXImageTransform.Microsoft.gradient(
                startColorstr='#ff337ab7', 
                endColorstr='#ff265a88', 
                GradientType=0
                );
  filter: progid:DXImageTransform.Microsoft.gradient(
      enabled = false
      );
  background-repeat: repeat-x;
  border-color: #245580;
} 
نجد هذا التأثير المتدرج في التنبيهات وأشرطة التقدم واللوحات ... كما يتم توفير التظليل. يمكنك رؤية كل هذه التأثيرات في صفحة مثال موقع Bootstrap . قد نتساءل لماذا هذه التأثيرات ليست جزءًا من الملف الأساسي Bootstrap . الجواب يكمن في الأداء. تم اختياره لتجنب الآثار الجشعة للغاية في الموارد.
مواضيع أخرى
يمكن العثور على مظاهر مثيرة للاهتمام ومجانية على موقع Bootswatch . دعونا نرى في الشكل التالي ما يعطي سمة Cyborg على صفحة مثالنا.
jQuery web
تأثير سمة Cyborg على صفحة المثال
جرب الكود
هذا ليس بالأمر السيء ، في نوع مختلف هنا هو موضوع مجلة مرئية في الشكل التالي.
jQuery web
تأثير theme Journal على الصفحة
جرب الكود
أنشأ THEME الخاص بك
يمكنك بوضوح إنشاء theme مخصص. ليس من السهل عليك فهم تنظيم متغيرات LESS ، كما يجب عليك إيجاد توازن جيد بين الألوان. هناك مواقع مثل Boostrap Magic التي تسهل هذا الإعداد. يتم تنظيم المتغيرات بشكل أفضل من صفحة التخصيص Bootstrap . يمكنك أيضًا الانتقال مباشرة لتشغيل القيم في الملف variables.less . سنرى مثالًا بسيطًا على ما يمكن الحصول عليه. دعنا نقول أنني أريد موقعا بالالوان الخضراء. لذلك سأقوم بتغيير اللون الرمادي إلى اللون الأخضر قليلاً:

@gray-darker:            lighten(#232, 13.5%); 
@gray-dark:              lighten(#232, 20%);  
@gray:                   lighten(#232, 33.5%);
@gray-light:             lighten(#232, 60%); 
@gray-lighter:           lighten(#232, 93.5%); 
سأقوم أيضًا بتغيير الألوان الخمسة الأساسية ( Brand) لجعلها أكثر ملاءمة للون الأخضر:

@brand-primary:         #51c1d1;
@brand-success:         #5cb85c;
@brand-warning:         #f0ad4e;
@brand-danger:          #d9534f;
@brand-info:            #5bc0de; 
سأختار بعد ذلك لونًا جديدًا في الخلفية:

@body-bg:               #E0E4CC; 
أخيراً ، سوف أقوم بتغيير لون حدود الصور المصغرة لجعلها مرئية:

@thumbnail-border:      #aca; 
لاختبار كل هذا ، أغتنم نسخة معدلة قليلاً من مثال Bootstrap theme . ستكون النتيجة مثل هذا:
jQuery web
theme مخصص
من الواضح أن هذا مجرد تعديل ملخص لبرنامج Bootstrap ولكنه يوضح لك الطريقة التي يجب عليك اتباعها. إذا كنت تكافح لإنشاء لوحة ملونة لصفحاتك ، يمكنك العثور على الإلهام على موقع مجتمع Color Lover .

التكامل في BOILERPLATE HTML5


الممارسات الجيدة مع العملاء هي مهمة و لكنها صعبة البلوغ يوما بعد يوم . يتمثل الحل السريع والسهل في استخدام إطار HTML5 Boilerplate الممتاز . إنها مجموعة من المجلدات والملفات لبدء موقع (انظر الشكل التالي).
jQuery web
ملفات ومجلدات H5BP
لدينا كل ما نحتاجه لإنشاء موقع مع:
  • الملفات الأساسية (  index.html  ، الصفحة 404 ،  .htaccess ... ).
  • المجلدات للحفاظ على كل شيء مرتب ( css ، js ، img )
  • ميزات تلقائية (  normalize ، jquery ، modernizr  ...)
وفوق كل شيء تم التفكير في كل شيء بفضل خبرة العديد من المتخصصين. والسؤال الذي يمكن طرحه هو: كيفية الاستفادة من هذه البنية من خلال دمج Bootstrap ؟
التغييرات غير المرتبطة بـ BOOTSTRAP
الملف .htaccess هو تقييم وفقا لاحتياجاتك وعلى أي حال لا يتدخل مباشرة مع Bootstrap . ملفات human.txt ، LICENSE.md ، README.md يمكن تعديلها أيضا، دون التفاعل مع Bootstrap .
يجب أيضًا تغيير ملفات favicon.ico و apple-touch-icon-precomposed.png لتناسب موقعك.
التغييرات المرتبطة ب BOOTSTRAP
مجلد CSS
لهذا الملف ، من الضروري مراعاة العديد من الاحتمالات:
  • قمت بتحميل ملفات Bootstrap CSS مع CDN ولكن لديك بعض القواعد المحددة ، يمكنك وضعها في الملف main.css،
  • قمت بتحميل ملف CSS الخاص بـ Bootstrap الموصول على الخادم الخاص بك لأنه إصدار معدّل (على سبيل المثال مع LESS ) ، لا يزال بإمكانك وضع الكود المقابل في الملف main.css،
  • يمكنك تحميل ملف CSS الخاص بـ Bootstrap الموجود على الخادم الخاص بك في نسخته الأصلية ، يمكنك وضع هذا الملف مباشرة من خلال ترك اسمه الأساسي ، ولكن بعد ذلك يجب علينا تعديل الرابط في index.html .
تم دمج كود الملف normalize.css بالفعل في Boostrap ، حتى نتمكن من حذفه والإشارة إليه index.html .
مجلد JS
بالنسبة لملفات جافا سكريبت ، من الضروري فهم كيفية تنظيم H5BP ( انظر الشكل التالي) .
jQuery web
  1. main.js فارغ في البداية ، ومن المزمع هنا وضع الكود المحدد ،
  2. plugin.js يحتوي على كود صغير ويهدف إلى تلقي جميع الإضافات.
إن أبسط الحلول هو نسخ رمز الملف bootstrap.min.js بعد وجود الكود في plugin.js .
المجلد vendor مخصص لاستقبال المكتبات. بما أننا نحتاج إلى jQuery للحصول على الإضافات Bootstrap ، فسنحافظ عليها. إذا نظرت إلى الملف index.html ، فسترى إستراتيجية ذكية تتكون من محاولة تحميل jQuery باستخدام شبكة CDN ، وإذا لم ينجح ذلك ، يمكنك الرجوع إلى الملف في هذا المجلد:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>window.jQuery || document.write('<script src="js/vendor/
                    jquery-1.10.2.min.js"><\/script>')
</script> 
يهدف الملف modernizer إلى إنشاء ترميز CSS3 للمتصفحات التي لا تحتوي عليه ، وهو IE8 أساسًا. المرشح الاوفر حظا هو التمهيد للمصممين لاستخدام html5shiv و respond.js , بالتالي يمكن حذف هذا الملف.
ملفات الرموز
من الضروري وضع ملفات أيقونات Bootstrap في المجلد fonts .
الملف INDEX.HTML
ما الذي يجب تغييره في الملف index.html ؟ قم بتوفير عنوان ، أكمل العلامات الوصفية. ثم أضف رمز IE8 :

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and 
media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page 
via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"
  ></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
  </script>
<![endif]--> 
من الضروري أيضًا تكييف تحميل ملفات CSS وفقًا للحالة (واحد يحتفظ بالملف main.css أو يقوم بإزالته) ، ويجب على المستخدم منع تحميل modernizr .
وعادة كل شيء يجب أن يعمل!
إذا كنت تستخدم LESS ، فيجب عليك إضافة مجلد لاستيعاب الملفات المقابلة.

في الخلاصة


  • يمكن إنشاء نسخة مخصصة من Bootstrap من الواجهة عبر الإنترنت المقترحة عن طريق تعديل المُدخلات.
  • يستخدم Bootstrap LESS ، وهي لغة تبسط وتنظم كتابة ملفات CSS . يمكن إنشاء نسخة معدلة من Bootstrap عن طريق تعديل ملفات LESS مباشرة.
  • Bootstrap لديه theme اختياري. من الممكن أيضًا إنشاء المظهر الخاص بك.
  • من السهل دمج Bootstrap في إطار HTML5 Boilerplate .
هذا كل شيء ، لقد وصلت إلى نهاية هذه الدورة. أنا على علم بعدم استنفاذ الموضوع. من ناحية أخرى ، يُدعى هذا الإطار للتطوير بسرعة وسأعمل جاهداً للحفاظ على دراستي محدثة.
آمل أن تكون هذه الدورة التدريبية قد سمحت لك باكتشاف هذا الإطار وجعلك ترغب في استخدامه