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

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

الأدوات الصغيرة في Bootstrap4

يقدم Bootstrap4 بعض الأدوات الصغيرة التي تسمح لنا بتحقيق التأثيرات المطلوبة دون كتابة كود CSS.

الحواف

استخدام كلاس border يمكن إضافة أو إزالة الحواف:

<!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>
　<style>
　　.border　{
　　　　display:　inline-block;
　　　　width:　70px;
　　　　height:　70px;
　　　　margin:　6px;
　　}
　　</style>
</head>
<body>
<div　class="container">
　　<h2>الحواف</h2>
　　<p>استخدام كلاس border يمكن إضافة أو إزالة الحواف:</p>　
　　<span　class="border"></span>
　　<span　class="border　border-0"></span>
　　<span　class="border　border-top-0"></span>
　　<span　class="border　border-right-0"></span>
　　<span　class="border　border-bottom-0"></span>
　　<span　class="border　border-left-0"></span>
</div>
</body>
</html>
الاختبار للنظر في <›/>

إعداد ألوان الحواف

Bootstrap4 يقدم بعض الفئات لضبط ألوان الحواف:

<!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>
　　<style>
　　.border　{
　　　　display:　inline-block;
　　　　width:　70px;
　　　　height:　70px;
　　　　margin:　6px;
　　}
　　</style>
</head>
<body>
<div　class="container">
　　<h2>إعداد ألوان الحواف</h2>
　　<p>Bootstrap4 يقدم بعض الفئات لضبط ألوان الحواف:</p>　
　　<span　class="border　border-primary"></span>
　　<span　class="border　border-secondary"></span>
　　<span　class="border　border-success"></span>
　　<span　class="border　border-danger"></span>
　　<span　class="border　border-warning"></span>
　　<span　class="border　border-info"></span>
　　<span　class="border　border-light"></span>
　　<span　class="border　border-dark"></span>
　　<span　class="border　border-white"></span>
</div>
</body>
</html>
الاختبار للنظر في <›/>

إعداد زوايا الحواف

استخدام كلاس rounded يمكن إضافة حواف مكتوية:

<!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>
　　<style>
　　span　{
　　　　display:　inline-block;
　　　　width:　70px;
　　　　height:　70px;
　　　　margin:　6px;
　　　　background-color:　#555;
　　}
　　</style>
</head>
<body>
<div　class="container">
　　<h2>إعداد زوايا الحواف</h2>
　　<p>استخدام كلاس rounded يمكن إضافة حواف مكتوية:</p>　
　　<span　class="rounded"></span>
　　<span　class="rounded-top"></span>
　　<span　class="rounded-right"></span>
　　<span　class="rounded-bottom"></span>
　　<span　class="rounded-left"></span>
　　<span　class="rounded-circle"></span>
　　<span　class="rounded-0"></span>
</div>
</body>
</html>
الاختبار للنظر في <›/>

غرق

صيغة .float-right تستخدم لضبط الغرق إلى اليمين، .float-left لضبط الغرق إلى اليسار، صيغة .clearfix تستخدم لتحديد الغرق:

<!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>صيغة .float-right تستخدم لضبط الغرق إلى اليمين، .float-left لضبط الغرق إلى اليسار، صيغة .clearfix تستخدم لتحديد الغرق:</p>　
　　<div class="clearfix">
　　　　<span class="float-left">غرق إلى اليسار</span>
　　　　<span class="float-right">غرق إلى اليمين</span>
　　</div>
</div>
</body>
</html>
الاختبار للنظر في <›/>

غرق مرونقي

نرى أنه يمكن ضبط توجيه الغرق (.float-*-left|right - * هو sm, md, lg أو xl) بناءً على حجم الشاشة:

<!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>
　　<p>نرى أنه يمكن ضبط توجيه الغرق (.float-*-left|right - * هو sm, md, lg أو xl) بناءً على حجم الشاشة:</p>　
　　<div class="float-sm-right">غرق إلى اليمين عند حجم الشاشة أكبر من الشاشة الصغيرة</div><br>
　　<div class="float-md-right">غرق إلى اليمين عند حجم الشاشة أكبر من الشاشة المتوسطة</div><br>
　　<div class="float-lg-right">غرق إلى اليمين عند حجم الشاشة أكبر من الشاشة الكبيرة</div><br>
　　<div class="float-xl-right">غرق إلى اليمين عند حجم الشاشة أكبر من الشاشة الكبيرة</div><br>
　　<div class="float-none">لا يوجد غرق</div>
</div>
</body>
</html>
الاختبار للنظر في <›/>

مركز

استخدام صيغة .mx-auto لضبط التوجيه إلى الوسط:

<!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>استخدام صيغة .mx-auto لضبط التوجيه إلى الوسط::</p>
　　<div class="mx-auto bg-warning" style="width:150px">مركز</div>
</div>
</body>
</html>
الاختبار للنظر في <›/>

عرض

استخدام صيغة w-* على العنصر لضبط العرض: (.w-25, .w-50, .w-75, .w-100, .mw-100)

<!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>استخدام صيغة w-* على العنصر لضبط العرض: (.w-25, .w-50, .w-75, .w-100, .mw-100)</p>
　　<div　class="w-25　bg-warning">عرض 25%</div>
　　<div　class="w-50　bg-warning">عرض 50%</div>
　　<div　class="w-75　bg-warning">عرض 75%</div>
　　<div　class="w-100　bg-warning">عرض 100%</div>
　　<div　class="mw-100　bg-warning">عرض أقصى 100%</div>
</div>
</body>
</html>
الاختبار للنظر في <›/>

الارتفاع

على العنصر استخدام الفئة h-* (.h-25, .h-50, .h-75, .h-100, .mh-100) لتعيين الارتفاع:

<!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>على العنصر استخدام الفئة h-* (.h-25, .h-50, .h-75, .h-100, .mh-100) لتعيين الارتفاع:</p>
　　<div　style="height:200px;background-color:#ddd">
　　　　<div class="h-25 d-inline-block p-2 bg-warning">عرض 25%</div>
　　　　<div class="h-50 d-inline-block p-2 bg-warning">عرض 50%</div>
　　　　<div class="h-75 d-inline-block p-2 bg-warning">عرض 75%</div>
　　　　<div class="h-100 d-inline-block p-2 bg-warning">عرض 100%</div>
　　　　<div class="mh-100 d-inline-block p-2 bg-warning" style="height:500px">أعلى عرض 100%</div>
　　</div>
</div>
</body>
</html>
الاختبار للنظر في <›/>
تصميم Flex في Bootstrap4مراقبة الارتفاع في Bootstrap4