دليل تعلم Bootstrap4

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

الألوان في Bootstrap4

Bootstrap 4 يقدم بعض الألوان المميزة: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark و .text-light:

مثال

<!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">
　　<h2>ألوان النص تمثل معاني محددة</h2>
　　<p class="text-muted">نص ناعم.</p>
　　<p class="text-primary">نص مهم.</p>
　　<p class="text-success">نص يمثل نجاح التنفيذ.</p>
　　<p class="text-info">نص يمثل معلومات توجيهية.</p>
　　<p class="text-warning">نص تحذير.</p>
　　<p class="text-danger">نص عملية خطيرة.</p>
　　<p class="text-secondary">عنوان فرعي.</p>
　　<p class="text-dark">نص رمادي داكن.</p>
　　<p class="text-light">نص رمادي فاتح (لا يمكن رؤيته بوضوح على الخلفية البيضاء).</p>
　　<p class="text-white">نص أبيض (لا يمكن رؤيته بوضوح على الخلفية البيضاء).</p>
</div>
</body>
</html>

تجربة رؤية ‹/›

في استخدام الرابط

مثال

<!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">
　　<h2>ألوان النص</h2>
　　<p>تحرك فأرةك فوق الرابط.</p>
　　<a href="#" class="text-muted">رابط ناعم.</a>
　　<a href="#" class="text-primary">رابط رئيسي.</a>
　　<a href="#" class="text-success">رابط ناجح.</a>
　　<a href="#" class="text-info">معلومات نصية مرتبطة.</a>
　　<a　href="#"　class="text-warning">رابط تحذير.</a>
　　<a　href="#"　class="text-danger">رابط خطير.</a>
　　<a　href="#"　class="text-secondary">رابط عنوان فرعي.</a>
　　<a　href="#"　class="text-dark">رابط أسود غامق.</a>
　　<a　href="#"　class="text-light">رابط رمادي فاتح.</a>
</div>
</body>
</html>

تجربة رؤية ‹/›

لون الخلفية

تقدم الفئات التالية للون الخلفية: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark و .bg-light.

لا يغير لون الخلفية لون النص، في بعض الأمثلة تحتاج إلى استخدام .text-* معها.

مثال

<!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">
　　<h2>لون الخلفية</h2>
　　<p class="bg-primary text-white">لون الخلفية المهم.</p>
　　<p class="bg-success text-white">لون الخلفية النجاح.</p>
　　<p class="bg-info text-white">لون الخلفية الإعلام.</p>
　　<p class="bg-warning text-white">لون الخلفية التحذير.</p>
　　<p class="bg-danger text-white">لون الخلفية الخطير.</p>
　　<p class="bg-secondary text-white">لون الخلفية للعنوان الفرعي.</p>
　　<p class="bg-dark text-white">لون الخلفية الداكن.</p>
　　<p class="bg-light text-dark">لون الخلفية الفاتح.</p>
</div>
</body>
</html>

تجربة رؤية ‹/›

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