دليل Bootstrap الأساسي

أدوات Bootstrap

معايير التencoding CSS Bootstrap ملحق العرض التلقائي Bootstrap

معايير الت编码 HTML Bootstrap

اللغة النصية

استخدم مسافة مرتين بدلاً من الرمز tab -- هذا هو الطريقة الوحيدة التي تضمن فيها الحصول على عرض متساوٍ في جميع البيئات.
المكونات المدمجة يجب أن تتم تغطيتها مرة واحدة (أي مسافة مرتين).
بالنسبة لتعريف الخاصية، تأكد من استخدام العلامات المزدوجة بشكل كامل، لا تستخدم العلامات المحدودة قط.
لا تضيف شرطة قطع (slash) في نهاية العناصر الم闭合ة تلقائيًا (self-closing) -- مواصفات HTML5يُوضح فيها أن هذا إختياريًا.
لا تتجاهل العلامات المنتهية الإلزامية (closing tag) الإختيارية (مثل،</li> أو </body>)

مثال:

<!DOCTYPE html>
<html>
  <head>
    <title>عنوان الصفحة</title>
  </head>
  <body>
    <img src="images/company-logo.png" alt="[#0#]">
    <h1>Hello, world!</h1>
  </body>
</html>

DOCTYPE HTML5

أضف إعلان النمط القياسي (standard mode) في الخط الأول لكل صفحة HTML، مما يضمن التمثيل المتناسق في جميع المتصفحات.

مثال:

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

خصائص اللغة

حسب مواصفات HTML5:

يُنصح بشدة بتخصيص الخاصية lang للعنصر html الجذر، مما يساعد في ضبط اللغة الصحيحة للوثيقة. هذا يساعد أدوات التوليد الصوتي في تحديد كيفية التحدث، ويساعد أدوات الترجمة في تحديد القواعد التي يجب اتباعها أثناء الترجمة، وما إلى ذلك.

هنا قائمةجدول رموز اللغات.

<html lang="zh">
  <!-- ... -->
</html>

نمط التطابق مع Internet Explorer

يدعم Internet Explorer من خلال علامات معينة <meta> باستخدام علامة نمط edge، مما يتيح لمتصفح Internet Explorer استخدام النمط الأحدث الذي يدعمه.

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

تشفير الحروف

من خلال تحديد بوضوح تشفير الحروف، يمكن التأكد من أن ي�断 المتصفح بسرعة وسهولة كيفية عرض محتويات الصفحة. منفعة هذا هو أنه يمكن تجنب استخدام علامات وحدات البيانات في HTML (character entity)، وبالتالي أن تكون جميعها متزامنة مع تشفير الوثيقة (عادةً UTF-8).

<head>
  <meta charset="UTF-8">
</head>

استيراد ملفات CSS وJavaScript

حسب مواصفات HTML5، عادةً لا تحتاج إلى تحديد type الخصائص، لأن text/css و text/javascript وهي القيم الافتراضية الخاصة بها.

روابط مواصفات HTML5

<!-- CSS خارجية -->
<link rel="stylesheet" href="code-guide.css">
<!-- CSS في الوثيقة -->
<style>
  /* ... */
</style>
<!-- JavaScript -->
<script src="code-guide.js"></script>

الاستخدام العملي هو الملك

تتبع دائمًا معيار HTML والمعنى، ولكن لا تقم بتضحية الاستخدام العملي. في كل وقت، استخدم أقل عدد ممكن من العناصر وابقِ التعقيد في الحد الأدنى.

ترتيب الخاصيات

يجب ترتيب خاصيات HTML وفقًا للترتيب المقدم أدناه لضمان سهولة قراءة الكود.

class
id, name
data-*
src, for, type, href
title, alt
aria-*, role

يستخدم class لتحديد المكونات القابلة للتكرار بسهولة، لذا يجب أن يتم تضمينها في المقدمة. يستخدم id لتحديد المكونات المحددة، ويجب استخدامه بحذر (مثل، البوكرز في الصفحة)، لذا يتم تضمينه في المكان الثاني.

<a id="..." data-modal="toggle" href="#">
  رابط مثال
</a>
<input type="text">
<img src="..." alt="[#1#]">

خصائص الحولية (boolean)

يمكن للخصائص الحولية أن لا يتم تعيينها عند الت声明. يتطلب معيار XHTML تعيينها، ولكن لا يتطلب معيار HTML5 ذلك.

للمزيد من المعلومات، يرجى الرجوع إلى قسم WhatWG حول الخاصيات الحولية:

إذا كانت الخاصية الحولية للعنصر لها قيمة، فهي true، وإذا لم تكن لها قيمة، فهي false.

إذابالطبعإذا كنت بحاجة إلى تعيينها، يرجى الرجوع إلى معيار WhatWG:

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

ببساطة، لا تحتاج إلى تعيين قيمة.

<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
  <option value="1" selected>1</option>
</select>

تقليل عدد العناصر

عند كتابة رمز HTML، تجنب استخدام العناصر الأبوية الزائدة. في كثير من الأحيان، هذا يتطلب التكرار وال重构. انظر إلى المثال التالي:

<!-- ليس سيئًا جدًا -->
<span>
  <img src="...">
</span>
<!-- أفضل -->
<img src="...">

العلامات المولدة باستخدام JavaScript

توليد العلامات باستخدام JavaScript يجعل المحتوى أكثر صعوبة في العثور عليه وتحريره، مما يقلل من الأداء. تجنب ذلك عندما يمكن.

معايير التencoding CSS Bootstrap ملحق العرض التلقائي Bootstrap