دورة bootstrap 4 للمبتدئين الدرس الأول
1- إضافة البنية الأساسية لملف html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Course</title>
</head>
<body>
</body>
</html>
2- ملائمة جميع الأجهزة
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Course</title>
</head>
<body>
</body>
</html>
3- إضافة bootstrap للملف ديالنا
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<title>Bootstrap Course</title>
</head>
<body>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
</html>
4- ل class container ف bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<title>Bootstrap Course</title>
</head>
<body>
<div class="container">
<h1>Bonjour bootstrap</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
</html>
5- ل class container-fluid ف bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<title>Bootstrap Course</title>
</head>
<body>
<!-- <div class="container">
<h1>Bonjour bootstrap</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
</div> -->
<div class="container-fluid">
<h1>Bonjour bootstrap</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
</html>