English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

دليل Bootstrap4 الأساسي

ترتيب النصوص في Bootstrap4

إعدادات Bootstrap 4 الافتراضية

Bootstrap 4 الافتراضي font-size هو 16px, line-height هو 1.5.

font-family الافتراضية هي "Helvetica Neue", Helvetica, Arial, sans-serif.

بالإضافة إلى ذلك، جميع عناصر <p>. margin-top: 0 、 margin-bottom: 1rem (16px)。

<h1> - <h6>

تحدد Bootstrap جميع أنماط عناوين HTML (من h1 إلى h6). انظر إلى المثال التالي:

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>العنوان Bootstrap h1 (2.5rem = 40px)</h1>
　　<h2>العنوان Bootstrap h2 (2rem = 32px)</h2>
　　<h2>العنوان Bootstrap h2 (1.75rem = 28px)</h2>
　　<h4>العنوان Bootstrap h4 (1.5rem = 24px)</h4>
　　<h5>العنوان Bootstrap h5 (1.25rem = 20px)</h5>
　　<h6>العنوان Bootstrap h6 (1rem = 16px)</h6>
</div>
</body>
</html>
اختبار لرؤية <‹/›

فئات العناوين العرضية

يقدم Bootstrap أربع فئات عرضية لتحكم في نمط العناوين: .display-1, .display-2, .display-3, .display-4。

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>عنوان العرض</h1>
　　<p>يمكن للعناوين العرضية أن تنتج خطوطًا أكبر وأقوى.</p>
　　<h1 class="display-1">العرض 1</h1>
　　<h1 class="display-2">العرض 2</h1>
　　<h1 class="display-3">العرض 3</h1>
　　<h1 class="display-4">العرض 4</h1>
</div>
</body>
</html>
اختبار لرؤية <‹/›

<small>

في Bootstrap 4، يستخدم العنصر HTML <small> لإنشاء نص أصغر وأفتح اللون:

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>عنوان نص أصغر</h1>
　　<p>يستخدم العنصر <small> لإنشاء نص أصغر وأفتح اللون:</p>　　　　　　　
　　<h1>العنوان h1 <small>العنوان الفرعي</small></h1>
　　<h2>العنوان h2 <small>العنوان الفرعي</small></h2>
　　<h2>العنوان h2 <small>العنوان الفرعي</small></h2>
　　<h4>العنوان h4 <small>العنوان الفرعي</small></h4>
　　<h5>العنوان h5 <small>العنوان الفرعي</small></h5>
　　<h6>العنوان h6 <small>العنوان الفرعي</small></h6>
</div>
</body>
</html>
اختبار لرؤية <‹/›

<mark>

Bootstrap 4 يحدد <mark> كونه له خلفية صفراء ومعين من الهوامش:

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>نص مبرمز</h1>　　　　
　　<p>استخدم عنصر <mark> لتشديد النص.</mark></p>
</div>
</body>
</html>
اختبار لرؤية <‹/›

<abbr>

Bootstrap 4 تعرف أنماط HTML <abbr> كشريط خطف ضعيف في أسفل النص:

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>التقليلات</h1>
　　<p>يُستخدم عنصر <abbr> لتمييز التقليلات أو التقليلات الأبجدية:</p>
　　<p>تم إنشاء <abbr title="World Health Organization">WHO</abbr> في عام 1948.</p>
</div>
</body>
</html>
اختبار لرؤية <‹/›

<blockquote>

يمكن إضافة فئة .blockquote إلى <blockquote> لتحديد النص المُقتبس:

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Blockquotes</h1>
　　<p>يُستخدم عنصر <blockquote> لعرض محتوى مصدر آخر:</p>
　　<blockquote class="blockquote">
　　　　<p>على مدى 50 عامًا، قدماً منظمة الحفاظ على الطبيعة العالمية (WWF) لحماية المستقبل الطبيعي. منظمة الحفاظ على الطبيعة العالمية (WWF) هي منظمة حماية الطبيعة الرائدة، وتعمل في 100 دولة/منطقة.
　　　　<p>لقد حصلت على دعم 1.2 مليون عضو في الولايات المتحدة وعدد تقريبًا 5 ملايين عضو في جميع أنحاء العالم.</p>
　　　　<footer class="blockquote-footer">من موقع الويب الخاص بـ WWF</footer>
　　</blockquote>
</div>
</body>
</html>
اختبار لرؤية <‹/›

<dl>

Bootstrap 4 تعرف أنماط HTML <dl> كالتالي:

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>قائمة التوضيح</h1>　　　　
　　<p>يُمثل عنصر <dl> قائمة التوضيح:</p>
　　<dl>
　　　　<dt>القهوة</dt>
　　　　<dd>-　مشروبات حارة سوداء</dd>
　　　　<dt>اللبن</dt>
　　　　<dd>-　مشروبات باردة بيضاء</dd>
　　</dl>　　　　　
</div>
</body>
</html>
اختبار لرؤية <‹/›

<code>

Bootstrap 4 تعرف أنماط HTML <code> كالتالي:

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>جزء من الكود</h1>
　　<p>يمكن وضع بعض عناصر الكود داخل عنصر <code>.</p>
　　<p>العناصر التالية من HTML: <code>span</code>, <code>section</code>، و<code>div</code> تستخدم لتحديد محتويات جزء من الوثيقة.</p>
</div>
</body>
</html>
اختبار لرؤية <‹/›

<kbd>

Bootstrap 4 تعرف أنماط HTML <kbd> كالتالي:

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>إدخال لوحة المفاتيح</h1>
　　<p>لإشارة إلى المدخلات التي يتم إدخالها عادةً باستخدام لوحة المفاتيح، استخدم عنصر <kbd>.</p>
　　<p>استخدام <kbd>ctrl + p</kbd> لفتح نافذة الحوار "طباعة".</p>
</div>
</body>
</html>
اختبار لرؤية <‹/›

<pre>

Bootstrap 4 يحدد النمط لـ HTML <pre> element كما يلي:

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>نص متعدد الأشطر</h1>
<p>للنصوص المتعددة الأشطر، استخدم عنصر pre:</p>
<pre>
النص في العنصر الموضع مسبقًا
عرض على نطاق ثابت
والمسافة، وكذلك
والمسافة، و
النقطة على السطر
</pre>
</div>
</body>
</html>
اختبار لرؤية <‹/›

صفوف النسخ المضغوطة الأخرى

التالي يقدم أمثلة على صفوف النسخ المضغوطة لـ Bootstrap4:

اسم الصنفوصفمثال
.font-weight-boldنص مظلمجربها
.font-weight-normalنص عاديجربها
.font-weight-lightنص أخفجربها
.font-italicنص مائلجربها
.leadجعل الفقرة أكثر وضوحًاجربها
.smallتحديد نص أصغر (85% من عنصر الأب)جربها
.text-leftالتصفية إلى اليسارجربها
.text-centerالتصفية إلى اليمينجربها
.text-rightتنسيق إلى اليمينجربها
.text-justifyحدد التوجيه النصي، إذا تجاوز جزء النص عن عرض الشاشة، يتم التبديل تلقائيًاجربها
.text-nowrapلا تقلب السطر في الجزء الذي يزيد عن عرض الشاشةجربها
.text-lowercaseحدد النص كصغيرجربها
.text-uppercaseحدد النص ككبيرجربها
.text-capitalizeحدد الأحرف الأولى من الكلمة ككبيرةجربها
.initialismاعرض النص في علامة <abbr> بكتابة صغيرة، ويمكن تحويل الأحرف الصغيرة إلى أحرف كبيرةجربها
.list-unstyledإزالة النمط الافتراضي للقائمة، تأتي عناصر القائمة في اليسار (في <ul> و <ol>). هذه الصفحة تنطبق فقط على عناصر القائمة المباشرة 　 　(إذا كنت بحاجة إلى إزالة عناصر القائمة المدمجة، فتحتاج إلى استخدام هذا النمط في القائمة المدمجة)جربها
.list-inlineضع جميع عناصر القائمة في السطر نفسهجربها
.pre-scrollableاجعل عنصر <pre> قابل للتمرير، منطقة حيز الكود القصوى هي 340px، إذا تجاوزت هذه الارتفاع، سيظهر شريط التمرير في المحور Yجربها
الألوان في Bootstrap4نظام الشبكة في Bootstrap4