مرجع bootstrap

<div class="container">
  <h1>مرحبًا بك في Bootstrap</h1>
</div>

<div class="row">
  <div class="col">عمود 1</div>
  <div class="col">عمود 2</div>
</div>

<div class="row">
  <div class="col-md-6">نصف العرض</div>
  <div class="col-md-6">نصف العرض</div>
</div>

<button class="btn btn-primary">زر رئيسي</button>

<div class="card">
  <div class="card-body">
    <h5 class="card-title">عنوان البطاقة</h5>
    <p class="card-text">هذا مثال على بطاقة.</p>
  </div>
</div>

<div class="alert alert-warning">تحذير! تحقق من إدخالاتك.</div>

<p class="text-center">هذا النص في الوسط.</p>

<div class="bg-primary text-white p-3">خلفية زرقاء</div>

<div class="m-3">مسافة خارجية 3 وحدات</div>

<input type="text" class="form-control" placeholder="أدخل اسمك">

<div class="form-check">
  <input class="form-check-input" type="checkbox">
  <label class="form-check-label">تحقق مني</label>
</div>

<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="اسم المستخدم">
</div>

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  فتح النافذة
</button>
<div class="modal fade" id="exampleModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">عنوان النافذة</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        محتوى النافذة المنبثقة.
      </div>
    </div>
  </div>
</div>

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="هذا زر">
  تمرير الماوس هنا
</button>

<div id="carouselExample" class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

<i class="bi bi-alarm"></i>

<i class="bi bi-bell"></i>

<div class="container-fluid">
  <h1>حاوية مرنة بعرض الشاشة</h1>
</div>

<div class="row g-3">
  <div class="col-md-6 bg-light">عمود 1</div>
  <div class="col-md-6 bg-dark text-white">عمود 2</div>
</div>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
    قائمة منسدلة
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">خيار 1</a></li>
    <li><a class="dropdown-item" href="#">خيار 2</a></li>
  </ul>
</div>

<div class="progress">
  <div class="progress-bar" style="width: 50%;">50%</div>
</div>

<div class="toast show">
  <div class="toast-header">
    <strong class="me-auto">إشعار</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    هذه رسالة إشعار.
  </div>
</div>

<p class="text-uppercase">هذا النص بأحرف كبيرة</p>

<div class="border-3 border-primary p-3">إطار أزرق بعرض 3</div>

<div class="shadow-lg p-3 mb-5 bg-white rounded">عنصر بظل كبير</div>

<i class="bi bi-gear"></i>

$primary: #ff5733; // تغيير اللون الأساسي 
$body-bg: #f8f9fa; // تغيير خلفية الصفحة
@import "bootstrap"; // استيراد Bootstrap بعد التعديل

$spacers: (1: 0.25rem, 2: 0.5rem, 3: 1rem);
@each $key, $value in $spacers {
  .mt-#{$key} { margin-top: $value; }
}

:root {
  --bs-main-color: #4caf50;
}
.btn-custom {
  background-color: var(--bs-main-color);
  color: white;
}

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 10px;
}

<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#sidebar">فتح القائمة</button>
<div id="sidebar" class="offcanvas offcanvas-start">
  <div class="offcanvas-header">
    <h5>القائمة الجانبية</h5>
    <button class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">المحتوى هنا</div>
</div>

<footer class="bg-dark text-white text-center py-3 fixed-bottom">حقوق النشر © 2025</footer>

<img src="image.jpg" class="img-fluid" loading="lazy">

<!-- استخدم ملفات مضغوطة -->
<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.bundle.min.js"></script>

.fade-in {
  opacity: 0;
  animation: fadeIn 1s forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.btn-hover:hover {
  transform: scale(1.1);
  transition: all 0.3s ease-in-out;
}

<button class="btn btn-primary" id="loadModal">عرض البيانات</button>
<div id="modalContent" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">بيانات المستخدم</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">جارٍ التحميل...</div>
    </div>
  </div>
</div>
<script>
  document.getElementById("loadModal").addEventListener("click", function() {
    fetch("user-data.php")
      .then(response => response.text())
      .then(data => document.querySelector("#modalContent .modal-body").innerHTML = data);
  });
</script>

<button class="btn btn-success" onclick="showToast()">عرض الإشعار</button>
<div id="liveToast" class="toast position-fixed bottom-0 end-0">
  <div class="toast-header">
    <strong class="me-auto">إشعار جديد</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">هذا إشعار ديناميكي.</div>
</div>
<script>
  function showToast() {
    new bootstrap.Toast(document.getElementById("liveToast")).show();
  }
</script>

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: white;
  }
}

<button class="btn btn-primary position-fixed bottom-0 end-0 m-3">🔝</button>

:root {
  --bs-primary: #ff5733; /* تغيير اللون الأساسي */
  --bs-body-font-size: 1.2rem; /* تغيير حجم النص */
}

.dark-mode {
  --bs-body-bg: #121212;
  --bs-body-color: white;
}
<button onclick="document.body.classList.toggle('dark-mode')">🌙 تبديل الوضع</button>

<nav id="navbar-example" class="navbar navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="#">القائمة</a>
  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link" href="#section1">القسم 1</a></li>
    <li class="nav-item"><a class="nav-link" href="#section2">القسم 2</a></li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example">
  <div id="section1">محتوى القسم 1</div>
  <div id="section2">محتوى القسم 2</div>
</div>

<div class="row align-items-stretch">
  <div class="col bg-primary p-3">عمود 1</div>
  <div class="col bg-secondary p-3">عمود 2</div>
</div>

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">📦 عنصر 1</div>
    <div class="col">📦 عنصر 2</div>
    <div class="col">📦 عنصر 3</div>
  </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<!-- تحميل Bootstrap مع إزالة المكونات غير المستخدمة -->
@import "bootstrap/scss/bootstrap";
$enable-navbar: false; // إزالة الـ Navbar لتقليل الحجم

<script defer src="bootstrap.bundle.min.js"></script>

.btn-material {
  background: linear-gradient(45deg, #6200ea, #03dac6);
  color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.neumorphism {
  background: #e0e0e0;
  box-shadow: 10px 10px 20px #bebebe, -10px -10px 20px #ffffff;
  border-radius: 10px;
}

<!-- إضافة Manifest -->
<link rel="manifest" href="manifest.json">
<!-- تفعيل Service Worker -->
<script>
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("service-worker.js");
}
</script>

<button @click="counter++" class="btn btn-primary">زيادة العدد: {{ counter }}</button>

<Button variant="primary" onClick={() => setCount(count + 1)}>زيادة العدد: {count}</Button>

<button x-data="{ count: 0 }" @click="count++" class="btn btn-danger">عدد النقرات: <span x-text="count"></span></button>