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

دليل تعلم Bootstrap4 الأساسي

تثبيت واستخدام Bootstrap4

يمكننا تثبيت Bootstrap4 عبر الطريقتين التاليتين:

  • استخدام CDN لـ Bootstrap 4

  • من الموقع الرسمي getbootstrap.com تنزيل Bootstrap 4

Bootstrap 4 CDN

يُفضل داخليًا استخدام مكتبات Bootstrap4 من CDN Staticfile:

<!-- أحدث ملفات CSS الأساسية لBootstrap4 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　
<!-- ملفات jQuery. يجب تضمينها قبل bootstrap.min.js -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　
<!-- bootstrap.bundle.min.js يستخدم لضبط النوافذ المنبثقة، والتلميحات، والقوائم المنسدلة، ويحتوي أيضًا على popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　
<!-- أحدث ملفات JavaScript الأساسية لBootstrap4 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

ملاحظة:popper.min.js تستخدم لضبط النوافذ المنبثقة، والتلميحات، والقوائم المنسدلة، حيث أن bootstrap.bundle.min.js يحتوي عليها بالفعل popper.min.js。

بالإضافة إلى ذلك، يمكنك أيضًا استخدام الخدمات التالية من CDN:

تنزيل Bootstrap 4

يمكنك الذهاب إلى الموقع الرسمي https://getbootstrap.com/ تنزيل مكتبة موارد Bootstrap4

ملاحظة:بالإضافة إلى ذلك، يمكنك أيضًا تثبيتها باستخدام أدوات إدارة الحزم npm، gem، composer، وما إلى ذلك:

npm install [email protected]
gem 'bootstrap', '~> 4.0.0.beta2'
composer require twbs/bootstrap:4.0.0-beta.2

إنشاء أول صفحة Bootstrap 4

1. إضافة بيانات الـ DOCTYPE HTML5

Bootstrap يتطلب استخدام نوع ملف HTML5، لذا يجب إضافة بيانات الـ DOCTYPE HTML5.

DOCTYPE HTML5 في بداية المستند وتحديد الترميز المناسب:

<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset="utf-8">　
　　</head>
</html>

أولوية الأجهزة المحمولة

لجعل مواقع Bootstrap تتمتع باللين مع الأجهزة المحمولة، والتأكد من الرسم المناسب وتكبير اللمس، يجب إضافة رمز meta viewport في رأس الصفحة، كما يلي:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width=device-width يعني أن العرض هو عرض شاشة الجهاز.

initial-scale=1 يعني نسبة التكبير الابتدائية.

shrink-to-fit=no يتكيف تلقائيًا مع عرض شاشة الهاتف.

صناديق

Bootstrap 4 يتطلب عنصر صندوق لتغليف محتويات الموقع.

يمكننا استخدام صندوقين من هذا النوع:

  • استخدام صندوق .container يمنح عرض ثابت ودعم ترقية التصميم.

  • استخدام صندوق .container-fluid يمنح عرض 100% ويحتل كامل نطاق الرؤية (viewport).

صفحتين Bootstrap 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>صفحة Bootstrap الأولى لي</h1>
　　<p>هذا نص.</p>　
</div>
</body>
</html>
تجربة رؤية ‹/›

النموذج التالي يظهر صندوق يحتل كامل نطاق الرؤية (viewport).

<!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-fluid">
　　<h1>صفحة Bootstrap الأولى لي</h1>
　　<p>استخدمت .container-fluid، عرض 100%، يتخذ الكامل من viewport.</p>　
</div>
</body>
</html>
تجربة رؤية ‹/›
نظام الشبكة في Bootstrap4دليل تعليم Bootstrap4