دليل أساسي لBootstrap

إضافات Bootstrap

تنسيق النصوص لـ Bootstrap إعداد بيئة Bootstrap

تعريف CSS لـ Bootstrap

في هذا الفصل، سنشرح أجزاء الهيكل الأساسي لBootstrap، بما في ذلك أفضل الممارسات التي تجعل تطوير الويب أفضل وأسرع وأقوى.

نوع الملف (Doctype) HTML5

استخدمت Bootstrap بعض عناصر HTML5 وخصائص CSS. لتشغيلها بشكل صحيح، يجب استخدام نوع الملف (Doctype) HTML5. لذلك، يرجى تضمين الكود التالي في بداية مشروع Bootstrap الخاص بك.

<!DOCTYPE　html>
<html>
....
</html>

إذا لم تستخدم نوع الملف (Doctype) HTML5 في بداية الصفحة التي أنشأتها باستخدام Bootstrap، قد تواجه بعض المشاكل في عرض المتصفحات المختلفة،甚或在某些 مواقف معينة قد تواجه مشاكل في التزامن، مما يؤدي إلى عدم قبول كودك من قبل معايير W3C.

الاهتمام الأول بالهواتف المحمولة

الاهتمام الأول بالهواتف المحمولة هو التغيير الأكثر وضوحًا في Bootstrap 3.

في إصدارات Bootstrap السابقة (حتى 2.x)، كان عليك تضمين CSS إضافي يدويًا لتوفير دعم للهواتف المحمولة في المشروع بأكمله.

الآن، CSS الافتراضي لBootstrap 3 يدعم الهواتف المحمولة بشكل جيد.

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

للحصول على مواقع الويب التي تطور باستخدام Bootstrap صديقة للهواتف المحمولة، والتأكد من الرسم المناسب وتكبير الشاشة اللمس، يجب إضافة بعض الكود في علامة head من الصفحة. viewport meta 标签，如下所示：

width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。

initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。

在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放(zooming)功能。

通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。

注意，这种方式我们并不推荐所有网站使用，还是要看您自己的情况而定！

响应式图像

通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。

接下来让我们看下这个 class 包含了哪些 css 属性。

在下面的代码中，可以看到img-responsive class 为图像赋予了 max-width: 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸。

.img-responsive　{
　　display:　block;
　　height:　auto;
　　max-width:　100%;
}

这表明相关的图像呈现为 block。当您把元素的 display 属性设置为 block，以块级元素显示。

设置 height:auto，相关元素的高度取决于浏览器。

设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。

إذا كنت بحاجة إلىوضع الصور التي تستخدم فئة .img-responsive في منتصف الصف، استخدم فئة .center-block، وليس .text-center.}

عرض عالمي، تصميم النصوص وروابط

عرض عالمي أساسي

Bootstrap 3 يستخدم body {margin: 0;} لإزالة الهوامش من body.

انظر أدناه إلى إعدادات body:

body {
　　font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
　　font-size: 14px;
　　line-height: 1.428571429;
　　color: #333333;
　　background-color: #ffffff;
}

القاعدة الأولى تضبط نمط الخط الافتراضي لـ body "Helvetica Neue", Helvetica, Arial, sans-serif.

القاعدة الثانية تضبط حجم الخط النصي الافتراضي إلى 14 بكسل.

القاعدة الثالثة تضبط ارتفاع الخط الافتراضي إلى 1.428571429.

القاعدة الرابعة تضبط لون النصوص الافتراضي إلى #333333.

القاعدة الأخيرة تضبط لون الخلفية الافتراضي إلى الأبيض.

تصميم النصوص

استخدام خاصيات @font-family-base، @font-size-base و @line-height-base كأسلوب تصميم النصوص.

تصميم الروابط

من خلال خاصية @link-color لتحديد لون الروابط العالمي.

للأسلوب الافتراضي للروابط، يتم إعدادها كما يلي:

a:hover,
a:focus {
　　color: #2a6496;
　　text-decoration: underline;
}
a:focus {
　　outline: رفيع، نقطي #333;
　　outline: 5px auto -webkit-focus-ring-color;
　　outline-offset: -2px;
}

لذلك، عند وضع المؤشر فوق الروابط أو عند النقر على الروابط، سيتم تعيين اللون إلى #2a6496. بالإضافة إلى ذلك، سيظهر خط أسفل.

بالإضافة إلى ذلك، عند النقر على الروابط، سيظهر شكل نحوي رفيع بلون رمادي داكن #333. القاعدة الأخرى هي إعداد الشكل المحدد بعرض 5 بكسل، وللبrowsers التي تعتمد على webkit -webkit-focus-ring-color البراشير التابعة للتصفح. تم تعيين إزاحة الشكل المحدد إلى -2 بكسل.

جميع هذه الأساليب يمكن العثور عليها في scaffolding.less.

لتفادي عدم التوافق عبر المتصفحات

Bootstrap يستخدم Normalize لإقامة توافق عبر المتصفحات.

Normalize.css هو ملف CSS صغير يوفر توافقًا أفضل عبر المتصفحات للعناصر الافتراضية في HTML.

المعدن

<div>
　　...
</div>

Bootstrap 3 المدخل النوع يستخدم لربط محتوى الصفحة. .container النوع.

.container　{
　　　padding-right:　15px;
　　　padding-left:　15px;
　　　margin-right:　auto;
　　　margin-left:　auto;
}

من خلال الكود أعلاه، يتم تحويل الهوامش الخارجية للـ container (margin-right، margin-left) إلى قرار المتصفح.

لاحظ أن الارتفاع الداخلي (padding) هو عرض ثابت، لذا يكون المعدن غير القابل للإنشاء بشكل افتراضي.

.container:before,
.container:after　{
　　عرض: جدول;
　　المحتوى: " ";
}

هذا سينتج عنه عنصر وهمي. تعيين عرض لـ الجدول، سيتم إنشاء cell غير معروف وسيتم إنشاء سياق جديد لتنسيق الحجوم.:before الوهمية تمنع الانهيار الجانبي،:after الوهمية لتنظيف الزيادة.

إذا conteneditable الخصائص تظهر في HTML، بسبب بعض الأخطاء في Opera، يتم إنشاء مسافة حول العناصر المذكورة أعلاه. يمكن القيام بذلك باستخدام المحتوى: " " لإصلاح.

.container:after　{
　　clear:　both;
}

إنه يخلق عنصر وهمي، ويعلم أن جميع العناصر المضمنة تحتوي على جميع العناصر المتدحرجة.

Bootstrap 3 CSS يحتوي على استعلام وسائل متجاوبة، حيث قام بتعيين max-width لـ container ضمن نطاق كل استعلام وسائل، مما يتناسب مع نظام الشبكة.

@media　(min-width:　768px)　{
　　　.container　{
　　　　　　عرض: 750px;
}

دعم Bootstrap للمتصفحات/الأجهزة

Bootstrap يعمل بشكل جيد في أحدث متصفحات الأجهزة المحمولة وأجهزة الكمبيوتر المكتبية.

المتصفحات القديمة قد لا تدعم بشكل جيد.

الجدول التالي يوضح أحدث إصدارات المتصفحات والمنصات التي يدعمها Bootstrap:

	Chrome	Firefox	IE	Opera	Safari
Android	نعم	نعم	لا ينطبق	لا ينطبق	لا ينطبق
iOS	نعم	لا ينطبق	لا ينطبق	لا ينطبق	نعم
Mac OS X	نعم	نعم	لا ينطبق	نعم	نعم
Windows	نعم	نعم	نعم*	نعم	لا ينطبق

* Bootstrap يدعم متصفحات Internet Explorer 8 وأعلى.

تنسيق النصوص لـ Bootstrap إعداد بيئة Bootstrap