doc : Architecute
This commit is contained in:
parent
b3444ac4e2
commit
bba719c8c1
745 changed files with 224 additions and 97283 deletions
5
.vscode/settings.json
vendored
5
.vscode/settings.json
vendored
|
|
@ -20,11 +20,8 @@
|
||||||
"yavsc",
|
"yavsc",
|
||||||
"Yavsc"
|
"Yavsc"
|
||||||
],
|
],
|
||||||
"cSpell.dictionaries": [
|
|
||||||
"fr"
|
|
||||||
],
|
|
||||||
"cSpell.reportUnknownWords": true,
|
"cSpell.reportUnknownWords": true,
|
||||||
"cSpell.language": "fr,fr-FR,en,en-GB",
|
"cSpell.language": "fr,en",
|
||||||
"chat.tools.terminal.autoApprove": {
|
"chat.tools.terminal.autoApprove": {
|
||||||
"dotnet test": true
|
"dotnet test": true
|
||||||
},
|
},
|
||||||
|
|
|
||||||
124
doc/Architecture.md
Normal file
124
doc/Architecture.md
Normal file
|
|
@ -0,0 +1,124 @@
|
||||||
|
# Architecture de Yavsc
|
||||||
|
|
||||||
|
## Vision générale
|
||||||
|
|
||||||
|
Yavsc est une plateforme de mise en relation client/fournisseur,
|
||||||
|
spécialisable par domaine d'activité, avec une origine musicale.
|
||||||
|
|
||||||
|
Elle gère des **devis** (pas de facturation directe), et s'intègre
|
||||||
|
dans des workflows collaboratifs pouvant aboutir à des livrables
|
||||||
|
sous licence libre.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Workflow de mise en relation multi-parties
|
||||||
|
|
||||||
|
### Initiateur
|
||||||
|
|
||||||
|
Le projet peut être initié par n'importe quelle partie :
|
||||||
|
- Un **client** (particulier ou pro) qui exprime un besoin
|
||||||
|
- Un **fournisseur** qui propose une offre ou monte un collectif
|
||||||
|
- Un **tiers coordinateur** qui orchestre sans être client ni prestataire
|
||||||
|
|
||||||
|
### Rôles
|
||||||
|
|
||||||
|
| Rôle | Type de compte | Description |
|
||||||
|
|---------------|--------------------|-----------------------------------------------------------|
|
||||||
|
| Client | Pro ou particulier | Exprime le besoin, valide les devis, co-signe la licence |
|
||||||
|
| Fournisseur | Pro | Répond aux besoins, peut sous-traiter |
|
||||||
|
| Coordinateur | Pro ou particulier | Orchestre le projet sans relation de facturation directe |
|
||||||
|
|
||||||
|
### Sous-traitance
|
||||||
|
|
||||||
|
Un fournisseur peut faire appel à d'autres fournisseurs,
|
||||||
|
**avec accord explicite du client**. Chaque sous-traitant :
|
||||||
|
- Est visible dans le projet
|
||||||
|
- Co-signe l'accord de licence
|
||||||
|
- Peut recevoir un devis distinct
|
||||||
|
|
||||||
|
### B2B / B2C
|
||||||
|
|
||||||
|
La distinction est portée par le **type de compte** :
|
||||||
|
- Compte **pro** : SIRET, TVA, facturation professionnelle
|
||||||
|
- Compte **particulier** : usage personnel, sans obligations fiscales pro
|
||||||
|
|
||||||
|
Un projet peut mélanger les deux (ex: un particulier client,
|
||||||
|
plusieurs prestataires pro) — Yavsc n'impose pas d'homogénéité.
|
||||||
|
|
||||||
|
### États d'un projet
|
||||||
|
|
||||||
|
```
|
||||||
|
Initié → En recherche de parties → Devis en cours
|
||||||
|
→ Accord de licence signé → En production
|
||||||
|
→ Livré → Publié (si licence libre)
|
||||||
|
```
|
||||||
|
|
||||||
|
### Contrainte clé
|
||||||
|
|
||||||
|
L'accord de licence est établi **avant** tout début de production,
|
||||||
|
signé (ou validé) par toutes les parties : client, fournisseurs,
|
||||||
|
et sous-traitants éventuels.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Domaine musical — Titres collaboratifs
|
||||||
|
|
||||||
|
### Objectif
|
||||||
|
|
||||||
|
Permettre la production collaborative de titres musicaux sous licence
|
||||||
|
libre, à partir de la mise en relation assurée par Yavsc.
|
||||||
|
|
||||||
|
### Formats supportés
|
||||||
|
|
||||||
|
- Audio (ex: WAV, FLAC, MP3)
|
||||||
|
- Partition (ex: MusicXML, LilyPond, PDF)
|
||||||
|
- MIDI
|
||||||
|
|
||||||
|
### Flux de production
|
||||||
|
|
||||||
|
1. Un client exprime un besoin musical
|
||||||
|
2. Des prestataires répondent avec des devis
|
||||||
|
3. Un **consensus est établi en amont** entre le client et les
|
||||||
|
contributeurs sur la licence du livrable final
|
||||||
|
4. La collaboration produit les fichiers
|
||||||
|
5. Le titre est publié sous la licence choisie
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Licences
|
||||||
|
|
||||||
|
### Modèle `LicenceModele`
|
||||||
|
|
||||||
|
Géré par l'administration Yavsc. Chaque modèle porte :
|
||||||
|
|
||||||
|
- `EstLibre` (bool) — détermine le badge affiché sur le projet
|
||||||
|
- Les conditions : attribution, partage à l'identique, usage commercial,
|
||||||
|
modification
|
||||||
|
- Une URL vers le texte officiel de la licence
|
||||||
|
|
||||||
|
### Seed initial
|
||||||
|
|
||||||
|
Licences Creative Commons préchargées : CC0, CC BY, CC BY-SA, CC BY-ND,
|
||||||
|
CC BY-NC, CC BY-NC-SA, CC BY-NC-ND (toutes en version 4.0) + ODbL 1.0.
|
||||||
|
|
||||||
|
### Badge projet
|
||||||
|
|
||||||
|
Rendu CSS/HTML — vert si `EstLibre`, orange sinon.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Stack technique
|
||||||
|
|
||||||
|
- **Backend** : ASP.NET Core, C#
|
||||||
|
- **ORM** : Entity Framework Core (migrations générées)
|
||||||
|
- **Base de données** : PostgreSQL (provider Npgsql)
|
||||||
|
- **Frontend** : Razor views
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## À documenter ensuite
|
||||||
|
|
||||||
|
- Modèle `ProjetMusical`
|
||||||
|
- Gestion des fichiers (audio, partition, MIDI)
|
||||||
|
- Workflow de validation de licence par l'administration
|
||||||
|
|
||||||
15
src/Yavsc.Abstract/domains/musical/LicenceModele.cs
Normal file
15
src/Yavsc.Abstract/domains/musical/LicenceModele.cs
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
namespace Yavsc.Domains.Musical;
|
||||||
|
public class LicenceTemplate
|
||||||
|
{
|
||||||
|
public long Id { get; set; }
|
||||||
|
public string Nom { get; set; }
|
||||||
|
public string Texte { get; set; } // ou Uri vers le texte officiel
|
||||||
|
public bool EstLibre { get; set; }
|
||||||
|
public bool PermetUsageCommercial { get; set; }
|
||||||
|
public bool PermetModification { get; set; }
|
||||||
|
public bool ExigePartageAIdentique { get; set; } // ShareAlike
|
||||||
|
public bool ExigeAttribution { get; set; } // BY
|
||||||
|
public bool AdminValidated { get; set; }
|
||||||
|
public DateTimeOffset DateValidation { get; set; }
|
||||||
|
public string AdminValidateurId { get; set; } // FK vers ApplicationUser
|
||||||
|
}
|
||||||
43
src/Yavsc.Abstract/domains/musical/LicenceModelesSeed.cs
Normal file
43
src/Yavsc.Abstract/domains/musical/LicenceModelesSeed.cs
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
namespace Yavsc.Domains.Musical;
|
||||||
|
|
||||||
|
public static class LicenceModelesSeed
|
||||||
|
{
|
||||||
|
public static IEnumerable<LicenceTemplate> GetSeedData() => new[]
|
||||||
|
{
|
||||||
|
new LicenceTemplate {
|
||||||
|
Id = 1, Nom = "CC0 1.0", IsFreeAndOpen = true,
|
||||||
|
PermetUsageCommercial = true, PermetModification = true,
|
||||||
|
ExigeAttribution = false, ExigePartageAIdentique = false,
|
||||||
|
Texte = "https://creativecommons.org/publicdomain/zero/1.0/",
|
||||||
|
AdminValidated = true
|
||||||
|
},
|
||||||
|
new LicenceTemplate {
|
||||||
|
Id = 2, Nom = "CC BY 4.0", IsFreeAndOpen = true,
|
||||||
|
PermetUsageCommercial = true, PermetModification = true,
|
||||||
|
ExigeAttribution = true, ExigePartageAIdentique = false,
|
||||||
|
Texte = "https://creativecommons.org/licenses/by/4.0/",
|
||||||
|
AdminValidated = true
|
||||||
|
},
|
||||||
|
new LicenceTemplate {
|
||||||
|
Id = 3, Nom = "CC BY-SA 4.0", IsFreeAndOpen = true,
|
||||||
|
PermetUsageCommercial = true, PermetModification = true,
|
||||||
|
ExigeAttribution = true, ExigePartageAIdentique = true,
|
||||||
|
Texte = "https://creativecommons.org/licenses/by-sa/4.0/",
|
||||||
|
AdminValidated = true
|
||||||
|
},
|
||||||
|
new LicenceTemplate {
|
||||||
|
Id = 4, Nom = "CC BY-NC 4.0", IsFreeAndOpen = false,
|
||||||
|
PermetUsageCommercial = false, PermetModification = true,
|
||||||
|
ExigeAttribution = true, ExigePartageAIdentique = false,
|
||||||
|
Texte = "https://creativecommons.org/licenses/by-nc/4.0/",
|
||||||
|
AdminValidated = true
|
||||||
|
},
|
||||||
|
new LicenceTemplate {
|
||||||
|
Id = 5, Nom = "CC BY-NC-SA 4.0", IsFreeAndOpen = false,
|
||||||
|
PermetUsageCommercial = false, PermetModification = true,
|
||||||
|
ExigeAttribution = true, ExigePartageAIdentique = true,
|
||||||
|
Texte = "https://creativecommons.org/licenses/by-nc-sa/4.0/",
|
||||||
|
AdminValidated = true
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
10
src/Yavsc.Abstract/domains/musical/ProjetMusical.cs
Normal file
10
src/Yavsc.Abstract/domains/musical/ProjetMusical.cs
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
namespace Yavsc.Domains.Musical;
|
||||||
|
|
||||||
|
public class ProjetMusical
|
||||||
|
{
|
||||||
|
public long Id { get; set; }
|
||||||
|
public string Titre { get; set; }
|
||||||
|
public long LicenceModeleId { get; set; }
|
||||||
|
public LicenceTemplate Licence { get; set; }
|
||||||
|
// ... contributeurs, fichiers, devis liés
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
@model Yavsc.Domains.Musical.ProjetMusical
|
||||||
|
|
||||||
|
@if (Model.Licence.EstLibre)
|
||||||
|
{
|
||||||
|
<span class="badge badge-libre">
|
||||||
|
🎵 Libre · @Model.Licence.Nom
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<span class="badge badge-non-libre">
|
||||||
|
🔒 @Model.Licence.Nom
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
|
@ -1,256 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="ar" dir="rtl">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>مثال الألبوم · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/album-rtl/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<header>
|
|
||||||
<div class="collapse bg-dark" id="navbarHeader">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-8 col-md-7 py-4">
|
|
||||||
<h4 class="text-white">حول</h4>
|
|
||||||
<p class="text-muted">أضف بعض المعلومات حول الألبوم، المؤلف، أو أي سياق خلفية آخر. اجعلها بضع جمل حتى يتمكن الزوار من التقاط بعض التلميحات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-4 offset-md-1 py-4">
|
|
||||||
<h4 class="text-white">تواصل معي</h4>
|
|
||||||
<ul class="list-unstyled">
|
|
||||||
<li><a href="#" class="text-white">تابعني على تويتر</a></li>
|
|
||||||
<li><a href="#" class="text-white">شاركني الإعجاب في فيسبوك</a></li>
|
|
||||||
<li><a href="#" class="text-white">راسلني على البريد الإلكتروني</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="navbar navbar-dark bg-dark shadow-sm">
|
|
||||||
<div class="container">
|
|
||||||
<a href="#" class="navbar-brand d-flex align-items-center">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
|
|
||||||
<strong>الألبوم</strong>
|
|
||||||
</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="تبديل التنقل">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
|
|
||||||
<section class="py-5 text-center container">
|
|
||||||
<div class="row py-lg-5">
|
|
||||||
<div class="col-lg-6 col-md-8 mx-auto">
|
|
||||||
<h1 class="fw-light">مثال الألبوم</h1>
|
|
||||||
<p class="lead text-muted">وصف قصير حول الألبوم أدناه (محتوياته ، ومنشؤه ، وما إلى ذلك). اجعله قصير ولطيف، ولكن ليست قصير جدًا حتى لا يتخطى الناس هذا الألبوم تمامًا.</p>
|
|
||||||
<p>
|
|
||||||
<a href="#" class="btn btn-primary my-2">الدعوة الرئيسية للعمل</a>
|
|
||||||
<a href="#" class="btn btn-secondary my-2">عمل ثانوي</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div class="album py-5 bg-light">
|
|
||||||
<div class="container">
|
|
||||||
|
|
||||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
|
|
||||||
<div class="col">
|
|
||||||
<div class="card shadow-sm">
|
|
||||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: صورة مصغرة" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">صورة مصغرة</text></svg>
|
|
||||||
|
|
||||||
<div class="card-body">
|
|
||||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">9 دقائق</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card shadow-sm">
|
|
||||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: صورة مصغرة" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">صورة مصغرة</text></svg>
|
|
||||||
|
|
||||||
<div class="card-body">
|
|
||||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">9 دقائق</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card shadow-sm">
|
|
||||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: صورة مصغرة" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">صورة مصغرة</text></svg>
|
|
||||||
|
|
||||||
<div class="card-body">
|
|
||||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">9 دقائق</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col">
|
|
||||||
<div class="card shadow-sm">
|
|
||||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: صورة مصغرة" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">صورة مصغرة</text></svg>
|
|
||||||
|
|
||||||
<div class="card-body">
|
|
||||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">9 دقائق</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card shadow-sm">
|
|
||||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: صورة مصغرة" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">صورة مصغرة</text></svg>
|
|
||||||
|
|
||||||
<div class="card-body">
|
|
||||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">9 دقائق</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card shadow-sm">
|
|
||||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: صورة مصغرة" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">صورة مصغرة</text></svg>
|
|
||||||
|
|
||||||
<div class="card-body">
|
|
||||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">9 دقائق</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col">
|
|
||||||
<div class="card shadow-sm">
|
|
||||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: صورة مصغرة" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">صورة مصغرة</text></svg>
|
|
||||||
|
|
||||||
<div class="card-body">
|
|
||||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">9 دقائق</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card shadow-sm">
|
|
||||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: صورة مصغرة" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">صورة مصغرة</text></svg>
|
|
||||||
|
|
||||||
<div class="card-body">
|
|
||||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">9 دقائق</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card shadow-sm">
|
|
||||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: صورة مصغرة" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">صورة مصغرة</text></svg>
|
|
||||||
|
|
||||||
<div class="card-body">
|
|
||||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">9 دقائق</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="text-muted py-5">
|
|
||||||
<div class="container">
|
|
||||||
<p class="float-end mb-1">
|
|
||||||
<a href="#">عد إلى الأعلى</a>
|
|
||||||
</p>
|
|
||||||
<p class="mb-1">مثال الألبوم هو © Bootstrap ، ولكن يرجى تنزيله وتخصيصه لنفسك!</p>
|
|
||||||
<p class="mb-0">جديد على Bootstrap؟ <a href="/"> تفضل بزيارة الصفحة الرئيسية </a> أو اقرأ <a href="../getting-started/introduction/ "> دليل البدء </a>.</p>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,256 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>Album example · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/album/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<header>
|
|
||||||
<div class="collapse bg-dark" id="navbarHeader">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-8 col-md-7 py-4">
|
|
||||||
<h4 class="text-white">About</h4>
|
|
||||||
<p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-4 offset-md-1 py-4">
|
|
||||||
<h4 class="text-white">Contact</h4>
|
|
||||||
<ul class="list-unstyled">
|
|
||||||
<li><a href="#" class="text-white">Follow on Twitter</a></li>
|
|
||||||
<li><a href="#" class="text-white">Like on Facebook</a></li>
|
|
||||||
<li><a href="#" class="text-white">Email me</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="navbar navbar-dark bg-dark shadow-sm">
|
|
||||||
<div class="container">
|
|
||||||
<a href="#" class="navbar-brand d-flex align-items-center">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
|
|
||||||
<strong>Album</strong>
|
|
||||||
</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
|
|
||||||
<section class="py-5 text-center container">
|
|
||||||
<div class="row py-lg-5">
|
|
||||||
<div class="col-lg-6 col-md-8 mx-auto">
|
|
||||||
<h1 class="fw-light">Album example</h1>
|
|
||||||
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
|
|
||||||
<p>
|
|
||||||
<a href="#" class="btn btn-primary my-2">Main call to action</a>
|
|
||||||
<a href="#" class="btn btn-secondary my-2">Secondary action</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div class="album py-5 bg-light">
|
|
||||||
<div class="container">
|
|
||||||
|
|
||||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
|
|
||||||
<div class="col">
|
|
||||||
<div class="card shadow-sm">
|
|
||||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
|
|
||||||
|
|
||||||
<div class="card-body">
|
|
||||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">9 mins</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card shadow-sm">
|
|
||||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
|
|
||||||
|
|
||||||
<div class="card-body">
|
|
||||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">9 mins</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card shadow-sm">
|
|
||||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
|
|
||||||
|
|
||||||
<div class="card-body">
|
|
||||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">9 mins</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col">
|
|
||||||
<div class="card shadow-sm">
|
|
||||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
|
|
||||||
|
|
||||||
<div class="card-body">
|
|
||||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">9 mins</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card shadow-sm">
|
|
||||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
|
|
||||||
|
|
||||||
<div class="card-body">
|
|
||||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">9 mins</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card shadow-sm">
|
|
||||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
|
|
||||||
|
|
||||||
<div class="card-body">
|
|
||||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">9 mins</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col">
|
|
||||||
<div class="card shadow-sm">
|
|
||||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
|
|
||||||
|
|
||||||
<div class="card-body">
|
|
||||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">9 mins</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card shadow-sm">
|
|
||||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
|
|
||||||
|
|
||||||
<div class="card-body">
|
|
||||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">9 mins</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card shadow-sm">
|
|
||||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
|
|
||||||
|
|
||||||
<div class="card-body">
|
|
||||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">9 mins</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="text-muted py-5">
|
|
||||||
<div class="container">
|
|
||||||
<p class="float-end mb-1">
|
|
||||||
<a href="#">Back to top</a>
|
|
||||||
</p>
|
|
||||||
<p class="mb-1">Album example is © Bootstrap, but please download and customize it for yourself!</p>
|
|
||||||
<p class="mb-0">New to Bootstrap? <a href="/">Visit the homepage</a> or read our <a href="../getting-started/introduction/">getting started guide</a>.</p>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="408" fill="#fff"><path d="M106.342 0c-29.214 0-50.827 25.58-49.86 53.32.927 26.647-.278 61.165-8.966 89.31C38.802 170.862 24.07 188.707 0 191v26c24.069 2.293 38.802 20.138 47.516 48.37 8.688 28.145 9.893 62.663 8.965 89.311C55.515 382.42 77.128 408 106.342 408h299.353c29.214 0 50.827-25.58 49.861-53.319-.928-26.648.277-61.166 8.964-89.311 8.715-28.232 23.411-46.077 47.48-48.37v-26c-24.069-2.293-38.765-20.138-47.48-48.37-8.687-28.145-9.892-62.663-8.964-89.31C456.522 25.58 434.909 0 405.695 0H106.342zm236.559 251.102c0 38.197-28.501 61.355-75.798 61.355h-87.202a2 2 0 01-2-2v-213a2 2 0 012-2h86.74c39.439 0 65.322 21.354 65.322 54.138 0 23.008-17.409 43.61-39.594 47.219v1.203c30.196 3.309 50.532 24.212 50.532 53.085zm-84.58-128.125h-45.91v64.814h38.669c29.888 0 46.373-12.03 46.373-33.535 0-20.151-14.174-31.279-39.132-31.279zm-45.91 90.53v71.431h47.605c31.12 0 47.605-12.482 47.605-35.941 0-23.46-16.947-35.49-49.608-35.49h-45.602z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1,007 B |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="408"><defs><linearGradient id="bs-logo-a" x1="76.079" x2="523.48" y1="10.798" y2="365.945" gradientUnits="userSpaceOnUse"><stop stop-color="#9013fe"/><stop offset="1" stop-color="#6610f2"/></linearGradient><linearGradient id="bs-logo-b" x1="193.508" x2="293.514" y1="109.74" y2="278.872" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#f1e5fc"/></linearGradient><filter xmlns="http://www.w3.org/2000/svg" id="bs-logo-c" width="197" height="249" x="161.901" y="83.457" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="8"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter></defs><path fill="url(#bs-logo-a)" d="M56.481 53.32C55.515 25.58 77.128 0 106.342 0h299.353c29.214 0 50.827 25.58 49.861 53.32-.928 26.647.277 61.165 8.964 89.31 8.715 28.232 23.411 46.077 47.48 48.37v26c-24.069 2.293-38.765 20.138-47.48 48.37-8.687 28.145-9.892 62.663-8.964 89.311.966 27.739-20.647 53.319-49.861 53.319H106.342c-29.214 0-50.827-25.58-49.86-53.319.927-26.648-.278-61.166-8.966-89.311C38.802 237.138 24.07 219.293 0 217v-26c24.069-2.293 38.802-20.138 47.516-48.37 8.688-28.145 9.893-62.663 8.965-89.31z"/><path fill="url(#bs-logo-b)" filter="url(#bs-logo-c)" stroke="#fff" d="M267.103 312.457c47.297 0 75.798-23.158 75.798-61.355 0-28.873-20.336-49.776-50.532-53.085v-1.203c22.185-3.609 39.594-24.211 39.594-47.219 0-32.783-25.882-54.138-65.322-54.138h-88.74v217h89.202zm-54.692-189.48h45.911c24.958 0 39.131 11.128 39.131 31.279 0 21.505-16.484 33.535-46.372 33.535h-38.67v-64.814zm0 161.961v-71.431h45.602c32.661 0 49.608 12.03 49.608 35.49 0 23.459-16.484 35.941-47.605 35.941h-47.605z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 2 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,244 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="ar" dir="rtl">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>قالب المدونة · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/blog-rtl/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
|
||||||
<link href="https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap" rel="stylesheet">
|
|
||||||
<!-- Custom styles for this template -->
|
|
||||||
<link href="../blog/blog.rtl.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<header class="blog-header py-3">
|
|
||||||
<div class="row flex-nowrap justify-content-between align-items-center">
|
|
||||||
<div class="col-4 pt-1">
|
|
||||||
<a class="link-secondary" href="#">الإشتراك في النشرة البريدية</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-4 text-center">
|
|
||||||
<a class="blog-header-logo text-dark" href="#">كبير</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-4 d-flex justify-content-end align-items-center">
|
|
||||||
<a class="link-secondary" href="#" aria-label="بحث">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img" viewBox="0 0 24 24"><title>بحث</title><circle cx="10.5" cy="10.5" r="7.5"/><path d="M21 21l-5.2-5.2"/></svg>
|
|
||||||
</a>
|
|
||||||
<a class="btn btn-sm btn-outline-secondary" href="#">إنشاء حساب</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="nav-scroller py-1 mb-2">
|
|
||||||
<nav class="nav d-flex justify-content-between">
|
|
||||||
<a class="p-2 link-secondary" href="#">العالم</a>
|
|
||||||
<a class="p-2 link-secondary" href="#">الولايات المتحدة</a>
|
|
||||||
<a class="p-2 link-secondary" href="#">التقنية</a>
|
|
||||||
<a class="p-2 link-secondary" href="#">التصميم</a>
|
|
||||||
<a class="p-2 link-secondary" href="#">الحضارة</a>
|
|
||||||
<a class="p-2 link-secondary" href="#">المال والأعمال</a>
|
|
||||||
<a class="p-2 link-secondary" href="#">السياسة</a>
|
|
||||||
<a class="p-2 link-secondary" href="#">الرأي العام</a>
|
|
||||||
<a class="p-2 link-secondary" href="#">العلوم</a>
|
|
||||||
<a class="p-2 link-secondary" href="#">الصحة</a>
|
|
||||||
<a class="p-2 link-secondary" href="#">الموضة</a>
|
|
||||||
<a class="p-2 link-secondary" href="#">السفر</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
|
|
||||||
<div class="col-md-6 px-0">
|
|
||||||
<h1 class="display-4 fst-italic">عنوان تدوينة مميزة أطول</h1>
|
|
||||||
<p class="lead my-3">عدة أسطر نصية متعددة تعبر عن التدوية، وذلك لإعلام القراء الجدد بسرعة وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه التدوينة.</p>
|
|
||||||
<p class="lead mb-0"><a href="#" class="text-white fw-bold">أكمل القراءة...</a></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-2">
|
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
|
|
||||||
<div class="col p-4 d-flex flex-column position-static">
|
|
||||||
<strong class="d-inline-block mb-2 text-primary">العالم</strong>
|
|
||||||
<h3 class="mb-0">مشاركة مميزة</h3>
|
|
||||||
<div class="mb-1 text-muted">نوفمبر 12</div>
|
|
||||||
<p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
|
|
||||||
<a href="#" class="stretched-link">أكمل القراءة</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-auto d-none d-lg-block">
|
|
||||||
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: صورة مصغرة" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">صورة مصغرة</text></svg>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
|
|
||||||
<div class="col p-4 d-flex flex-column position-static">
|
|
||||||
<strong class="d-inline-block mb-2 text-success">التصميم</strong>
|
|
||||||
<h3 class="mb-0">عنوان الوظيفة</h3>
|
|
||||||
<div class="mb-1 text-muted">نوفمبر 11</div>
|
|
||||||
<p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
|
|
||||||
<a href="#" class="stretched-link">أكمل القراءة</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-auto d-none d-lg-block">
|
|
||||||
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: صورة مصغرة" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">صورة مصغرة</text></svg>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-8">
|
|
||||||
<h3 class="pb-4 mb-4 fst-italic border-bottom">
|
|
||||||
من Firehose
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<article class="blog-post">
|
|
||||||
<h2 class="blog-post-title">مثال على تدوينة</h2>
|
|
||||||
<p class="blog-post-meta">1 يناير 2021 بواسطة <a href="#"> Mark </a></p>
|
|
||||||
|
|
||||||
<p>تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. النصوص الأساسية، الصور، والأكواد مدعومة بشكل كامل.</p>
|
|
||||||
<hr>
|
|
||||||
<p>يشكِّل تأمين الغذاء في المستقبل قضية تؤرِّق حكومات العالَم والعلماء على حدٍّ سواء. فخلال القرن العشرين ازداد عدد سكان الأرض أربعة أضعاف، وتشير التقديرات إلى أن العدد سوف يصل إلى عشرة مليارات إنسان بحلول عام 2050م. وسوف تمثل هذه الزيادة الهائلة تحدياً كبيراً وضغطاً متصاعداً على قدرة الإنتاج الزراعي. الأمر الذي كان ولا بد من أن يدفع إلى تطوير تقنيات مبتكرة في تصنيع الغذاء غير الزراعة، منها تقنية مستقبلية تقوم على تصنيع الغذاء من الهواء.</p>
|
|
||||||
<blockquote>
|
|
||||||
<p>تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه، كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية</p>
|
|
||||||
</blockquote>
|
|
||||||
<p>تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه. كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية، وللمقارنة فإن هذه النسبة من الانبعاثات هي أكبر مما ينتجه قطاع النقل بكل ما فيه من سيارات وشاحنات وطائرات وقطارات.</p>
|
|
||||||
<h2>عنوان</h2>
|
|
||||||
<p>تحصل النباتات على غذائها بواسطة عملية تسمى البناء الضوئي، حيث تقوم النباتات بتحويل ضوء الشمس والماء وثاني أكسيد الكربون الموجود في الغلاف الجوي إلى غذاء وتطلق الأكسجين كمنتج ثانوي لهذا التفاعل الكيميائي. وتحدث هذه العملية في "البلاستيدات الخضراء". فالنباتات تستفيد من طاقة ضوء الشمس في تقسيم الماء إلى هيدروجين وأكسجين، وتحدث تفاعلات كيميائية أخرى ينتج عنها سكر الجلكوز الذي تستخدمه كمصدر للغذاء وينطلق الأكسجين من النباتات إلى الغلاف الجوي. وهذا يعني أن النباتات تحوِّل ثاني أكسيد الكربون إلى غذاء من خلال تفاعلات كيميائية معقَّدة. ويُعد البناء الضوئي من أهم التفاعلات الكيميائية على كوكب الأرض، فقد ساعد في الماضي على تطوُّر كوكبنا وظهور الحياة عليه. فالنباتات تستخدم ثاني أكسيد الكربون لصنع غذائها، وتطلق الأكسجين لتساعد الكائنات الأخرى على التنفس!</p>
|
|
||||||
<h3>عنوان فرعي</h3>
|
|
||||||
<p>ألهمت هذه العملية علماء وكالة الفضاء الأمريكية (ناسا) خلال الستينيات من القرن الماضي، لبحث فكرة إطعام روَّاد الفضاء في مهمات الفضاء الطويلة مثل السفر إلى المريخ. وكانت واحدة من الأفكار الواعدة تصنيع الغذاء عن طريق ثاني أكسيد الكربون الذي ينتجه روَّاد الفضاء، لكن ليس بواسطة النباتات بل عن طريق ميكروبات صغيرة وحيدة الخلية قادرة على حصد ثاني أكسيد الكربون لإنتاج كميات وفيرة من البروتين المغذي على شكل مسحوق عديم النكهة، كما يمكن استخدام المادة في صنع الأطعمة المألوفة لدينا.</p>
|
|
||||||
<pre><code>Example code block</code></pre>
|
|
||||||
<p>وخلافاً لما هو الحال في عالم النبات، فإن هذه الميكروبات لا تستخدم الضوء كما يحدث في عملية البناء الضوئي التي تستخدمها النباتات للحصول على الغذاء، أي لأنها قادرة على النمو في الظلام. تسمى هذه البكتريا "هيدروجينوتروف" (Hydrogenotrophs)، وهي تستخدم الهيدروجين كوقود لإنتاج الغذاء من ثاني أكسيد الكربون. فعندما يُنتج روَّاد الفضاء ثاني أكسيد الكربون، تلتقطه الميكروبات، ويتحوَّل مع مدخلات أخرى إلى غذاء غني بالكربون. وبهذه الطريقة سوف نحصل على دورة كربون مغلقة الحلقة.</p>
|
|
||||||
<h3>عنوان فرعي</h3>
|
|
||||||
<p>بعد مرور أكثر من نصف قرن على أبحاث ناسا، تعمل حالياً عدة شركات في قطاع البيولوجيا التركيبية من ضمنها إير بروتين (Air Protein) وسولار فودز (Solar Foods) على تطوير جيل جديد من المنتجات الغذائية المستدامة، من دون وجود بصمة كربونية. ولن تقتصر هذه المنتجات الغذائية على روَّاد الفضاء فحسب، بل سوف تمتد لتشمل جميع سكان الأرض، وسوف تُنتَج في فترة زمنية قصيرة، بدلاً من الشهور، ومن دون الاعتماد على الأراضي الزراعية. وهذا يعني الحصول على منتجات غذائية بشكل سريع جداً. كما سيصبح من الممكن تصنيع الغذاء بطريقة عمودية من خلال هذه الميكروبات، بدلاً من الطريقة الأفقية التقليدية الشبيهة بتقنية الزراعة العمودية الحديثة. وهذا يعني توفير منتجات غذائية أكبر من المساحة نفسها.</p>
|
|
||||||
<p>يتكوَّن الغذاء البشري من ثلاثة أنواع رئيسة، هي:</p>
|
|
||||||
<ul>
|
|
||||||
<li>البروتينات</li>
|
|
||||||
<li>الكربوهيدرات</li>
|
|
||||||
<li>الدهون</li>
|
|
||||||
</ul>
|
|
||||||
<p>وتتكوَّن البروتينات من الأحماض الأمينية، وهي مجموعة من المركبات العضوية يبلغ عددها في جسم الإنسان عشرين حمضاً أمينياً، من بينها تسعة أساسية يحصل عليها الجسم من الغذاء. وتتكوَّن الأحماض الأمينية بشكل أساس من:</p>
|
|
||||||
<ol>
|
|
||||||
<li>الكربون</li>
|
|
||||||
<li>الهيدروجين</li>
|
|
||||||
<li>الأكسجين</li>
|
|
||||||
<li>النيتروجين</li>
|
|
||||||
</ol>
|
|
||||||
<p>ومن الملاحظ أن النيتروجين يشكِّل نسبة %78 من الهواء، كما أن الهيدروجين نحصل عليه من خلال التحليل الكهربائي للماء، ومن الممكن نظرياً سحب الكربون من الهواء لتشكيل هذه الأحماض، ذلك أن الكربون هو العمود الفقري للأحماض الأمينية، كما أن الحياة على كوكب الأرض قائمة على الكربون لقدرته على تكوين سلاسل كربونية طويلة، وهذا ما تفعله الميكروبات بتصنيع أحماض أمينية من ثاني أكسيد الكربون من خلال مجموعة من التفاعلات الكيميائية المعقَّدة. وإضافة إلى صنع وجبات غنية بالبروتين، فهذه الميكروبات تنتج منتجات أخرى مثل الزيوت التي لها عديد من الاستخدامات.</p>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="blog-post">
|
|
||||||
<h2 class="blog-post-title">تدوينة أخرى</h2>
|
|
||||||
<p class="blog-post-meta">23 ديسمبر 2020 بواسطة <a href="#">Jacob</a></p>
|
|
||||||
|
|
||||||
<p>في الوقت الحالي، تدرس عدَّة شركات هذه الميكروبات بشكل أعمق، وتستزرعها من أجل الحصول على الغذاء. ففي عام 2019م، أعلن باحثون في شركة (Air Protein) الأمريكية نجاحهم في تحويل ثاني أكسيد الكربون الموجود في الهواء إلى لحوم صناعية مصنوعة من البروتين، التي لا تتطلَّب أي أرض زراعية، بل هي معتمدة بشكل أساسي على الهواء.</p>
|
|
||||||
<blockquote>
|
|
||||||
<p>تم تصنيع اللحوم بأنواع عديدة</p>
|
|
||||||
</blockquote>
|
|
||||||
<p>إذ استخدم هؤلاء الباحثون الهواء والطاقة المتجدِّدة كمدخلات في عملية مشابهة للتخمير، لإنتاج بروتين يحتوي على الأحماض الأمينية التسعة الأساسية وغني بالفيتامينات والمعادن، كما أنه خالٍ من الهرمونات والمضادات الحيوية والمبيدات الحشرية ومبيدات الأعشاب.</p>
|
|
||||||
<p> وتم تصنيع اللحوم بأنواع عديدة بما فيها الدواجن والأبقار والمأكولات البحرية، من دون حصول انبعاثات كربونية، على عكس تربية الأبقار التي تسهم في انبعاث غاز الميثان أحد غازات الاحتباس الحراري.</p>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="blog-post">
|
|
||||||
<h2 class="blog-post-title">ميزة جديدة</h2>
|
|
||||||
<p class="blog-post-meta">14 ديسمبر 2020 بواسطة <a href="#">Jacob</a></p>
|
|
||||||
|
|
||||||
<p>كما أن الشركة الفنلندية (Solar Foods) طوَّرت تقنية لإنتاج البروتين من الهواء، حيث تبدأ العملية بتقسيم الماء إلى مكوناته الهيدروجين والأكسجين عن طريق الكهرباء. فالهيدروجين يوفِّر الطاقة للبكتريا لتحويل ثاني أكسيد الكربون والنيتروجين الموجودين في الهواء إلى مادة عضوية غنية بالبروتين بشكل أكفأ من نمو النباتات باستخدام البناء الضوئي. وهذا البروتين يشبه دقيق القمح وقد أطلق عليه اسم "سولين" (Solein).</p>
|
|
||||||
<p>وتقوم الشركة حالياً بجمع البيانات حول المنتج الغذائي لتقديمه إلى الاتحاد الأوروبي بهدف الحصول على ترخيص غذائي، كما أنها تخطط لبدء الإنتاج التجاري في العام المقبل 2021م. وقد أوضحت الشركة أنها مهتمة بإنتاج أطعمة صديقة للبيئة من خلال استخدام المواد الأساسية: الكهرباء وثاني أكسيد الكربون، وهذه الأطعمة سوف تجنبنا الأثر السلبي البيئي للزراعة التقليدية الذي يشمل كل شيء من استخدام الأرض والمياه إلى الانبعاثات الناتجة من تسميد المحاصيل أو تربية الحيوانات.</p>
|
|
||||||
<p>وعلى هذا، فإن البروتينات المشتقة من الميكروبات سوف:</p>
|
|
||||||
<ul>
|
|
||||||
<li>توفر حلاً ممكناً في ظل زيادة الطلب العالمي المستقبلي على الغذاء</li>
|
|
||||||
<li>تتوسع مصانع الغذاء في المستقبل لتكون أكفأ وأكثر استدامة</li>
|
|
||||||
<li>تصبح قادرة على توفير الغذاء لروَّاد الفضاء في سفرهم إلى المريخ وجميع سكان كوكب الأرض في عام 2050م</li>
|
|
||||||
</ul>
|
|
||||||
<p>فتخيّل أن الميكروبات ستكون مصانع المستقبل، وأن غذاء المستقبل سيكون مصنوعاً من الهواء! وأن عام 2050م سيكون مختلفاً تماماً عن عالمنا اليوم. فهو عالم من دون زراعة ولا تربية حيوانات من أجل الغذاء! قد يبدو ذلك خيالياً لكنه ليس مستحيلاً!</p>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<nav class="blog-pagination" aria-label="Pagination">
|
|
||||||
<a class="btn btn-outline-primary" href="#">تدوينات أقدم</a>
|
|
||||||
<a class="btn btn-outline-secondary disabled" href="#" tabindex="-1" aria-disabled="true">تدوينات أحدث</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-4">
|
|
||||||
<div class="position-sticky" style="top: 2rem;">
|
|
||||||
<div class="p-4 mb-3 bg-light rounded">
|
|
||||||
<h4 class="fst-italic">حول</h4>
|
|
||||||
<p class="mb-0">أقبلت، فأقبلت معك الحياة بجميع صنوفها وألوانها: فالنبات ينبت، والأشجار تورق وتزهر، والهرة تموء، والقمري يسجع، والغنم يثغو، والبقر يخور، وكل أليف يدعو أليفه. كل شيء يشعر بالحياة وينسي هموم الحياة، ولا يذكر إلا سعادة الحياة، فإن كان الزمان جسدا فأنت روحه، وإن كان عمرا فأنت شبابه.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-4">
|
|
||||||
<h4 class="fst-italic">الأرشيف</h4>
|
|
||||||
<ol class="list-unstyled mb-0">
|
|
||||||
<li><a href="#">مارس 2021</a></li>
|
|
||||||
<li><a href="#">شباط 2021</a></li>
|
|
||||||
<li><a href="#">يناير 2021</a></li>
|
|
||||||
<li><a href="#">ديسمبر 2020</a></li>
|
|
||||||
<li><a href="#">نوفمبر 2020</a></li>
|
|
||||||
<li><a href="#">أكتوبر 2020</a></li>
|
|
||||||
<li><a href="#">سبتمبر 2020</a></li>
|
|
||||||
<li><a href="#">اغسطس 2020</a></li>
|
|
||||||
<li><a href="#">يوليو 2020</a></li>
|
|
||||||
<li><a href="#">يونيو 2020</a></li>
|
|
||||||
<li><a href="#">مايو 2020</a></li>
|
|
||||||
<li><a href="#">ابريل 2020</a></li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-4">
|
|
||||||
<h4 class="fst-italic">في مكان آخر</h4>
|
|
||||||
<ol class="list-unstyled">
|
|
||||||
<li><a href="#">GitHub</a></li>
|
|
||||||
<li><a href="#">Twitter</a></li>
|
|
||||||
<li><a href="#">Facebook</a></li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="blog-footer">
|
|
||||||
<p>تم تصميم نموذج المدونة لـ <a href="https://getbootstrap.com/">Bootstrap</a> بواسطة <a href="https://twitter.com/mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a>.</p>
|
|
||||||
<p>
|
|
||||||
<a href="#">عد إلى الأعلى</a>
|
|
||||||
</p>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,103 +0,0 @@
|
||||||
/* stylelint-disable selector-list-comma-newline-after */
|
|
||||||
|
|
||||||
.blog-header {
|
|
||||||
line-height: 1;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-header-logo {
|
|
||||||
font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
|
|
||||||
font-size: 2.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-header-logo:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
|
|
||||||
}
|
|
||||||
|
|
||||||
.display-4 {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
}
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.display-4 {
|
|
||||||
font-size: 3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-scroller {
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
height: 2.75rem;
|
|
||||||
overflow-y: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-scroller .nav {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
margin-top: -1px;
|
|
||||||
overflow-x: auto;
|
|
||||||
text-align: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-scroller .nav-link {
|
|
||||||
padding-top: .75rem;
|
|
||||||
padding-bottom: .75rem;
|
|
||||||
font-size: .875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-img-right {
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 0 3px 3px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-auto {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-250 { height: 250px; }
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.h-md-250 { height: 250px; }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Pagination */
|
|
||||||
.blog-pagination {
|
|
||||||
margin-bottom: 4rem;
|
|
||||||
}
|
|
||||||
.blog-pagination > .btn {
|
|
||||||
border-radius: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Blog posts
|
|
||||||
*/
|
|
||||||
.blog-post {
|
|
||||||
margin-bottom: 4rem;
|
|
||||||
}
|
|
||||||
.blog-post-title {
|
|
||||||
margin-bottom: .25rem;
|
|
||||||
font-size: 2.5rem;
|
|
||||||
}
|
|
||||||
.blog-post-meta {
|
|
||||||
margin-bottom: 1.25rem;
|
|
||||||
color: #727272;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Footer
|
|
||||||
*/
|
|
||||||
.blog-footer {
|
|
||||||
padding: 2.5rem 0;
|
|
||||||
color: #727272;
|
|
||||||
text-align: center;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
border-top: .05rem solid #e5e5e5;
|
|
||||||
}
|
|
||||||
.blog-footer p:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
@ -1,103 +0,0 @@
|
||||||
/* stylelint-disable selector-list-comma-newline-after */
|
|
||||||
|
|
||||||
.blog-header {
|
|
||||||
line-height: 1;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-header-logo {
|
|
||||||
font-family: Amiri, Georgia, "Times New Roman", serif;
|
|
||||||
font-size: 2.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-header-logo:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
font-family: Amiri, Georgia, "Times New Roman", serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.display-4 {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
}
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.display-4 {
|
|
||||||
font-size: 3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-scroller {
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
height: 2.75rem;
|
|
||||||
overflow-y: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-scroller .nav {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
margin-top: -1px;
|
|
||||||
overflow-x: auto;
|
|
||||||
text-align: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-scroller .nav-link {
|
|
||||||
padding-top: .75rem;
|
|
||||||
padding-bottom: .75rem;
|
|
||||||
font-size: .875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-img-right {
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 3px 0 0 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-auto {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-250 { height: 250px; }
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.h-md-250 { height: 250px; }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Pagination */
|
|
||||||
.blog-pagination {
|
|
||||||
margin-bottom: 4rem;
|
|
||||||
}
|
|
||||||
.blog-pagination > .btn {
|
|
||||||
border-radius: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Blog posts
|
|
||||||
*/
|
|
||||||
.blog-post {
|
|
||||||
margin-bottom: 4rem;
|
|
||||||
}
|
|
||||||
.blog-post-title {
|
|
||||||
margin-bottom: .25rem;
|
|
||||||
font-size: 2.5rem;
|
|
||||||
}
|
|
||||||
.blog-post-meta {
|
|
||||||
margin-bottom: 1.25rem;
|
|
||||||
color: #727272;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Footer
|
|
||||||
*/
|
|
||||||
.blog-footer {
|
|
||||||
padding: 2.5rem 0;
|
|
||||||
color: #727272;
|
|
||||||
text-align: center;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
border-top: .05rem solid #e5e5e5;
|
|
||||||
}
|
|
||||||
.blog-footer p:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
@ -1,297 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>Blog Template · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/blog/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
|
||||||
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900&display=swap" rel="stylesheet">
|
|
||||||
<!-- Custom styles for this template -->
|
|
||||||
<link href="blog.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<header class="blog-header py-3">
|
|
||||||
<div class="row flex-nowrap justify-content-between align-items-center">
|
|
||||||
<div class="col-4 pt-1">
|
|
||||||
<a class="link-secondary" href="#">Subscribe</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-4 text-center">
|
|
||||||
<a class="blog-header-logo text-dark" href="#">Large</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-4 d-flex justify-content-end align-items-center">
|
|
||||||
<a class="link-secondary" href="#" aria-label="Search">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img" viewBox="0 0 24 24"><title>Search</title><circle cx="10.5" cy="10.5" r="7.5"/><path d="M21 21l-5.2-5.2"/></svg>
|
|
||||||
</a>
|
|
||||||
<a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="nav-scroller py-1 mb-2">
|
|
||||||
<nav class="nav d-flex justify-content-between">
|
|
||||||
<a class="p-2 link-secondary" href="#">World</a>
|
|
||||||
<a class="p-2 link-secondary" href="#">U.S.</a>
|
|
||||||
<a class="p-2 link-secondary" href="#">Technology</a>
|
|
||||||
<a class="p-2 link-secondary" href="#">Design</a>
|
|
||||||
<a class="p-2 link-secondary" href="#">Culture</a>
|
|
||||||
<a class="p-2 link-secondary" href="#">Business</a>
|
|
||||||
<a class="p-2 link-secondary" href="#">Politics</a>
|
|
||||||
<a class="p-2 link-secondary" href="#">Opinion</a>
|
|
||||||
<a class="p-2 link-secondary" href="#">Science</a>
|
|
||||||
<a class="p-2 link-secondary" href="#">Health</a>
|
|
||||||
<a class="p-2 link-secondary" href="#">Style</a>
|
|
||||||
<a class="p-2 link-secondary" href="#">Travel</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
|
|
||||||
<div class="col-md-6 px-0">
|
|
||||||
<h1 class="display-4 fst-italic">Title of a longer featured blog post</h1>
|
|
||||||
<p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
|
|
||||||
<p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-2">
|
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
|
|
||||||
<div class="col p-4 d-flex flex-column position-static">
|
|
||||||
<strong class="d-inline-block mb-2 text-primary">World</strong>
|
|
||||||
<h3 class="mb-0">Featured post</h3>
|
|
||||||
<div class="mb-1 text-muted">Nov 12</div>
|
|
||||||
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
|
|
||||||
<a href="#" class="stretched-link">Continue reading</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-auto d-none d-lg-block">
|
|
||||||
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
|
|
||||||
<div class="col p-4 d-flex flex-column position-static">
|
|
||||||
<strong class="d-inline-block mb-2 text-success">Design</strong>
|
|
||||||
<h3 class="mb-0">Post title</h3>
|
|
||||||
<div class="mb-1 text-muted">Nov 11</div>
|
|
||||||
<p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
|
|
||||||
<a href="#" class="stretched-link">Continue reading</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-auto d-none d-lg-block">
|
|
||||||
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row g-5">
|
|
||||||
<div class="col-md-8">
|
|
||||||
<h3 class="pb-4 mb-4 fst-italic border-bottom">
|
|
||||||
From the Firehose
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<article class="blog-post">
|
|
||||||
<h2 class="blog-post-title">Sample blog post</h2>
|
|
||||||
<p class="blog-post-meta">January 1, 2021 by <a href="#">Mark</a></p>
|
|
||||||
|
|
||||||
<p>This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.</p>
|
|
||||||
<hr>
|
|
||||||
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
|
|
||||||
<h2>Blockquotes</h2>
|
|
||||||
<p>This is an example blockquote in action:</p>
|
|
||||||
<blockquote class="blockquote">
|
|
||||||
<p>Quoted text goes here.</p>
|
|
||||||
</blockquote>
|
|
||||||
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
|
|
||||||
<h3>Example lists</h3>
|
|
||||||
<p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout. This is an example unordered list:</p>
|
|
||||||
<ul>
|
|
||||||
<li>First list item</li>
|
|
||||||
<li>Second list item with a longer description</li>
|
|
||||||
<li>Third list item to close it out</li>
|
|
||||||
</ul>
|
|
||||||
<p>And this is an ordered list:</p>
|
|
||||||
<ol>
|
|
||||||
<li>First list item</li>
|
|
||||||
<li>Second list item with a longer description</li>
|
|
||||||
<li>Third list item to close it out</li>
|
|
||||||
</ol>
|
|
||||||
<p>And this is a definiton list:</p>
|
|
||||||
<dl>
|
|
||||||
<dt>HyperText Markup Language (HTML)</dt>
|
|
||||||
<dd>The language used to describe and define the content of a Web page</dd>
|
|
||||||
<dt>Cascading Style Sheets (CSS)</dt>
|
|
||||||
<dd>Used to describe the appearance of Web content</dd>
|
|
||||||
<dt>JavaScript (JS)</dt>
|
|
||||||
<dd>The programming language used to build advanced Web sites and applications</dd>
|
|
||||||
</dl>
|
|
||||||
<h2>Inline HTML elements</h2>
|
|
||||||
<p>HTML defines a long list of available inline tags, a complete list of which can be found on the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">Mozilla Developer Network</a>.</p>
|
|
||||||
<ul>
|
|
||||||
<li><strong>To bold text</strong>, use <code class="language-plaintext highlighter-rouge"><strong></code>.</li>
|
|
||||||
<li><em>To italicize text</em>, use <code class="language-plaintext highlighter-rouge"><em></code>.</li>
|
|
||||||
<li>Abbreviations, like <abbr title="HyperText Markup Langage">HTML</abbr> should use <code class="language-plaintext highlighter-rouge"><abbr></code>, with an optional <code class="language-plaintext highlighter-rouge">title</code> attribute for the full phrase.</li>
|
|
||||||
<li>Citations, like <cite>— Mark Otto</cite>, should use <code class="language-plaintext highlighter-rouge"><cite></code>.</li>
|
|
||||||
<li><del>Deleted</del> text should use <code class="language-plaintext highlighter-rouge"><del></code> and <ins>inserted</ins> text should use <code class="language-plaintext highlighter-rouge"><ins></code>.</li>
|
|
||||||
<li>Superscript <sup>text</sup> uses <code class="language-plaintext highlighter-rouge"><sup></code> and subscript <sub>text</sub> uses <code class="language-plaintext highlighter-rouge"><sub></code>.</li>
|
|
||||||
</ul>
|
|
||||||
<p>Most of these elements are styled by browsers with few modifications on our part.</p>
|
|
||||||
<h2>Heading</h2>
|
|
||||||
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
|
|
||||||
<h3>Sub-heading</h3>
|
|
||||||
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
|
|
||||||
<pre><code>Example code block</code></pre>
|
|
||||||
<p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.</p>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="blog-post">
|
|
||||||
<h2 class="blog-post-title">Another blog post</h2>
|
|
||||||
<p class="blog-post-meta">December 23, 2020 by <a href="#">Jacob</a></p>
|
|
||||||
|
|
||||||
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
|
|
||||||
<blockquote>
|
|
||||||
<p>Longer quote goes here, maybe with some <strong>emphasized text</strong> in the middle of it.</p>
|
|
||||||
</blockquote>
|
|
||||||
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
|
|
||||||
<h3>Example table</h3>
|
|
||||||
<p>And don't forget about tables in these posts:</p>
|
|
||||||
<table class="table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Name</th>
|
|
||||||
<th>Upvotes</th>
|
|
||||||
<th>Downvotes</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>Alice</td>
|
|
||||||
<td>10</td>
|
|
||||||
<td>11</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Bob</td>
|
|
||||||
<td>4</td>
|
|
||||||
<td>3</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Charlie</td>
|
|
||||||
<td>7</td>
|
|
||||||
<td>9</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
<tfoot>
|
|
||||||
<tr>
|
|
||||||
<td>Totals</td>
|
|
||||||
<td>21</td>
|
|
||||||
<td>23</td>
|
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.</p>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="blog-post">
|
|
||||||
<h2 class="blog-post-title">New feature</h2>
|
|
||||||
<p class="blog-post-meta">December 14, 2020 by <a href="#">Chris</a></p>
|
|
||||||
|
|
||||||
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
|
|
||||||
<ul>
|
|
||||||
<li>First list item</li>
|
|
||||||
<li>Second list item with a longer description</li>
|
|
||||||
<li>Third list item to close it out</li>
|
|
||||||
</ul>
|
|
||||||
<p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.</p>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<nav class="blog-pagination" aria-label="Pagination">
|
|
||||||
<a class="btn btn-outline-primary" href="#">Older</a>
|
|
||||||
<a class="btn btn-outline-secondary disabled" href="#" tabindex="-1" aria-disabled="true">Newer</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-4">
|
|
||||||
<div class="position-sticky" style="top: 2rem;">
|
|
||||||
<div class="p-4 mb-3 bg-light rounded">
|
|
||||||
<h4 class="fst-italic">About</h4>
|
|
||||||
<p class="mb-0">Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-4">
|
|
||||||
<h4 class="fst-italic">Archives</h4>
|
|
||||||
<ol class="list-unstyled mb-0">
|
|
||||||
<li><a href="#">March 2021</a></li>
|
|
||||||
<li><a href="#">February 2021</a></li>
|
|
||||||
<li><a href="#">January 2021</a></li>
|
|
||||||
<li><a href="#">December 2020</a></li>
|
|
||||||
<li><a href="#">November 2020</a></li>
|
|
||||||
<li><a href="#">October 2020</a></li>
|
|
||||||
<li><a href="#">September 2020</a></li>
|
|
||||||
<li><a href="#">August 2020</a></li>
|
|
||||||
<li><a href="#">July 2020</a></li>
|
|
||||||
<li><a href="#">June 2020</a></li>
|
|
||||||
<li><a href="#">May 2020</a></li>
|
|
||||||
<li><a href="#">April 2020</a></li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-4">
|
|
||||||
<h4 class="fst-italic">Elsewhere</h4>
|
|
||||||
<ol class="list-unstyled">
|
|
||||||
<li><a href="#">GitHub</a></li>
|
|
||||||
<li><a href="#">Twitter</a></li>
|
|
||||||
<li><a href="#">Facebook</a></li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="blog-footer">
|
|
||||||
<p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
|
|
||||||
<p>
|
|
||||||
<a href="#">Back to top</a>
|
|
||||||
</p>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,214 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="ar" dir="rtl">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>قالب شرائح العرض · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/carousel-rtl/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
|
||||||
<link href="../carousel/carousel.rtl.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<header>
|
|
||||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<a class="navbar-brand" href="#">شرائح العرض</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="تبديل التنقل">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
|
||||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link active" aria-current="page" href="#">الصفحة الرئيسية</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">حلقة الوصل</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">رابط غير مفعل</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<form class="d-flex">
|
|
||||||
<input class="form-control me-2" type="search" placeholder="بحث" aria-label="بحث">
|
|
||||||
<button class="btn btn-outline-success" type="submit">بحث</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
|
|
||||||
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
|
|
||||||
<div class="carousel-indicators">
|
|
||||||
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
|
|
||||||
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
|
|
||||||
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
|
|
||||||
</div>
|
|
||||||
<div class="carousel-inner">
|
|
||||||
<div class="carousel-item active">
|
|
||||||
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="carousel-caption text-start">
|
|
||||||
<h1>عنوان المثال.</h1>
|
|
||||||
<p>تشير الدراسات الإحصائية حسب الجمعية الأمريكية للغات بأن الإقبال على العربية زاد %126 في الولايات المتحدة الأمريكية وحدها بين عامي 2002 و2009م.</p>
|
|
||||||
<p><a class="btn btn-lg btn-primary" href="#">سجل اليوم</a></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="carousel-item">
|
|
||||||
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="carousel-caption">
|
|
||||||
<h1>عنوان مثال آخر.</h1>
|
|
||||||
<p>حسب المجلس الثقافي البريطاني فإن تعليم الإنجليزية داخل بريطانيا يسهم في تعزيز اقتصادها بما يتجاوز ملياري جنيه سنوياً، كما أنه وفر أكثر من 26 ألف وظيفة.</p>
|
|
||||||
<p><a class="btn btn-lg btn-primary" href="#">أعرف أكثر</a></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="carousel-item">
|
|
||||||
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="carousel-caption text-end">
|
|
||||||
<h1>واحد أكثر لقياس جيد.</h1>
|
|
||||||
<p>الإحصاءات لحجم الاستثمار اللغوي خارج بريطانيا تتفاوت من سنة لأخرى إلا أن المدير التنفيذي للمجلس الثقافي البريطاني إدي بايرز يرى أن استثمار تعليم الإنجليزية في الخارج لا يحسب على المستوى المالي فحسب بل على المستوى السياسي أيضاً.</p>
|
|
||||||
<p><a class="btn btn-lg btn-primary" href="#">تصفح المعرض</a></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
|
|
||||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
||||||
<span class="visually-hidden">السابق</span>
|
|
||||||
</button>
|
|
||||||
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
|
|
||||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
||||||
<span class="visually-hidden">التالي</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Marketing messaging and featurettes
|
|
||||||
================================================== -->
|
|
||||||
<!-- Wrap the rest of the page in another container to center all the content. -->
|
|
||||||
|
|
||||||
<div class="container marketing">
|
|
||||||
|
|
||||||
<!-- Three columns of text below the carousel -->
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-lg-4">
|
|
||||||
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
|
|
||||||
|
|
||||||
<h2>عنوان</h2>
|
|
||||||
<p>تذكر دائماً أن الحاسوب لا يمتلك ذكاءً، ولكنه يكتسب الذكاء الاصطناعي من خلال ثلاثة عناصر وظيفية رئيسة، هي: القدرة على التحليل، والقدرة على التأليف، والاستدلال المنطقي.</p>
|
|
||||||
<p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
|
|
||||||
</div><!-- /.col-lg-4 -->
|
|
||||||
<div class="col-lg-4">
|
|
||||||
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
|
|
||||||
|
|
||||||
<h2>عنوان آخر</h2>
|
|
||||||
<p>إذا أردنا استخدام الحاسوب الذكي في معالجة اللغة العربية فإننا نجد أنفسنا أمام تحدٍّ كبير، خاصة وأن لغتنا تمتاز بتماسك منظوماتها وتداخلها، ومع ذلك فإن الذكاء الاصطناعي يمكّننا من الحصول على أربعة أنواع من المعالجة، هي: المعالجة الصوتية، والمعالجة الصرفية، والمعالجة النحوية، والمعالجة الدلالية.</p>
|
|
||||||
<p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
|
|
||||||
</div><!-- /.col-lg-4 -->
|
|
||||||
<div class="col-lg-4">
|
|
||||||
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
|
|
||||||
|
|
||||||
<h2>عنوان ثالث لتأكيد المعلومة</h2>
|
|
||||||
<p>بفضل بحوث الذكاء الاصطناعي وتقنياته استطعنا الانتقال من مرحلة التعامل مع الفيزيائي إلى مرحلة التعامل مع المنطقي، وقد انعكس هذا الانتقال بصورة إيجابية على الكيفية التي تتعامل بها الشعوب مع لغاتها الحيَّة، وهذا يعني أنه يجب أن ينعكس بصورة إيجابية على كيفية تعاملنا مع لغتنا العربية.</p>
|
|
||||||
<p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
|
|
||||||
</div><!-- /.col-lg-4 -->
|
|
||||||
</div><!-- /.row -->
|
|
||||||
|
|
||||||
|
|
||||||
<!-- START THE FEATURETTES -->
|
|
||||||
|
|
||||||
<hr class="featurette-divider">
|
|
||||||
|
|
||||||
<div class="row featurette">
|
|
||||||
<div class="col-md-7">
|
|
||||||
<h2 class="featurette-heading">العنوان الأول المميز. <span class="text-muted"> سيذهل عقلك. </span></h2>
|
|
||||||
<p class="lead">وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه أحد أكثر أنظمة الإشارات المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من 40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-5">
|
|
||||||
<svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="featurette-divider">
|
|
||||||
|
|
||||||
<div class="row featurette">
|
|
||||||
<div class="col-md-7 order-md-2">
|
|
||||||
<h2 class="featurette-heading">أوه نعم، هذا جيد. <span class="text-muted"> شاهد بنفسك. </span></h2>
|
|
||||||
<p class="lead">عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء نظرة خاطفة على أذهاننا أثناء "قراءة" وجوهنا بناءً على التغييرات في مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف والشفتين.</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-5 order-md-1">
|
|
||||||
<svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="featurette-divider">
|
|
||||||
|
|
||||||
<div class="row featurette">
|
|
||||||
<div class="col-md-7">
|
|
||||||
<h2 class="featurette-heading">وأخيرًا، هذا. <span class="text-muted"> كش ملك. </span></h2>
|
|
||||||
<p class="lead">إن جميع العضلات في أجسامنا مدعمة بالأعصاب المتصلة من كافة أنحاء الجسم بالنخاع الشوكي والدماغ. وهذا الاتصال العصبي هو ثنائي الاتجاه، أي إن العصب يتسبَّب في تقلصات العضلات بناءً على إشارات الدماغ، ويقوم في الوقت نفسه بإرسال معلومات عن حالة العضلات إلى الدماغ</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-5">
|
|
||||||
<svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="featurette-divider">
|
|
||||||
|
|
||||||
<!-- /END THE FEATURETTES -->
|
|
||||||
|
|
||||||
</div><!-- /.container -->
|
|
||||||
|
|
||||||
|
|
||||||
<!-- FOOTER -->
|
|
||||||
<footer class="container">
|
|
||||||
<p class="float-end"><a href="#">عد إلى الأعلى</a></p>
|
|
||||||
<p>© 2017–2021 Company, Inc. · <a href="#">سياسة الخصوصية</a> · <a href="#">شروط الاستخدام</a></p>
|
|
||||||
</footer>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,93 +0,0 @@
|
||||||
/* GLOBAL STYLES
|
|
||||||
-------------------------------------------------- */
|
|
||||||
/* Padding below the footer and lighter body text */
|
|
||||||
|
|
||||||
body {
|
|
||||||
padding-top: 3rem;
|
|
||||||
padding-bottom: 3rem;
|
|
||||||
color: #5a5a5a;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* CUSTOMIZE THE CAROUSEL
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
/* Carousel base class */
|
|
||||||
.carousel {
|
|
||||||
margin-bottom: 4rem;
|
|
||||||
}
|
|
||||||
/* Since positioning the image, we need to help out the caption */
|
|
||||||
.carousel-caption {
|
|
||||||
bottom: 3rem;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Declare heights because of positioning of img element */
|
|
||||||
.carousel-item {
|
|
||||||
height: 32rem;
|
|
||||||
}
|
|
||||||
.carousel-item > img {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
min-width: 100%;
|
|
||||||
height: 32rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* MARKETING CONTENT
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
/* Center align the text within the three columns below the carousel */
|
|
||||||
.marketing .col-lg-4 {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.marketing h2 {
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
/* rtl:begin:ignore */
|
|
||||||
.marketing .col-lg-4 p {
|
|
||||||
margin-right: .75rem;
|
|
||||||
margin-left: .75rem;
|
|
||||||
}
|
|
||||||
/* rtl:end:ignore */
|
|
||||||
|
|
||||||
|
|
||||||
/* Featurettes
|
|
||||||
------------------------- */
|
|
||||||
|
|
||||||
.featurette-divider {
|
|
||||||
margin: 5rem 0; /* Space out the Bootstrap <hr> more */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Thin out the marketing headings */
|
|
||||||
.featurette-heading {
|
|
||||||
font-weight: 300;
|
|
||||||
line-height: 1;
|
|
||||||
/* rtl:remove */
|
|
||||||
letter-spacing: -.05rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* RESPONSIVE CSS
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
@media (min-width: 40em) {
|
|
||||||
/* Bump up size of carousel content */
|
|
||||||
.carousel-caption p {
|
|
||||||
margin-bottom: 1.25rem;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.featurette-heading {
|
|
||||||
font-size: 50px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 62em) {
|
|
||||||
.featurette-heading {
|
|
||||||
margin-top: 7rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,89 +0,0 @@
|
||||||
/* GLOBAL STYLES
|
|
||||||
-------------------------------------------------- */
|
|
||||||
/* Padding below the footer and lighter body text */
|
|
||||||
|
|
||||||
body {
|
|
||||||
padding-top: 3rem;
|
|
||||||
padding-bottom: 3rem;
|
|
||||||
color: #5a5a5a;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* CUSTOMIZE THE CAROUSEL
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
/* Carousel base class */
|
|
||||||
.carousel {
|
|
||||||
margin-bottom: 4rem;
|
|
||||||
}
|
|
||||||
/* Since positioning the image, we need to help out the caption */
|
|
||||||
.carousel-caption {
|
|
||||||
bottom: 3rem;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Declare heights because of positioning of img element */
|
|
||||||
.carousel-item {
|
|
||||||
height: 32rem;
|
|
||||||
}
|
|
||||||
.carousel-item > img {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
min-width: 100%;
|
|
||||||
height: 32rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* MARKETING CONTENT
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
/* Center align the text within the three columns below the carousel */
|
|
||||||
.marketing .col-lg-4 {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.marketing h2 {
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
.marketing .col-lg-4 p {
|
|
||||||
margin-right: .75rem;
|
|
||||||
margin-left: .75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Featurettes
|
|
||||||
------------------------- */
|
|
||||||
|
|
||||||
.featurette-divider {
|
|
||||||
margin: 5rem 0; /* Space out the Bootstrap <hr> more */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Thin out the marketing headings */
|
|
||||||
.featurette-heading {
|
|
||||||
font-weight: 300;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* RESPONSIVE CSS
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
@media (min-width: 40em) {
|
|
||||||
/* Bump up size of carousel content */
|
|
||||||
.carousel-caption p {
|
|
||||||
margin-bottom: 1.25rem;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.featurette-heading {
|
|
||||||
font-size: 50px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 62em) {
|
|
||||||
.featurette-heading {
|
|
||||||
margin-top: 7rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,214 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>Carousel Template · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/carousel/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
|
||||||
<link href="carousel.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<header>
|
|
||||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<a class="navbar-brand" href="#">Carousel</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
|
||||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Link</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<form class="d-flex">
|
|
||||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
|
||||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
|
|
||||||
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
|
|
||||||
<div class="carousel-indicators">
|
|
||||||
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
|
|
||||||
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
|
|
||||||
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
|
|
||||||
</div>
|
|
||||||
<div class="carousel-inner">
|
|
||||||
<div class="carousel-item active">
|
|
||||||
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="carousel-caption text-start">
|
|
||||||
<h1>Example headline.</h1>
|
|
||||||
<p>Some representative placeholder content for the first slide of the carousel.</p>
|
|
||||||
<p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="carousel-item">
|
|
||||||
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="carousel-caption">
|
|
||||||
<h1>Another example headline.</h1>
|
|
||||||
<p>Some representative placeholder content for the second slide of the carousel.</p>
|
|
||||||
<p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="carousel-item">
|
|
||||||
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="carousel-caption text-end">
|
|
||||||
<h1>One more for good measure.</h1>
|
|
||||||
<p>Some representative placeholder content for the third slide of this carousel.</p>
|
|
||||||
<p><a class="btn btn-lg btn-primary" href="#">Browse gallery</a></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
|
|
||||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
||||||
<span class="visually-hidden">Previous</span>
|
|
||||||
</button>
|
|
||||||
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
|
|
||||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
||||||
<span class="visually-hidden">Next</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Marketing messaging and featurettes
|
|
||||||
================================================== -->
|
|
||||||
<!-- Wrap the rest of the page in another container to center all the content. -->
|
|
||||||
|
|
||||||
<div class="container marketing">
|
|
||||||
|
|
||||||
<!-- Three columns of text below the carousel -->
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-lg-4">
|
|
||||||
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
|
|
||||||
|
|
||||||
<h2>Heading</h2>
|
|
||||||
<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
|
|
||||||
<p><a class="btn btn-secondary" href="#">View details »</a></p>
|
|
||||||
</div><!-- /.col-lg-4 -->
|
|
||||||
<div class="col-lg-4">
|
|
||||||
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
|
|
||||||
|
|
||||||
<h2>Heading</h2>
|
|
||||||
<p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
|
|
||||||
<p><a class="btn btn-secondary" href="#">View details »</a></p>
|
|
||||||
</div><!-- /.col-lg-4 -->
|
|
||||||
<div class="col-lg-4">
|
|
||||||
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
|
|
||||||
|
|
||||||
<h2>Heading</h2>
|
|
||||||
<p>And lastly this, the third column of representative placeholder content.</p>
|
|
||||||
<p><a class="btn btn-secondary" href="#">View details »</a></p>
|
|
||||||
</div><!-- /.col-lg-4 -->
|
|
||||||
</div><!-- /.row -->
|
|
||||||
|
|
||||||
|
|
||||||
<!-- START THE FEATURETTES -->
|
|
||||||
|
|
||||||
<hr class="featurette-divider">
|
|
||||||
|
|
||||||
<div class="row featurette">
|
|
||||||
<div class="col-md-7">
|
|
||||||
<h2 class="featurette-heading">First featurette heading. <span class="text-muted">It’ll blow your mind.</span></h2>
|
|
||||||
<p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-5">
|
|
||||||
<svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="featurette-divider">
|
|
||||||
|
|
||||||
<div class="row featurette">
|
|
||||||
<div class="col-md-7 order-md-2">
|
|
||||||
<h2 class="featurette-heading">Oh yeah, it’s that good. <span class="text-muted">See for yourself.</span></h2>
|
|
||||||
<p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-5 order-md-1">
|
|
||||||
<svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="featurette-divider">
|
|
||||||
|
|
||||||
<div class="row featurette">
|
|
||||||
<div class="col-md-7">
|
|
||||||
<h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
|
|
||||||
<p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-5">
|
|
||||||
<svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="featurette-divider">
|
|
||||||
|
|
||||||
<!-- /END THE FEATURETTES -->
|
|
||||||
|
|
||||||
</div><!-- /.container -->
|
|
||||||
|
|
||||||
|
|
||||||
<!-- FOOTER -->
|
|
||||||
<footer class="container">
|
|
||||||
<p class="float-end"><a href="#">Back to top</a></p>
|
|
||||||
<p>© 2017–2021 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
|
|
||||||
</footer>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,169 +0,0 @@
|
||||||
body {
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Bootstrap "Journal code" icon
|
|
||||||
* @link https://icons.getbootstrap.com/icons/journal-code/
|
|
||||||
*/
|
|
||||||
.bd-heading a::before {
|
|
||||||
display: inline-block;
|
|
||||||
width: 1em;
|
|
||||||
height: 1em;
|
|
||||||
margin-right: .25rem;
|
|
||||||
content: "";
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%25230d6efd' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E");
|
|
||||||
background-size: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* stylelint-disable-next-line selector-max-universal */
|
|
||||||
.bd-heading + div > * + * {
|
|
||||||
margin-top: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Table of contents */
|
|
||||||
.bd-aside a {
|
|
||||||
padding: .1875rem .5rem;
|
|
||||||
margin-top: .125rem;
|
|
||||||
margin-left: .3125rem;
|
|
||||||
color: rgba(0, 0, 0, .65);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-aside a:hover,
|
|
||||||
.bd-aside a:focus {
|
|
||||||
color: rgba(0, 0, 0, .85);
|
|
||||||
background-color: rgba(121, 82, 179, .1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-aside .active {
|
|
||||||
font-weight: 600;
|
|
||||||
color: rgba(0, 0, 0, .85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-aside .btn {
|
|
||||||
padding: .25rem .5rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: rgba(0, 0, 0, .65);
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-aside .btn:hover,
|
|
||||||
.bd-aside .btn:focus {
|
|
||||||
color: rgba(0, 0, 0, .85);
|
|
||||||
background-color: rgba(121, 82, 179, .1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-aside .btn:focus {
|
|
||||||
box-shadow: 0 0 0 1px rgba(121, 82, 179, .7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-aside .btn::before {
|
|
||||||
width: 1.25em;
|
|
||||||
line-height: 0;
|
|
||||||
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
|
|
||||||
transition: transform .35s ease;
|
|
||||||
|
|
||||||
/* rtl:raw:
|
|
||||||
transform: rotate(180deg) translateX(-2px);
|
|
||||||
*/
|
|
||||||
transform-origin: .5em 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-aside .btn[aria-expanded="true"]::before {
|
|
||||||
transform: rotate(90deg)/* rtl:ignore */;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Examples */
|
|
||||||
.scrollspy-example {
|
|
||||||
position: relative;
|
|
||||||
height: 200px;
|
|
||||||
margin-top: .5rem;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
[id="modal"] .bd-example .btn,
|
|
||||||
[id="buttons"] .bd-example .btn,
|
|
||||||
[id="tooltips"] .bd-example .btn,
|
|
||||||
[id="popovers"] .bd-example .btn,
|
|
||||||
[id="dropdowns"] .bd-example .btn-group,
|
|
||||||
[id="dropdowns"] .bd-example .dropdown,
|
|
||||||
[id="dropdowns"] .bd-example .dropup,
|
|
||||||
[id="dropdowns"] .bd-example .dropend,
|
|
||||||
[id="dropdowns"] .bd-example .dropstart {
|
|
||||||
margin: 0 1rem 1rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Layout */
|
|
||||||
@media (min-width: 1200px) {
|
|
||||||
body {
|
|
||||||
display: grid;
|
|
||||||
gap: 1rem;
|
|
||||||
grid-template-columns: 1fr 4fr 1fr;
|
|
||||||
grid-template-rows: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-header {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
/* rtl:begin:ignore */
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
/* rtl:end:ignore */
|
|
||||||
z-index: 1030;
|
|
||||||
grid-column: 1 / span 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-aside,
|
|
||||||
.bd-cheatsheet {
|
|
||||||
padding-top: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Too bad only Firefox supports subgrids ATM
|
|
||||||
*/
|
|
||||||
.bd-cheatsheet,
|
|
||||||
.bd-cheatsheet section,
|
|
||||||
.bd-cheatsheet article {
|
|
||||||
display: inherit; /* 1 */
|
|
||||||
gap: inherit; /* 1 */
|
|
||||||
grid-template-columns: 1fr 4fr;
|
|
||||||
grid-column: 1 / span 2;
|
|
||||||
grid-template-rows: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-aside {
|
|
||||||
grid-area: 1 / 3;
|
|
||||||
scroll-margin-top: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-cheatsheet section,
|
|
||||||
.bd-cheatsheet section > h2 {
|
|
||||||
top: 2rem;
|
|
||||||
scroll-margin-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-cheatsheet section > h2::before {
|
|
||||||
position: absolute;
|
|
||||||
/* rtl:begin:ignore */
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: -2rem;
|
|
||||||
left: 0;
|
|
||||||
/* rtl:end:ignore */
|
|
||||||
z-index: -1;
|
|
||||||
content: "";
|
|
||||||
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) calc(100% - 3rem), rgba(255, 255, 255, .01));
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-cheatsheet article,
|
|
||||||
.bd-cheatsheet .bd-heading {
|
|
||||||
top: 8rem;
|
|
||||||
scroll-margin-top: 8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-cheatsheet .bd-heading {
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,73 +0,0 @@
|
||||||
/* global bootstrap: false */
|
|
||||||
|
|
||||||
(function () {
|
|
||||||
'use strict'
|
|
||||||
|
|
||||||
// Tooltip and popover demos
|
|
||||||
document.querySelectorAll('.tooltip-demo')
|
|
||||||
.forEach(function (tooltip) {
|
|
||||||
new bootstrap.Tooltip(tooltip, {
|
|
||||||
selector: '[data-bs-toggle="tooltip"]'
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
document.querySelectorAll('[data-bs-toggle="popover"]')
|
|
||||||
.forEach(function (popover) {
|
|
||||||
new bootstrap.Popover(popover)
|
|
||||||
})
|
|
||||||
|
|
||||||
document.querySelectorAll('.toast')
|
|
||||||
.forEach(function (toastNode) {
|
|
||||||
var toast = new bootstrap.Toast(toastNode, {
|
|
||||||
autohide: false
|
|
||||||
})
|
|
||||||
|
|
||||||
toast.show()
|
|
||||||
})
|
|
||||||
|
|
||||||
// Disable empty links and submit buttons
|
|
||||||
document.querySelectorAll('[href="#"], [type="submit"]')
|
|
||||||
.forEach(function (link) {
|
|
||||||
link.addEventListener('click', function (event) {
|
|
||||||
event.preventDefault()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
function setActiveItem() {
|
|
||||||
var hash = window.location.hash
|
|
||||||
|
|
||||||
if (hash === '') {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
var link = document.querySelector('.bd-aside a[href="' + hash + '"]')
|
|
||||||
|
|
||||||
if (!link) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
var active = document.querySelector('.bd-aside .active')
|
|
||||||
var parent = link.parentNode.parentNode.previousElementSibling
|
|
||||||
|
|
||||||
link.classList.add('active')
|
|
||||||
|
|
||||||
if (parent.classList.contains('collapsed')) {
|
|
||||||
parent.click()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!active) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
var expanded = active.parentNode.parentNode.previousElementSibling
|
|
||||||
|
|
||||||
active.classList.remove('active')
|
|
||||||
|
|
||||||
if (expanded && parent !== expanded) {
|
|
||||||
expanded.click()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setActiveItem()
|
|
||||||
window.addEventListener('hashchange', setActiveItem)
|
|
||||||
})()
|
|
||||||
|
|
@ -1,162 +0,0 @@
|
||||||
body {
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Bootstrap "Journal code" icon
|
|
||||||
* @link https://icons.getbootstrap.com/icons/journal-code/
|
|
||||||
*/
|
|
||||||
.bd-heading a::before {
|
|
||||||
display: inline-block;
|
|
||||||
width: 1em;
|
|
||||||
height: 1em;
|
|
||||||
margin-left: .25rem;
|
|
||||||
content: "";
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%25230d6efd' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E");
|
|
||||||
background-size: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* stylelint-disable-next-line selector-max-universal */
|
|
||||||
.bd-heading + div > * + * {
|
|
||||||
margin-top: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Table of contents */
|
|
||||||
.bd-aside a {
|
|
||||||
padding: .1875rem .5rem;
|
|
||||||
margin-top: .125rem;
|
|
||||||
margin-right: .3125rem;
|
|
||||||
color: rgba(0, 0, 0, .65);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-aside a:hover,
|
|
||||||
.bd-aside a:focus {
|
|
||||||
color: rgba(0, 0, 0, .85);
|
|
||||||
background-color: rgba(121, 82, 179, .1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-aside .active {
|
|
||||||
font-weight: 600;
|
|
||||||
color: rgba(0, 0, 0, .85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-aside .btn {
|
|
||||||
padding: .25rem .5rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: rgba(0, 0, 0, .65);
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-aside .btn:hover,
|
|
||||||
.bd-aside .btn:focus {
|
|
||||||
color: rgba(0, 0, 0, .85);
|
|
||||||
background-color: rgba(121, 82, 179, .1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-aside .btn:focus {
|
|
||||||
box-shadow: 0 0 0 1px rgba(121, 82, 179, .7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-aside .btn::before {
|
|
||||||
width: 1.25em;
|
|
||||||
line-height: 0;
|
|
||||||
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
|
|
||||||
transition: transform .35s ease;
|
|
||||||
transform: rotate(180deg) translateX(-2px);
|
|
||||||
transform-origin: .5em 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-aside .btn[aria-expanded="true"]::before {
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Examples */
|
|
||||||
.scrollspy-example {
|
|
||||||
position: relative;
|
|
||||||
height: 200px;
|
|
||||||
margin-top: .5rem;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
[id="modal"] .bd-example .btn,
|
|
||||||
[id="buttons"] .bd-example .btn,
|
|
||||||
[id="tooltips"] .bd-example .btn,
|
|
||||||
[id="popovers"] .bd-example .btn,
|
|
||||||
[id="dropdowns"] .bd-example .btn-group,
|
|
||||||
[id="dropdowns"] .bd-example .dropdown,
|
|
||||||
[id="dropdowns"] .bd-example .dropup,
|
|
||||||
[id="dropdowns"] .bd-example .dropend,
|
|
||||||
[id="dropdowns"] .bd-example .dropstart {
|
|
||||||
margin: 0 0 1rem 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Layout */
|
|
||||||
@media (min-width: 1200px) {
|
|
||||||
body {
|
|
||||||
display: grid;
|
|
||||||
gap: 1rem;
|
|
||||||
grid-template-columns: 1fr 4fr 1fr;
|
|
||||||
grid-template-rows: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-header {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 1030;
|
|
||||||
grid-column: 1 / span 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-aside,
|
|
||||||
.bd-cheatsheet {
|
|
||||||
padding-top: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Too bad only Firefox supports subgrids ATM
|
|
||||||
*/
|
|
||||||
.bd-cheatsheet,
|
|
||||||
.bd-cheatsheet section,
|
|
||||||
.bd-cheatsheet article {
|
|
||||||
display: inherit; /* 1 */
|
|
||||||
gap: inherit; /* 1 */
|
|
||||||
grid-template-columns: 1fr 4fr;
|
|
||||||
grid-column: 1 / span 2;
|
|
||||||
grid-template-rows: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-aside {
|
|
||||||
grid-area: 1 / 3;
|
|
||||||
scroll-margin-top: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-cheatsheet section,
|
|
||||||
.bd-cheatsheet section > h2 {
|
|
||||||
top: 2rem;
|
|
||||||
scroll-margin-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-cheatsheet section > h2::before {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: -2rem;
|
|
||||||
left: 0;
|
|
||||||
z-index: -1;
|
|
||||||
content: "";
|
|
||||||
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) calc(100% - 3rem), rgba(255, 255, 255, .01));
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-cheatsheet article,
|
|
||||||
.bd-cheatsheet .bd-heading {
|
|
||||||
top: 8rem;
|
|
||||||
scroll-margin-top: 8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-cheatsheet .bd-heading {
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,267 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="ar" dir="rtl">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>مثال إتمام الشراء · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/checkout-rtl/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
|
||||||
<link href="../checkout/form-validation.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body class="bg-light">
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<main>
|
|
||||||
<div class="py-5 text-center">
|
|
||||||
<img class="d-block mx-auto mb-4" src="../assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
|
|
||||||
<h2>نموذج إتمام الشراء</h2>
|
|
||||||
<p class="lead">فيما يلي مثال على نموذج تم إنشاؤه بالكامل باستخدام عناصر تحكم النموذج في Bootstrap. لكل مجموعة نماذج مطلوبة حالة تحقق يمكن تشغيلها بمحاولة إرسال النموذج دون استكماله.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row g-3">
|
|
||||||
<div class="col-md-5 col-lg-4 order-md-last">
|
|
||||||
<h4 class="d-flex justify-content-between align-items-center mb-3">
|
|
||||||
<span class="text-muted">عربة التسوق</span>
|
|
||||||
<span class="badge bg-secondary rounded-pill">3</span>
|
|
||||||
</h4>
|
|
||||||
<ul class="list-group mb-3">
|
|
||||||
<li class="list-group-item d-flex justify-content-between lh-sm">
|
|
||||||
<div>
|
|
||||||
<h6 class="my-0">اسم المنتج</h6>
|
|
||||||
<small class="text-muted">وصف مختصر</small>
|
|
||||||
</div>
|
|
||||||
<span class="text-muted">$12</span>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item d-flex justify-content-between lh-sm">
|
|
||||||
<div>
|
|
||||||
<h6 class="my-0">المنتج الثاني</h6>
|
|
||||||
<small class="text-muted">وصف مختصر</small>
|
|
||||||
</div>
|
|
||||||
<span class="text-muted">$8</span>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item d-flex justify-content-between lh-sm">
|
|
||||||
<div>
|
|
||||||
<h6 class="my-0">البند الثالث</h6>
|
|
||||||
<small class="text-muted">وصف مختصر</small>
|
|
||||||
</div>
|
|
||||||
<span class="text-muted">$5</span>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item d-flex justify-content-between bg-light">
|
|
||||||
<div class="text-success">
|
|
||||||
<h6 class="my-0">رمز ترويجي</h6>
|
|
||||||
<small>EXAMPLECODE</small>
|
|
||||||
</div>
|
|
||||||
<span class="text-success">-$5</span>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item d-flex justify-content-between">
|
|
||||||
<span>مجموع (USD)</span>
|
|
||||||
<strong>$20</strong>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<form class="card p-2">
|
|
||||||
<div class="input-group">
|
|
||||||
<input type="text" class="form-control" placeholder="رمز ترويجي">
|
|
||||||
<button type="submit" class="btn btn-secondary">تحقق</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-7 col-lg-8">
|
|
||||||
<h4 class="mb-3">عنوان الفوترة</h4>
|
|
||||||
<form class="needs-validation" novalidate>
|
|
||||||
<div class="row g-3">
|
|
||||||
<div class="col-sm-6">
|
|
||||||
<label for="firstName" class="form-label">الاسم الأول</label>
|
|
||||||
<input type="text" class="form-control" id="firstName" placeholder="" value="" required>
|
|
||||||
<div class="invalid-feedback">
|
|
||||||
يرجى إدخال اسم أول صحيح.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-sm-6">
|
|
||||||
<label for="lastName" class="form-label">اسم العائلة</label>
|
|
||||||
<input type="text" class="form-control" id="lastName" placeholder="" value="" required>
|
|
||||||
<div class="invalid-feedback">
|
|
||||||
يرجى إدخال اسم عائلة صحيح.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<label for="username" class="form-label">اسم المستخدم</label>
|
|
||||||
<div class="input-group has-validation">
|
|
||||||
<span class="input-group-text">@</span>
|
|
||||||
<input type="text" class="form-control" id="username" placeholder="اسم المستخدم" required>
|
|
||||||
<div class="invalid-feedback">
|
|
||||||
اسم المستخدم الخاص بك مطلوب.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<label for="email" class="form-label">البريد الإلكتروني <span class="text-muted">(اختياري)</span></label>
|
|
||||||
<input type="email" class="form-control" id="email" placeholder="you@example.com">
|
|
||||||
<div class="invalid-feedback">
|
|
||||||
يرجى إدخال عنوان بريد إلكتروني صحيح لتصلكم تحديثات الشحن.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<label for="address" class="form-label">العنوان</label>
|
|
||||||
<input type="text" class="form-control" id="address" placeholder="1234 الشارع الأول" required>
|
|
||||||
<div class="invalid-feedback">
|
|
||||||
يرجى إدخال عنوان الشحن الخاص بك.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<label for="address2" class="form-label">عنوان 2 <span class="text-muted">(اختياري)</span></label>
|
|
||||||
<input type="text" class="form-control" id="address2" placeholder="شقة 24">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-5">
|
|
||||||
<label for="country" class="form-label">البلد</label>
|
|
||||||
<select class="form-select" id="country" required>
|
|
||||||
<option value="">اختر...</option>
|
|
||||||
<option>الولايات المتحدة الأمريكية</option>
|
|
||||||
</select>
|
|
||||||
<div class="invalid-feedback">
|
|
||||||
يرجى اختيار بلد صحيح.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-4">
|
|
||||||
<label for="state" class="form-label">المنطقة</label>
|
|
||||||
<select class="form-select" id="state" required>
|
|
||||||
<option value="">اختر...</option>
|
|
||||||
<option>كاليفورنيا</option>
|
|
||||||
</select>
|
|
||||||
<div class="invalid-feedback">
|
|
||||||
يرجى اختيار اسم منطقة صحيح.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-3">
|
|
||||||
<label for="zip" class="form-label">الرمز البريدي</label>
|
|
||||||
<input type="text" class="form-control" id="zip" placeholder="" required>
|
|
||||||
<div class="invalid-feedback">
|
|
||||||
الرمز البريدي مطلوب.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="my-4">
|
|
||||||
|
|
||||||
<div class="form-check">
|
|
||||||
<input type="checkbox" class="form-check-input" id="same-address">
|
|
||||||
<label class="form-check-label" for="same-address">عنوان الشحن هو نفس عنوان الفوترة الخاص بي</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-check">
|
|
||||||
<input type="checkbox" class="form-check-input" id="save-info">
|
|
||||||
<label class="form-check-label" for="save-info">احفظ هذه المعلومات في المرة القادمة</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="my-4">
|
|
||||||
|
|
||||||
<h4 class="mb-3">طريقة الدفع</h4>
|
|
||||||
|
|
||||||
<div class="my-3">
|
|
||||||
<div class="form-check">
|
|
||||||
<input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
|
|
||||||
<label class="form-check-label" for="credit">بطاقة ائتمان</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-check">
|
|
||||||
<input id="cash" name="paymentMethod" type="radio" class="form-check-input" required>
|
|
||||||
<label class="form-check-label" for="cash">نقد</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-check">
|
|
||||||
<input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>
|
|
||||||
<label class="form-check-label" for="paypal">PayPal</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row gy-3">
|
|
||||||
<div class="col-md-6">
|
|
||||||
<label for="cc-name" class="form-label">الاسم على البطاقة</label>
|
|
||||||
<input type="text" class="form-control" id="cc-name" placeholder="" required>
|
|
||||||
<small class="text-muted">الاسم الكامل كما هو معروض على البطاقة</small>
|
|
||||||
<div class="invalid-feedback">
|
|
||||||
الاسم على البطاقة مطلوب
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-6">
|
|
||||||
<label for="cc-number" class="form-label">رقم البطاقة</label>
|
|
||||||
<input type="text" class="form-control" id="cc-number" placeholder="" required>
|
|
||||||
<div class="invalid-feedback">
|
|
||||||
رقم بطاقة الائتمان مطلوب
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-3">
|
|
||||||
<label for="cc-expiration" class="form-label">تاريخ انتهاء الصلاحية</label>
|
|
||||||
<input type="text" class="form-control" id="cc-expiration" placeholder="" required>
|
|
||||||
<div class="invalid-feedback">
|
|
||||||
تاريخ انتهاء الصلاحية مطلوب
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-3">
|
|
||||||
<label for="cc-cvv" class="form-label">الرمز الثلاثي (CVV)</label>
|
|
||||||
<input type="text" class="form-control" id="cc-cvv" placeholder="" required>
|
|
||||||
<div class="invalid-feedback">
|
|
||||||
رمز الحماية مطلوب
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="my-4">
|
|
||||||
|
|
||||||
<button class="w-100 btn btn-primary btn-lg" type="submit">الاستمرار بالدفع</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<footer class="my-5 pt-5 text-muted text-center text-small">
|
|
||||||
<p class="mb-1">© 2021-2017 اسم الشركة</p>
|
|
||||||
<ul class="list-inline">
|
|
||||||
<li class="list-inline-item"><a href="#">سياسة الخصوصية</a></li>
|
|
||||||
<li class="list-inline-item"><a href="#">اتفاقية الاستخدام</a></li>
|
|
||||||
<li class="list-inline-item"><a href="#">الدعم الفني</a></li>
|
|
||||||
</ul>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
<script src="../checkout/form-validation.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
.container {
|
|
||||||
max-width: 960px;
|
|
||||||
}
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
// Example starter JavaScript for disabling form submissions if there are invalid fields
|
|
||||||
(function () {
|
|
||||||
'use strict'
|
|
||||||
|
|
||||||
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
|
||||||
var forms = document.querySelectorAll('.needs-validation')
|
|
||||||
|
|
||||||
// Loop over them and prevent submission
|
|
||||||
Array.prototype.slice.call(forms)
|
|
||||||
.forEach(function (form) {
|
|
||||||
form.addEventListener('submit', function (event) {
|
|
||||||
if (!form.checkValidity()) {
|
|
||||||
event.preventDefault()
|
|
||||||
event.stopPropagation()
|
|
||||||
}
|
|
||||||
|
|
||||||
form.classList.add('was-validated')
|
|
||||||
}, false)
|
|
||||||
})
|
|
||||||
})()
|
|
||||||
|
|
@ -1,268 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>Checkout example · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/checkout/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
|
||||||
<link href="form-validation.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body class="bg-light">
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<main>
|
|
||||||
<div class="py-5 text-center">
|
|
||||||
<img class="d-block mx-auto mb-4" src="../assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
|
|
||||||
<h2>Checkout form</h2>
|
|
||||||
<p class="lead">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row g-5">
|
|
||||||
<div class="col-md-5 col-lg-4 order-md-last">
|
|
||||||
<h4 class="d-flex justify-content-between align-items-center mb-3">
|
|
||||||
<span class="text-primary">Your cart</span>
|
|
||||||
<span class="badge bg-primary rounded-pill">3</span>
|
|
||||||
</h4>
|
|
||||||
<ul class="list-group mb-3">
|
|
||||||
<li class="list-group-item d-flex justify-content-between lh-sm">
|
|
||||||
<div>
|
|
||||||
<h6 class="my-0">Product name</h6>
|
|
||||||
<small class="text-muted">Brief description</small>
|
|
||||||
</div>
|
|
||||||
<span class="text-muted">$12</span>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item d-flex justify-content-between lh-sm">
|
|
||||||
<div>
|
|
||||||
<h6 class="my-0">Second product</h6>
|
|
||||||
<small class="text-muted">Brief description</small>
|
|
||||||
</div>
|
|
||||||
<span class="text-muted">$8</span>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item d-flex justify-content-between lh-sm">
|
|
||||||
<div>
|
|
||||||
<h6 class="my-0">Third item</h6>
|
|
||||||
<small class="text-muted">Brief description</small>
|
|
||||||
</div>
|
|
||||||
<span class="text-muted">$5</span>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item d-flex justify-content-between bg-light">
|
|
||||||
<div class="text-success">
|
|
||||||
<h6 class="my-0">Promo code</h6>
|
|
||||||
<small>EXAMPLECODE</small>
|
|
||||||
</div>
|
|
||||||
<span class="text-success">−$5</span>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item d-flex justify-content-between">
|
|
||||||
<span>Total (USD)</span>
|
|
||||||
<strong>$20</strong>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<form class="card p-2">
|
|
||||||
<div class="input-group">
|
|
||||||
<input type="text" class="form-control" placeholder="Promo code">
|
|
||||||
<button type="submit" class="btn btn-secondary">Redeem</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-7 col-lg-8">
|
|
||||||
<h4 class="mb-3">Billing address</h4>
|
|
||||||
<form class="needs-validation" novalidate>
|
|
||||||
<div class="row g-3">
|
|
||||||
<div class="col-sm-6">
|
|
||||||
<label for="firstName" class="form-label">First name</label>
|
|
||||||
<input type="text" class="form-control" id="firstName" placeholder="" value="" required>
|
|
||||||
<div class="invalid-feedback">
|
|
||||||
Valid first name is required.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-sm-6">
|
|
||||||
<label for="lastName" class="form-label">Last name</label>
|
|
||||||
<input type="text" class="form-control" id="lastName" placeholder="" value="" required>
|
|
||||||
<div class="invalid-feedback">
|
|
||||||
Valid last name is required.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<label for="username" class="form-label">Username</label>
|
|
||||||
<div class="input-group has-validation">
|
|
||||||
<span class="input-group-text">@</span>
|
|
||||||
<input type="text" class="form-control" id="username" placeholder="Username" required>
|
|
||||||
<div class="invalid-feedback">
|
|
||||||
Your username is required.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<label for="email" class="form-label">Email <span class="text-muted">(Optional)</span></label>
|
|
||||||
<input type="email" class="form-control" id="email" placeholder="you@example.com">
|
|
||||||
<div class="invalid-feedback">
|
|
||||||
Please enter a valid email address for shipping updates.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<label for="address" class="form-label">Address</label>
|
|
||||||
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
|
|
||||||
<div class="invalid-feedback">
|
|
||||||
Please enter your shipping address.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<label for="address2" class="form-label">Address 2 <span class="text-muted">(Optional)</span></label>
|
|
||||||
<input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-5">
|
|
||||||
<label for="country" class="form-label">Country</label>
|
|
||||||
<select class="form-select" id="country" required>
|
|
||||||
<option value="">Choose...</option>
|
|
||||||
<option>United States</option>
|
|
||||||
</select>
|
|
||||||
<div class="invalid-feedback">
|
|
||||||
Please select a valid country.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-4">
|
|
||||||
<label for="state" class="form-label">State</label>
|
|
||||||
<select class="form-select" id="state" required>
|
|
||||||
<option value="">Choose...</option>
|
|
||||||
<option>California</option>
|
|
||||||
</select>
|
|
||||||
<div class="invalid-feedback">
|
|
||||||
Please provide a valid state.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-3">
|
|
||||||
<label for="zip" class="form-label">Zip</label>
|
|
||||||
<input type="text" class="form-control" id="zip" placeholder="" required>
|
|
||||||
<div class="invalid-feedback">
|
|
||||||
Zip code required.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="my-4">
|
|
||||||
|
|
||||||
<div class="form-check">
|
|
||||||
<input type="checkbox" class="form-check-input" id="same-address">
|
|
||||||
<label class="form-check-label" for="same-address">Shipping address is the same as my billing address</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-check">
|
|
||||||
<input type="checkbox" class="form-check-input" id="save-info">
|
|
||||||
<label class="form-check-label" for="save-info">Save this information for next time</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="my-4">
|
|
||||||
|
|
||||||
<h4 class="mb-3">Payment</h4>
|
|
||||||
|
|
||||||
<div class="my-3">
|
|
||||||
<div class="form-check">
|
|
||||||
<input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
|
|
||||||
<label class="form-check-label" for="credit">Credit card</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-check">
|
|
||||||
<input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
|
|
||||||
<label class="form-check-label" for="debit">Debit card</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-check">
|
|
||||||
<input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>
|
|
||||||
<label class="form-check-label" for="paypal">PayPal</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row gy-3">
|
|
||||||
<div class="col-md-6">
|
|
||||||
<label for="cc-name" class="form-label">Name on card</label>
|
|
||||||
<input type="text" class="form-control" id="cc-name" placeholder="" required>
|
|
||||||
<small class="text-muted">Full name as displayed on card</small>
|
|
||||||
<div class="invalid-feedback">
|
|
||||||
Name on card is required
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-6">
|
|
||||||
<label for="cc-number" class="form-label">Credit card number</label>
|
|
||||||
<input type="text" class="form-control" id="cc-number" placeholder="" required>
|
|
||||||
<div class="invalid-feedback">
|
|
||||||
Credit card number is required
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-3">
|
|
||||||
<label for="cc-expiration" class="form-label">Expiration</label>
|
|
||||||
<input type="text" class="form-control" id="cc-expiration" placeholder="" required>
|
|
||||||
<div class="invalid-feedback">
|
|
||||||
Expiration date required
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-3">
|
|
||||||
<label for="cc-cvv" class="form-label">CVV</label>
|
|
||||||
<input type="text" class="form-control" id="cc-cvv" placeholder="" required>
|
|
||||||
<div class="invalid-feedback">
|
|
||||||
Security code required
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="my-4">
|
|
||||||
|
|
||||||
<button class="w-100 btn btn-primary btn-lg" type="submit">Continue to checkout</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="my-5 pt-5 text-muted text-center text-small">
|
|
||||||
<p class="mb-1">© 2017–2021 Company Name</p>
|
|
||||||
<ul class="list-inline">
|
|
||||||
<li class="list-inline-item"><a href="#">Privacy</a></li>
|
|
||||||
<li class="list-inline-item"><a href="#">Terms</a></li>
|
|
||||||
<li class="list-inline-item"><a href="#">Support</a></li>
|
|
||||||
</ul>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
<script src="form-validation.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
/*
|
|
||||||
* Globals
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
/* Custom default button */
|
|
||||||
.btn-secondary,
|
|
||||||
.btn-secondary:hover,
|
|
||||||
.btn-secondary:focus {
|
|
||||||
color: #333;
|
|
||||||
text-shadow: none; /* Prevent inheritance from `body` */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Base structure
|
|
||||||
*/
|
|
||||||
|
|
||||||
body {
|
|
||||||
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
|
|
||||||
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cover-container {
|
|
||||||
max-width: 42em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Header
|
|
||||||
*/
|
|
||||||
|
|
||||||
.nav-masthead .nav-link {
|
|
||||||
padding: .25rem 0;
|
|
||||||
font-weight: 700;
|
|
||||||
color: rgba(255, 255, 255, .5);
|
|
||||||
background-color: transparent;
|
|
||||||
border-bottom: .25rem solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-masthead .nav-link:hover,
|
|
||||||
.nav-masthead .nav-link:focus {
|
|
||||||
border-bottom-color: rgba(255, 255, 255, .25);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-masthead .nav-link + .nav-link {
|
|
||||||
margin-left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-masthead .active {
|
|
||||||
color: #fff;
|
|
||||||
border-bottom-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en" class="h-100">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>Cover Template · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/cover/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
|
||||||
<link href="cover.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body class="d-flex h-100 text-center text-white bg-dark">
|
|
||||||
|
|
||||||
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
|
|
||||||
<header class="mb-auto">
|
|
||||||
<div>
|
|
||||||
<h3 class="float-md-start mb-0">Cover</h3>
|
|
||||||
<nav class="nav nav-masthead justify-content-center float-md-end">
|
|
||||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
|
||||||
<a class="nav-link" href="#">Features</a>
|
|
||||||
<a class="nav-link" href="#">Contact</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main class="px-3">
|
|
||||||
<h1>Cover your page.</h1>
|
|
||||||
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
|
|
||||||
<p class="lead">
|
|
||||||
<a href="#" class="btn btn-lg btn-secondary fw-bold border-white bg-white">Learn more</a>
|
|
||||||
</p>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="mt-auto text-white-50">
|
|
||||||
<p>Cover template for <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, by <a href="https://twitter.com/mdo" class="text-white">@mdo</a>.</p>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
/* globals Chart:false, feather:false */
|
|
||||||
|
|
||||||
(function () {
|
|
||||||
'use strict'
|
|
||||||
|
|
||||||
feather.replace({ 'aria-hidden': 'true' })
|
|
||||||
|
|
||||||
// Graphs
|
|
||||||
var ctx = document.getElementById('myChart')
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
|
||||||
var myChart = new Chart(ctx, {
|
|
||||||
type: 'line',
|
|
||||||
data: {
|
|
||||||
labels: [
|
|
||||||
'الأحد',
|
|
||||||
'الإثنين',
|
|
||||||
'الثلاثاء',
|
|
||||||
'الأربعاء',
|
|
||||||
'الخميس',
|
|
||||||
'الجمعة',
|
|
||||||
'السبت'
|
|
||||||
],
|
|
||||||
datasets: [{
|
|
||||||
data: [
|
|
||||||
15339,
|
|
||||||
21345,
|
|
||||||
18483,
|
|
||||||
24003,
|
|
||||||
23489,
|
|
||||||
24092,
|
|
||||||
12034
|
|
||||||
],
|
|
||||||
lineTension: 0,
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
borderColor: '#007bff',
|
|
||||||
borderWidth: 4,
|
|
||||||
pointBackgroundColor: '#007bff'
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
scales: {
|
|
||||||
yAxes: [{
|
|
||||||
ticks: {
|
|
||||||
beginAtZero: false
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})()
|
|
||||||
|
|
@ -1,285 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="ar" dir="rtl">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>قالب لوحة القيادة · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/dashboard-rtl/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
|
||||||
<link href="../dashboard/dashboard.rtl.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
|
|
||||||
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">اسم الشركة</a>
|
|
||||||
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="عرض/إخفاء لوحة التنقل">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
<input class="form-control form-control-dark w-100" type="text" placeholder="بحث" aria-label="بحث">
|
|
||||||
<div class="navbar-nav">
|
|
||||||
<div class="nav-item text-nowrap">
|
|
||||||
<a class="nav-link px-3" href="#">تسجيل الخروج</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="container-fluid">
|
|
||||||
<div class="row">
|
|
||||||
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
|
|
||||||
<div class="position-sticky pt-3">
|
|
||||||
<ul class="nav flex-column">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link active" aria-current="page" href="#">
|
|
||||||
<span data-feather="home"></span>
|
|
||||||
لوحة القيادة
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">
|
|
||||||
<span data-feather="file"></span>
|
|
||||||
الطلبات
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">
|
|
||||||
<span data-feather="shopping-cart"></span>
|
|
||||||
المنتجات
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">
|
|
||||||
<span data-feather="users"></span>
|
|
||||||
الزبائن
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">
|
|
||||||
<span data-feather="bar-chart-2"></span>
|
|
||||||
التقارير
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">
|
|
||||||
<span data-feather="layers"></span>
|
|
||||||
التكاملات
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
|
|
||||||
<span>التقارير المحفوظة</span>
|
|
||||||
<a class="link-secondary" href="#" aria-label="إضافة تقرير جديد">
|
|
||||||
<span data-feather="plus-circle"></span>
|
|
||||||
</a>
|
|
||||||
</h6>
|
|
||||||
<ul class="nav flex-column mb-2">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">
|
|
||||||
<span data-feather="file-text"></span>
|
|
||||||
الشهر الحالي
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">
|
|
||||||
<span data-feather="file-text"></span>
|
|
||||||
الربع الأخير
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">
|
|
||||||
<span data-feather="file-text"></span>
|
|
||||||
التفاعل الإجتماعي
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">
|
|
||||||
<span data-feather="file-text"></span>
|
|
||||||
مبيعات نهاية العام
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
|
|
||||||
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
|
||||||
<h1 class="h2">لوحة القيادة</h1>
|
|
||||||
<div class="btn-toolbar mb-2 mb-md-0">
|
|
||||||
<div class="btn-group me-2">
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">مشاركة</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">تصدير</button>
|
|
||||||
</div>
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
|
|
||||||
<span data-feather="calendar"></span>
|
|
||||||
هذا الأسبوع
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
|
|
||||||
|
|
||||||
<h2>عنوان القسم</h2>
|
|
||||||
<div class="table-responsive">
|
|
||||||
<table class="table table-striped table-sm">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th scope="col">#</th>
|
|
||||||
<th scope="col">عنوان</th>
|
|
||||||
<th scope="col">عنوان</th>
|
|
||||||
<th scope="col">عنوان</th>
|
|
||||||
<th scope="col">عنوان</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>1,001</td>
|
|
||||||
<td>بيانات</td>
|
|
||||||
<td>عشوائية</td>
|
|
||||||
<td>تثري</td>
|
|
||||||
<td>الجدول</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,002</td>
|
|
||||||
<td>تثري</td>
|
|
||||||
<td>مبهة</td>
|
|
||||||
<td>تصميم</td>
|
|
||||||
<td>تنسيق</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,003</td>
|
|
||||||
<td>عشوائية</td>
|
|
||||||
<td>غنية</td>
|
|
||||||
<td>قيمة</td>
|
|
||||||
<td>مفيدة</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,003</td>
|
|
||||||
<td>معلومات</td>
|
|
||||||
<td>تثري</td>
|
|
||||||
<td>توضيحية</td>
|
|
||||||
<td>عشوائية</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,004</td>
|
|
||||||
<td>الجدول</td>
|
|
||||||
<td>بيانات</td>
|
|
||||||
<td>تنسيق</td>
|
|
||||||
<td>قيمة</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,005</td>
|
|
||||||
<td>قيمة</td>
|
|
||||||
<td>مبهة</td>
|
|
||||||
<td>الجدول</td>
|
|
||||||
<td>تثري</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,006</td>
|
|
||||||
<td>قيمة</td>
|
|
||||||
<td>توضيحية</td>
|
|
||||||
<td>غنية</td>
|
|
||||||
<td>عشوائية</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,007</td>
|
|
||||||
<td>تثري</td>
|
|
||||||
<td>مفيدة</td>
|
|
||||||
<td>معلومات</td>
|
|
||||||
<td>مبهة</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,008</td>
|
|
||||||
<td>بيانات</td>
|
|
||||||
<td>عشوائية</td>
|
|
||||||
<td>تثري</td>
|
|
||||||
<td>الجدول</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,009</td>
|
|
||||||
<td>تثري</td>
|
|
||||||
<td>مبهة</td>
|
|
||||||
<td>تصميم</td>
|
|
||||||
<td>تنسيق</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,010</td>
|
|
||||||
<td>عشوائية</td>
|
|
||||||
<td>غنية</td>
|
|
||||||
<td>قيمة</td>
|
|
||||||
<td>مفيدة</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,011</td>
|
|
||||||
<td>معلومات</td>
|
|
||||||
<td>تثري</td>
|
|
||||||
<td>توضيحية</td>
|
|
||||||
<td>عشوائية</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,012</td>
|
|
||||||
<td>الجدول</td>
|
|
||||||
<td>تثري</td>
|
|
||||||
<td>تنسيق</td>
|
|
||||||
<td>قيمة</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,013</td>
|
|
||||||
<td>قيمة</td>
|
|
||||||
<td>مبهة</td>
|
|
||||||
<td>الجدول</td>
|
|
||||||
<td>تصميم</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,014</td>
|
|
||||||
<td>قيمة</td>
|
|
||||||
<td>توضيحية</td>
|
|
||||||
<td>غنية</td>
|
|
||||||
<td>عشوائية</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,015</td>
|
|
||||||
<td>بيانات</td>
|
|
||||||
<td>مفيدة</td>
|
|
||||||
<td>معلومات</td>
|
|
||||||
<td>الجدول</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.24.1/feather.min.js" integrity="sha384-EbSscX4STvYAC/DxHse8z5gEDaNiKAIGW+EpfzYTfQrgIlHywXXrM9SUIZ0BlyfF" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha384-i+dHPTzZw7YVZOx9lbH5l6lP74sLRtMtwN2XjVqjf3uAGAREAF4LMIUDTWEVs4LI" crossorigin="anonymous"></script><script src="dashboard.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,100 +0,0 @@
|
||||||
body {
|
|
||||||
font-size: .875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feather {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
vertical-align: text-bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Sidebar
|
|
||||||
*/
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
/* rtl:raw:
|
|
||||||
right: 0;
|
|
||||||
*/
|
|
||||||
bottom: 0;
|
|
||||||
/* rtl:remove */
|
|
||||||
left: 0;
|
|
||||||
z-index: 100; /* Behind the navbar */
|
|
||||||
padding: 48px 0 0; /* Height of navbar */
|
|
||||||
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 767.98px) {
|
|
||||||
.sidebar {
|
|
||||||
top: 5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-sticky {
|
|
||||||
position: relative;
|
|
||||||
top: 0;
|
|
||||||
height: calc(100vh - 48px);
|
|
||||||
padding-top: .5rem;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .nav-link {
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .nav-link .feather {
|
|
||||||
margin-right: 4px;
|
|
||||||
color: #727272;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .nav-link.active {
|
|
||||||
color: #2470dc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .nav-link:hover .feather,
|
|
||||||
.sidebar .nav-link.active .feather {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-heading {
|
|
||||||
font-size: .75rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Navbar
|
|
||||||
*/
|
|
||||||
|
|
||||||
.navbar-brand {
|
|
||||||
padding-top: .75rem;
|
|
||||||
padding-bottom: .75rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
background-color: rgba(0, 0, 0, .25);
|
|
||||||
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar .navbar-toggler {
|
|
||||||
top: .25rem;
|
|
||||||
right: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar .form-control {
|
|
||||||
padding: .75rem 1rem;
|
|
||||||
border-width: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control-dark {
|
|
||||||
color: #fff;
|
|
||||||
background-color: rgba(255, 255, 255, .1);
|
|
||||||
border-color: rgba(255, 255, 255, .1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control-dark:focus {
|
|
||||||
border-color: transparent;
|
|
||||||
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
|
|
||||||
}
|
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
/* globals Chart:false, feather:false */
|
|
||||||
|
|
||||||
(function () {
|
|
||||||
'use strict'
|
|
||||||
|
|
||||||
feather.replace({ 'aria-hidden': 'true' })
|
|
||||||
|
|
||||||
// Graphs
|
|
||||||
var ctx = document.getElementById('myChart')
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
|
||||||
var myChart = new Chart(ctx, {
|
|
||||||
type: 'line',
|
|
||||||
data: {
|
|
||||||
labels: [
|
|
||||||
'Sunday',
|
|
||||||
'Monday',
|
|
||||||
'Tuesday',
|
|
||||||
'Wednesday',
|
|
||||||
'Thursday',
|
|
||||||
'Friday',
|
|
||||||
'Saturday'
|
|
||||||
],
|
|
||||||
datasets: [{
|
|
||||||
data: [
|
|
||||||
15339,
|
|
||||||
21345,
|
|
||||||
18483,
|
|
||||||
24003,
|
|
||||||
23489,
|
|
||||||
24092,
|
|
||||||
12034
|
|
||||||
],
|
|
||||||
lineTension: 0,
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
borderColor: '#007bff',
|
|
||||||
borderWidth: 4,
|
|
||||||
pointBackgroundColor: '#007bff'
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
scales: {
|
|
||||||
yAxes: [{
|
|
||||||
ticks: {
|
|
||||||
beginAtZero: false
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})()
|
|
||||||
|
|
@ -1,96 +0,0 @@
|
||||||
body {
|
|
||||||
font-size: .875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feather {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
vertical-align: text-bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Sidebar
|
|
||||||
*/
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 100; /* Behind the navbar */
|
|
||||||
padding: 48px 0 0; /* Height of navbar */
|
|
||||||
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 767.98px) {
|
|
||||||
.sidebar {
|
|
||||||
top: 5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-sticky {
|
|
||||||
position: relative;
|
|
||||||
top: 0;
|
|
||||||
height: calc(100vh - 48px);
|
|
||||||
padding-top: .5rem;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .nav-link {
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .nav-link .feather {
|
|
||||||
margin-left: 4px;
|
|
||||||
color: #727272;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .nav-link.active {
|
|
||||||
color: #2470dc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .nav-link:hover .feather,
|
|
||||||
.sidebar .nav-link.active .feather {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-heading {
|
|
||||||
font-size: .75rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Navbar
|
|
||||||
*/
|
|
||||||
|
|
||||||
.navbar-brand {
|
|
||||||
padding-top: .75rem;
|
|
||||||
padding-bottom: .75rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
background-color: rgba(0, 0, 0, .25);
|
|
||||||
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .25);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar .navbar-toggler {
|
|
||||||
top: .25rem;
|
|
||||||
left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar .form-control {
|
|
||||||
padding: .75rem 1rem;
|
|
||||||
border-width: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control-dark {
|
|
||||||
color: #fff;
|
|
||||||
background-color: rgba(255, 255, 255, .1);
|
|
||||||
border-color: rgba(255, 255, 255, .1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control-dark:focus {
|
|
||||||
border-color: transparent;
|
|
||||||
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
|
|
||||||
}
|
|
||||||
|
|
@ -1,285 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>Dashboard Template · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/dashboard/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
|
||||||
<link href="dashboard.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
|
|
||||||
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Company name</a>
|
|
||||||
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
|
|
||||||
<div class="navbar-nav">
|
|
||||||
<div class="nav-item text-nowrap">
|
|
||||||
<a class="nav-link px-3" href="#">Sign out</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="container-fluid">
|
|
||||||
<div class="row">
|
|
||||||
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
|
|
||||||
<div class="position-sticky pt-3">
|
|
||||||
<ul class="nav flex-column">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link active" aria-current="page" href="#">
|
|
||||||
<span data-feather="home"></span>
|
|
||||||
Dashboard
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">
|
|
||||||
<span data-feather="file"></span>
|
|
||||||
Orders
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">
|
|
||||||
<span data-feather="shopping-cart"></span>
|
|
||||||
Products
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">
|
|
||||||
<span data-feather="users"></span>
|
|
||||||
Customers
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">
|
|
||||||
<span data-feather="bar-chart-2"></span>
|
|
||||||
Reports
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">
|
|
||||||
<span data-feather="layers"></span>
|
|
||||||
Integrations
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
|
|
||||||
<span>Saved reports</span>
|
|
||||||
<a class="link-secondary" href="#" aria-label="Add a new report">
|
|
||||||
<span data-feather="plus-circle"></span>
|
|
||||||
</a>
|
|
||||||
</h6>
|
|
||||||
<ul class="nav flex-column mb-2">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">
|
|
||||||
<span data-feather="file-text"></span>
|
|
||||||
Current month
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">
|
|
||||||
<span data-feather="file-text"></span>
|
|
||||||
Last quarter
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">
|
|
||||||
<span data-feather="file-text"></span>
|
|
||||||
Social engagement
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">
|
|
||||||
<span data-feather="file-text"></span>
|
|
||||||
Year-end sale
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
|
|
||||||
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
|
||||||
<h1 class="h2">Dashboard</h1>
|
|
||||||
<div class="btn-toolbar mb-2 mb-md-0">
|
|
||||||
<div class="btn-group me-2">
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
|
|
||||||
</div>
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
|
|
||||||
<span data-feather="calendar"></span>
|
|
||||||
This week
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
|
|
||||||
|
|
||||||
<h2>Section title</h2>
|
|
||||||
<div class="table-responsive">
|
|
||||||
<table class="table table-striped table-sm">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th scope="col">#</th>
|
|
||||||
<th scope="col">Header</th>
|
|
||||||
<th scope="col">Header</th>
|
|
||||||
<th scope="col">Header</th>
|
|
||||||
<th scope="col">Header</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>1,001</td>
|
|
||||||
<td>random</td>
|
|
||||||
<td>data</td>
|
|
||||||
<td>placeholder</td>
|
|
||||||
<td>text</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,002</td>
|
|
||||||
<td>placeholder</td>
|
|
||||||
<td>irrelevant</td>
|
|
||||||
<td>visual</td>
|
|
||||||
<td>layout</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,003</td>
|
|
||||||
<td>data</td>
|
|
||||||
<td>rich</td>
|
|
||||||
<td>dashboard</td>
|
|
||||||
<td>tabular</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,003</td>
|
|
||||||
<td>information</td>
|
|
||||||
<td>placeholder</td>
|
|
||||||
<td>illustrative</td>
|
|
||||||
<td>data</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,004</td>
|
|
||||||
<td>text</td>
|
|
||||||
<td>random</td>
|
|
||||||
<td>layout</td>
|
|
||||||
<td>dashboard</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,005</td>
|
|
||||||
<td>dashboard</td>
|
|
||||||
<td>irrelevant</td>
|
|
||||||
<td>text</td>
|
|
||||||
<td>placeholder</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,006</td>
|
|
||||||
<td>dashboard</td>
|
|
||||||
<td>illustrative</td>
|
|
||||||
<td>rich</td>
|
|
||||||
<td>data</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,007</td>
|
|
||||||
<td>placeholder</td>
|
|
||||||
<td>tabular</td>
|
|
||||||
<td>information</td>
|
|
||||||
<td>irrelevant</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,008</td>
|
|
||||||
<td>random</td>
|
|
||||||
<td>data</td>
|
|
||||||
<td>placeholder</td>
|
|
||||||
<td>text</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,009</td>
|
|
||||||
<td>placeholder</td>
|
|
||||||
<td>irrelevant</td>
|
|
||||||
<td>visual</td>
|
|
||||||
<td>layout</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,010</td>
|
|
||||||
<td>data</td>
|
|
||||||
<td>rich</td>
|
|
||||||
<td>dashboard</td>
|
|
||||||
<td>tabular</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,011</td>
|
|
||||||
<td>information</td>
|
|
||||||
<td>placeholder</td>
|
|
||||||
<td>illustrative</td>
|
|
||||||
<td>data</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,012</td>
|
|
||||||
<td>text</td>
|
|
||||||
<td>placeholder</td>
|
|
||||||
<td>layout</td>
|
|
||||||
<td>dashboard</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,013</td>
|
|
||||||
<td>dashboard</td>
|
|
||||||
<td>irrelevant</td>
|
|
||||||
<td>text</td>
|
|
||||||
<td>visual</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,014</td>
|
|
||||||
<td>dashboard</td>
|
|
||||||
<td>illustrative</td>
|
|
||||||
<td>rich</td>
|
|
||||||
<td>data</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>1,015</td>
|
|
||||||
<td>random</td>
|
|
||||||
<td>tabular</td>
|
|
||||||
<td>information</td>
|
|
||||||
<td>text</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script><script src="dashboard.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,61 +0,0 @@
|
||||||
.b-example-divider {
|
|
||||||
height: 3rem;
|
|
||||||
background-color: rgba(0, 0, 0, .1);
|
|
||||||
border: solid rgba(0, 0, 0, .15);
|
|
||||||
border-width: 1px 0;
|
|
||||||
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bi {
|
|
||||||
vertical-align: -.125em;
|
|
||||||
fill: currentColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-icon {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 4rem;
|
|
||||||
height: 4rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
font-size: 2rem;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: .75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-link {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.icon-link > .bi {
|
|
||||||
margin-top: .125rem;
|
|
||||||
margin-left: .125rem;
|
|
||||||
transition: transform .25s ease-in-out;
|
|
||||||
fill: currentColor;
|
|
||||||
}
|
|
||||||
.icon-link:hover > .bi {
|
|
||||||
transform: translate(.25rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-square {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 3rem;
|
|
||||||
height: 3rem;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
border-radius: .75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rounded-4 { border-radius: .5rem; }
|
|
||||||
.rounded-5 { border-radius: 1rem; }
|
|
||||||
|
|
||||||
.text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); }
|
|
||||||
.text-shadow-2 { text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); }
|
|
||||||
.text-shadow-3 { text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); }
|
|
||||||
|
|
||||||
.card-cover {
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center center;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
@ -1,326 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>Features · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/features/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
|
||||||
<link href="features.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
|
||||||
<symbol id="bootstrap" viewBox="0 0 118 94">
|
|
||||||
<title>Bootstrap</title>
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="home" viewBox="0 0 16 16">
|
|
||||||
<path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="speedometer2" viewBox="0 0 16 16">
|
|
||||||
<path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
|
|
||||||
<path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="table" viewBox="0 0 16 16">
|
|
||||||
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="people-circle" viewBox="0 0 16 16">
|
|
||||||
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
|
|
||||||
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="grid" viewBox="0 0 16 16">
|
|
||||||
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="collection" viewBox="0 0 16 16">
|
|
||||||
<path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="calendar3" viewBox="0 0 16 16">
|
|
||||||
<path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
|
|
||||||
<path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="chat-quote-fill" viewBox="0 0 16 16">
|
|
||||||
<path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7.194 6.766a1.688 1.688 0 0 0-.227-.272 1.467 1.467 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 5.734 6C4.776 6 4 6.746 4 7.667c0 .92.776 1.666 1.734 1.666.343 0 .662-.095.931-.26-.137.389-.39.804-.81 1.22a.405.405 0 0 0 .011.59c.173.16.447.155.614-.01 1.334-1.329 1.37-2.758.941-3.706a2.461 2.461 0 0 0-.227-.4zM11 9.073c-.136.389-.39.804-.81 1.22a.405.405 0 0 0 .012.59c.172.16.446.155.613-.01 1.334-1.329 1.37-2.758.942-3.706a2.466 2.466 0 0 0-.228-.4 1.686 1.686 0 0 0-.227-.273 1.466 1.466 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 10.07 6c-.957 0-1.734.746-1.734 1.667 0 .92.777 1.666 1.734 1.666.343 0 .662-.095.931-.26z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="cpu-fill" viewBox="0 0 16 16">
|
|
||||||
<path d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
|
|
||||||
<path d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="gear-fill" viewBox="0 0 16 16">
|
|
||||||
<path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="speedometer" viewBox="0 0 16 16">
|
|
||||||
<path d="M8 2a.5.5 0 0 1 .5.5V4a.5.5 0 0 1-1 0V2.5A.5.5 0 0 1 8 2zM3.732 3.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 8a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 7.31A.91.91 0 1 0 8.85 8.569l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
|
|
||||||
<path fill-rule="evenodd" d="M6.664 15.889A8 8 0 1 1 9.336.11a8 8 0 0 1-2.672 15.78zm-4.665-4.283A11.945 11.945 0 0 1 8 10c2.186 0 4.236.585 6.001 1.606a7 7 0 1 0-12.002 0z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="toggles2" viewBox="0 0 16 16">
|
|
||||||
<path d="M9.465 10H12a2 2 0 1 1 0 4H9.465c.34-.588.535-1.271.535-2 0-.729-.195-1.412-.535-2z"/>
|
|
||||||
<path d="M6 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 1a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm.535-10a3.975 3.975 0 0 1-.409-1H4a1 1 0 0 1 0-2h2.126c.091-.355.23-.69.41-1H4a2 2 0 1 0 0 4h2.535z"/>
|
|
||||||
<path d="M14 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="tools" viewBox="0 0 16 16">
|
|
||||||
<path d="M1 0L0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="chevron-right" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="geo-fill" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"/>
|
|
||||||
</symbol>
|
|
||||||
</svg>
|
|
||||||
<main>
|
|
||||||
<h1 class="visually-hidden">Features examples</h1>
|
|
||||||
|
|
||||||
<div class="container px-4 py-5" id="featured-3">
|
|
||||||
<h2 class="pb-2 border-bottom">Columns with icons</h2>
|
|
||||||
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
|
|
||||||
<div class="feature col">
|
|
||||||
<div class="feature-icon bg-primary bg-gradient">
|
|
||||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg>
|
|
||||||
</div>
|
|
||||||
<h2>Featured title</h2>
|
|
||||||
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
|
|
||||||
<a href="#" class="icon-link">
|
|
||||||
Call to action
|
|
||||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="feature col">
|
|
||||||
<div class="feature-icon bg-primary bg-gradient">
|
|
||||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg>
|
|
||||||
</div>
|
|
||||||
<h2>Featured title</h2>
|
|
||||||
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
|
|
||||||
<a href="#" class="icon-link">
|
|
||||||
Call to action
|
|
||||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="feature col">
|
|
||||||
<div class="feature-icon bg-primary bg-gradient">
|
|
||||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
|
|
||||||
</div>
|
|
||||||
<h2>Featured title</h2>
|
|
||||||
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
|
|
||||||
<a href="#" class="icon-link">
|
|
||||||
Call to action
|
|
||||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="b-example-divider"></div>
|
|
||||||
|
|
||||||
<div class="container px-4 py-5" id="hanging-icons">
|
|
||||||
<h2 class="pb-2 border-bottom">Hanging icons</h2>
|
|
||||||
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
|
|
||||||
<div class="col d-flex align-items-start">
|
|
||||||
<div class="icon-square bg-light text-dark flex-shrink-0 me-3">
|
|
||||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2>Featured title</h2>
|
|
||||||
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
|
|
||||||
<a href="#" class="btn btn-primary">
|
|
||||||
Primary button
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col d-flex align-items-start">
|
|
||||||
<div class="icon-square bg-light text-dark flex-shrink-0 me-3">
|
|
||||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2>Featured title</h2>
|
|
||||||
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
|
|
||||||
<a href="#" class="btn btn-primary">
|
|
||||||
Primary button
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col d-flex align-items-start">
|
|
||||||
<div class="icon-square bg-light text-dark flex-shrink-0 me-3">
|
|
||||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2>Featured title</h2>
|
|
||||||
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
|
|
||||||
<a href="#" class="btn btn-primary">
|
|
||||||
Primary button
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="b-example-divider"></div>
|
|
||||||
|
|
||||||
<div class="container px-4 py-5" id="custom-cards">
|
|
||||||
<h2 class="pb-2 border-bottom">Custom cards</h2>
|
|
||||||
|
|
||||||
<div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5">
|
|
||||||
<div class="col">
|
|
||||||
<div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');">
|
|
||||||
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
|
|
||||||
<h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h2>
|
|
||||||
<ul class="d-flex list-unstyled mt-auto">
|
|
||||||
<li class="me-auto">
|
|
||||||
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
|
|
||||||
</li>
|
|
||||||
<li class="d-flex align-items-center me-3">
|
|
||||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
|
|
||||||
<small>Earth</small>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex align-items-center">
|
|
||||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
|
|
||||||
<small>3d</small>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col">
|
|
||||||
<div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-2.jpg');">
|
|
||||||
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
|
|
||||||
<h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h2>
|
|
||||||
<ul class="d-flex list-unstyled mt-auto">
|
|
||||||
<li class="me-auto">
|
|
||||||
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
|
|
||||||
</li>
|
|
||||||
<li class="d-flex align-items-center me-3">
|
|
||||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
|
|
||||||
<small>Pakistan</small>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex align-items-center">
|
|
||||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
|
|
||||||
<small>4d</small>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col">
|
|
||||||
<div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-3.jpg');">
|
|
||||||
<div class="d-flex flex-column h-100 p-5 pb-3 text-shadow-1">
|
|
||||||
<h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Another longer title belongs here</h2>
|
|
||||||
<ul class="d-flex list-unstyled mt-auto">
|
|
||||||
<li class="me-auto">
|
|
||||||
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
|
|
||||||
</li>
|
|
||||||
<li class="d-flex align-items-center me-3">
|
|
||||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
|
|
||||||
<small>California</small>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex align-items-center">
|
|
||||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
|
|
||||||
<small>5d</small>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="b-example-divider"></div>
|
|
||||||
|
|
||||||
<div class="container px-4 py-5" id="icon-grid">
|
|
||||||
<h2 class="pb-2 border-bottom">Icon grid</h2>
|
|
||||||
|
|
||||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5">
|
|
||||||
<div class="col d-flex align-items-start">
|
|
||||||
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg>
|
|
||||||
<div>
|
|
||||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
|
||||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col d-flex align-items-start">
|
|
||||||
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg>
|
|
||||||
<div>
|
|
||||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
|
||||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col d-flex align-items-start">
|
|
||||||
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg>
|
|
||||||
<div>
|
|
||||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
|
||||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col d-flex align-items-start">
|
|
||||||
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg>
|
|
||||||
<div>
|
|
||||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
|
||||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col d-flex align-items-start">
|
|
||||||
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg>
|
|
||||||
<div>
|
|
||||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
|
||||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col d-flex align-items-start">
|
|
||||||
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg>
|
|
||||||
<div>
|
|
||||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
|
||||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col d-flex align-items-start">
|
|
||||||
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg>
|
|
||||||
<div>
|
|
||||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
|
||||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col d-flex align-items-start">
|
|
||||||
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg>
|
|
||||||
<div>
|
|
||||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
|
||||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
|
|
@ -1,13 +0,0 @@
|
||||||
.themed-grid-col {
|
|
||||||
padding-top: .75rem;
|
|
||||||
padding-bottom: .75rem;
|
|
||||||
background-color: rgba(86, 61, 124, .15);
|
|
||||||
border: 1px solid rgba(86, 61, 124, .2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.themed-container {
|
|
||||||
padding: .75rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
background-color: rgba(0, 123, 255, .15);
|
|
||||||
border: 1px solid rgba(0, 123, 255, .2);
|
|
||||||
}
|
|
||||||
|
|
@ -1,223 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>Grid Template · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/grid/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
|
||||||
<link href="grid.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body class="py-4">
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<div class="container">
|
|
||||||
|
|
||||||
<h1>Bootstrap grid examples</h1>
|
|
||||||
<p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
|
|
||||||
<p>In these examples the <code>.themed-grid-col</code> class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.</p>
|
|
||||||
|
|
||||||
<h2 class="mt-4">Five grid tiers</h2>
|
|
||||||
<p>There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.</p>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
|
||||||
<div class="col-4 themed-grid-col">.col-4</div>
|
|
||||||
<div class="col-4 themed-grid-col">.col-4</div>
|
|
||||||
<div class="col-4 themed-grid-col">.col-4</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
|
||||||
<div class="col-sm-4 themed-grid-col">.col-sm-4</div>
|
|
||||||
<div class="col-sm-4 themed-grid-col">.col-sm-4</div>
|
|
||||||
<div class="col-sm-4 themed-grid-col">.col-sm-4</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
|
||||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
|
||||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
|
||||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
|
||||||
<div class="col-lg-4 themed-grid-col">.col-lg-4</div>
|
|
||||||
<div class="col-lg-4 themed-grid-col">.col-lg-4</div>
|
|
||||||
<div class="col-lg-4 themed-grid-col">.col-lg-4</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
|
||||||
<div class="col-xl-4 themed-grid-col">.col-xl-4</div>
|
|
||||||
<div class="col-xl-4 themed-grid-col">.col-xl-4</div>
|
|
||||||
<div class="col-xl-4 themed-grid-col">.col-xl-4</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
|
||||||
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
|
|
||||||
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
|
|
||||||
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2 class="mt-4">Three equal columns</h2>
|
|
||||||
<p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
|
|
||||||
<div class="row mb-3">
|
|
||||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
|
||||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
|
||||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2 class="mt-4">Three equal columns alternative</h2>
|
|
||||||
<p>By using the <code>.row-cols-*</code> classes, you can easily create a grid with equal columns.</p>
|
|
||||||
<div class="row row-cols-md-3 mb-3">
|
|
||||||
<div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
|
|
||||||
<div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
|
|
||||||
<div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2 class="mt-4">Three unequal columns</h2>
|
|
||||||
<p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p>
|
|
||||||
<div class="row mb-3">
|
|
||||||
<div class="col-md-3 themed-grid-col">.col-md-3</div>
|
|
||||||
<div class="col-md-6 themed-grid-col">.col-md-6</div>
|
|
||||||
<div class="col-md-3 themed-grid-col">.col-md-3</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2 class="mt-4">Two columns</h2>
|
|
||||||
<p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
|
|
||||||
<div class="row mb-3">
|
|
||||||
<div class="col-md-8 themed-grid-col">.col-md-8</div>
|
|
||||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2 class="mt-4">Full width, single column</h2>
|
|
||||||
<p class="text-warning">
|
|
||||||
No grid classes are necessary for full-width elements.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<hr class="my-4">
|
|
||||||
|
|
||||||
<h2 class="mt-4">Two columns with two nested columns</h2>
|
|
||||||
<p>Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
|
|
||||||
<p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
|
|
||||||
<div class="row mb-3">
|
|
||||||
<div class="col-md-8 themed-grid-col">
|
|
||||||
<div class="pb-3">
|
|
||||||
.col-md-8
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-6 themed-grid-col">.col-md-6</div>
|
|
||||||
<div class="col-md-6 themed-grid-col">.col-md-6</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="my-4">
|
|
||||||
|
|
||||||
<h2 class="mt-4">Mixed: mobile and desktop</h2>
|
|
||||||
<p>The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
|
|
||||||
<p>Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only need to specify md.</p>
|
|
||||||
<div class="row mb-3">
|
|
||||||
<div class="col-md-8 themed-grid-col">.col-md-8</div>
|
|
||||||
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
|
|
||||||
</div>
|
|
||||||
<div class="row mb-3">
|
|
||||||
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
|
|
||||||
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
|
|
||||||
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
|
|
||||||
</div>
|
|
||||||
<div class="row mb-3">
|
|
||||||
<div class="col-6 themed-grid-col">.col-6</div>
|
|
||||||
<div class="col-6 themed-grid-col">.col-6</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="my-4">
|
|
||||||
|
|
||||||
<h2 class="mt-4">Mixed: mobile, tablet, and desktop</h2>
|
|
||||||
<div class="row mb-3">
|
|
||||||
<div class="col-sm-6 col-lg-8 themed-grid-col">.col-sm-6 .col-lg-8</div>
|
|
||||||
<div class="col-6 col-lg-4 themed-grid-col">.col-6 .col-lg-4</div>
|
|
||||||
</div>
|
|
||||||
<div class="row mb-3">
|
|
||||||
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
|
|
||||||
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
|
|
||||||
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="my-4">
|
|
||||||
|
|
||||||
<h2 class="mt-4">Gutters</h2>
|
|
||||||
<p>With <code>.gx-*</code> classes, the horizontal gutters can be adjusted.</p>
|
|
||||||
<div class="row row-cols-1 row-cols-md-3 gx-4">
|
|
||||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
|
||||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
|
||||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
|
||||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
|
||||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
|
||||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
|
||||||
</div>
|
|
||||||
<p class="mt-4">Use the <code>.gy-*</code> classes to control the vertical gutters.</p>
|
|
||||||
<div class="row row-cols-1 row-cols-md-3 gy-4">
|
|
||||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
|
||||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
|
||||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
|
||||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
|
||||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
|
||||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
|
||||||
</div>
|
|
||||||
<p class="mt-4">With <code>.g-*</code> classes, the gutters in both directions can be adjusted.</p>
|
|
||||||
<div class="row row-cols-1 row-cols-md-3 g-3">
|
|
||||||
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
|
|
||||||
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
|
|
||||||
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
|
|
||||||
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
|
|
||||||
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
|
|
||||||
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container" id="containers">
|
|
||||||
<hr class="my-4">
|
|
||||||
|
|
||||||
<h2 class="mt-4">Containers</h2>
|
|
||||||
<p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new <code>xxl</code> breakpoint.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container themed-container">.container</div>
|
|
||||||
<div class="container-sm themed-container">.container-sm</div>
|
|
||||||
<div class="container-md themed-container">.container-md</div>
|
|
||||||
<div class="container-lg themed-container">.container-lg</div>
|
|
||||||
<div class="container-xl themed-container">.container-xl</div>
|
|
||||||
<div class="container-xxl themed-container">.container-xxl</div>
|
|
||||||
<div class="container-fluid themed-container">.container-fluid</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
.b-example-divider {
|
|
||||||
height: 3rem;
|
|
||||||
background-color: rgba(0, 0, 0, .1);
|
|
||||||
border: solid rgba(0, 0, 0, .15);
|
|
||||||
border-width: 1px 0;
|
|
||||||
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control-dark {
|
|
||||||
color: #fff;
|
|
||||||
background-color: var(--bs-dark);
|
|
||||||
border-color: var(--bs-gray);
|
|
||||||
}
|
|
||||||
.form-control-dark:focus {
|
|
||||||
color: #fff;
|
|
||||||
background-color: var(--bs-dark);
|
|
||||||
border-color: #fff;
|
|
||||||
box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bi {
|
|
||||||
vertical-align: -.125em;
|
|
||||||
fill: currentColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-small {
|
|
||||||
font-size: 85%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-toggle {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
@ -1,333 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>Headers · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/headers/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
|
||||||
<link href="headers.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
|
||||||
<symbol id="bootstrap" viewBox="0 0 118 94">
|
|
||||||
<title>Bootstrap</title>
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="home" viewBox="0 0 16 16">
|
|
||||||
<path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="speedometer2" viewBox="0 0 16 16">
|
|
||||||
<path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
|
|
||||||
<path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="table" viewBox="0 0 16 16">
|
|
||||||
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="people-circle" viewBox="0 0 16 16">
|
|
||||||
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
|
|
||||||
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="grid" viewBox="0 0 16 16">
|
|
||||||
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
|
|
||||||
</symbol>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<h1 class="visually-hidden">Headers examples</h1>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
|
|
||||||
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
|
|
||||||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
|
||||||
<span class="fs-4">Simple header</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<ul class="nav nav-pills">
|
|
||||||
<li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
|
|
||||||
<li class="nav-item"><a href="#" class="nav-link">Features</a></li>
|
|
||||||
<li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
|
|
||||||
<li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
|
|
||||||
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
|
|
||||||
</ul>
|
|
||||||
</header>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="b-example-divider"></div>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<header class="d-flex justify-content-center py-3">
|
|
||||||
<ul class="nav nav-pills">
|
|
||||||
<li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
|
|
||||||
<li class="nav-item"><a href="#" class="nav-link">Features</a></li>
|
|
||||||
<li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
|
|
||||||
<li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
|
|
||||||
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
|
|
||||||
</ul>
|
|
||||||
</header>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="b-example-divider"></div>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
|
|
||||||
<a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
|
|
||||||
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
|
|
||||||
<li><a href="#" class="nav-link px-2 link-secondary">Home</a></li>
|
|
||||||
<li><a href="#" class="nav-link px-2 link-dark">Features</a></li>
|
|
||||||
<li><a href="#" class="nav-link px-2 link-dark">Pricing</a></li>
|
|
||||||
<li><a href="#" class="nav-link px-2 link-dark">FAQs</a></li>
|
|
||||||
<li><a href="#" class="nav-link px-2 link-dark">About</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div class="col-md-3 text-end">
|
|
||||||
<button type="button" class="btn btn-outline-primary me-2">Login</button>
|
|
||||||
<button type="button" class="btn btn-primary">Sign-up</button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="b-example-divider"></div>
|
|
||||||
|
|
||||||
<header class="p-3 bg-dark text-white">
|
|
||||||
<div class="container">
|
|
||||||
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
|
|
||||||
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
|
|
||||||
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
|
|
||||||
<li><a href="#" class="nav-link px-2 text-secondary">Home</a></li>
|
|
||||||
<li><a href="#" class="nav-link px-2 text-white">Features</a></li>
|
|
||||||
<li><a href="#" class="nav-link px-2 text-white">Pricing</a></li>
|
|
||||||
<li><a href="#" class="nav-link px-2 text-white">FAQs</a></li>
|
|
||||||
<li><a href="#" class="nav-link px-2 text-white">About</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
|
|
||||||
<input type="search" class="form-control form-control-dark" placeholder="Search..." aria-label="Search">
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div class="text-end">
|
|
||||||
<button type="button" class="btn btn-outline-light me-2">Login</button>
|
|
||||||
<button type="button" class="btn btn-warning">Sign-up</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="b-example-divider"></div>
|
|
||||||
|
|
||||||
<header class="p-3 mb-3 border-bottom">
|
|
||||||
<div class="container">
|
|
||||||
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
|
|
||||||
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none">
|
|
||||||
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
|
|
||||||
<li><a href="#" class="nav-link px-2 link-secondary">Overview</a></li>
|
|
||||||
<li><a href="#" class="nav-link px-2 link-dark">Inventory</a></li>
|
|
||||||
<li><a href="#" class="nav-link px-2 link-dark">Customers</a></li>
|
|
||||||
<li><a href="#" class="nav-link px-2 link-dark">Products</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
|
|
||||||
<input type="search" class="form-control" placeholder="Search..." aria-label="Search">
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div class="dropdown text-end">
|
|
||||||
<a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
|
|
||||||
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
|
|
||||||
</a>
|
|
||||||
<ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1">
|
|
||||||
<li><a class="dropdown-item" href="#">New project...</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Settings</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Profile</a></li>
|
|
||||||
<li><hr class="dropdown-divider"></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Sign out</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="b-example-divider"></div>
|
|
||||||
|
|
||||||
<header class="py-3 mb-3 border-bottom">
|
|
||||||
<div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;">
|
|
||||||
<div class="dropdown">
|
|
||||||
<a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-dark text-decoration-none dropdown-toggle" id="dropdownNavLink" data-bs-toggle="dropdown" aria-expanded="false">
|
|
||||||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
|
||||||
</a>
|
|
||||||
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownNavLink">
|
|
||||||
<li><a class="dropdown-item active" href="#" aria-current="page">Overview</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Inventory</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Customers</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Products</a></li>
|
|
||||||
<li><hr class="dropdown-divider"></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Reports</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Analytics</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<form class="w-100 me-3">
|
|
||||||
<input type="search" class="form-control" placeholder="Search..." aria-label="Search">
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div class="flex-shrink-0 dropdown">
|
|
||||||
<a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
|
|
||||||
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
|
|
||||||
</a>
|
|
||||||
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
|
|
||||||
<li><a class="dropdown-item" href="#">New project...</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Settings</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Profile</a></li>
|
|
||||||
<li><hr class="dropdown-divider"></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Sign out</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="container-fluid pb-3">
|
|
||||||
<div class="d-grid gap-3" style="grid-template-columns: 1fr 2fr;">
|
|
||||||
<div class="bg-light border rounded-3">
|
|
||||||
<br><br><br><br><br><br><br><br><br><br>
|
|
||||||
</div>
|
|
||||||
<div class="bg-light border rounded-3">
|
|
||||||
<br><br><br><br><br><br><br><br><br><br>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="b-example-divider"></div>
|
|
||||||
|
|
||||||
<nav class="py-2 bg-light border-bottom">
|
|
||||||
<div class="container d-flex flex-wrap">
|
|
||||||
<ul class="nav me-auto">
|
|
||||||
<li class="nav-item"><a href="#" class="nav-link link-dark px-2 active" aria-current="page">Home</a></li>
|
|
||||||
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Features</a></li>
|
|
||||||
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Pricing</a></li>
|
|
||||||
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">FAQs</a></li>
|
|
||||||
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">About</a></li>
|
|
||||||
</ul>
|
|
||||||
<ul class="nav">
|
|
||||||
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Login</a></li>
|
|
||||||
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Sign up</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<header class="py-3 mb-4 border-bottom">
|
|
||||||
<div class="container d-flex flex-wrap justify-content-center">
|
|
||||||
<a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto text-dark text-decoration-none">
|
|
||||||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
|
||||||
<span class="fs-4">Double header</span>
|
|
||||||
</a>
|
|
||||||
<form class="col-12 col-lg-auto mb-3 mb-lg-0">
|
|
||||||
<input type="search" class="form-control" placeholder="Search..." aria-label="Search">
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="b-example-divider"></div>
|
|
||||||
|
|
||||||
<header>
|
|
||||||
<div class="px-3 py-2 bg-dark text-white">
|
|
||||||
<div class="container">
|
|
||||||
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
|
|
||||||
<a href="/" class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none">
|
|
||||||
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
|
|
||||||
<li>
|
|
||||||
<a href="#" class="nav-link text-secondary">
|
|
||||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#home"/></svg>
|
|
||||||
Home
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#" class="nav-link text-white">
|
|
||||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#speedometer2"/></svg>
|
|
||||||
Dashboard
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#" class="nav-link text-white">
|
|
||||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#table"/></svg>
|
|
||||||
Orders
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#" class="nav-link text-white">
|
|
||||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#grid"/></svg>
|
|
||||||
Products
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#" class="nav-link text-white">
|
|
||||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#people-circle"/></svg>
|
|
||||||
Customers
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="px-3 py-2 border-bottom mb-3">
|
|
||||||
<div class="container d-flex flex-wrap justify-content-center">
|
|
||||||
<form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto">
|
|
||||||
<input type="search" class="form-control" placeholder="Search..." aria-label="Search">
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div class="text-end">
|
|
||||||
<button type="button" class="btn btn-light text-dark me-2">Login</button>
|
|
||||||
<button type="button" class="btn btn-primary">Sign-up</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="b-example-divider"></div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 363 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 272 KiB |
|
|
@ -1,11 +0,0 @@
|
||||||
.b-example-divider {
|
|
||||||
height: 3rem;
|
|
||||||
background-color: rgba(0, 0, 0, .1);
|
|
||||||
border: solid rgba(0, 0, 0, .15);
|
|
||||||
border-width: 1px 0;
|
|
||||||
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
|
||||||
.rounded-lg-3 { border-radius: .3rem; }
|
|
||||||
}
|
|
||||||
|
|
@ -1,163 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>Heroes · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/heroes/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
|
||||||
<link href="heroes.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<h1 class="visually-hidden">Heroes examples</h1>
|
|
||||||
|
|
||||||
<div class="px-4 py-5 my-5 text-center">
|
|
||||||
<img class="d-block mx-auto mb-4" src="../assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
|
|
||||||
<h1 class="display-5 fw-bold">Centered hero</h1>
|
|
||||||
<div class="col-lg-6 mx-auto">
|
|
||||||
<p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
|
|
||||||
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
|
|
||||||
<button type="button" class="btn btn-primary btn-lg px-4 gap-3">Primary button</button>
|
|
||||||
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="b-example-divider"></div>
|
|
||||||
|
|
||||||
<div class="px-4 pt-5 my-5 text-center border-bottom">
|
|
||||||
<h1 class="display-4 fw-bold">Centered screenshot</h1>
|
|
||||||
<div class="col-lg-6 mx-auto">
|
|
||||||
<p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
|
|
||||||
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
|
|
||||||
<button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">Primary button</button>
|
|
||||||
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="overflow-hidden" style="max-height: 30vh;">
|
|
||||||
<div class="container px-5">
|
|
||||||
<img src="bootstrap-docs.png" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="b-example-divider"></div>
|
|
||||||
|
|
||||||
<div class="container col-xxl-8 px-4 py-5">
|
|
||||||
<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
|
|
||||||
<div class="col-10 col-sm-8 col-lg-6">
|
|
||||||
<img src="bootstrap-themes.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-6">
|
|
||||||
<h1 class="display-5 fw-bold lh-1 mb-3">Responsive left-aligned hero with image</h1>
|
|
||||||
<p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
|
|
||||||
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
|
|
||||||
<button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Primary</button>
|
|
||||||
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="b-example-divider"></div>
|
|
||||||
|
|
||||||
<div class="container col-xl-10 col-xxl-8 px-4 py-5">
|
|
||||||
<div class="row align-items-center g-lg-5 py-5">
|
|
||||||
<div class="col-lg-7 text-center text-lg-start">
|
|
||||||
<h1 class="display-4 fw-bold lh-1 mb-3">Vertically centered hero sign-up form</h1>
|
|
||||||
<p class="col-lg-10 fs-4">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-10 mx-auto col-lg-5">
|
|
||||||
<form class="p-4 p-md-5 border rounded-3 bg-light">
|
|
||||||
<div class="form-floating mb-3">
|
|
||||||
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
|
|
||||||
<label for="floatingInput">Email address</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-floating mb-3">
|
|
||||||
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
|
|
||||||
<label for="floatingPassword">Password</label>
|
|
||||||
</div>
|
|
||||||
<div class="checkbox mb-3">
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" value="remember-me"> Remember me
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign up</button>
|
|
||||||
<hr class="my-4">
|
|
||||||
<small class="text-muted">By clicking Sign up, you agree to the terms of use.</small>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="b-example-divider"></div>
|
|
||||||
|
|
||||||
<div class="container my-5">
|
|
||||||
<div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
|
|
||||||
<div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
|
|
||||||
<h1 class="display-4 fw-bold lh-1">Border hero with cropped image and shadows</h1>
|
|
||||||
<p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
|
|
||||||
<div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3">
|
|
||||||
<button type="button" class="btn btn-primary btn-lg px-4 me-md-2 fw-bold">Primary</button>
|
|
||||||
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-4 offset-lg-1 p-0 overflow-hidden shadow-lg">
|
|
||||||
<img class="rounded-lg-3" src="bootstrap-docs.png" alt="" width="720">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="b-example-divider"></div>
|
|
||||||
|
|
||||||
<div class="bg-dark text-secondary px-4 py-5 text-center">
|
|
||||||
<div class="py-5">
|
|
||||||
<h1 class="display-5 fw-bold text-white">Dark mode hero</h1>
|
|
||||||
<div class="col-lg-6 mx-auto">
|
|
||||||
<p class="fs-5 mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
|
|
||||||
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
|
|
||||||
<button type="button" class="btn btn-outline-info btn-lg px-4 me-sm-3 fw-bold">Custom button</button>
|
|
||||||
<button type="button" class="btn btn-outline-light btn-lg px-4">Secondary</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="b-example-divider mb-0"></div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,81 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>Jumbotron example · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/jumbotron/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<div class="container py-4">
|
|
||||||
<header class="pb-3 mb-4 border-bottom">
|
|
||||||
<a href="/" class="d-flex align-items-center text-dark text-decoration-none">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
|
|
||||||
<span class="fs-4">Jumbotron example</span>
|
|
||||||
</a>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="p-5 mb-4 bg-light rounded-3">
|
|
||||||
<div class="container-fluid py-5">
|
|
||||||
<h1 class="display-5 fw-bold">Custom jumbotron</h1>
|
|
||||||
<p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p>
|
|
||||||
<button class="btn btn-primary btn-lg" type="button">Example button</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row align-items-md-stretch">
|
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="h-100 p-5 text-white bg-dark rounded-3">
|
|
||||||
<h2>Change the background</h2>
|
|
||||||
<p>Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.</p>
|
|
||||||
<button class="btn btn-outline-light" type="button">Example button</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="h-100 p-5 bg-light border rounded-3">
|
|
||||||
<h2>Add borders</h2>
|
|
||||||
<p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p>
|
|
||||||
<button class="btn btn-outline-secondary" type="button">Example button</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<footer class="pt-3 mt-4 text-muted border-top">
|
|
||||||
© 2021
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,143 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>Masonry example · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/masonry/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<main class="container py-5">
|
|
||||||
<h1>Bootstrap and Masonry</h1>
|
|
||||||
<p class="lead">Integrate <a href="https://masonry.desandro.com/">Masonry</a> with the Bootstrap grid system and cards component.</p>
|
|
||||||
|
|
||||||
<p>Masonry is not included in Bootstrap. Add it by including the JavaScript plugin manually, or using a CDN like so:</p>
|
|
||||||
|
|
||||||
<pre><code>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
|
|
||||||
</code></pre>
|
|
||||||
|
|
||||||
<p>By adding <code>data-masonry='{"percentPosition": true }'</code> to the <code>.row</code> wrapper, we can combine the powers of Bootstrap's responsive grid and Masonry's positioning.</p>
|
|
||||||
|
|
||||||
<hr class="my-5">
|
|
||||||
|
|
||||||
<div class="row" data-masonry='{"percentPosition": true }'>
|
|
||||||
<div class="col-sm-6 col-lg-4 mb-4">
|
|
||||||
<div class="card">
|
|
||||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
|
||||||
|
|
||||||
<div class="card-body">
|
|
||||||
<h5 class="card-title">Card title that wraps to a new line</h5>
|
|
||||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6 col-lg-4 mb-4">
|
|
||||||
<div class="card p-3">
|
|
||||||
<figure class="p-3 mb-0">
|
|
||||||
<blockquote class="blockquote">
|
|
||||||
<p>A well-known quote, contained in a blockquote element.</p>
|
|
||||||
</blockquote>
|
|
||||||
<figcaption class="blockquote-footer mb-0 text-muted">
|
|
||||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6 col-lg-4 mb-4">
|
|
||||||
<div class="card">
|
|
||||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
|
||||||
|
|
||||||
<div class="card-body">
|
|
||||||
<h5 class="card-title">Card title</h5>
|
|
||||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
|
||||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6 col-lg-4 mb-4">
|
|
||||||
<div class="card bg-primary text-white text-center p-3">
|
|
||||||
<figure class="mb-0">
|
|
||||||
<blockquote class="blockquote">
|
|
||||||
<p>A well-known quote, contained in a blockquote element.</p>
|
|
||||||
</blockquote>
|
|
||||||
<figcaption class="blockquote-footer mb-0 text-white">
|
|
||||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6 col-lg-4 mb-4">
|
|
||||||
<div class="card text-center">
|
|
||||||
<div class="card-body">
|
|
||||||
<h5 class="card-title">Card title</h5>
|
|
||||||
<p class="card-text">This card has a regular title and short paragraph of text below it.</p>
|
|
||||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6 col-lg-4 mb-4">
|
|
||||||
<div class="card">
|
|
||||||
<svg class="bd-placeholder-img card-img" width="100%" height="260" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Card image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Card image</text></svg>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6 col-lg-4 mb-4">
|
|
||||||
<div class="card p-3 text-end">
|
|
||||||
<figure class="mb-0">
|
|
||||||
<blockquote class="blockquote">
|
|
||||||
<p>A well-known quote, contained in a blockquote element.</p>
|
|
||||||
</blockquote>
|
|
||||||
<figcaption class="blockquote-footer mb-0 text-muted">
|
|
||||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6 col-lg-4 mb-4">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-body">
|
|
||||||
<h5 class="card-title">Card title</h5>
|
|
||||||
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
|
|
||||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
<script async src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,80 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>Bottom navbar example · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/navbar-bottom/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="bg-light p-5 rounded mt-3">
|
|
||||||
<h1>Bottom Navbar example</h1>
|
|
||||||
<p class="lead">This example is a quick exercise to illustrate how the bottom navbar works.</p>
|
|
||||||
<a class="btn btn-lg btn-primary" href="../components/navbar/" role="button">View navbar docs »</a>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<a class="navbar-brand" href="#">Bottom navbar</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
|
||||||
<ul class="navbar-nav">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Link</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropup">
|
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-bs-toggle="dropdown" aria-expanded="false">Dropup</a>
|
|
||||||
<ul class="dropdown-menu" aria-labelledby="dropdown10">
|
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,79 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>Fixed top navbar example · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/navbar-fixed/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
|
||||||
<link href="navbar-top-fixed.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<a class="navbar-brand" href="#">Fixed navbar</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
|
||||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Link</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<form class="d-flex">
|
|
||||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
|
||||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="bg-light p-5 rounded">
|
|
||||||
<h1>Navbar example</h1>
|
|
||||||
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
|
|
||||||
<a class="btn btn-lg btn-primary" href="../components/navbar/" role="button">View navbar docs »</a>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
/* Show it is fixed to the top */
|
|
||||||
body {
|
|
||||||
min-height: 75rem;
|
|
||||||
padding-top: 4.5rem;
|
|
||||||
}
|
|
||||||
|
|
@ -1,79 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>Top navbar example · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/navbar-static/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
|
||||||
<link href="navbar-top.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<a class="navbar-brand" href="#">Top navbar</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
|
||||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Link</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<form class="d-flex">
|
|
||||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
|
||||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="bg-light p-5 rounded">
|
|
||||||
<h1>Navbar example</h1>
|
|
||||||
<p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
|
|
||||||
<a class="btn btn-lg btn-primary" href="../components/navbar/" role="button">View navbar docs »</a>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
/* Show it's not fixed to the top */
|
|
||||||
body {
|
|
||||||
min-height: 75rem;
|
|
||||||
}
|
|
||||||
|
|
@ -1,455 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>Navbar Template · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/navbars/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
|
||||||
<link href="navbar.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<nav class="navbar navbar-dark bg-dark" aria-label="First navbar example">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<a class="navbar-brand" href="#">Never expand</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarsExample01">
|
|
||||||
<ul class="navbar-nav me-auto mb-2">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Link</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
|
||||||
<ul class="dropdown-menu" aria-labelledby="dropdown01">
|
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<form>
|
|
||||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<nav class="navbar navbar-expand navbar-dark bg-dark" aria-label="Second navbar example">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<a class="navbar-brand" href="#">Always expand</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarsExample02">
|
|
||||||
<ul class="navbar-nav me-auto">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Link</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<form>
|
|
||||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-sm navbar-dark bg-dark" aria-label="Third navbar example">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<a class="navbar-brand" href="#">Expand at sm</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarsExample03">
|
|
||||||
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Link</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown03" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
|
||||||
<ul class="dropdown-menu" aria-labelledby="dropdown03">
|
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<form>
|
|
||||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-md navbar-dark bg-dark" aria-label="Fourth navbar example">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<a class="navbar-brand" href="#">Expand at md</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarsExample04">
|
|
||||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Link</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown04" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
|
||||||
<ul class="dropdown-menu" aria-labelledby="dropdown04">
|
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<form>
|
|
||||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Fifth navbar example">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<a class="navbar-brand" href="#">Expand at lg</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarsExample05">
|
|
||||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Link</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown05" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
|
||||||
<ul class="dropdown-menu" aria-labelledby="dropdown05">
|
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<form>
|
|
||||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-xl navbar-dark bg-dark" aria-label="Sixth navbar example">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<a class="navbar-brand" href="#">Expand at xl</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarsExample06">
|
|
||||||
<ul class="navbar-nav me-auto mb-2 mb-xl-0">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Link</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown06" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
|
||||||
<ul class="dropdown-menu" aria-labelledby="dropdown06">
|
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<form>
|
|
||||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-xxl navbar-dark bg-dark" aria-label="Seventh navbar example">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<a class="navbar-brand" href="#">Expand at xxl</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExampleXxl" aria-controls="navbarsExampleXxl" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarsExampleXxl">
|
|
||||||
<ul class="navbar-nav me-auto mb-2 mb-xl-0">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Link</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="dropdownXxl" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
|
||||||
<ul class="dropdown-menu" aria-labelledby="dropdownXxl">
|
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<form>
|
|
||||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Eighth navbar example">
|
|
||||||
<div class="container">
|
|
||||||
<a class="navbar-brand" href="#">Container</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarsExample07">
|
|
||||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Link</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown07" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
|
||||||
<ul class="dropdown-menu" aria-labelledby="dropdown07">
|
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<form>
|
|
||||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Ninth navbar example">
|
|
||||||
<div class="container-xl">
|
|
||||||
<a class="navbar-brand" href="#">Container XL</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample07XL" aria-controls="navbarsExample07XL" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarsExample07XL">
|
|
||||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Link</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown07XL" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
|
||||||
<ul class="dropdown-menu" aria-labelledby="dropdown07XL">
|
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<form>
|
|
||||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div class="container-xl mb-4">
|
|
||||||
<p>Matching .container-xl...</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Tenth navbar example">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
|
|
||||||
<ul class="navbar-nav">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link active" aria-current="page" href="#">Centered nav only</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Link</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
|
||||||
<ul class="dropdown-menu" aria-labelledby="dropdown08">
|
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded" aria-label="Eleventh navbar example">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<a class="navbar-brand" href="#">Navbar</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarsExample09">
|
|
||||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Link</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
|
||||||
<ul class="dropdown-menu" aria-labelledby="dropdown09">
|
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<form>
|
|
||||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded" aria-label="Twelfth navbar example">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample10">
|
|
||||||
<ul class="navbar-nav">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link active" aria-current="page" href="#">Centered nav only</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Link</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
|
||||||
<ul class="dropdown-menu" aria-labelledby="dropdown10">
|
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div class="bg-light p-5 rounded">
|
|
||||||
<div class="col-sm-8 mx-auto">
|
|
||||||
<h1>Navbar examples</h1>
|
|
||||||
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="../examples/navbar-static/">top</a> and <a href="../examples/navbar-fixed/">fixed top</a> examples.</p>
|
|
||||||
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
|
|
||||||
<p>
|
|
||||||
<a class="btn btn-primary" href="../components/navbar/" role="button">View navbar docs »</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
body {
|
|
||||||
padding-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
@ -1,181 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>Offcanvas navbar template · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/offcanvas-navbar/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
|
||||||
<link href="offcanvas.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body class="bg-light">
|
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<a class="navbar-brand" href="#">Offcanvas navbar</a>
|
|
||||||
<button class="navbar-toggler p-0 border-0" type="button" id="navbarSideCollapse" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
|
|
||||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link active" aria-current="page" href="#">Dashboard</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Notifications</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Profile</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Switch account</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Settings</a>
|
|
||||||
<ul class="dropdown-menu" aria-labelledby="dropdown01">
|
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<form class="d-flex">
|
|
||||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
|
||||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div class="nav-scroller bg-body shadow-sm">
|
|
||||||
<nav class="nav nav-underline" aria-label="Secondary navigation">
|
|
||||||
<a class="nav-link active" aria-current="page" href="#">Dashboard</a>
|
|
||||||
<a class="nav-link" href="#">
|
|
||||||
Friends
|
|
||||||
<span class="badge bg-light text-dark rounded-pill align-text-bottom">27</span>
|
|
||||||
</a>
|
|
||||||
<a class="nav-link" href="#">Explore</a>
|
|
||||||
<a class="nav-link" href="#">Suggestions</a>
|
|
||||||
<a class="nav-link" href="#">Link</a>
|
|
||||||
<a class="nav-link" href="#">Link</a>
|
|
||||||
<a class="nav-link" href="#">Link</a>
|
|
||||||
<a class="nav-link" href="#">Link</a>
|
|
||||||
<a class="nav-link" href="#">Link</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="d-flex align-items-center p-3 my-3 text-white bg-purple rounded shadow-sm">
|
|
||||||
<img class="me-3" src="../assets/brand/bootstrap-logo-white.svg" alt="" width="48" height="38">
|
|
||||||
<div class="lh-1">
|
|
||||||
<h1 class="h6 mb-0 text-white lh-1">Bootstrap</h1>
|
|
||||||
<small>Since 2011</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="my-3 p-3 bg-body rounded shadow-sm">
|
|
||||||
<h6 class="border-bottom pb-2 mb-0">Recent updates</h6>
|
|
||||||
<div class="d-flex text-muted pt-3">
|
|
||||||
<svg class="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 32x32" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#007bff"/><text x="50%" y="50%" fill="#007bff" dy=".3em">32x32</text></svg>
|
|
||||||
|
|
||||||
<p class="pb-3 mb-0 small lh-sm border-bottom">
|
|
||||||
<strong class="d-block text-gray-dark">@username</strong>
|
|
||||||
Some representative placeholder content, with some information about this user. Imagine this being some sort of status update, perhaps?
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex text-muted pt-3">
|
|
||||||
<svg class="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 32x32" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#e83e8c"/><text x="50%" y="50%" fill="#e83e8c" dy=".3em">32x32</text></svg>
|
|
||||||
|
|
||||||
<p class="pb-3 mb-0 small lh-sm border-bottom">
|
|
||||||
<strong class="d-block text-gray-dark">@username</strong>
|
|
||||||
Some more representative placeholder content, related to this other user. Another status update, perhaps.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex text-muted pt-3">
|
|
||||||
<svg class="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 32x32" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#6f42c1"/><text x="50%" y="50%" fill="#6f42c1" dy=".3em">32x32</text></svg>
|
|
||||||
|
|
||||||
<p class="pb-3 mb-0 small lh-sm border-bottom">
|
|
||||||
<strong class="d-block text-gray-dark">@username</strong>
|
|
||||||
This user also gets some representative placeholder content. Maybe they did something interesting, and you really want to highlight this in the recent updates.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<small class="d-block text-end mt-3">
|
|
||||||
<a href="#">All updates</a>
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="my-3 p-3 bg-body rounded shadow-sm">
|
|
||||||
<h6 class="border-bottom pb-2 mb-0">Suggestions</h6>
|
|
||||||
<div class="d-flex text-muted pt-3">
|
|
||||||
<svg class="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 32x32" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#007bff"/><text x="50%" y="50%" fill="#007bff" dy=".3em">32x32</text></svg>
|
|
||||||
|
|
||||||
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
|
|
||||||
<div class="d-flex justify-content-between">
|
|
||||||
<strong class="text-gray-dark">Full Name</strong>
|
|
||||||
<a href="#">Follow</a>
|
|
||||||
</div>
|
|
||||||
<span class="d-block">@username</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex text-muted pt-3">
|
|
||||||
<svg class="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 32x32" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#007bff"/><text x="50%" y="50%" fill="#007bff" dy=".3em">32x32</text></svg>
|
|
||||||
|
|
||||||
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
|
|
||||||
<div class="d-flex justify-content-between">
|
|
||||||
<strong class="text-gray-dark">Full Name</strong>
|
|
||||||
<a href="#">Follow</a>
|
|
||||||
</div>
|
|
||||||
<span class="d-block">@username</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex text-muted pt-3">
|
|
||||||
<svg class="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 32x32" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#007bff"/><text x="50%" y="50%" fill="#007bff" dy=".3em">32x32</text></svg>
|
|
||||||
|
|
||||||
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
|
|
||||||
<div class="d-flex justify-content-between">
|
|
||||||
<strong class="text-gray-dark">Full Name</strong>
|
|
||||||
<a href="#">Follow</a>
|
|
||||||
</div>
|
|
||||||
<span class="d-block">@username</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<small class="d-block text-end mt-3">
|
|
||||||
<a href="#">All suggestions</a>
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
<script src="offcanvas.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,67 +0,0 @@
|
||||||
html,
|
|
||||||
body {
|
|
||||||
overflow-x: hidden; /* Prevent scroll on narrow devices */
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
padding-top: 56px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 991.98px) {
|
|
||||||
.offcanvas-collapse {
|
|
||||||
position: fixed;
|
|
||||||
top: 56px; /* Height of navbar */
|
|
||||||
bottom: 0;
|
|
||||||
left: 100%;
|
|
||||||
width: 100%;
|
|
||||||
padding-right: 1rem;
|
|
||||||
padding-left: 1rem;
|
|
||||||
overflow-y: auto;
|
|
||||||
visibility: hidden;
|
|
||||||
background-color: #343a40;
|
|
||||||
transition: transform .3s ease-in-out, visibility .3s ease-in-out;
|
|
||||||
}
|
|
||||||
.offcanvas-collapse.open {
|
|
||||||
visibility: visible;
|
|
||||||
transform: translateX(-100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-scroller {
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
height: 2.75rem;
|
|
||||||
overflow-y: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-scroller .nav {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
margin-top: -1px;
|
|
||||||
overflow-x: auto;
|
|
||||||
color: rgba(255, 255, 255, .75);
|
|
||||||
text-align: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-underline .nav-link {
|
|
||||||
padding-top: .75rem;
|
|
||||||
padding-bottom: .75rem;
|
|
||||||
font-size: .875rem;
|
|
||||||
color: #6c757d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-underline .nav-link:hover {
|
|
||||||
color: #007bff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-underline .active {
|
|
||||||
font-weight: 500;
|
|
||||||
color: #343a40;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-white-50 { color: rgba(255, 255, 255, .5); }
|
|
||||||
|
|
||||||
.bg-purple { background-color: #6f42c1; }
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
(function () {
|
|
||||||
'use strict'
|
|
||||||
|
|
||||||
document.querySelector('#navbarSideCollapse').addEventListener('click', function () {
|
|
||||||
document.querySelector('.offcanvas-collapse').classList.toggle('open')
|
|
||||||
})
|
|
||||||
})()
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<title>https://getbootstrap.com/docs/5.0/examples/offcanvas-navbar/</title>
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/offcanvas-navbar/">
|
|
||||||
<meta name="robots" content="noindex">
|
|
||||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/5.0/examples/offcanvas-navbar/">
|
|
||||||
</head>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
|
|
@ -1,223 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>Pricing example · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/pricing/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
|
||||||
<link href="pricing.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
|
||||||
<symbol id="check" viewBox="0 0 16 16">
|
|
||||||
<title>Check</title>
|
|
||||||
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
|
|
||||||
</symbol>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<div class="container py-3">
|
|
||||||
<header>
|
|
||||||
<div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
|
|
||||||
<a href="/" class="d-flex align-items-center text-dark text-decoration-none">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
|
|
||||||
<span class="fs-4">Pricing example</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
|
|
||||||
<a class="me-3 py-2 text-dark text-decoration-none" href="#">Features</a>
|
|
||||||
<a class="me-3 py-2 text-dark text-decoration-none" href="#">Enterprise</a>
|
|
||||||
<a class="me-3 py-2 text-dark text-decoration-none" href="#">Support</a>
|
|
||||||
<a class="py-2 text-dark text-decoration-none" href="#">Pricing</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="pricing-header p-3 pb-md-4 mx-auto text-center">
|
|
||||||
<h1 class="display-4 fw-normal">Pricing</h1>
|
|
||||||
<p class="fs-5 text-muted">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
|
|
||||||
<div class="col">
|
|
||||||
<div class="card mb-4 rounded-3 shadow-sm">
|
|
||||||
<div class="card-header py-3">
|
|
||||||
<h4 class="my-0 fw-normal">Free</h4>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<h1 class="card-title pricing-card-title">$0<small class="text-muted fw-light">/mo</small></h1>
|
|
||||||
<ul class="list-unstyled mt-3 mb-4">
|
|
||||||
<li>10 users included</li>
|
|
||||||
<li>2 GB of storage</li>
|
|
||||||
<li>Email support</li>
|
|
||||||
<li>Help center access</li>
|
|
||||||
</ul>
|
|
||||||
<button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign up for free</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card mb-4 rounded-3 shadow-sm">
|
|
||||||
<div class="card-header py-3">
|
|
||||||
<h4 class="my-0 fw-normal">Pro</h4>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<h1 class="card-title pricing-card-title">$15<small class="text-muted fw-light">/mo</small></h1>
|
|
||||||
<ul class="list-unstyled mt-3 mb-4">
|
|
||||||
<li>20 users included</li>
|
|
||||||
<li>10 GB of storage</li>
|
|
||||||
<li>Priority email support</li>
|
|
||||||
<li>Help center access</li>
|
|
||||||
</ul>
|
|
||||||
<button type="button" class="w-100 btn btn-lg btn-primary">Get started</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card mb-4 rounded-3 shadow-sm border-primary">
|
|
||||||
<div class="card-header py-3 text-white bg-primary border-primary">
|
|
||||||
<h4 class="my-0 fw-normal">Enterprise</h4>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<h1 class="card-title pricing-card-title">$29<small class="text-muted fw-light">/mo</small></h1>
|
|
||||||
<ul class="list-unstyled mt-3 mb-4">
|
|
||||||
<li>30 users included</li>
|
|
||||||
<li>15 GB of storage</li>
|
|
||||||
<li>Phone and email support</li>
|
|
||||||
<li>Help center access</li>
|
|
||||||
</ul>
|
|
||||||
<button type="button" class="w-100 btn btn-lg btn-primary">Contact us</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2 class="display-6 text-center mb-4">Compare plans</h2>
|
|
||||||
|
|
||||||
<div class="table-responsive">
|
|
||||||
<table class="table text-center">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th style="width: 34%;"></th>
|
|
||||||
<th style="width: 22%;">Free</th>
|
|
||||||
<th style="width: 22%;">Pro</th>
|
|
||||||
<th style="width: 22%;">Enterprise</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<th scope="row" class="text-start">Public</th>
|
|
||||||
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
|
|
||||||
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
|
|
||||||
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="row" class="text-start">Private</th>
|
|
||||||
<td></td>
|
|
||||||
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
|
|
||||||
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<th scope="row" class="text-start">Permissions</th>
|
|
||||||
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
|
|
||||||
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
|
|
||||||
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="row" class="text-start">Sharing</th>
|
|
||||||
<td></td>
|
|
||||||
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
|
|
||||||
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="row" class="text-start">Unlimited members</th>
|
|
||||||
<td></td>
|
|
||||||
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
|
|
||||||
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="row" class="text-start">Extra security</th>
|
|
||||||
<td></td>
|
|
||||||
<td></td>
|
|
||||||
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="pt-4 my-md-5 pt-md-5 border-top">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-12 col-md">
|
|
||||||
<img class="mb-2" src="../assets/brand/bootstrap-logo.svg" alt="" width="24" height="19">
|
|
||||||
<small class="d-block mb-3 text-muted">© 2017–2021</small>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 col-md">
|
|
||||||
<h5>Features</h5>
|
|
||||||
<ul class="list-unstyled text-small">
|
|
||||||
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Cool stuff</a></li>
|
|
||||||
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Random feature</a></li>
|
|
||||||
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team feature</a></li>
|
|
||||||
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Stuff for developers</a></li>
|
|
||||||
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another one</a></li>
|
|
||||||
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Last time</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 col-md">
|
|
||||||
<h5>Resources</h5>
|
|
||||||
<ul class="list-unstyled text-small">
|
|
||||||
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Resource</a></li>
|
|
||||||
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Resource name</a></li>
|
|
||||||
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another resource</a></li>
|
|
||||||
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Final resource</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 col-md">
|
|
||||||
<h5>About</h5>
|
|
||||||
<ul class="list-unstyled text-small">
|
|
||||||
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team</a></li>
|
|
||||||
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Locations</a></li>
|
|
||||||
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Privacy</a></li>
|
|
||||||
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Terms</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
body {
|
|
||||||
background-image: linear-gradient(180deg, #eee, #fff 100px, #fff);
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
max-width: 960px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-header {
|
|
||||||
max-width: 700px;
|
|
||||||
}
|
|
||||||
|
|
@ -1,187 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>Product example · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/product/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
|
||||||
<link href="product.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<header class="site-header sticky-top py-1">
|
|
||||||
<nav class="container d-flex flex-column flex-md-row justify-content-between">
|
|
||||||
<a class="py-2" href="#" aria-label="Product">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mx-auto" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg>
|
|
||||||
</a>
|
|
||||||
<a class="py-2 d-none d-md-inline-block" href="#">Tour</a>
|
|
||||||
<a class="py-2 d-none d-md-inline-block" href="#">Product</a>
|
|
||||||
<a class="py-2 d-none d-md-inline-block" href="#">Features</a>
|
|
||||||
<a class="py-2 d-none d-md-inline-block" href="#">Enterprise</a>
|
|
||||||
<a class="py-2 d-none d-md-inline-block" href="#">Support</a>
|
|
||||||
<a class="py-2 d-none d-md-inline-block" href="#">Pricing</a>
|
|
||||||
<a class="py-2 d-none d-md-inline-block" href="#">Cart</a>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
|
|
||||||
<div class="col-md-5 p-lg-5 mx-auto my-5">
|
|
||||||
<h1 class="display-4 fw-normal">Punny headline</h1>
|
|
||||||
<p class="lead fw-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple’s marketing pages.</p>
|
|
||||||
<a class="btn btn-outline-secondary" href="#">Coming soon</a>
|
|
||||||
</div>
|
|
||||||
<div class="product-device shadow-sm d-none d-md-block"></div>
|
|
||||||
<div class="product-device product-device-2 shadow-sm d-none d-md-block"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
|
|
||||||
<div class="bg-dark me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
|
|
||||||
<div class="my-3 py-3">
|
|
||||||
<h2 class="display-5">Another headline</h2>
|
|
||||||
<p class="lead">And an even wittier subheading.</p>
|
|
||||||
</div>
|
|
||||||
<div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
|
|
||||||
<div class="my-3 p-3">
|
|
||||||
<h2 class="display-5">Another headline</h2>
|
|
||||||
<p class="lead">And an even wittier subheading.</p>
|
|
||||||
</div>
|
|
||||||
<div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
|
|
||||||
<div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
|
|
||||||
<div class="my-3 p-3">
|
|
||||||
<h2 class="display-5">Another headline</h2>
|
|
||||||
<p class="lead">And an even wittier subheading.</p>
|
|
||||||
</div>
|
|
||||||
<div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="bg-primary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
|
|
||||||
<div class="my-3 py-3">
|
|
||||||
<h2 class="display-5">Another headline</h2>
|
|
||||||
<p class="lead">And an even wittier subheading.</p>
|
|
||||||
</div>
|
|
||||||
<div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
|
|
||||||
<div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
|
|
||||||
<div class="my-3 p-3">
|
|
||||||
<h2 class="display-5">Another headline</h2>
|
|
||||||
<p class="lead">And an even wittier subheading.</p>
|
|
||||||
</div>
|
|
||||||
<div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
|
|
||||||
<div class="my-3 py-3">
|
|
||||||
<h2 class="display-5">Another headline</h2>
|
|
||||||
<p class="lead">And an even wittier subheading.</p>
|
|
||||||
</div>
|
|
||||||
<div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
|
|
||||||
<div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
|
|
||||||
<div class="my-3 p-3">
|
|
||||||
<h2 class="display-5">Another headline</h2>
|
|
||||||
<p class="lead">And an even wittier subheading.</p>
|
|
||||||
</div>
|
|
||||||
<div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
|
|
||||||
<div class="my-3 py-3">
|
|
||||||
<h2 class="display-5">Another headline</h2>
|
|
||||||
<p class="lead">And an even wittier subheading.</p>
|
|
||||||
</div>
|
|
||||||
<div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="container py-5">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-12 col-md">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mb-2" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg>
|
|
||||||
<small class="d-block mb-3 text-muted">© 2017–2021</small>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 col-md">
|
|
||||||
<h5>Features</h5>
|
|
||||||
<ul class="list-unstyled text-small">
|
|
||||||
<li><a class="link-secondary" href="#">Cool stuff</a></li>
|
|
||||||
<li><a class="link-secondary" href="#">Random feature</a></li>
|
|
||||||
<li><a class="link-secondary" href="#">Team feature</a></li>
|
|
||||||
<li><a class="link-secondary" href="#">Stuff for developers</a></li>
|
|
||||||
<li><a class="link-secondary" href="#">Another one</a></li>
|
|
||||||
<li><a class="link-secondary" href="#">Last time</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 col-md">
|
|
||||||
<h5>Resources</h5>
|
|
||||||
<ul class="list-unstyled text-small">
|
|
||||||
<li><a class="link-secondary" href="#">Resource name</a></li>
|
|
||||||
<li><a class="link-secondary" href="#">Resource</a></li>
|
|
||||||
<li><a class="link-secondary" href="#">Another resource</a></li>
|
|
||||||
<li><a class="link-secondary" href="#">Final resource</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 col-md">
|
|
||||||
<h5>Resources</h5>
|
|
||||||
<ul class="list-unstyled text-small">
|
|
||||||
<li><a class="link-secondary" href="#">Business</a></li>
|
|
||||||
<li><a class="link-secondary" href="#">Education</a></li>
|
|
||||||
<li><a class="link-secondary" href="#">Government</a></li>
|
|
||||||
<li><a class="link-secondary" href="#">Gaming</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 col-md">
|
|
||||||
<h5>About</h5>
|
|
||||||
<ul class="list-unstyled text-small">
|
|
||||||
<li><a class="link-secondary" href="#">Team</a></li>
|
|
||||||
<li><a class="link-secondary" href="#">Locations</a></li>
|
|
||||||
<li><a class="link-secondary" href="#">Privacy</a></li>
|
|
||||||
<li><a class="link-secondary" href="#">Terms</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,69 +0,0 @@
|
||||||
.container {
|
|
||||||
max-width: 960px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Custom translucent site header
|
|
||||||
*/
|
|
||||||
|
|
||||||
.site-header {
|
|
||||||
background-color: rgba(0, 0, 0, .85);
|
|
||||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
|
||||||
backdrop-filter: saturate(180%) blur(20px);
|
|
||||||
}
|
|
||||||
.site-header a {
|
|
||||||
color: #8e8e8e;
|
|
||||||
transition: color .15s ease-in-out;
|
|
||||||
}
|
|
||||||
.site-header a:hover {
|
|
||||||
color: #fff;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Dummy devices (replace them with your own or something else entirely!)
|
|
||||||
*/
|
|
||||||
|
|
||||||
.product-device {
|
|
||||||
position: absolute;
|
|
||||||
right: 10%;
|
|
||||||
bottom: -30%;
|
|
||||||
width: 300px;
|
|
||||||
height: 540px;
|
|
||||||
background-color: #333;
|
|
||||||
border-radius: 21px;
|
|
||||||
transform: rotate(30deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-device::before {
|
|
||||||
position: absolute;
|
|
||||||
top: 10%;
|
|
||||||
right: 10px;
|
|
||||||
bottom: 10%;
|
|
||||||
left: 10px;
|
|
||||||
content: "";
|
|
||||||
background-color: rgba(255, 255, 255, .1);
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-device-2 {
|
|
||||||
top: -25%;
|
|
||||||
right: auto;
|
|
||||||
bottom: 0;
|
|
||||||
left: 5%;
|
|
||||||
background-color: #e5e5e5;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Extra utilities
|
|
||||||
*/
|
|
||||||
|
|
||||||
.flex-equal > * {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.flex-md-equal > * {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,427 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>Sidebars · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/sidebars/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
|
||||||
<link href="sidebars.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
|
||||||
<symbol id="bootstrap" viewBox="0 0 118 94">
|
|
||||||
<title>Bootstrap</title>
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="home" viewBox="0 0 16 16">
|
|
||||||
<path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="speedometer2" viewBox="0 0 16 16">
|
|
||||||
<path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
|
|
||||||
<path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="table" viewBox="0 0 16 16">
|
|
||||||
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="people-circle" viewBox="0 0 16 16">
|
|
||||||
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
|
|
||||||
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="grid" viewBox="0 0 16 16">
|
|
||||||
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="collection" viewBox="0 0 16 16">
|
|
||||||
<path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="calendar3" viewBox="0 0 16 16">
|
|
||||||
<path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
|
|
||||||
<path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="chat-quote-fill" viewBox="0 0 16 16">
|
|
||||||
<path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7.194 6.766a1.688 1.688 0 0 0-.227-.272 1.467 1.467 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 5.734 6C4.776 6 4 6.746 4 7.667c0 .92.776 1.666 1.734 1.666.343 0 .662-.095.931-.26-.137.389-.39.804-.81 1.22a.405.405 0 0 0 .011.59c.173.16.447.155.614-.01 1.334-1.329 1.37-2.758.941-3.706a2.461 2.461 0 0 0-.227-.4zM11 9.073c-.136.389-.39.804-.81 1.22a.405.405 0 0 0 .012.59c.172.16.446.155.613-.01 1.334-1.329 1.37-2.758.942-3.706a2.466 2.466 0 0 0-.228-.4 1.686 1.686 0 0 0-.227-.273 1.466 1.466 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 10.07 6c-.957 0-1.734.746-1.734 1.667 0 .92.777 1.666 1.734 1.666.343 0 .662-.095.931-.26z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="cpu-fill" viewBox="0 0 16 16">
|
|
||||||
<path d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
|
|
||||||
<path d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="gear-fill" viewBox="0 0 16 16">
|
|
||||||
<path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="speedometer" viewBox="0 0 16 16">
|
|
||||||
<path d="M8 2a.5.5 0 0 1 .5.5V4a.5.5 0 0 1-1 0V2.5A.5.5 0 0 1 8 2zM3.732 3.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 8a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 7.31A.91.91 0 1 0 8.85 8.569l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
|
|
||||||
<path fill-rule="evenodd" d="M6.664 15.889A8 8 0 1 1 9.336.11a8 8 0 0 1-2.672 15.78zm-4.665-4.283A11.945 11.945 0 0 1 8 10c2.186 0 4.236.585 6.001 1.606a7 7 0 1 0-12.002 0z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="toggles2" viewBox="0 0 16 16">
|
|
||||||
<path d="M9.465 10H12a2 2 0 1 1 0 4H9.465c.34-.588.535-1.271.535-2 0-.729-.195-1.412-.535-2z"/>
|
|
||||||
<path d="M6 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 1a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm.535-10a3.975 3.975 0 0 1-.409-1H4a1 1 0 0 1 0-2h2.126c.091-.355.23-.69.41-1H4a2 2 0 1 0 0 4h2.535z"/>
|
|
||||||
<path d="M14 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="tools" viewBox="0 0 16 16">
|
|
||||||
<path d="M1 0L0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="chevron-right" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="geo-fill" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"/>
|
|
||||||
</symbol>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<h1 class="visually-hidden">Sidebars examples</h1>
|
|
||||||
|
|
||||||
<div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark" style="width: 280px;">
|
|
||||||
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
|
|
||||||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
|
||||||
<span class="fs-4">Sidebar</span>
|
|
||||||
</a>
|
|
||||||
<hr>
|
|
||||||
<ul class="nav nav-pills flex-column mb-auto">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a href="#" class="nav-link active" aria-current="page">
|
|
||||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg>
|
|
||||||
Home
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#" class="nav-link text-white">
|
|
||||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
|
|
||||||
Dashboard
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#" class="nav-link text-white">
|
|
||||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg>
|
|
||||||
Orders
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#" class="nav-link text-white">
|
|
||||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
|
|
||||||
Products
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#" class="nav-link text-white">
|
|
||||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
|
|
||||||
Customers
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<hr>
|
|
||||||
<div class="dropdown">
|
|
||||||
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
|
|
||||||
<img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
|
|
||||||
<strong>mdo</strong>
|
|
||||||
</a>
|
|
||||||
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
|
|
||||||
<li><a class="dropdown-item" href="#">New project...</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Settings</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Profile</a></li>
|
|
||||||
<li><hr class="dropdown-divider"></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Sign out</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="b-example-divider"></div>
|
|
||||||
|
|
||||||
<div class="d-flex flex-column flex-shrink-0 p-3 bg-light" style="width: 280px;">
|
|
||||||
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
|
|
||||||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
|
||||||
<span class="fs-4">Sidebar</span>
|
|
||||||
</a>
|
|
||||||
<hr>
|
|
||||||
<ul class="nav nav-pills flex-column mb-auto">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a href="#" class="nav-link active" aria-current="page">
|
|
||||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg>
|
|
||||||
Home
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#" class="nav-link link-dark">
|
|
||||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
|
|
||||||
Dashboard
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#" class="nav-link link-dark">
|
|
||||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg>
|
|
||||||
Orders
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#" class="nav-link link-dark">
|
|
||||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
|
|
||||||
Products
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#" class="nav-link link-dark">
|
|
||||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
|
|
||||||
Customers
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<hr>
|
|
||||||
<div class="dropdown">
|
|
||||||
<a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
|
|
||||||
<img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
|
|
||||||
<strong>mdo</strong>
|
|
||||||
</a>
|
|
||||||
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
|
|
||||||
<li><a class="dropdown-item" href="#">New project...</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Settings</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Profile</a></li>
|
|
||||||
<li><hr class="dropdown-divider"></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Sign out</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="b-example-divider"></div>
|
|
||||||
|
|
||||||
<div class="d-flex flex-column flex-shrink-0 bg-light" style="width: 4.5rem;">
|
|
||||||
<a href="/" class="d-block p-3 link-dark text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
|
|
||||||
<svg class="bi" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
|
||||||
<span class="visually-hidden">Icon-only</span>
|
|
||||||
</a>
|
|
||||||
<ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a href="#" class="nav-link active py-3 border-bottom" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right">
|
|
||||||
<svg class="bi" width="24" height="24" role="img" aria-label="Home"><use xlink:href="#home"/></svg>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#" class="nav-link py-3 border-bottom" title="Dashboard" data-bs-toggle="tooltip" data-bs-placement="right">
|
|
||||||
<svg class="bi" width="24" height="24" role="img" aria-label="Dashboard"><use xlink:href="#speedometer2"/></svg>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#" class="nav-link py-3 border-bottom" title="Orders" data-bs-toggle="tooltip" data-bs-placement="right">
|
|
||||||
<svg class="bi" width="24" height="24" role="img" aria-label="Orders"><use xlink:href="#table"/></svg>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#" class="nav-link py-3 border-bottom" title="Products" data-bs-toggle="tooltip" data-bs-placement="right">
|
|
||||||
<svg class="bi" width="24" height="24" role="img" aria-label="Products"><use xlink:href="#grid"/></svg>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#" class="nav-link py-3 border-bottom" title="Customers" data-bs-toggle="tooltip" data-bs-placement="right">
|
|
||||||
<svg class="bi" width="24" height="24" role="img" aria-label="Customers"><use xlink:href="#people-circle"/></svg>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<div class="dropdown border-top">
|
|
||||||
<a href="#" class="d-flex align-items-center justify-content-center p-3 link-dark text-decoration-none dropdown-toggle" id="dropdownUser3" data-bs-toggle="dropdown" aria-expanded="false">
|
|
||||||
<img src="https://github.com/mdo.png" alt="mdo" width="24" height="24" class="rounded-circle">
|
|
||||||
</a>
|
|
||||||
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser3">
|
|
||||||
<li><a class="dropdown-item" href="#">New project...</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Settings</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Profile</a></li>
|
|
||||||
<li><hr class="dropdown-divider"></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Sign out</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="b-example-divider"></div>
|
|
||||||
|
|
||||||
<div class="flex-shrink-0 p-3 bg-white" style="width: 280px;">
|
|
||||||
<a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
|
|
||||||
<svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
|
|
||||||
<span class="fs-5 fw-semibold">Collapsible</span>
|
|
||||||
</a>
|
|
||||||
<ul class="list-unstyled ps-0">
|
|
||||||
<li class="mb-1">
|
|
||||||
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="true">
|
|
||||||
Home
|
|
||||||
</button>
|
|
||||||
<div class="collapse show" id="home-collapse">
|
|
||||||
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
|
|
||||||
<li><a href="#" class="link-dark rounded">Overview</a></li>
|
|
||||||
<li><a href="#" class="link-dark rounded">Updates</a></li>
|
|
||||||
<li><a href="#" class="link-dark rounded">Reports</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="mb-1">
|
|
||||||
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
|
|
||||||
Dashboard
|
|
||||||
</button>
|
|
||||||
<div class="collapse" id="dashboard-collapse">
|
|
||||||
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
|
|
||||||
<li><a href="#" class="link-dark rounded">Overview</a></li>
|
|
||||||
<li><a href="#" class="link-dark rounded">Weekly</a></li>
|
|
||||||
<li><a href="#" class="link-dark rounded">Monthly</a></li>
|
|
||||||
<li><a href="#" class="link-dark rounded">Annually</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="mb-1">
|
|
||||||
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false">
|
|
||||||
Orders
|
|
||||||
</button>
|
|
||||||
<div class="collapse" id="orders-collapse">
|
|
||||||
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
|
|
||||||
<li><a href="#" class="link-dark rounded">New</a></li>
|
|
||||||
<li><a href="#" class="link-dark rounded">Processed</a></li>
|
|
||||||
<li><a href="#" class="link-dark rounded">Shipped</a></li>
|
|
||||||
<li><a href="#" class="link-dark rounded">Returned</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="border-top my-3"></li>
|
|
||||||
<li class="mb-1">
|
|
||||||
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
|
|
||||||
Account
|
|
||||||
</button>
|
|
||||||
<div class="collapse" id="account-collapse">
|
|
||||||
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
|
|
||||||
<li><a href="#" class="link-dark rounded">New...</a></li>
|
|
||||||
<li><a href="#" class="link-dark rounded">Profile</a></li>
|
|
||||||
<li><a href="#" class="link-dark rounded">Settings</a></li>
|
|
||||||
<li><a href="#" class="link-dark rounded">Sign out</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="b-example-divider"></div>
|
|
||||||
|
|
||||||
<div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-white" style="width: 380px;">
|
|
||||||
<a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom">
|
|
||||||
<svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
|
|
||||||
<span class="fs-5 fw-semibold">List group</span>
|
|
||||||
</a>
|
|
||||||
<div class="list-group list-group-flush border-bottom scrollarea">
|
|
||||||
<a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" aria-current="true">
|
|
||||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
|
||||||
<strong class="mb-1">List group item heading</strong>
|
|
||||||
<small>Wed</small>
|
|
||||||
</div>
|
|
||||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
|
|
||||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
|
||||||
<strong class="mb-1">List group item heading</strong>
|
|
||||||
<small class="text-muted">Tues</small>
|
|
||||||
</div>
|
|
||||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
|
|
||||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
|
||||||
<strong class="mb-1">List group item heading</strong>
|
|
||||||
<small class="text-muted">Mon</small>
|
|
||||||
</div>
|
|
||||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true">
|
|
||||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
|
||||||
<strong class="mb-1">List group item heading</strong>
|
|
||||||
<small class="text-muted">Wed</small>
|
|
||||||
</div>
|
|
||||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
|
|
||||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
|
||||||
<strong class="mb-1">List group item heading</strong>
|
|
||||||
<small class="text-muted">Tues</small>
|
|
||||||
</div>
|
|
||||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
|
|
||||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
|
||||||
<strong class="mb-1">List group item heading</strong>
|
|
||||||
<small class="text-muted">Mon</small>
|
|
||||||
</div>
|
|
||||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true">
|
|
||||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
|
||||||
<strong class="mb-1">List group item heading</strong>
|
|
||||||
<small class="text-muted">Wed</small>
|
|
||||||
</div>
|
|
||||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
|
|
||||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
|
||||||
<strong class="mb-1">List group item heading</strong>
|
|
||||||
<small class="text-muted">Tues</small>
|
|
||||||
</div>
|
|
||||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
|
|
||||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
|
||||||
<strong class="mb-1">List group item heading</strong>
|
|
||||||
<small class="text-muted">Mon</small>
|
|
||||||
</div>
|
|
||||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true">
|
|
||||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
|
||||||
<strong class="mb-1">List group item heading</strong>
|
|
||||||
<small class="text-muted">Wed</small>
|
|
||||||
</div>
|
|
||||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
|
|
||||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
|
||||||
<strong class="mb-1">List group item heading</strong>
|
|
||||||
<small class="text-muted">Tues</small>
|
|
||||||
</div>
|
|
||||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
|
|
||||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
|
||||||
<strong class="mb-1">List group item heading</strong>
|
|
||||||
<small class="text-muted">Mon</small>
|
|
||||||
</div>
|
|
||||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="b-example-divider"></div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
<script src="sidebars.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,89 +0,0 @@
|
||||||
body {
|
|
||||||
min-height: 100vh;
|
|
||||||
min-height: -webkit-fill-available;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
height: -webkit-fill-available;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
height: 100vh;
|
|
||||||
height: -webkit-fill-available;
|
|
||||||
max-height: 100vh;
|
|
||||||
overflow-x: auto;
|
|
||||||
overflow-y: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.b-example-divider {
|
|
||||||
flex-shrink: 0;
|
|
||||||
width: 1.5rem;
|
|
||||||
height: 100vh;
|
|
||||||
background-color: rgba(0, 0, 0, .1);
|
|
||||||
border: solid rgba(0, 0, 0, .15);
|
|
||||||
border-width: 1px 0;
|
|
||||||
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bi {
|
|
||||||
vertical-align: -.125em;
|
|
||||||
pointer-events: none;
|
|
||||||
fill: currentColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-toggle { outline: 0; }
|
|
||||||
|
|
||||||
.nav-flush .nav-link {
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-toggle {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: .25rem .5rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: rgba(0, 0, 0, .65);
|
|
||||||
background-color: transparent;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
.btn-toggle:hover,
|
|
||||||
.btn-toggle:focus {
|
|
||||||
color: rgba(0, 0, 0, .85);
|
|
||||||
background-color: #d2f4ea;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-toggle::before {
|
|
||||||
width: 1.25em;
|
|
||||||
line-height: 0;
|
|
||||||
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
|
|
||||||
transition: transform .35s ease;
|
|
||||||
transform-origin: .5em 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-toggle[aria-expanded="true"] {
|
|
||||||
color: rgba(0, 0, 0, .85);
|
|
||||||
}
|
|
||||||
.btn-toggle[aria-expanded="true"]::before {
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-toggle-nav a {
|
|
||||||
display: inline-flex;
|
|
||||||
padding: .1875rem .5rem;
|
|
||||||
margin-top: .125rem;
|
|
||||||
margin-left: 1.25rem;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.btn-toggle-nav a:hover,
|
|
||||||
.btn-toggle-nav a:focus {
|
|
||||||
background-color: #d2f4ea;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollarea {
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fw-semibold { font-weight: 600; }
|
|
||||||
.lh-tight { line-height: 1.25; }
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
/* global bootstrap: false */
|
|
||||||
(function () {
|
|
||||||
'use strict'
|
|
||||||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
|
||||||
tooltipTriggerList.forEach(function (tooltipTriggerEl) {
|
|
||||||
new bootstrap.Tooltip(tooltipTriggerEl)
|
|
||||||
})
|
|
||||||
})()
|
|
||||||
|
|
@ -1,67 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>Signin Template · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/sign-in/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
|
||||||
<link href="signin.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body class="text-center">
|
|
||||||
|
|
||||||
<main class="form-signin">
|
|
||||||
<form>
|
|
||||||
<img class="mb-4" src="../assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
|
|
||||||
<h1 class="h3 mb-3 fw-normal">Please sign in</h1>
|
|
||||||
|
|
||||||
<div class="form-floating">
|
|
||||||
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
|
|
||||||
<label for="floatingInput">Email address</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-floating">
|
|
||||||
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
|
|
||||||
<label for="floatingPassword">Password</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="checkbox mb-3">
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" value="remember-me"> Remember me
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
|
|
||||||
<p class="mt-5 mb-3 text-muted">© 2017–2021</p>
|
|
||||||
</form>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
html,
|
|
||||||
body {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding-top: 40px;
|
|
||||||
padding-bottom: 40px;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-signin {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 330px;
|
|
||||||
padding: 15px;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-signin .checkbox {
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-signin .form-floating:focus-within {
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-signin input[type="email"] {
|
|
||||||
margin-bottom: -1px;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-signin input[type="password"] {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
@ -1,90 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>Starter Template · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/starter-template/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
|
||||||
<link href="starter-template.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="col-lg-8 mx-auto p-3 py-md-5">
|
|
||||||
<header class="d-flex align-items-center pb-3 mb-5 border-bottom">
|
|
||||||
<a href="/" class="d-flex align-items-center text-dark text-decoration-none">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
|
|
||||||
<span class="fs-4">Starter template</span>
|
|
||||||
</a>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<h1>Get started with Bootstrap</h1>
|
|
||||||
<p class="fs-5 col-md-8">Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.</p>
|
|
||||||
|
|
||||||
<div class="mb-5">
|
|
||||||
<a href="../examples/" class="btn btn-primary btn-lg px-4">Download examples</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="col-3 col-md-2 mb-5">
|
|
||||||
|
|
||||||
<div class="row g-5">
|
|
||||||
<div class="col-md-6">
|
|
||||||
<h2>Starter projects</h2>
|
|
||||||
<p>Ready to beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.</p>
|
|
||||||
<ul class="icon-list">
|
|
||||||
<li><a href="https://github.com/twbs/bootstrap-npm-starter" rel="noopener" target="_blank">Bootstrap npm starter</a></li>
|
|
||||||
<li class="text-muted">Bootstrap Parcel starter (coming soon!)</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-6">
|
|
||||||
<h2>Guides</h2>
|
|
||||||
<p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p>
|
|
||||||
<ul class="icon-list">
|
|
||||||
<li><a href="../getting-started/introduction/">Bootstrap quick start guide</a></li>
|
|
||||||
<li><a href="../getting-started/webpack/">Bootstrap Webpack guide</a></li>
|
|
||||||
<li><a href="../getting-started/parcel/">Bootstrap Parcel guide</a></li>
|
|
||||||
<li><a href="../getting-started/build-tools/">Contributing to Bootstrap</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<footer class="pt-5 my-5 text-muted border-top">
|
|
||||||
Created by the Bootstrap team · © 2021
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
.icon-list {
|
|
||||||
padding-left: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
.icon-list li {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
margin-bottom: .25rem;
|
|
||||||
}
|
|
||||||
.icon-list li::before {
|
|
||||||
display: block;
|
|
||||||
flex-shrink: 0;
|
|
||||||
width: 1.5em;
|
|
||||||
height: 1.5em;
|
|
||||||
margin-right: .5rem;
|
|
||||||
content: "";
|
|
||||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E") no-repeat center center / 100% auto;
|
|
||||||
}
|
|
||||||
|
|
@ -1,89 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en" class="h-100">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>Sticky Footer Navbar Template · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/sticky-footer-navbar/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
|
||||||
<link href="sticky-footer-navbar.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body class="d-flex flex-column h-100">
|
|
||||||
|
|
||||||
<header>
|
|
||||||
<!-- Fixed navbar -->
|
|
||||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<a class="navbar-brand" href="#">Fixed navbar</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
|
||||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Link</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<form class="d-flex">
|
|
||||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
|
||||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- Begin page content -->
|
|
||||||
<main class="flex-shrink-0">
|
|
||||||
<div class="container">
|
|
||||||
<h1 class="mt-5">Sticky footer with fixed navbar</h1>
|
|
||||||
<p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code class="small">padding-top: 60px;</code> on the <code class="small">main > .container</code>.</p>
|
|
||||||
<p>Back to <a href="../examples/sticky-footer/">the default sticky footer</a> minus the navbar.</p>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="footer mt-auto py-3 bg-light">
|
|
||||||
<div class="container">
|
|
||||||
<span class="text-muted">Place sticky footer content here.</span>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
/* Custom page CSS
|
|
||||||
-------------------------------------------------- */
|
|
||||||
/* Not required for template or sticky footer method. */
|
|
||||||
|
|
||||||
main > .container {
|
|
||||||
padding: 60px 15px 0;
|
|
||||||
}
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en" class="h-100">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
||||||
<meta name="generator" content="Hugo 0.84.0">
|
|
||||||
<title>Sticky Footer Template · Bootstrap v5.0</title>
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/sticky-footer/">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
|
||||||
<link href="sticky-footer.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body class="d-flex flex-column h-100">
|
|
||||||
|
|
||||||
<!-- Begin page content -->
|
|
||||||
<main class="flex-shrink-0">
|
|
||||||
<div class="container">
|
|
||||||
<h1 class="mt-5">Sticky footer</h1>
|
|
||||||
<p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
|
|
||||||
<p>Use <a href="../examples/sticky-footer-navbar/">the sticky footer with a fixed navbar</a> if need be, too.</p>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="footer mt-auto py-3 bg-light">
|
|
||||||
<div class="container">
|
|
||||||
<span class="text-muted">Place sticky footer content here.</span>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
/* Custom page CSS
|
|
||||||
-------------------------------------------------- */
|
|
||||||
/* Not required for template or sticky footer method. */
|
|
||||||
|
|
||||||
.container {
|
|
||||||
width: auto;
|
|
||||||
max-width: 680px;
|
|
||||||
padding: 0 15px;
|
|
||||||
}
|
|
||||||
|
|
@ -198,3 +198,20 @@ body {
|
||||||
{
|
{
|
||||||
padding: .5em;
|
padding: .5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.badge-libre {
|
||||||
|
background-color: #2ecc71;
|
||||||
|
color: white;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 0.85em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.badge-non-libre {
|
||||||
|
background-color: #e67e22;
|
||||||
|
color: white;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 0.85em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,87 +0,0 @@
|
||||||
/**
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
* Bootstrap alert.js
|
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
|
|
||||||
import BaseComponent from './base-component.js'
|
|
||||||
import EventHandler from './dom/event-handler.js'
|
|
||||||
import { enableDismissTrigger } from './util/component-functions.js'
|
|
||||||
import { defineJQueryPlugin } from './util/index.js'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Constants
|
|
||||||
*/
|
|
||||||
|
|
||||||
const NAME = 'alert'
|
|
||||||
const DATA_KEY = 'bs.alert'
|
|
||||||
const EVENT_KEY = `.${DATA_KEY}`
|
|
||||||
|
|
||||||
const EVENT_CLOSE = `close${EVENT_KEY}`
|
|
||||||
const EVENT_CLOSED = `closed${EVENT_KEY}`
|
|
||||||
const CLASS_NAME_FADE = 'fade'
|
|
||||||
const CLASS_NAME_SHOW = 'show'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Class definition
|
|
||||||
*/
|
|
||||||
|
|
||||||
class Alert extends BaseComponent {
|
|
||||||
// Getters
|
|
||||||
static get NAME() {
|
|
||||||
return NAME
|
|
||||||
}
|
|
||||||
|
|
||||||
// Public
|
|
||||||
close() {
|
|
||||||
const closeEvent = EventHandler.trigger(this._element, EVENT_CLOSE)
|
|
||||||
|
|
||||||
if (closeEvent.defaultPrevented) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this._element.classList.remove(CLASS_NAME_SHOW)
|
|
||||||
|
|
||||||
const isAnimated = this._element.classList.contains(CLASS_NAME_FADE)
|
|
||||||
this._queueCallback(() => this._destroyElement(), this._element, isAnimated)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Private
|
|
||||||
_destroyElement() {
|
|
||||||
this._element.remove()
|
|
||||||
EventHandler.trigger(this._element, EVENT_CLOSED)
|
|
||||||
this.dispose()
|
|
||||||
}
|
|
||||||
|
|
||||||
// Static
|
|
||||||
static jQueryInterface(config) {
|
|
||||||
return this.each(function () {
|
|
||||||
const data = Alert.getOrCreateInstance(this)
|
|
||||||
|
|
||||||
if (typeof config !== 'string') {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
|
|
||||||
throw new TypeError(`No method named "${config}"`)
|
|
||||||
}
|
|
||||||
|
|
||||||
data[config](this)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Data API implementation
|
|
||||||
*/
|
|
||||||
|
|
||||||
enableDismissTrigger(Alert, 'close')
|
|
||||||
|
|
||||||
/**
|
|
||||||
* jQuery
|
|
||||||
*/
|
|
||||||
|
|
||||||
defineJQueryPlugin(Alert)
|
|
||||||
|
|
||||||
export default Alert
|
|
||||||
|
|
@ -1,85 +0,0 @@
|
||||||
/**
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
* Bootstrap base-component.js
|
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
|
|
||||||
import Data from './dom/data.js'
|
|
||||||
import EventHandler from './dom/event-handler.js'
|
|
||||||
import Config from './util/config.js'
|
|
||||||
import { executeAfterTransition, getElement } from './util/index.js'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Constants
|
|
||||||
*/
|
|
||||||
|
|
||||||
const VERSION = '5.3.3'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Class definition
|
|
||||||
*/
|
|
||||||
|
|
||||||
class BaseComponent extends Config {
|
|
||||||
constructor(element, config) {
|
|
||||||
super()
|
|
||||||
|
|
||||||
element = getElement(element)
|
|
||||||
if (!element) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this._element = element
|
|
||||||
this._config = this._getConfig(config)
|
|
||||||
|
|
||||||
Data.set(this._element, this.constructor.DATA_KEY, this)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Public
|
|
||||||
dispose() {
|
|
||||||
Data.remove(this._element, this.constructor.DATA_KEY)
|
|
||||||
EventHandler.off(this._element, this.constructor.EVENT_KEY)
|
|
||||||
|
|
||||||
for (const propertyName of Object.getOwnPropertyNames(this)) {
|
|
||||||
this[propertyName] = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_queueCallback(callback, element, isAnimated = true) {
|
|
||||||
executeAfterTransition(callback, element, isAnimated)
|
|
||||||
}
|
|
||||||
|
|
||||||
_getConfig(config) {
|
|
||||||
config = this._mergeConfigObj(config, this._element)
|
|
||||||
config = this._configAfterMerge(config)
|
|
||||||
this._typeCheckConfig(config)
|
|
||||||
return config
|
|
||||||
}
|
|
||||||
|
|
||||||
// Static
|
|
||||||
static getInstance(element) {
|
|
||||||
return Data.get(getElement(element), this.DATA_KEY)
|
|
||||||
}
|
|
||||||
|
|
||||||
static getOrCreateInstance(element, config = {}) {
|
|
||||||
return this.getInstance(element) || new this(element, typeof config === 'object' ? config : null)
|
|
||||||
}
|
|
||||||
|
|
||||||
static get VERSION() {
|
|
||||||
return VERSION
|
|
||||||
}
|
|
||||||
|
|
||||||
static get DATA_KEY() {
|
|
||||||
return `bs.${this.NAME}`
|
|
||||||
}
|
|
||||||
|
|
||||||
static get EVENT_KEY() {
|
|
||||||
return `.${this.DATA_KEY}`
|
|
||||||
}
|
|
||||||
|
|
||||||
static eventName(name) {
|
|
||||||
return `${name}${this.EVENT_KEY}`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default BaseComponent
|
|
||||||
|
|
@ -1,72 +0,0 @@
|
||||||
/**
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
* Bootstrap button.js
|
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
|
|
||||||
import BaseComponent from './base-component.js'
|
|
||||||
import EventHandler from './dom/event-handler.js'
|
|
||||||
import { defineJQueryPlugin } from './util/index.js'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Constants
|
|
||||||
*/
|
|
||||||
|
|
||||||
const NAME = 'button'
|
|
||||||
const DATA_KEY = 'bs.button'
|
|
||||||
const EVENT_KEY = `.${DATA_KEY}`
|
|
||||||
const DATA_API_KEY = '.data-api'
|
|
||||||
|
|
||||||
const CLASS_NAME_ACTIVE = 'active'
|
|
||||||
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="button"]'
|
|
||||||
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Class definition
|
|
||||||
*/
|
|
||||||
|
|
||||||
class Button extends BaseComponent {
|
|
||||||
// Getters
|
|
||||||
static get NAME() {
|
|
||||||
return NAME
|
|
||||||
}
|
|
||||||
|
|
||||||
// Public
|
|
||||||
toggle() {
|
|
||||||
// Toggle class and sync the `aria-pressed` attribute with the return value of the `.toggle()` method
|
|
||||||
this._element.setAttribute('aria-pressed', this._element.classList.toggle(CLASS_NAME_ACTIVE))
|
|
||||||
}
|
|
||||||
|
|
||||||
// Static
|
|
||||||
static jQueryInterface(config) {
|
|
||||||
return this.each(function () {
|
|
||||||
const data = Button.getOrCreateInstance(this)
|
|
||||||
|
|
||||||
if (config === 'toggle') {
|
|
||||||
data[config]()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Data API implementation
|
|
||||||
*/
|
|
||||||
|
|
||||||
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, event => {
|
|
||||||
event.preventDefault()
|
|
||||||
|
|
||||||
const button = event.target.closest(SELECTOR_DATA_TOGGLE)
|
|
||||||
const data = Button.getOrCreateInstance(button)
|
|
||||||
|
|
||||||
data.toggle()
|
|
||||||
})
|
|
||||||
|
|
||||||
/**
|
|
||||||
* jQuery
|
|
||||||
*/
|
|
||||||
|
|
||||||
defineJQueryPlugin(Button)
|
|
||||||
|
|
||||||
export default Button
|
|
||||||
|
|
@ -1,474 +0,0 @@
|
||||||
/**
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
* Bootstrap carousel.js
|
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
|
|
||||||
import BaseComponent from './base-component.js'
|
|
||||||
import EventHandler from './dom/event-handler.js'
|
|
||||||
import Manipulator from './dom/manipulator.js'
|
|
||||||
import SelectorEngine from './dom/selector-engine.js'
|
|
||||||
import {
|
|
||||||
defineJQueryPlugin,
|
|
||||||
getNextActiveElement,
|
|
||||||
isRTL,
|
|
||||||
isVisible,
|
|
||||||
reflow,
|
|
||||||
triggerTransitionEnd
|
|
||||||
} from './util/index.js'
|
|
||||||
import Swipe from './util/swipe.js'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Constants
|
|
||||||
*/
|
|
||||||
|
|
||||||
const NAME = 'carousel'
|
|
||||||
const DATA_KEY = 'bs.carousel'
|
|
||||||
const EVENT_KEY = `.${DATA_KEY}`
|
|
||||||
const DATA_API_KEY = '.data-api'
|
|
||||||
|
|
||||||
const ARROW_LEFT_KEY = 'ArrowLeft'
|
|
||||||
const ARROW_RIGHT_KEY = 'ArrowRight'
|
|
||||||
const TOUCHEVENT_COMPAT_WAIT = 500 // Time for mouse compat events to fire after touch
|
|
||||||
|
|
||||||
const ORDER_NEXT = 'next'
|
|
||||||
const ORDER_PREV = 'prev'
|
|
||||||
const DIRECTION_LEFT = 'left'
|
|
||||||
const DIRECTION_RIGHT = 'right'
|
|
||||||
|
|
||||||
const EVENT_SLIDE = `slide${EVENT_KEY}`
|
|
||||||
const EVENT_SLID = `slid${EVENT_KEY}`
|
|
||||||
const EVENT_KEYDOWN = `keydown${EVENT_KEY}`
|
|
||||||
const EVENT_MOUSEENTER = `mouseenter${EVENT_KEY}`
|
|
||||||
const EVENT_MOUSELEAVE = `mouseleave${EVENT_KEY}`
|
|
||||||
const EVENT_DRAG_START = `dragstart${EVENT_KEY}`
|
|
||||||
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
|
|
||||||
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
|
|
||||||
|
|
||||||
const CLASS_NAME_CAROUSEL = 'carousel'
|
|
||||||
const CLASS_NAME_ACTIVE = 'active'
|
|
||||||
const CLASS_NAME_SLIDE = 'slide'
|
|
||||||
const CLASS_NAME_END = 'carousel-item-end'
|
|
||||||
const CLASS_NAME_START = 'carousel-item-start'
|
|
||||||
const CLASS_NAME_NEXT = 'carousel-item-next'
|
|
||||||
const CLASS_NAME_PREV = 'carousel-item-prev'
|
|
||||||
|
|
||||||
const SELECTOR_ACTIVE = '.active'
|
|
||||||
const SELECTOR_ITEM = '.carousel-item'
|
|
||||||
const SELECTOR_ACTIVE_ITEM = SELECTOR_ACTIVE + SELECTOR_ITEM
|
|
||||||
const SELECTOR_ITEM_IMG = '.carousel-item img'
|
|
||||||
const SELECTOR_INDICATORS = '.carousel-indicators'
|
|
||||||
const SELECTOR_DATA_SLIDE = '[data-bs-slide], [data-bs-slide-to]'
|
|
||||||
const SELECTOR_DATA_RIDE = '[data-bs-ride="carousel"]'
|
|
||||||
|
|
||||||
const KEY_TO_DIRECTION = {
|
|
||||||
[ARROW_LEFT_KEY]: DIRECTION_RIGHT,
|
|
||||||
[ARROW_RIGHT_KEY]: DIRECTION_LEFT
|
|
||||||
}
|
|
||||||
|
|
||||||
const Default = {
|
|
||||||
interval: 5000,
|
|
||||||
keyboard: true,
|
|
||||||
pause: 'hover',
|
|
||||||
ride: false,
|
|
||||||
touch: true,
|
|
||||||
wrap: true
|
|
||||||
}
|
|
||||||
|
|
||||||
const DefaultType = {
|
|
||||||
interval: '(number|boolean)', // TODO:v6 remove boolean support
|
|
||||||
keyboard: 'boolean',
|
|
||||||
pause: '(string|boolean)',
|
|
||||||
ride: '(boolean|string)',
|
|
||||||
touch: 'boolean',
|
|
||||||
wrap: 'boolean'
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Class definition
|
|
||||||
*/
|
|
||||||
|
|
||||||
class Carousel extends BaseComponent {
|
|
||||||
constructor(element, config) {
|
|
||||||
super(element, config)
|
|
||||||
|
|
||||||
this._interval = null
|
|
||||||
this._activeElement = null
|
|
||||||
this._isSliding = false
|
|
||||||
this.touchTimeout = null
|
|
||||||
this._swipeHelper = null
|
|
||||||
|
|
||||||
this._indicatorsElement = SelectorEngine.findOne(SELECTOR_INDICATORS, this._element)
|
|
||||||
this._addEventListeners()
|
|
||||||
|
|
||||||
if (this._config.ride === CLASS_NAME_CAROUSEL) {
|
|
||||||
this.cycle()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Getters
|
|
||||||
static get Default() {
|
|
||||||
return Default
|
|
||||||
}
|
|
||||||
|
|
||||||
static get DefaultType() {
|
|
||||||
return DefaultType
|
|
||||||
}
|
|
||||||
|
|
||||||
static get NAME() {
|
|
||||||
return NAME
|
|
||||||
}
|
|
||||||
|
|
||||||
// Public
|
|
||||||
next() {
|
|
||||||
this._slide(ORDER_NEXT)
|
|
||||||
}
|
|
||||||
|
|
||||||
nextWhenVisible() {
|
|
||||||
// FIXME TODO use `document.visibilityState`
|
|
||||||
// Don't call next when the page isn't visible
|
|
||||||
// or the carousel or its parent isn't visible
|
|
||||||
if (!document.hidden && isVisible(this._element)) {
|
|
||||||
this.next()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
prev() {
|
|
||||||
this._slide(ORDER_PREV)
|
|
||||||
}
|
|
||||||
|
|
||||||
pause() {
|
|
||||||
if (this._isSliding) {
|
|
||||||
triggerTransitionEnd(this._element)
|
|
||||||
}
|
|
||||||
|
|
||||||
this._clearInterval()
|
|
||||||
}
|
|
||||||
|
|
||||||
cycle() {
|
|
||||||
this._clearInterval()
|
|
||||||
this._updateInterval()
|
|
||||||
|
|
||||||
this._interval = setInterval(() => this.nextWhenVisible(), this._config.interval)
|
|
||||||
}
|
|
||||||
|
|
||||||
_maybeEnableCycle() {
|
|
||||||
if (!this._config.ride) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this._isSliding) {
|
|
||||||
EventHandler.one(this._element, EVENT_SLID, () => this.cycle())
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this.cycle()
|
|
||||||
}
|
|
||||||
|
|
||||||
to(index) {
|
|
||||||
const items = this._getItems()
|
|
||||||
if (index > items.length - 1 || index < 0) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this._isSliding) {
|
|
||||||
EventHandler.one(this._element, EVENT_SLID, () => this.to(index))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const activeIndex = this._getItemIndex(this._getActive())
|
|
||||||
if (activeIndex === index) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const order = index > activeIndex ? ORDER_NEXT : ORDER_PREV
|
|
||||||
|
|
||||||
this._slide(order, items[index])
|
|
||||||
}
|
|
||||||
|
|
||||||
dispose() {
|
|
||||||
if (this._swipeHelper) {
|
|
||||||
this._swipeHelper.dispose()
|
|
||||||
}
|
|
||||||
|
|
||||||
super.dispose()
|
|
||||||
}
|
|
||||||
|
|
||||||
// Private
|
|
||||||
_configAfterMerge(config) {
|
|
||||||
config.defaultInterval = config.interval
|
|
||||||
return config
|
|
||||||
}
|
|
||||||
|
|
||||||
_addEventListeners() {
|
|
||||||
if (this._config.keyboard) {
|
|
||||||
EventHandler.on(this._element, EVENT_KEYDOWN, event => this._keydown(event))
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this._config.pause === 'hover') {
|
|
||||||
EventHandler.on(this._element, EVENT_MOUSEENTER, () => this.pause())
|
|
||||||
EventHandler.on(this._element, EVENT_MOUSELEAVE, () => this._maybeEnableCycle())
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this._config.touch && Swipe.isSupported()) {
|
|
||||||
this._addTouchEventListeners()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_addTouchEventListeners() {
|
|
||||||
for (const img of SelectorEngine.find(SELECTOR_ITEM_IMG, this._element)) {
|
|
||||||
EventHandler.on(img, EVENT_DRAG_START, event => event.preventDefault())
|
|
||||||
}
|
|
||||||
|
|
||||||
const endCallBack = () => {
|
|
||||||
if (this._config.pause !== 'hover') {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// If it's a touch-enabled device, mouseenter/leave are fired as
|
|
||||||
// part of the mouse compatibility events on first tap - the carousel
|
|
||||||
// would stop cycling until user tapped out of it;
|
|
||||||
// here, we listen for touchend, explicitly pause the carousel
|
|
||||||
// (as if it's the second time we tap on it, mouseenter compat event
|
|
||||||
// is NOT fired) and after a timeout (to allow for mouse compatibility
|
|
||||||
// events to fire) we explicitly restart cycling
|
|
||||||
|
|
||||||
this.pause()
|
|
||||||
if (this.touchTimeout) {
|
|
||||||
clearTimeout(this.touchTimeout)
|
|
||||||
}
|
|
||||||
|
|
||||||
this.touchTimeout = setTimeout(() => this._maybeEnableCycle(), TOUCHEVENT_COMPAT_WAIT + this._config.interval)
|
|
||||||
}
|
|
||||||
|
|
||||||
const swipeConfig = {
|
|
||||||
leftCallback: () => this._slide(this._directionToOrder(DIRECTION_LEFT)),
|
|
||||||
rightCallback: () => this._slide(this._directionToOrder(DIRECTION_RIGHT)),
|
|
||||||
endCallback: endCallBack
|
|
||||||
}
|
|
||||||
|
|
||||||
this._swipeHelper = new Swipe(this._element, swipeConfig)
|
|
||||||
}
|
|
||||||
|
|
||||||
_keydown(event) {
|
|
||||||
if (/input|textarea/i.test(event.target.tagName)) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const direction = KEY_TO_DIRECTION[event.key]
|
|
||||||
if (direction) {
|
|
||||||
event.preventDefault()
|
|
||||||
this._slide(this._directionToOrder(direction))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_getItemIndex(element) {
|
|
||||||
return this._getItems().indexOf(element)
|
|
||||||
}
|
|
||||||
|
|
||||||
_setActiveIndicatorElement(index) {
|
|
||||||
if (!this._indicatorsElement) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const activeIndicator = SelectorEngine.findOne(SELECTOR_ACTIVE, this._indicatorsElement)
|
|
||||||
|
|
||||||
activeIndicator.classList.remove(CLASS_NAME_ACTIVE)
|
|
||||||
activeIndicator.removeAttribute('aria-current')
|
|
||||||
|
|
||||||
const newActiveIndicator = SelectorEngine.findOne(`[data-bs-slide-to="${index}"]`, this._indicatorsElement)
|
|
||||||
|
|
||||||
if (newActiveIndicator) {
|
|
||||||
newActiveIndicator.classList.add(CLASS_NAME_ACTIVE)
|
|
||||||
newActiveIndicator.setAttribute('aria-current', 'true')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_updateInterval() {
|
|
||||||
const element = this._activeElement || this._getActive()
|
|
||||||
|
|
||||||
if (!element) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const elementInterval = Number.parseInt(element.getAttribute('data-bs-interval'), 10)
|
|
||||||
|
|
||||||
this._config.interval = elementInterval || this._config.defaultInterval
|
|
||||||
}
|
|
||||||
|
|
||||||
_slide(order, element = null) {
|
|
||||||
if (this._isSliding) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const activeElement = this._getActive()
|
|
||||||
const isNext = order === ORDER_NEXT
|
|
||||||
const nextElement = element || getNextActiveElement(this._getItems(), activeElement, isNext, this._config.wrap)
|
|
||||||
|
|
||||||
if (nextElement === activeElement) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const nextElementIndex = this._getItemIndex(nextElement)
|
|
||||||
|
|
||||||
const triggerEvent = eventName => {
|
|
||||||
return EventHandler.trigger(this._element, eventName, {
|
|
||||||
relatedTarget: nextElement,
|
|
||||||
direction: this._orderToDirection(order),
|
|
||||||
from: this._getItemIndex(activeElement),
|
|
||||||
to: nextElementIndex
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const slideEvent = triggerEvent(EVENT_SLIDE)
|
|
||||||
|
|
||||||
if (slideEvent.defaultPrevented) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!activeElement || !nextElement) {
|
|
||||||
// Some weirdness is happening, so we bail
|
|
||||||
// TODO: change tests that use empty divs to avoid this check
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const isCycling = Boolean(this._interval)
|
|
||||||
this.pause()
|
|
||||||
|
|
||||||
this._isSliding = true
|
|
||||||
|
|
||||||
this._setActiveIndicatorElement(nextElementIndex)
|
|
||||||
this._activeElement = nextElement
|
|
||||||
|
|
||||||
const directionalClassName = isNext ? CLASS_NAME_START : CLASS_NAME_END
|
|
||||||
const orderClassName = isNext ? CLASS_NAME_NEXT : CLASS_NAME_PREV
|
|
||||||
|
|
||||||
nextElement.classList.add(orderClassName)
|
|
||||||
|
|
||||||
reflow(nextElement)
|
|
||||||
|
|
||||||
activeElement.classList.add(directionalClassName)
|
|
||||||
nextElement.classList.add(directionalClassName)
|
|
||||||
|
|
||||||
const completeCallBack = () => {
|
|
||||||
nextElement.classList.remove(directionalClassName, orderClassName)
|
|
||||||
nextElement.classList.add(CLASS_NAME_ACTIVE)
|
|
||||||
|
|
||||||
activeElement.classList.remove(CLASS_NAME_ACTIVE, orderClassName, directionalClassName)
|
|
||||||
|
|
||||||
this._isSliding = false
|
|
||||||
|
|
||||||
triggerEvent(EVENT_SLID)
|
|
||||||
}
|
|
||||||
|
|
||||||
this._queueCallback(completeCallBack, activeElement, this._isAnimated())
|
|
||||||
|
|
||||||
if (isCycling) {
|
|
||||||
this.cycle()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_isAnimated() {
|
|
||||||
return this._element.classList.contains(CLASS_NAME_SLIDE)
|
|
||||||
}
|
|
||||||
|
|
||||||
_getActive() {
|
|
||||||
return SelectorEngine.findOne(SELECTOR_ACTIVE_ITEM, this._element)
|
|
||||||
}
|
|
||||||
|
|
||||||
_getItems() {
|
|
||||||
return SelectorEngine.find(SELECTOR_ITEM, this._element)
|
|
||||||
}
|
|
||||||
|
|
||||||
_clearInterval() {
|
|
||||||
if (this._interval) {
|
|
||||||
clearInterval(this._interval)
|
|
||||||
this._interval = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_directionToOrder(direction) {
|
|
||||||
if (isRTL()) {
|
|
||||||
return direction === DIRECTION_LEFT ? ORDER_PREV : ORDER_NEXT
|
|
||||||
}
|
|
||||||
|
|
||||||
return direction === DIRECTION_LEFT ? ORDER_NEXT : ORDER_PREV
|
|
||||||
}
|
|
||||||
|
|
||||||
_orderToDirection(order) {
|
|
||||||
if (isRTL()) {
|
|
||||||
return order === ORDER_PREV ? DIRECTION_LEFT : DIRECTION_RIGHT
|
|
||||||
}
|
|
||||||
|
|
||||||
return order === ORDER_PREV ? DIRECTION_RIGHT : DIRECTION_LEFT
|
|
||||||
}
|
|
||||||
|
|
||||||
// Static
|
|
||||||
static jQueryInterface(config) {
|
|
||||||
return this.each(function () {
|
|
||||||
const data = Carousel.getOrCreateInstance(this, config)
|
|
||||||
|
|
||||||
if (typeof config === 'number') {
|
|
||||||
data.to(config)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof config === 'string') {
|
|
||||||
if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
|
|
||||||
throw new TypeError(`No method named "${config}"`)
|
|
||||||
}
|
|
||||||
|
|
||||||
data[config]()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Data API implementation
|
|
||||||
*/
|
|
||||||
|
|
||||||
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_SLIDE, function (event) {
|
|
||||||
const target = SelectorEngine.getElementFromSelector(this)
|
|
||||||
|
|
||||||
if (!target || !target.classList.contains(CLASS_NAME_CAROUSEL)) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
event.preventDefault()
|
|
||||||
|
|
||||||
const carousel = Carousel.getOrCreateInstance(target)
|
|
||||||
const slideIndex = this.getAttribute('data-bs-slide-to')
|
|
||||||
|
|
||||||
if (slideIndex) {
|
|
||||||
carousel.to(slideIndex)
|
|
||||||
carousel._maybeEnableCycle()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Manipulator.getDataAttribute(this, 'slide') === 'next') {
|
|
||||||
carousel.next()
|
|
||||||
carousel._maybeEnableCycle()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
carousel.prev()
|
|
||||||
carousel._maybeEnableCycle()
|
|
||||||
})
|
|
||||||
|
|
||||||
EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
|
|
||||||
const carousels = SelectorEngine.find(SELECTOR_DATA_RIDE)
|
|
||||||
|
|
||||||
for (const carousel of carousels) {
|
|
||||||
Carousel.getOrCreateInstance(carousel)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
/**
|
|
||||||
* jQuery
|
|
||||||
*/
|
|
||||||
|
|
||||||
defineJQueryPlugin(Carousel)
|
|
||||||
|
|
||||||
export default Carousel
|
|
||||||
|
|
@ -1,297 +0,0 @@
|
||||||
/**
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
* Bootstrap collapse.js
|
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
|
|
||||||
import BaseComponent from './base-component.js'
|
|
||||||
import EventHandler from './dom/event-handler.js'
|
|
||||||
import SelectorEngine from './dom/selector-engine.js'
|
|
||||||
import {
|
|
||||||
defineJQueryPlugin,
|
|
||||||
getElement,
|
|
||||||
reflow
|
|
||||||
} from './util/index.js'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Constants
|
|
||||||
*/
|
|
||||||
|
|
||||||
const NAME = 'collapse'
|
|
||||||
const DATA_KEY = 'bs.collapse'
|
|
||||||
const EVENT_KEY = `.${DATA_KEY}`
|
|
||||||
const DATA_API_KEY = '.data-api'
|
|
||||||
|
|
||||||
const EVENT_SHOW = `show${EVENT_KEY}`
|
|
||||||
const EVENT_SHOWN = `shown${EVENT_KEY}`
|
|
||||||
const EVENT_HIDE = `hide${EVENT_KEY}`
|
|
||||||
const EVENT_HIDDEN = `hidden${EVENT_KEY}`
|
|
||||||
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
|
|
||||||
|
|
||||||
const CLASS_NAME_SHOW = 'show'
|
|
||||||
const CLASS_NAME_COLLAPSE = 'collapse'
|
|
||||||
const CLASS_NAME_COLLAPSING = 'collapsing'
|
|
||||||
const CLASS_NAME_COLLAPSED = 'collapsed'
|
|
||||||
const CLASS_NAME_DEEPER_CHILDREN = `:scope .${CLASS_NAME_COLLAPSE} .${CLASS_NAME_COLLAPSE}`
|
|
||||||
const CLASS_NAME_HORIZONTAL = 'collapse-horizontal'
|
|
||||||
|
|
||||||
const WIDTH = 'width'
|
|
||||||
const HEIGHT = 'height'
|
|
||||||
|
|
||||||
const SELECTOR_ACTIVES = '.collapse.show, .collapse.collapsing'
|
|
||||||
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="collapse"]'
|
|
||||||
|
|
||||||
const Default = {
|
|
||||||
parent: null,
|
|
||||||
toggle: true
|
|
||||||
}
|
|
||||||
|
|
||||||
const DefaultType = {
|
|
||||||
parent: '(null|element)',
|
|
||||||
toggle: 'boolean'
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Class definition
|
|
||||||
*/
|
|
||||||
|
|
||||||
class Collapse extends BaseComponent {
|
|
||||||
constructor(element, config) {
|
|
||||||
super(element, config)
|
|
||||||
|
|
||||||
this._isTransitioning = false
|
|
||||||
this._triggerArray = []
|
|
||||||
|
|
||||||
const toggleList = SelectorEngine.find(SELECTOR_DATA_TOGGLE)
|
|
||||||
|
|
||||||
for (const elem of toggleList) {
|
|
||||||
const selector = SelectorEngine.getSelectorFromElement(elem)
|
|
||||||
const filterElement = SelectorEngine.find(selector)
|
|
||||||
.filter(foundElement => foundElement === this._element)
|
|
||||||
|
|
||||||
if (selector !== null && filterElement.length) {
|
|
||||||
this._triggerArray.push(elem)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this._initializeChildren()
|
|
||||||
|
|
||||||
if (!this._config.parent) {
|
|
||||||
this._addAriaAndCollapsedClass(this._triggerArray, this._isShown())
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this._config.toggle) {
|
|
||||||
this.toggle()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Getters
|
|
||||||
static get Default() {
|
|
||||||
return Default
|
|
||||||
}
|
|
||||||
|
|
||||||
static get DefaultType() {
|
|
||||||
return DefaultType
|
|
||||||
}
|
|
||||||
|
|
||||||
static get NAME() {
|
|
||||||
return NAME
|
|
||||||
}
|
|
||||||
|
|
||||||
// Public
|
|
||||||
toggle() {
|
|
||||||
if (this._isShown()) {
|
|
||||||
this.hide()
|
|
||||||
} else {
|
|
||||||
this.show()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
show() {
|
|
||||||
if (this._isTransitioning || this._isShown()) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
let activeChildren = []
|
|
||||||
|
|
||||||
// find active children
|
|
||||||
if (this._config.parent) {
|
|
||||||
activeChildren = this._getFirstLevelChildren(SELECTOR_ACTIVES)
|
|
||||||
.filter(element => element !== this._element)
|
|
||||||
.map(element => Collapse.getOrCreateInstance(element, { toggle: false }))
|
|
||||||
}
|
|
||||||
|
|
||||||
if (activeChildren.length && activeChildren[0]._isTransitioning) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const startEvent = EventHandler.trigger(this._element, EVENT_SHOW)
|
|
||||||
if (startEvent.defaultPrevented) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const activeInstance of activeChildren) {
|
|
||||||
activeInstance.hide()
|
|
||||||
}
|
|
||||||
|
|
||||||
const dimension = this._getDimension()
|
|
||||||
|
|
||||||
this._element.classList.remove(CLASS_NAME_COLLAPSE)
|
|
||||||
this._element.classList.add(CLASS_NAME_COLLAPSING)
|
|
||||||
|
|
||||||
this._element.style[dimension] = 0
|
|
||||||
|
|
||||||
this._addAriaAndCollapsedClass(this._triggerArray, true)
|
|
||||||
this._isTransitioning = true
|
|
||||||
|
|
||||||
const complete = () => {
|
|
||||||
this._isTransitioning = false
|
|
||||||
|
|
||||||
this._element.classList.remove(CLASS_NAME_COLLAPSING)
|
|
||||||
this._element.classList.add(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW)
|
|
||||||
|
|
||||||
this._element.style[dimension] = ''
|
|
||||||
|
|
||||||
EventHandler.trigger(this._element, EVENT_SHOWN)
|
|
||||||
}
|
|
||||||
|
|
||||||
const capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1)
|
|
||||||
const scrollSize = `scroll${capitalizedDimension}`
|
|
||||||
|
|
||||||
this._queueCallback(complete, this._element, true)
|
|
||||||
this._element.style[dimension] = `${this._element[scrollSize]}px`
|
|
||||||
}
|
|
||||||
|
|
||||||
hide() {
|
|
||||||
if (this._isTransitioning || !this._isShown()) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const startEvent = EventHandler.trigger(this._element, EVENT_HIDE)
|
|
||||||
if (startEvent.defaultPrevented) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const dimension = this._getDimension()
|
|
||||||
|
|
||||||
this._element.style[dimension] = `${this._element.getBoundingClientRect()[dimension]}px`
|
|
||||||
|
|
||||||
reflow(this._element)
|
|
||||||
|
|
||||||
this._element.classList.add(CLASS_NAME_COLLAPSING)
|
|
||||||
this._element.classList.remove(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW)
|
|
||||||
|
|
||||||
for (const trigger of this._triggerArray) {
|
|
||||||
const element = SelectorEngine.getElementFromSelector(trigger)
|
|
||||||
|
|
||||||
if (element && !this._isShown(element)) {
|
|
||||||
this._addAriaAndCollapsedClass([trigger], false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this._isTransitioning = true
|
|
||||||
|
|
||||||
const complete = () => {
|
|
||||||
this._isTransitioning = false
|
|
||||||
this._element.classList.remove(CLASS_NAME_COLLAPSING)
|
|
||||||
this._element.classList.add(CLASS_NAME_COLLAPSE)
|
|
||||||
EventHandler.trigger(this._element, EVENT_HIDDEN)
|
|
||||||
}
|
|
||||||
|
|
||||||
this._element.style[dimension] = ''
|
|
||||||
|
|
||||||
this._queueCallback(complete, this._element, true)
|
|
||||||
}
|
|
||||||
|
|
||||||
_isShown(element = this._element) {
|
|
||||||
return element.classList.contains(CLASS_NAME_SHOW)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Private
|
|
||||||
_configAfterMerge(config) {
|
|
||||||
config.toggle = Boolean(config.toggle) // Coerce string values
|
|
||||||
config.parent = getElement(config.parent)
|
|
||||||
return config
|
|
||||||
}
|
|
||||||
|
|
||||||
_getDimension() {
|
|
||||||
return this._element.classList.contains(CLASS_NAME_HORIZONTAL) ? WIDTH : HEIGHT
|
|
||||||
}
|
|
||||||
|
|
||||||
_initializeChildren() {
|
|
||||||
if (!this._config.parent) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const children = this._getFirstLevelChildren(SELECTOR_DATA_TOGGLE)
|
|
||||||
|
|
||||||
for (const element of children) {
|
|
||||||
const selected = SelectorEngine.getElementFromSelector(element)
|
|
||||||
|
|
||||||
if (selected) {
|
|
||||||
this._addAriaAndCollapsedClass([element], this._isShown(selected))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_getFirstLevelChildren(selector) {
|
|
||||||
const children = SelectorEngine.find(CLASS_NAME_DEEPER_CHILDREN, this._config.parent)
|
|
||||||
// remove children if greater depth
|
|
||||||
return SelectorEngine.find(selector, this._config.parent).filter(element => !children.includes(element))
|
|
||||||
}
|
|
||||||
|
|
||||||
_addAriaAndCollapsedClass(triggerArray, isOpen) {
|
|
||||||
if (!triggerArray.length) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const element of triggerArray) {
|
|
||||||
element.classList.toggle(CLASS_NAME_COLLAPSED, !isOpen)
|
|
||||||
element.setAttribute('aria-expanded', isOpen)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Static
|
|
||||||
static jQueryInterface(config) {
|
|
||||||
const _config = {}
|
|
||||||
if (typeof config === 'string' && /show|hide/.test(config)) {
|
|
||||||
_config.toggle = false
|
|
||||||
}
|
|
||||||
|
|
||||||
return this.each(function () {
|
|
||||||
const data = Collapse.getOrCreateInstance(this, _config)
|
|
||||||
|
|
||||||
if (typeof config === 'string') {
|
|
||||||
if (typeof data[config] === 'undefined') {
|
|
||||||
throw new TypeError(`No method named "${config}"`)
|
|
||||||
}
|
|
||||||
|
|
||||||
data[config]()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Data API implementation
|
|
||||||
*/
|
|
||||||
|
|
||||||
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
|
|
||||||
// preventDefault only for <a> elements (which change the URL) not inside the collapsible element
|
|
||||||
if (event.target.tagName === 'A' || (event.delegateTarget && event.delegateTarget.tagName === 'A')) {
|
|
||||||
event.preventDefault()
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const element of SelectorEngine.getMultipleElementsFromSelector(this)) {
|
|
||||||
Collapse.getOrCreateInstance(element, { toggle: false }).toggle()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
/**
|
|
||||||
* jQuery
|
|
||||||
*/
|
|
||||||
|
|
||||||
defineJQueryPlugin(Collapse)
|
|
||||||
|
|
||||||
export default Collapse
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
/**
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
* Bootstrap dom/data.js
|
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Constants
|
|
||||||
*/
|
|
||||||
|
|
||||||
const elementMap = new Map()
|
|
||||||
|
|
||||||
export default {
|
|
||||||
set(element, key, instance) {
|
|
||||||
if (!elementMap.has(element)) {
|
|
||||||
elementMap.set(element, new Map())
|
|
||||||
}
|
|
||||||
|
|
||||||
const instanceMap = elementMap.get(element)
|
|
||||||
|
|
||||||
// make it clear we only want one instance per element
|
|
||||||
// can be removed later when multiple key/instances are fine to be used
|
|
||||||
if (!instanceMap.has(key) && instanceMap.size !== 0) {
|
|
||||||
// eslint-disable-next-line no-console
|
|
||||||
console.error(`Bootstrap doesn't allow more than one instance per element. Bound instance: ${Array.from(instanceMap.keys())[0]}.`)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
instanceMap.set(key, instance)
|
|
||||||
},
|
|
||||||
|
|
||||||
get(element, key) {
|
|
||||||
if (elementMap.has(element)) {
|
|
||||||
return elementMap.get(element).get(key) || null
|
|
||||||
}
|
|
||||||
|
|
||||||
return null
|
|
||||||
},
|
|
||||||
|
|
||||||
remove(element, key) {
|
|
||||||
if (!elementMap.has(element)) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const instanceMap = elementMap.get(element)
|
|
||||||
|
|
||||||
instanceMap.delete(key)
|
|
||||||
|
|
||||||
// free up element references if there are no instances left for an element
|
|
||||||
if (instanceMap.size === 0) {
|
|
||||||
elementMap.delete(element)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,317 +0,0 @@
|
||||||
/**
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
* Bootstrap dom/event-handler.js
|
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { getjQuery } from '../util/index.js'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Constants
|
|
||||||
*/
|
|
||||||
|
|
||||||
const namespaceRegex = /[^.]*(?=\..*)\.|.*/
|
|
||||||
const stripNameRegex = /\..*/
|
|
||||||
const stripUidRegex = /::\d+$/
|
|
||||||
const eventRegistry = {} // Events storage
|
|
||||||
let uidEvent = 1
|
|
||||||
const customEvents = {
|
|
||||||
mouseenter: 'mouseover',
|
|
||||||
mouseleave: 'mouseout'
|
|
||||||
}
|
|
||||||
|
|
||||||
const nativeEvents = new Set([
|
|
||||||
'click',
|
|
||||||
'dblclick',
|
|
||||||
'mouseup',
|
|
||||||
'mousedown',
|
|
||||||
'contextmenu',
|
|
||||||
'mousewheel',
|
|
||||||
'DOMMouseScroll',
|
|
||||||
'mouseover',
|
|
||||||
'mouseout',
|
|
||||||
'mousemove',
|
|
||||||
'selectstart',
|
|
||||||
'selectend',
|
|
||||||
'keydown',
|
|
||||||
'keypress',
|
|
||||||
'keyup',
|
|
||||||
'orientationchange',
|
|
||||||
'touchstart',
|
|
||||||
'touchmove',
|
|
||||||
'touchend',
|
|
||||||
'touchcancel',
|
|
||||||
'pointerdown',
|
|
||||||
'pointermove',
|
|
||||||
'pointerup',
|
|
||||||
'pointerleave',
|
|
||||||
'pointercancel',
|
|
||||||
'gesturestart',
|
|
||||||
'gesturechange',
|
|
||||||
'gestureend',
|
|
||||||
'focus',
|
|
||||||
'blur',
|
|
||||||
'change',
|
|
||||||
'reset',
|
|
||||||
'select',
|
|
||||||
'submit',
|
|
||||||
'focusin',
|
|
||||||
'focusout',
|
|
||||||
'load',
|
|
||||||
'unload',
|
|
||||||
'beforeunload',
|
|
||||||
'resize',
|
|
||||||
'move',
|
|
||||||
'DOMContentLoaded',
|
|
||||||
'readystatechange',
|
|
||||||
'error',
|
|
||||||
'abort',
|
|
||||||
'scroll'
|
|
||||||
])
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Private methods
|
|
||||||
*/
|
|
||||||
|
|
||||||
function makeEventUid(element, uid) {
|
|
||||||
return (uid && `${uid}::${uidEvent++}`) || element.uidEvent || uidEvent++
|
|
||||||
}
|
|
||||||
|
|
||||||
function getElementEvents(element) {
|
|
||||||
const uid = makeEventUid(element)
|
|
||||||
|
|
||||||
element.uidEvent = uid
|
|
||||||
eventRegistry[uid] = eventRegistry[uid] || {}
|
|
||||||
|
|
||||||
return eventRegistry[uid]
|
|
||||||
}
|
|
||||||
|
|
||||||
function bootstrapHandler(element, fn) {
|
|
||||||
return function handler(event) {
|
|
||||||
hydrateObj(event, { delegateTarget: element })
|
|
||||||
|
|
||||||
if (handler.oneOff) {
|
|
||||||
EventHandler.off(element, event.type, fn)
|
|
||||||
}
|
|
||||||
|
|
||||||
return fn.apply(element, [event])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function bootstrapDelegationHandler(element, selector, fn) {
|
|
||||||
return function handler(event) {
|
|
||||||
const domElements = element.querySelectorAll(selector)
|
|
||||||
|
|
||||||
for (let { target } = event; target && target !== this; target = target.parentNode) {
|
|
||||||
for (const domElement of domElements) {
|
|
||||||
if (domElement !== target) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
hydrateObj(event, { delegateTarget: target })
|
|
||||||
|
|
||||||
if (handler.oneOff) {
|
|
||||||
EventHandler.off(element, event.type, selector, fn)
|
|
||||||
}
|
|
||||||
|
|
||||||
return fn.apply(target, [event])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function findHandler(events, callable, delegationSelector = null) {
|
|
||||||
return Object.values(events)
|
|
||||||
.find(event => event.callable === callable && event.delegationSelector === delegationSelector)
|
|
||||||
}
|
|
||||||
|
|
||||||
function normalizeParameters(originalTypeEvent, handler, delegationFunction) {
|
|
||||||
const isDelegated = typeof handler === 'string'
|
|
||||||
// TODO: tooltip passes `false` instead of selector, so we need to check
|
|
||||||
const callable = isDelegated ? delegationFunction : (handler || delegationFunction)
|
|
||||||
let typeEvent = getTypeEvent(originalTypeEvent)
|
|
||||||
|
|
||||||
if (!nativeEvents.has(typeEvent)) {
|
|
||||||
typeEvent = originalTypeEvent
|
|
||||||
}
|
|
||||||
|
|
||||||
return [isDelegated, callable, typeEvent]
|
|
||||||
}
|
|
||||||
|
|
||||||
function addHandler(element, originalTypeEvent, handler, delegationFunction, oneOff) {
|
|
||||||
if (typeof originalTypeEvent !== 'string' || !element) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
let [isDelegated, callable, typeEvent] = normalizeParameters(originalTypeEvent, handler, delegationFunction)
|
|
||||||
|
|
||||||
// in case of mouseenter or mouseleave wrap the handler within a function that checks for its DOM position
|
|
||||||
// this prevents the handler from being dispatched the same way as mouseover or mouseout does
|
|
||||||
if (originalTypeEvent in customEvents) {
|
|
||||||
const wrapFunction = fn => {
|
|
||||||
return function (event) {
|
|
||||||
if (!event.relatedTarget || (event.relatedTarget !== event.delegateTarget && !event.delegateTarget.contains(event.relatedTarget))) {
|
|
||||||
return fn.call(this, event)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
callable = wrapFunction(callable)
|
|
||||||
}
|
|
||||||
|
|
||||||
const events = getElementEvents(element)
|
|
||||||
const handlers = events[typeEvent] || (events[typeEvent] = {})
|
|
||||||
const previousFunction = findHandler(handlers, callable, isDelegated ? handler : null)
|
|
||||||
|
|
||||||
if (previousFunction) {
|
|
||||||
previousFunction.oneOff = previousFunction.oneOff && oneOff
|
|
||||||
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const uid = makeEventUid(callable, originalTypeEvent.replace(namespaceRegex, ''))
|
|
||||||
const fn = isDelegated ?
|
|
||||||
bootstrapDelegationHandler(element, handler, callable) :
|
|
||||||
bootstrapHandler(element, callable)
|
|
||||||
|
|
||||||
fn.delegationSelector = isDelegated ? handler : null
|
|
||||||
fn.callable = callable
|
|
||||||
fn.oneOff = oneOff
|
|
||||||
fn.uidEvent = uid
|
|
||||||
handlers[uid] = fn
|
|
||||||
|
|
||||||
element.addEventListener(typeEvent, fn, isDelegated)
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeHandler(element, events, typeEvent, handler, delegationSelector) {
|
|
||||||
const fn = findHandler(events[typeEvent], handler, delegationSelector)
|
|
||||||
|
|
||||||
if (!fn) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
element.removeEventListener(typeEvent, fn, Boolean(delegationSelector))
|
|
||||||
delete events[typeEvent][fn.uidEvent]
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeNamespacedHandlers(element, events, typeEvent, namespace) {
|
|
||||||
const storeElementEvent = events[typeEvent] || {}
|
|
||||||
|
|
||||||
for (const [handlerKey, event] of Object.entries(storeElementEvent)) {
|
|
||||||
if (handlerKey.includes(namespace)) {
|
|
||||||
removeHandler(element, events, typeEvent, event.callable, event.delegationSelector)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTypeEvent(event) {
|
|
||||||
// allow to get the native events from namespaced events ('click.bs.button' --> 'click')
|
|
||||||
event = event.replace(stripNameRegex, '')
|
|
||||||
return customEvents[event] || event
|
|
||||||
}
|
|
||||||
|
|
||||||
const EventHandler = {
|
|
||||||
on(element, event, handler, delegationFunction) {
|
|
||||||
addHandler(element, event, handler, delegationFunction, false)
|
|
||||||
},
|
|
||||||
|
|
||||||
one(element, event, handler, delegationFunction) {
|
|
||||||
addHandler(element, event, handler, delegationFunction, true)
|
|
||||||
},
|
|
||||||
|
|
||||||
off(element, originalTypeEvent, handler, delegationFunction) {
|
|
||||||
if (typeof originalTypeEvent !== 'string' || !element) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const [isDelegated, callable, typeEvent] = normalizeParameters(originalTypeEvent, handler, delegationFunction)
|
|
||||||
const inNamespace = typeEvent !== originalTypeEvent
|
|
||||||
const events = getElementEvents(element)
|
|
||||||
const storeElementEvent = events[typeEvent] || {}
|
|
||||||
const isNamespace = originalTypeEvent.startsWith('.')
|
|
||||||
|
|
||||||
if (typeof callable !== 'undefined') {
|
|
||||||
// Simplest case: handler is passed, remove that listener ONLY.
|
|
||||||
if (!Object.keys(storeElementEvent).length) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
removeHandler(element, events, typeEvent, callable, isDelegated ? handler : null)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isNamespace) {
|
|
||||||
for (const elementEvent of Object.keys(events)) {
|
|
||||||
removeNamespacedHandlers(element, events, elementEvent, originalTypeEvent.slice(1))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const [keyHandlers, event] of Object.entries(storeElementEvent)) {
|
|
||||||
const handlerKey = keyHandlers.replace(stripUidRegex, '')
|
|
||||||
|
|
||||||
if (!inNamespace || originalTypeEvent.includes(handlerKey)) {
|
|
||||||
removeHandler(element, events, typeEvent, event.callable, event.delegationSelector)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
trigger(element, event, args) {
|
|
||||||
if (typeof event !== 'string' || !element) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
const $ = getjQuery()
|
|
||||||
const typeEvent = getTypeEvent(event)
|
|
||||||
const inNamespace = event !== typeEvent
|
|
||||||
|
|
||||||
let jQueryEvent = null
|
|
||||||
let bubbles = true
|
|
||||||
let nativeDispatch = true
|
|
||||||
let defaultPrevented = false
|
|
||||||
|
|
||||||
if (inNamespace && $) {
|
|
||||||
jQueryEvent = $.Event(event, args)
|
|
||||||
|
|
||||||
$(element).trigger(jQueryEvent)
|
|
||||||
bubbles = !jQueryEvent.isPropagationStopped()
|
|
||||||
nativeDispatch = !jQueryEvent.isImmediatePropagationStopped()
|
|
||||||
defaultPrevented = jQueryEvent.isDefaultPrevented()
|
|
||||||
}
|
|
||||||
|
|
||||||
const evt = hydrateObj(new Event(event, { bubbles, cancelable: true }), args)
|
|
||||||
|
|
||||||
if (defaultPrevented) {
|
|
||||||
evt.preventDefault()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (nativeDispatch) {
|
|
||||||
element.dispatchEvent(evt)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (evt.defaultPrevented && jQueryEvent) {
|
|
||||||
jQueryEvent.preventDefault()
|
|
||||||
}
|
|
||||||
|
|
||||||
return evt
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function hydrateObj(obj, meta = {}) {
|
|
||||||
for (const [key, value] of Object.entries(meta)) {
|
|
||||||
try {
|
|
||||||
obj[key] = value
|
|
||||||
} catch {
|
|
||||||
Object.defineProperty(obj, key, {
|
|
||||||
configurable: true,
|
|
||||||
get() {
|
|
||||||
return value
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return obj
|
|
||||||
}
|
|
||||||
|
|
||||||
export default EventHandler
|
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
/**
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
* Bootstrap dom/manipulator.js
|
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
|
|
||||||
function normalizeData(value) {
|
|
||||||
if (value === 'true') {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
|
|
||||||
if (value === 'false') {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
if (value === Number(value).toString()) {
|
|
||||||
return Number(value)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (value === '' || value === 'null') {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof value !== 'string') {
|
|
||||||
return value
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
return JSON.parse(decodeURIComponent(value))
|
|
||||||
} catch {
|
|
||||||
return value
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function normalizeDataKey(key) {
|
|
||||||
return key.replace(/[A-Z]/g, chr => `-${chr.toLowerCase()}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
const Manipulator = {
|
|
||||||
setDataAttribute(element, key, value) {
|
|
||||||
element.setAttribute(`data-bs-${normalizeDataKey(key)}`, value)
|
|
||||||
},
|
|
||||||
|
|
||||||
removeDataAttribute(element, key) {
|
|
||||||
element.removeAttribute(`data-bs-${normalizeDataKey(key)}`)
|
|
||||||
},
|
|
||||||
|
|
||||||
getDataAttributes(element) {
|
|
||||||
if (!element) {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
|
|
||||||
const attributes = {}
|
|
||||||
const bsKeys = Object.keys(element.dataset).filter(key => key.startsWith('bs') && !key.startsWith('bsConfig'))
|
|
||||||
|
|
||||||
for (const key of bsKeys) {
|
|
||||||
let pureKey = key.replace(/^bs/, '')
|
|
||||||
pureKey = pureKey.charAt(0).toLowerCase() + pureKey.slice(1, pureKey.length)
|
|
||||||
attributes[pureKey] = normalizeData(element.dataset[key])
|
|
||||||
}
|
|
||||||
|
|
||||||
return attributes
|
|
||||||
},
|
|
||||||
|
|
||||||
getDataAttribute(element, key) {
|
|
||||||
return normalizeData(element.getAttribute(`data-bs-${normalizeDataKey(key)}`))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Manipulator
|
|
||||||
|
|
@ -1,126 +0,0 @@
|
||||||
/**
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
* Bootstrap dom/selector-engine.js
|
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { isDisabled, isVisible, parseSelector } from '../util/index.js'
|
|
||||||
|
|
||||||
const getSelector = element => {
|
|
||||||
let selector = element.getAttribute('data-bs-target')
|
|
||||||
|
|
||||||
if (!selector || selector === '#') {
|
|
||||||
let hrefAttribute = element.getAttribute('href')
|
|
||||||
|
|
||||||
// The only valid content that could double as a selector are IDs or classes,
|
|
||||||
// so everything starting with `#` or `.`. If a "real" URL is used as the selector,
|
|
||||||
// `document.querySelector` will rightfully complain it is invalid.
|
|
||||||
// See https://github.com/twbs/bootstrap/issues/32273
|
|
||||||
if (!hrefAttribute || (!hrefAttribute.includes('#') && !hrefAttribute.startsWith('.'))) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
// Just in case some CMS puts out a full URL with the anchor appended
|
|
||||||
if (hrefAttribute.includes('#') && !hrefAttribute.startsWith('#')) {
|
|
||||||
hrefAttribute = `#${hrefAttribute.split('#')[1]}`
|
|
||||||
}
|
|
||||||
|
|
||||||
selector = hrefAttribute && hrefAttribute !== '#' ? hrefAttribute.trim() : null
|
|
||||||
}
|
|
||||||
|
|
||||||
return selector ? selector.split(',').map(sel => parseSelector(sel)).join(',') : null
|
|
||||||
}
|
|
||||||
|
|
||||||
const SelectorEngine = {
|
|
||||||
find(selector, element = document.documentElement) {
|
|
||||||
return [].concat(...Element.prototype.querySelectorAll.call(element, selector))
|
|
||||||
},
|
|
||||||
|
|
||||||
findOne(selector, element = document.documentElement) {
|
|
||||||
return Element.prototype.querySelector.call(element, selector)
|
|
||||||
},
|
|
||||||
|
|
||||||
children(element, selector) {
|
|
||||||
return [].concat(...element.children).filter(child => child.matches(selector))
|
|
||||||
},
|
|
||||||
|
|
||||||
parents(element, selector) {
|
|
||||||
const parents = []
|
|
||||||
let ancestor = element.parentNode.closest(selector)
|
|
||||||
|
|
||||||
while (ancestor) {
|
|
||||||
parents.push(ancestor)
|
|
||||||
ancestor = ancestor.parentNode.closest(selector)
|
|
||||||
}
|
|
||||||
|
|
||||||
return parents
|
|
||||||
},
|
|
||||||
|
|
||||||
prev(element, selector) {
|
|
||||||
let previous = element.previousElementSibling
|
|
||||||
|
|
||||||
while (previous) {
|
|
||||||
if (previous.matches(selector)) {
|
|
||||||
return [previous]
|
|
||||||
}
|
|
||||||
|
|
||||||
previous = previous.previousElementSibling
|
|
||||||
}
|
|
||||||
|
|
||||||
return []
|
|
||||||
},
|
|
||||||
// TODO: this is now unused; remove later along with prev()
|
|
||||||
next(element, selector) {
|
|
||||||
let next = element.nextElementSibling
|
|
||||||
|
|
||||||
while (next) {
|
|
||||||
if (next.matches(selector)) {
|
|
||||||
return [next]
|
|
||||||
}
|
|
||||||
|
|
||||||
next = next.nextElementSibling
|
|
||||||
}
|
|
||||||
|
|
||||||
return []
|
|
||||||
},
|
|
||||||
|
|
||||||
focusableChildren(element) {
|
|
||||||
const focusables = [
|
|
||||||
'a',
|
|
||||||
'button',
|
|
||||||
'input',
|
|
||||||
'textarea',
|
|
||||||
'select',
|
|
||||||
'details',
|
|
||||||
'[tabindex]',
|
|
||||||
'[contenteditable="true"]'
|
|
||||||
].map(selector => `${selector}:not([tabindex^="-"])`).join(',')
|
|
||||||
|
|
||||||
return this.find(focusables, element).filter(el => !isDisabled(el) && isVisible(el))
|
|
||||||
},
|
|
||||||
|
|
||||||
getSelectorFromElement(element) {
|
|
||||||
const selector = getSelector(element)
|
|
||||||
|
|
||||||
if (selector) {
|
|
||||||
return SelectorEngine.findOne(selector) ? selector : null
|
|
||||||
}
|
|
||||||
|
|
||||||
return null
|
|
||||||
},
|
|
||||||
|
|
||||||
getElementFromSelector(element) {
|
|
||||||
const selector = getSelector(element)
|
|
||||||
|
|
||||||
return selector ? SelectorEngine.findOne(selector) : null
|
|
||||||
},
|
|
||||||
|
|
||||||
getMultipleElementsFromSelector(element) {
|
|
||||||
const selector = getSelector(element)
|
|
||||||
|
|
||||||
return selector ? SelectorEngine.find(selector) : []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default SelectorEngine
|
|
||||||
|
|
@ -1,455 +0,0 @@
|
||||||
/**
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
* Bootstrap dropdown.js
|
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
|
|
||||||
import * as Popper from '@popperjs/core'
|
|
||||||
import BaseComponent from './base-component.js'
|
|
||||||
import EventHandler from './dom/event-handler.js'
|
|
||||||
import Manipulator from './dom/manipulator.js'
|
|
||||||
import SelectorEngine from './dom/selector-engine.js'
|
|
||||||
import {
|
|
||||||
defineJQueryPlugin,
|
|
||||||
execute,
|
|
||||||
getElement,
|
|
||||||
getNextActiveElement,
|
|
||||||
isDisabled,
|
|
||||||
isElement,
|
|
||||||
isRTL,
|
|
||||||
isVisible,
|
|
||||||
noop
|
|
||||||
} from './util/index.js'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Constants
|
|
||||||
*/
|
|
||||||
|
|
||||||
const NAME = 'dropdown'
|
|
||||||
const DATA_KEY = 'bs.dropdown'
|
|
||||||
const EVENT_KEY = `.${DATA_KEY}`
|
|
||||||
const DATA_API_KEY = '.data-api'
|
|
||||||
|
|
||||||
const ESCAPE_KEY = 'Escape'
|
|
||||||
const TAB_KEY = 'Tab'
|
|
||||||
const ARROW_UP_KEY = 'ArrowUp'
|
|
||||||
const ARROW_DOWN_KEY = 'ArrowDown'
|
|
||||||
const RIGHT_MOUSE_BUTTON = 2 // MouseEvent.button value for the secondary button, usually the right button
|
|
||||||
|
|
||||||
const EVENT_HIDE = `hide${EVENT_KEY}`
|
|
||||||
const EVENT_HIDDEN = `hidden${EVENT_KEY}`
|
|
||||||
const EVENT_SHOW = `show${EVENT_KEY}`
|
|
||||||
const EVENT_SHOWN = `shown${EVENT_KEY}`
|
|
||||||
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
|
|
||||||
const EVENT_KEYDOWN_DATA_API = `keydown${EVENT_KEY}${DATA_API_KEY}`
|
|
||||||
const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`
|
|
||||||
|
|
||||||
const CLASS_NAME_SHOW = 'show'
|
|
||||||
const CLASS_NAME_DROPUP = 'dropup'
|
|
||||||
const CLASS_NAME_DROPEND = 'dropend'
|
|
||||||
const CLASS_NAME_DROPSTART = 'dropstart'
|
|
||||||
const CLASS_NAME_DROPUP_CENTER = 'dropup-center'
|
|
||||||
const CLASS_NAME_DROPDOWN_CENTER = 'dropdown-center'
|
|
||||||
|
|
||||||
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]:not(.disabled):not(:disabled)'
|
|
||||||
const SELECTOR_DATA_TOGGLE_SHOWN = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW}`
|
|
||||||
const SELECTOR_MENU = '.dropdown-menu'
|
|
||||||
const SELECTOR_NAVBAR = '.navbar'
|
|
||||||
const SELECTOR_NAVBAR_NAV = '.navbar-nav'
|
|
||||||
const SELECTOR_VISIBLE_ITEMS = '.dropdown-menu .dropdown-item:not(.disabled):not(:disabled)'
|
|
||||||
|
|
||||||
const PLACEMENT_TOP = isRTL() ? 'top-end' : 'top-start'
|
|
||||||
const PLACEMENT_TOPEND = isRTL() ? 'top-start' : 'top-end'
|
|
||||||
const PLACEMENT_BOTTOM = isRTL() ? 'bottom-end' : 'bottom-start'
|
|
||||||
const PLACEMENT_BOTTOMEND = isRTL() ? 'bottom-start' : 'bottom-end'
|
|
||||||
const PLACEMENT_RIGHT = isRTL() ? 'left-start' : 'right-start'
|
|
||||||
const PLACEMENT_LEFT = isRTL() ? 'right-start' : 'left-start'
|
|
||||||
const PLACEMENT_TOPCENTER = 'top'
|
|
||||||
const PLACEMENT_BOTTOMCENTER = 'bottom'
|
|
||||||
|
|
||||||
const Default = {
|
|
||||||
autoClose: true,
|
|
||||||
boundary: 'clippingParents',
|
|
||||||
display: 'dynamic',
|
|
||||||
offset: [0, 2],
|
|
||||||
popperConfig: null,
|
|
||||||
reference: 'toggle'
|
|
||||||
}
|
|
||||||
|
|
||||||
const DefaultType = {
|
|
||||||
autoClose: '(boolean|string)',
|
|
||||||
boundary: '(string|element)',
|
|
||||||
display: 'string',
|
|
||||||
offset: '(array|string|function)',
|
|
||||||
popperConfig: '(null|object|function)',
|
|
||||||
reference: '(string|element|object)'
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Class definition
|
|
||||||
*/
|
|
||||||
|
|
||||||
class Dropdown extends BaseComponent {
|
|
||||||
constructor(element, config) {
|
|
||||||
super(element, config)
|
|
||||||
|
|
||||||
this._popper = null
|
|
||||||
this._parent = this._element.parentNode // dropdown wrapper
|
|
||||||
// TODO: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.3/forms/input-group/
|
|
||||||
this._menu = SelectorEngine.next(this._element, SELECTOR_MENU)[0] ||
|
|
||||||
SelectorEngine.prev(this._element, SELECTOR_MENU)[0] ||
|
|
||||||
SelectorEngine.findOne(SELECTOR_MENU, this._parent)
|
|
||||||
this._inNavbar = this._detectNavbar()
|
|
||||||
}
|
|
||||||
|
|
||||||
// Getters
|
|
||||||
static get Default() {
|
|
||||||
return Default
|
|
||||||
}
|
|
||||||
|
|
||||||
static get DefaultType() {
|
|
||||||
return DefaultType
|
|
||||||
}
|
|
||||||
|
|
||||||
static get NAME() {
|
|
||||||
return NAME
|
|
||||||
}
|
|
||||||
|
|
||||||
// Public
|
|
||||||
toggle() {
|
|
||||||
return this._isShown() ? this.hide() : this.show()
|
|
||||||
}
|
|
||||||
|
|
||||||
show() {
|
|
||||||
if (isDisabled(this._element) || this._isShown()) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const relatedTarget = {
|
|
||||||
relatedTarget: this._element
|
|
||||||
}
|
|
||||||
|
|
||||||
const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, relatedTarget)
|
|
||||||
|
|
||||||
if (showEvent.defaultPrevented) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this._createPopper()
|
|
||||||
|
|
||||||
// If this is a touch-enabled device we add extra
|
|
||||||
// empty mouseover listeners to the body's immediate children;
|
|
||||||
// only needed because of broken event delegation on iOS
|
|
||||||
// https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
|
|
||||||
if ('ontouchstart' in document.documentElement && !this._parent.closest(SELECTOR_NAVBAR_NAV)) {
|
|
||||||
for (const element of [].concat(...document.body.children)) {
|
|
||||||
EventHandler.on(element, 'mouseover', noop)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this._element.focus()
|
|
||||||
this._element.setAttribute('aria-expanded', true)
|
|
||||||
|
|
||||||
this._menu.classList.add(CLASS_NAME_SHOW)
|
|
||||||
this._element.classList.add(CLASS_NAME_SHOW)
|
|
||||||
EventHandler.trigger(this._element, EVENT_SHOWN, relatedTarget)
|
|
||||||
}
|
|
||||||
|
|
||||||
hide() {
|
|
||||||
if (isDisabled(this._element) || !this._isShown()) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const relatedTarget = {
|
|
||||||
relatedTarget: this._element
|
|
||||||
}
|
|
||||||
|
|
||||||
this._completeHide(relatedTarget)
|
|
||||||
}
|
|
||||||
|
|
||||||
dispose() {
|
|
||||||
if (this._popper) {
|
|
||||||
this._popper.destroy()
|
|
||||||
}
|
|
||||||
|
|
||||||
super.dispose()
|
|
||||||
}
|
|
||||||
|
|
||||||
update() {
|
|
||||||
this._inNavbar = this._detectNavbar()
|
|
||||||
if (this._popper) {
|
|
||||||
this._popper.update()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Private
|
|
||||||
_completeHide(relatedTarget) {
|
|
||||||
const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE, relatedTarget)
|
|
||||||
if (hideEvent.defaultPrevented) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// If this is a touch-enabled device we remove the extra
|
|
||||||
// empty mouseover listeners we added for iOS support
|
|
||||||
if ('ontouchstart' in document.documentElement) {
|
|
||||||
for (const element of [].concat(...document.body.children)) {
|
|
||||||
EventHandler.off(element, 'mouseover', noop)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this._popper) {
|
|
||||||
this._popper.destroy()
|
|
||||||
}
|
|
||||||
|
|
||||||
this._menu.classList.remove(CLASS_NAME_SHOW)
|
|
||||||
this._element.classList.remove(CLASS_NAME_SHOW)
|
|
||||||
this._element.setAttribute('aria-expanded', 'false')
|
|
||||||
Manipulator.removeDataAttribute(this._menu, 'popper')
|
|
||||||
EventHandler.trigger(this._element, EVENT_HIDDEN, relatedTarget)
|
|
||||||
}
|
|
||||||
|
|
||||||
_getConfig(config) {
|
|
||||||
config = super._getConfig(config)
|
|
||||||
|
|
||||||
if (typeof config.reference === 'object' && !isElement(config.reference) &&
|
|
||||||
typeof config.reference.getBoundingClientRect !== 'function'
|
|
||||||
) {
|
|
||||||
// Popper virtual elements require a getBoundingClientRect method
|
|
||||||
throw new TypeError(`${NAME.toUpperCase()}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`)
|
|
||||||
}
|
|
||||||
|
|
||||||
return config
|
|
||||||
}
|
|
||||||
|
|
||||||
_createPopper() {
|
|
||||||
if (typeof Popper === 'undefined') {
|
|
||||||
throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org)')
|
|
||||||
}
|
|
||||||
|
|
||||||
let referenceElement = this._element
|
|
||||||
|
|
||||||
if (this._config.reference === 'parent') {
|
|
||||||
referenceElement = this._parent
|
|
||||||
} else if (isElement(this._config.reference)) {
|
|
||||||
referenceElement = getElement(this._config.reference)
|
|
||||||
} else if (typeof this._config.reference === 'object') {
|
|
||||||
referenceElement = this._config.reference
|
|
||||||
}
|
|
||||||
|
|
||||||
const popperConfig = this._getPopperConfig()
|
|
||||||
this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig)
|
|
||||||
}
|
|
||||||
|
|
||||||
_isShown() {
|
|
||||||
return this._menu.classList.contains(CLASS_NAME_SHOW)
|
|
||||||
}
|
|
||||||
|
|
||||||
_getPlacement() {
|
|
||||||
const parentDropdown = this._parent
|
|
||||||
|
|
||||||
if (parentDropdown.classList.contains(CLASS_NAME_DROPEND)) {
|
|
||||||
return PLACEMENT_RIGHT
|
|
||||||
}
|
|
||||||
|
|
||||||
if (parentDropdown.classList.contains(CLASS_NAME_DROPSTART)) {
|
|
||||||
return PLACEMENT_LEFT
|
|
||||||
}
|
|
||||||
|
|
||||||
if (parentDropdown.classList.contains(CLASS_NAME_DROPUP_CENTER)) {
|
|
||||||
return PLACEMENT_TOPCENTER
|
|
||||||
}
|
|
||||||
|
|
||||||
if (parentDropdown.classList.contains(CLASS_NAME_DROPDOWN_CENTER)) {
|
|
||||||
return PLACEMENT_BOTTOMCENTER
|
|
||||||
}
|
|
||||||
|
|
||||||
// We need to trim the value because custom properties can also include spaces
|
|
||||||
const isEnd = getComputedStyle(this._menu).getPropertyValue('--bs-position').trim() === 'end'
|
|
||||||
|
|
||||||
if (parentDropdown.classList.contains(CLASS_NAME_DROPUP)) {
|
|
||||||
return isEnd ? PLACEMENT_TOPEND : PLACEMENT_TOP
|
|
||||||
}
|
|
||||||
|
|
||||||
return isEnd ? PLACEMENT_BOTTOMEND : PLACEMENT_BOTTOM
|
|
||||||
}
|
|
||||||
|
|
||||||
_detectNavbar() {
|
|
||||||
return this._element.closest(SELECTOR_NAVBAR) !== null
|
|
||||||
}
|
|
||||||
|
|
||||||
_getOffset() {
|
|
||||||
const { offset } = this._config
|
|
||||||
|
|
||||||
if (typeof offset === 'string') {
|
|
||||||
return offset.split(',').map(value => Number.parseInt(value, 10))
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof offset === 'function') {
|
|
||||||
return popperData => offset(popperData, this._element)
|
|
||||||
}
|
|
||||||
|
|
||||||
return offset
|
|
||||||
}
|
|
||||||
|
|
||||||
_getPopperConfig() {
|
|
||||||
const defaultBsPopperConfig = {
|
|
||||||
placement: this._getPlacement(),
|
|
||||||
modifiers: [{
|
|
||||||
name: 'preventOverflow',
|
|
||||||
options: {
|
|
||||||
boundary: this._config.boundary
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'offset',
|
|
||||||
options: {
|
|
||||||
offset: this._getOffset()
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
|
|
||||||
// Disable Popper if we have a static display or Dropdown is in Navbar
|
|
||||||
if (this._inNavbar || this._config.display === 'static') {
|
|
||||||
Manipulator.setDataAttribute(this._menu, 'popper', 'static') // TODO: v6 remove
|
|
||||||
defaultBsPopperConfig.modifiers = [{
|
|
||||||
name: 'applyStyles',
|
|
||||||
enabled: false
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
...defaultBsPopperConfig,
|
|
||||||
...execute(this._config.popperConfig, [defaultBsPopperConfig])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_selectMenuItem({ key, target }) {
|
|
||||||
const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, this._menu).filter(element => isVisible(element))
|
|
||||||
|
|
||||||
if (!items.length) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// if target isn't included in items (e.g. when expanding the dropdown)
|
|
||||||
// allow cycling to get the last item in case key equals ARROW_UP_KEY
|
|
||||||
getNextActiveElement(items, target, key === ARROW_DOWN_KEY, !items.includes(target)).focus()
|
|
||||||
}
|
|
||||||
|
|
||||||
// Static
|
|
||||||
static jQueryInterface(config) {
|
|
||||||
return this.each(function () {
|
|
||||||
const data = Dropdown.getOrCreateInstance(this, config)
|
|
||||||
|
|
||||||
if (typeof config !== 'string') {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof data[config] === 'undefined') {
|
|
||||||
throw new TypeError(`No method named "${config}"`)
|
|
||||||
}
|
|
||||||
|
|
||||||
data[config]()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
static clearMenus(event) {
|
|
||||||
if (event.button === RIGHT_MOUSE_BUTTON || (event.type === 'keyup' && event.key !== TAB_KEY)) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const openToggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE_SHOWN)
|
|
||||||
|
|
||||||
for (const toggle of openToggles) {
|
|
||||||
const context = Dropdown.getInstance(toggle)
|
|
||||||
if (!context || context._config.autoClose === false) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
const composedPath = event.composedPath()
|
|
||||||
const isMenuTarget = composedPath.includes(context._menu)
|
|
||||||
if (
|
|
||||||
composedPath.includes(context._element) ||
|
|
||||||
(context._config.autoClose === 'inside' && !isMenuTarget) ||
|
|
||||||
(context._config.autoClose === 'outside' && isMenuTarget)
|
|
||||||
) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tab navigation through the dropdown menu or events from contained inputs shouldn't close the menu
|
|
||||||
if (context._menu.contains(event.target) && ((event.type === 'keyup' && event.key === TAB_KEY) || /input|select|option|textarea|form/i.test(event.target.tagName))) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
const relatedTarget = { relatedTarget: context._element }
|
|
||||||
|
|
||||||
if (event.type === 'click') {
|
|
||||||
relatedTarget.clickEvent = event
|
|
||||||
}
|
|
||||||
|
|
||||||
context._completeHide(relatedTarget)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
static dataApiKeydownHandler(event) {
|
|
||||||
// If not an UP | DOWN | ESCAPE key => not a dropdown command
|
|
||||||
// If input/textarea && if key is other than ESCAPE => not a dropdown command
|
|
||||||
|
|
||||||
const isInput = /input|textarea/i.test(event.target.tagName)
|
|
||||||
const isEscapeEvent = event.key === ESCAPE_KEY
|
|
||||||
const isUpOrDownEvent = [ARROW_UP_KEY, ARROW_DOWN_KEY].includes(event.key)
|
|
||||||
|
|
||||||
if (!isUpOrDownEvent && !isEscapeEvent) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isInput && !isEscapeEvent) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
event.preventDefault()
|
|
||||||
|
|
||||||
// TODO: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.3/forms/input-group/
|
|
||||||
const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE) ?
|
|
||||||
this :
|
|
||||||
(SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0] ||
|
|
||||||
SelectorEngine.next(this, SELECTOR_DATA_TOGGLE)[0] ||
|
|
||||||
SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, event.delegateTarget.parentNode))
|
|
||||||
|
|
||||||
const instance = Dropdown.getOrCreateInstance(getToggleButton)
|
|
||||||
|
|
||||||
if (isUpOrDownEvent) {
|
|
||||||
event.stopPropagation()
|
|
||||||
instance.show()
|
|
||||||
instance._selectMenuItem(event)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (instance._isShown()) { // else is escape and we check if it is shown
|
|
||||||
event.stopPropagation()
|
|
||||||
instance.hide()
|
|
||||||
getToggleButton.focus()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Data API implementation
|
|
||||||
*/
|
|
||||||
|
|
||||||
EventHandler.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_DATA_TOGGLE, Dropdown.dataApiKeydownHandler)
|
|
||||||
EventHandler.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_MENU, Dropdown.dataApiKeydownHandler)
|
|
||||||
EventHandler.on(document, EVENT_CLICK_DATA_API, Dropdown.clearMenus)
|
|
||||||
EventHandler.on(document, EVENT_KEYUP_DATA_API, Dropdown.clearMenus)
|
|
||||||
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
|
|
||||||
event.preventDefault()
|
|
||||||
Dropdown.getOrCreateInstance(this).toggle()
|
|
||||||
})
|
|
||||||
|
|
||||||
/**
|
|
||||||
* jQuery
|
|
||||||
*/
|
|
||||||
|
|
||||||
defineJQueryPlugin(Dropdown)
|
|
||||||
|
|
||||||
export default Dropdown
|
|
||||||
|
|
@ -1,378 +0,0 @@
|
||||||
/**
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
* Bootstrap modal.js
|
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
|
|
||||||
import BaseComponent from './base-component.js'
|
|
||||||
import EventHandler from './dom/event-handler.js'
|
|
||||||
import SelectorEngine from './dom/selector-engine.js'
|
|
||||||
import Backdrop from './util/backdrop.js'
|
|
||||||
import { enableDismissTrigger } from './util/component-functions.js'
|
|
||||||
import FocusTrap from './util/focustrap.js'
|
|
||||||
import {
|
|
||||||
defineJQueryPlugin, isRTL, isVisible, reflow
|
|
||||||
} from './util/index.js'
|
|
||||||
import ScrollBarHelper from './util/scrollbar.js'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Constants
|
|
||||||
*/
|
|
||||||
|
|
||||||
const NAME = 'modal'
|
|
||||||
const DATA_KEY = 'bs.modal'
|
|
||||||
const EVENT_KEY = `.${DATA_KEY}`
|
|
||||||
const DATA_API_KEY = '.data-api'
|
|
||||||
const ESCAPE_KEY = 'Escape'
|
|
||||||
|
|
||||||
const EVENT_HIDE = `hide${EVENT_KEY}`
|
|
||||||
const EVENT_HIDE_PREVENTED = `hidePrevented${EVENT_KEY}`
|
|
||||||
const EVENT_HIDDEN = `hidden${EVENT_KEY}`
|
|
||||||
const EVENT_SHOW = `show${EVENT_KEY}`
|
|
||||||
const EVENT_SHOWN = `shown${EVENT_KEY}`
|
|
||||||
const EVENT_RESIZE = `resize${EVENT_KEY}`
|
|
||||||
const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}`
|
|
||||||
const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY}`
|
|
||||||
const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`
|
|
||||||
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
|
|
||||||
|
|
||||||
const CLASS_NAME_OPEN = 'modal-open'
|
|
||||||
const CLASS_NAME_FADE = 'fade'
|
|
||||||
const CLASS_NAME_SHOW = 'show'
|
|
||||||
const CLASS_NAME_STATIC = 'modal-static'
|
|
||||||
|
|
||||||
const OPEN_SELECTOR = '.modal.show'
|
|
||||||
const SELECTOR_DIALOG = '.modal-dialog'
|
|
||||||
const SELECTOR_MODAL_BODY = '.modal-body'
|
|
||||||
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="modal"]'
|
|
||||||
|
|
||||||
const Default = {
|
|
||||||
backdrop: true,
|
|
||||||
focus: true,
|
|
||||||
keyboard: true
|
|
||||||
}
|
|
||||||
|
|
||||||
const DefaultType = {
|
|
||||||
backdrop: '(boolean|string)',
|
|
||||||
focus: 'boolean',
|
|
||||||
keyboard: 'boolean'
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Class definition
|
|
||||||
*/
|
|
||||||
|
|
||||||
class Modal extends BaseComponent {
|
|
||||||
constructor(element, config) {
|
|
||||||
super(element, config)
|
|
||||||
|
|
||||||
this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element)
|
|
||||||
this._backdrop = this._initializeBackDrop()
|
|
||||||
this._focustrap = this._initializeFocusTrap()
|
|
||||||
this._isShown = false
|
|
||||||
this._isTransitioning = false
|
|
||||||
this._scrollBar = new ScrollBarHelper()
|
|
||||||
|
|
||||||
this._addEventListeners()
|
|
||||||
}
|
|
||||||
|
|
||||||
// Getters
|
|
||||||
static get Default() {
|
|
||||||
return Default
|
|
||||||
}
|
|
||||||
|
|
||||||
static get DefaultType() {
|
|
||||||
return DefaultType
|
|
||||||
}
|
|
||||||
|
|
||||||
static get NAME() {
|
|
||||||
return NAME
|
|
||||||
}
|
|
||||||
|
|
||||||
// Public
|
|
||||||
toggle(relatedTarget) {
|
|
||||||
return this._isShown ? this.hide() : this.show(relatedTarget)
|
|
||||||
}
|
|
||||||
|
|
||||||
show(relatedTarget) {
|
|
||||||
if (this._isShown || this._isTransitioning) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, {
|
|
||||||
relatedTarget
|
|
||||||
})
|
|
||||||
|
|
||||||
if (showEvent.defaultPrevented) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this._isShown = true
|
|
||||||
this._isTransitioning = true
|
|
||||||
|
|
||||||
this._scrollBar.hide()
|
|
||||||
|
|
||||||
document.body.classList.add(CLASS_NAME_OPEN)
|
|
||||||
|
|
||||||
this._adjustDialog()
|
|
||||||
|
|
||||||
this._backdrop.show(() => this._showElement(relatedTarget))
|
|
||||||
}
|
|
||||||
|
|
||||||
hide() {
|
|
||||||
if (!this._isShown || this._isTransitioning) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE)
|
|
||||||
|
|
||||||
if (hideEvent.defaultPrevented) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this._isShown = false
|
|
||||||
this._isTransitioning = true
|
|
||||||
this._focustrap.deactivate()
|
|
||||||
|
|
||||||
this._element.classList.remove(CLASS_NAME_SHOW)
|
|
||||||
|
|
||||||
this._queueCallback(() => this._hideModal(), this._element, this._isAnimated())
|
|
||||||
}
|
|
||||||
|
|
||||||
dispose() {
|
|
||||||
EventHandler.off(window, EVENT_KEY)
|
|
||||||
EventHandler.off(this._dialog, EVENT_KEY)
|
|
||||||
|
|
||||||
this._backdrop.dispose()
|
|
||||||
this._focustrap.deactivate()
|
|
||||||
|
|
||||||
super.dispose()
|
|
||||||
}
|
|
||||||
|
|
||||||
handleUpdate() {
|
|
||||||
this._adjustDialog()
|
|
||||||
}
|
|
||||||
|
|
||||||
// Private
|
|
||||||
_initializeBackDrop() {
|
|
||||||
return new Backdrop({
|
|
||||||
isVisible: Boolean(this._config.backdrop), // 'static' option will be translated to true, and booleans will keep their value,
|
|
||||||
isAnimated: this._isAnimated()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
_initializeFocusTrap() {
|
|
||||||
return new FocusTrap({
|
|
||||||
trapElement: this._element
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
_showElement(relatedTarget) {
|
|
||||||
// try to append dynamic modal
|
|
||||||
if (!document.body.contains(this._element)) {
|
|
||||||
document.body.append(this._element)
|
|
||||||
}
|
|
||||||
|
|
||||||
this._element.style.display = 'block'
|
|
||||||
this._element.removeAttribute('aria-hidden')
|
|
||||||
this._element.setAttribute('aria-modal', true)
|
|
||||||
this._element.setAttribute('role', 'dialog')
|
|
||||||
this._element.scrollTop = 0
|
|
||||||
|
|
||||||
const modalBody = SelectorEngine.findOne(SELECTOR_MODAL_BODY, this._dialog)
|
|
||||||
if (modalBody) {
|
|
||||||
modalBody.scrollTop = 0
|
|
||||||
}
|
|
||||||
|
|
||||||
reflow(this._element)
|
|
||||||
|
|
||||||
this._element.classList.add(CLASS_NAME_SHOW)
|
|
||||||
|
|
||||||
const transitionComplete = () => {
|
|
||||||
if (this._config.focus) {
|
|
||||||
this._focustrap.activate()
|
|
||||||
}
|
|
||||||
|
|
||||||
this._isTransitioning = false
|
|
||||||
EventHandler.trigger(this._element, EVENT_SHOWN, {
|
|
||||||
relatedTarget
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
this._queueCallback(transitionComplete, this._dialog, this._isAnimated())
|
|
||||||
}
|
|
||||||
|
|
||||||
_addEventListeners() {
|
|
||||||
EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS, event => {
|
|
||||||
if (event.key !== ESCAPE_KEY) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this._config.keyboard) {
|
|
||||||
this.hide()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this._triggerBackdropTransition()
|
|
||||||
})
|
|
||||||
|
|
||||||
EventHandler.on(window, EVENT_RESIZE, () => {
|
|
||||||
if (this._isShown && !this._isTransitioning) {
|
|
||||||
this._adjustDialog()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
EventHandler.on(this._element, EVENT_MOUSEDOWN_DISMISS, event => {
|
|
||||||
// a bad trick to segregate clicks that may start inside dialog but end outside, and avoid listen to scrollbar clicks
|
|
||||||
EventHandler.one(this._element, EVENT_CLICK_DISMISS, event2 => {
|
|
||||||
if (this._element !== event.target || this._element !== event2.target) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this._config.backdrop === 'static') {
|
|
||||||
this._triggerBackdropTransition()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this._config.backdrop) {
|
|
||||||
this.hide()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
_hideModal() {
|
|
||||||
this._element.style.display = 'none'
|
|
||||||
this._element.setAttribute('aria-hidden', true)
|
|
||||||
this._element.removeAttribute('aria-modal')
|
|
||||||
this._element.removeAttribute('role')
|
|
||||||
this._isTransitioning = false
|
|
||||||
|
|
||||||
this._backdrop.hide(() => {
|
|
||||||
document.body.classList.remove(CLASS_NAME_OPEN)
|
|
||||||
this._resetAdjustments()
|
|
||||||
this._scrollBar.reset()
|
|
||||||
EventHandler.trigger(this._element, EVENT_HIDDEN)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
_isAnimated() {
|
|
||||||
return this._element.classList.contains(CLASS_NAME_FADE)
|
|
||||||
}
|
|
||||||
|
|
||||||
_triggerBackdropTransition() {
|
|
||||||
const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED)
|
|
||||||
if (hideEvent.defaultPrevented) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight
|
|
||||||
const initialOverflowY = this._element.style.overflowY
|
|
||||||
// return if the following background transition hasn't yet completed
|
|
||||||
if (initialOverflowY === 'hidden' || this._element.classList.contains(CLASS_NAME_STATIC)) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!isModalOverflowing) {
|
|
||||||
this._element.style.overflowY = 'hidden'
|
|
||||||
}
|
|
||||||
|
|
||||||
this._element.classList.add(CLASS_NAME_STATIC)
|
|
||||||
this._queueCallback(() => {
|
|
||||||
this._element.classList.remove(CLASS_NAME_STATIC)
|
|
||||||
this._queueCallback(() => {
|
|
||||||
this._element.style.overflowY = initialOverflowY
|
|
||||||
}, this._dialog)
|
|
||||||
}, this._dialog)
|
|
||||||
|
|
||||||
this._element.focus()
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The following methods are used to handle overflowing modals
|
|
||||||
*/
|
|
||||||
|
|
||||||
_adjustDialog() {
|
|
||||||
const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight
|
|
||||||
const scrollbarWidth = this._scrollBar.getWidth()
|
|
||||||
const isBodyOverflowing = scrollbarWidth > 0
|
|
||||||
|
|
||||||
if (isBodyOverflowing && !isModalOverflowing) {
|
|
||||||
const property = isRTL() ? 'paddingLeft' : 'paddingRight'
|
|
||||||
this._element.style[property] = `${scrollbarWidth}px`
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!isBodyOverflowing && isModalOverflowing) {
|
|
||||||
const property = isRTL() ? 'paddingRight' : 'paddingLeft'
|
|
||||||
this._element.style[property] = `${scrollbarWidth}px`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_resetAdjustments() {
|
|
||||||
this._element.style.paddingLeft = ''
|
|
||||||
this._element.style.paddingRight = ''
|
|
||||||
}
|
|
||||||
|
|
||||||
// Static
|
|
||||||
static jQueryInterface(config, relatedTarget) {
|
|
||||||
return this.each(function () {
|
|
||||||
const data = Modal.getOrCreateInstance(this, config)
|
|
||||||
|
|
||||||
if (typeof config !== 'string') {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof data[config] === 'undefined') {
|
|
||||||
throw new TypeError(`No method named "${config}"`)
|
|
||||||
}
|
|
||||||
|
|
||||||
data[config](relatedTarget)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Data API implementation
|
|
||||||
*/
|
|
||||||
|
|
||||||
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
|
|
||||||
const target = SelectorEngine.getElementFromSelector(this)
|
|
||||||
|
|
||||||
if (['A', 'AREA'].includes(this.tagName)) {
|
|
||||||
event.preventDefault()
|
|
||||||
}
|
|
||||||
|
|
||||||
EventHandler.one(target, EVENT_SHOW, showEvent => {
|
|
||||||
if (showEvent.defaultPrevented) {
|
|
||||||
// only register focus restorer if modal will actually get shown
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
EventHandler.one(target, EVENT_HIDDEN, () => {
|
|
||||||
if (isVisible(this)) {
|
|
||||||
this.focus()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
// avoid conflict when clicking modal toggler while another one is open
|
|
||||||
const alreadyOpen = SelectorEngine.findOne(OPEN_SELECTOR)
|
|
||||||
if (alreadyOpen) {
|
|
||||||
Modal.getInstance(alreadyOpen).hide()
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = Modal.getOrCreateInstance(target)
|
|
||||||
|
|
||||||
data.toggle(this)
|
|
||||||
})
|
|
||||||
|
|
||||||
enableDismissTrigger(Modal)
|
|
||||||
|
|
||||||
/**
|
|
||||||
* jQuery
|
|
||||||
*/
|
|
||||||
|
|
||||||
defineJQueryPlugin(Modal)
|
|
||||||
|
|
||||||
export default Modal
|
|
||||||
|
|
@ -1,282 +0,0 @@
|
||||||
/**
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
* Bootstrap offcanvas.js
|
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
|
|
||||||
import BaseComponent from './base-component.js'
|
|
||||||
import EventHandler from './dom/event-handler.js'
|
|
||||||
import SelectorEngine from './dom/selector-engine.js'
|
|
||||||
import Backdrop from './util/backdrop.js'
|
|
||||||
import { enableDismissTrigger } from './util/component-functions.js'
|
|
||||||
import FocusTrap from './util/focustrap.js'
|
|
||||||
import {
|
|
||||||
defineJQueryPlugin,
|
|
||||||
isDisabled,
|
|
||||||
isVisible
|
|
||||||
} from './util/index.js'
|
|
||||||
import ScrollBarHelper from './util/scrollbar.js'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Constants
|
|
||||||
*/
|
|
||||||
|
|
||||||
const NAME = 'offcanvas'
|
|
||||||
const DATA_KEY = 'bs.offcanvas'
|
|
||||||
const EVENT_KEY = `.${DATA_KEY}`
|
|
||||||
const DATA_API_KEY = '.data-api'
|
|
||||||
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
|
|
||||||
const ESCAPE_KEY = 'Escape'
|
|
||||||
|
|
||||||
const CLASS_NAME_SHOW = 'show'
|
|
||||||
const CLASS_NAME_SHOWING = 'showing'
|
|
||||||
const CLASS_NAME_HIDING = 'hiding'
|
|
||||||
const CLASS_NAME_BACKDROP = 'offcanvas-backdrop'
|
|
||||||
const OPEN_SELECTOR = '.offcanvas.show'
|
|
||||||
|
|
||||||
const EVENT_SHOW = `show${EVENT_KEY}`
|
|
||||||
const EVENT_SHOWN = `shown${EVENT_KEY}`
|
|
||||||
const EVENT_HIDE = `hide${EVENT_KEY}`
|
|
||||||
const EVENT_HIDE_PREVENTED = `hidePrevented${EVENT_KEY}`
|
|
||||||
const EVENT_HIDDEN = `hidden${EVENT_KEY}`
|
|
||||||
const EVENT_RESIZE = `resize${EVENT_KEY}`
|
|
||||||
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
|
|
||||||
const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`
|
|
||||||
|
|
||||||
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="offcanvas"]'
|
|
||||||
|
|
||||||
const Default = {
|
|
||||||
backdrop: true,
|
|
||||||
keyboard: true,
|
|
||||||
scroll: false
|
|
||||||
}
|
|
||||||
|
|
||||||
const DefaultType = {
|
|
||||||
backdrop: '(boolean|string)',
|
|
||||||
keyboard: 'boolean',
|
|
||||||
scroll: 'boolean'
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Class definition
|
|
||||||
*/
|
|
||||||
|
|
||||||
class Offcanvas extends BaseComponent {
|
|
||||||
constructor(element, config) {
|
|
||||||
super(element, config)
|
|
||||||
|
|
||||||
this._isShown = false
|
|
||||||
this._backdrop = this._initializeBackDrop()
|
|
||||||
this._focustrap = this._initializeFocusTrap()
|
|
||||||
this._addEventListeners()
|
|
||||||
}
|
|
||||||
|
|
||||||
// Getters
|
|
||||||
static get Default() {
|
|
||||||
return Default
|
|
||||||
}
|
|
||||||
|
|
||||||
static get DefaultType() {
|
|
||||||
return DefaultType
|
|
||||||
}
|
|
||||||
|
|
||||||
static get NAME() {
|
|
||||||
return NAME
|
|
||||||
}
|
|
||||||
|
|
||||||
// Public
|
|
||||||
toggle(relatedTarget) {
|
|
||||||
return this._isShown ? this.hide() : this.show(relatedTarget)
|
|
||||||
}
|
|
||||||
|
|
||||||
show(relatedTarget) {
|
|
||||||
if (this._isShown) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, { relatedTarget })
|
|
||||||
|
|
||||||
if (showEvent.defaultPrevented) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this._isShown = true
|
|
||||||
this._backdrop.show()
|
|
||||||
|
|
||||||
if (!this._config.scroll) {
|
|
||||||
new ScrollBarHelper().hide()
|
|
||||||
}
|
|
||||||
|
|
||||||
this._element.setAttribute('aria-modal', true)
|
|
||||||
this._element.setAttribute('role', 'dialog')
|
|
||||||
this._element.classList.add(CLASS_NAME_SHOWING)
|
|
||||||
|
|
||||||
const completeCallBack = () => {
|
|
||||||
if (!this._config.scroll || this._config.backdrop) {
|
|
||||||
this._focustrap.activate()
|
|
||||||
}
|
|
||||||
|
|
||||||
this._element.classList.add(CLASS_NAME_SHOW)
|
|
||||||
this._element.classList.remove(CLASS_NAME_SHOWING)
|
|
||||||
EventHandler.trigger(this._element, EVENT_SHOWN, { relatedTarget })
|
|
||||||
}
|
|
||||||
|
|
||||||
this._queueCallback(completeCallBack, this._element, true)
|
|
||||||
}
|
|
||||||
|
|
||||||
hide() {
|
|
||||||
if (!this._isShown) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE)
|
|
||||||
|
|
||||||
if (hideEvent.defaultPrevented) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this._focustrap.deactivate()
|
|
||||||
this._element.blur()
|
|
||||||
this._isShown = false
|
|
||||||
this._element.classList.add(CLASS_NAME_HIDING)
|
|
||||||
this._backdrop.hide()
|
|
||||||
|
|
||||||
const completeCallback = () => {
|
|
||||||
this._element.classList.remove(CLASS_NAME_SHOW, CLASS_NAME_HIDING)
|
|
||||||
this._element.removeAttribute('aria-modal')
|
|
||||||
this._element.removeAttribute('role')
|
|
||||||
|
|
||||||
if (!this._config.scroll) {
|
|
||||||
new ScrollBarHelper().reset()
|
|
||||||
}
|
|
||||||
|
|
||||||
EventHandler.trigger(this._element, EVENT_HIDDEN)
|
|
||||||
}
|
|
||||||
|
|
||||||
this._queueCallback(completeCallback, this._element, true)
|
|
||||||
}
|
|
||||||
|
|
||||||
dispose() {
|
|
||||||
this._backdrop.dispose()
|
|
||||||
this._focustrap.deactivate()
|
|
||||||
super.dispose()
|
|
||||||
}
|
|
||||||
|
|
||||||
// Private
|
|
||||||
_initializeBackDrop() {
|
|
||||||
const clickCallback = () => {
|
|
||||||
if (this._config.backdrop === 'static') {
|
|
||||||
EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this.hide()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 'static' option will be translated to true, and booleans will keep their value
|
|
||||||
const isVisible = Boolean(this._config.backdrop)
|
|
||||||
|
|
||||||
return new Backdrop({
|
|
||||||
className: CLASS_NAME_BACKDROP,
|
|
||||||
isVisible,
|
|
||||||
isAnimated: true,
|
|
||||||
rootElement: this._element.parentNode,
|
|
||||||
clickCallback: isVisible ? clickCallback : null
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
_initializeFocusTrap() {
|
|
||||||
return new FocusTrap({
|
|
||||||
trapElement: this._element
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
_addEventListeners() {
|
|
||||||
EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS, event => {
|
|
||||||
if (event.key !== ESCAPE_KEY) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this._config.keyboard) {
|
|
||||||
this.hide()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// Static
|
|
||||||
static jQueryInterface(config) {
|
|
||||||
return this.each(function () {
|
|
||||||
const data = Offcanvas.getOrCreateInstance(this, config)
|
|
||||||
|
|
||||||
if (typeof config !== 'string') {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
|
|
||||||
throw new TypeError(`No method named "${config}"`)
|
|
||||||
}
|
|
||||||
|
|
||||||
data[config](this)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Data API implementation
|
|
||||||
*/
|
|
||||||
|
|
||||||
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
|
|
||||||
const target = SelectorEngine.getElementFromSelector(this)
|
|
||||||
|
|
||||||
if (['A', 'AREA'].includes(this.tagName)) {
|
|
||||||
event.preventDefault()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isDisabled(this)) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
EventHandler.one(target, EVENT_HIDDEN, () => {
|
|
||||||
// focus on trigger when it is closed
|
|
||||||
if (isVisible(this)) {
|
|
||||||
this.focus()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// avoid conflict when clicking a toggler of an offcanvas, while another is open
|
|
||||||
const alreadyOpen = SelectorEngine.findOne(OPEN_SELECTOR)
|
|
||||||
if (alreadyOpen && alreadyOpen !== target) {
|
|
||||||
Offcanvas.getInstance(alreadyOpen).hide()
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = Offcanvas.getOrCreateInstance(target)
|
|
||||||
data.toggle(this)
|
|
||||||
})
|
|
||||||
|
|
||||||
EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
|
|
||||||
for (const selector of SelectorEngine.find(OPEN_SELECTOR)) {
|
|
||||||
Offcanvas.getOrCreateInstance(selector).show()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
EventHandler.on(window, EVENT_RESIZE, () => {
|
|
||||||
for (const element of SelectorEngine.find('[aria-modal][class*=show][class*=offcanvas-]')) {
|
|
||||||
if (getComputedStyle(element).position !== 'fixed') {
|
|
||||||
Offcanvas.getOrCreateInstance(element).hide()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
enableDismissTrigger(Offcanvas)
|
|
||||||
|
|
||||||
/**
|
|
||||||
* jQuery
|
|
||||||
*/
|
|
||||||
|
|
||||||
defineJQueryPlugin(Offcanvas)
|
|
||||||
|
|
||||||
export default Offcanvas
|
|
||||||
|
|
@ -1,97 +0,0 @@
|
||||||
/**
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
* Bootstrap popover.js
|
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
|
|
||||||
import Tooltip from './tooltip.js'
|
|
||||||
import { defineJQueryPlugin } from './util/index.js'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Constants
|
|
||||||
*/
|
|
||||||
|
|
||||||
const NAME = 'popover'
|
|
||||||
|
|
||||||
const SELECTOR_TITLE = '.popover-header'
|
|
||||||
const SELECTOR_CONTENT = '.popover-body'
|
|
||||||
|
|
||||||
const Default = {
|
|
||||||
...Tooltip.Default,
|
|
||||||
content: '',
|
|
||||||
offset: [0, 8],
|
|
||||||
placement: 'right',
|
|
||||||
template: '<div class="popover" role="tooltip">' +
|
|
||||||
'<div class="popover-arrow"></div>' +
|
|
||||||
'<h3 class="popover-header"></h3>' +
|
|
||||||
'<div class="popover-body"></div>' +
|
|
||||||
'</div>',
|
|
||||||
trigger: 'click'
|
|
||||||
}
|
|
||||||
|
|
||||||
const DefaultType = {
|
|
||||||
...Tooltip.DefaultType,
|
|
||||||
content: '(null|string|element|function)'
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Class definition
|
|
||||||
*/
|
|
||||||
|
|
||||||
class Popover extends Tooltip {
|
|
||||||
// Getters
|
|
||||||
static get Default() {
|
|
||||||
return Default
|
|
||||||
}
|
|
||||||
|
|
||||||
static get DefaultType() {
|
|
||||||
return DefaultType
|
|
||||||
}
|
|
||||||
|
|
||||||
static get NAME() {
|
|
||||||
return NAME
|
|
||||||
}
|
|
||||||
|
|
||||||
// Overrides
|
|
||||||
_isWithContent() {
|
|
||||||
return this._getTitle() || this._getContent()
|
|
||||||
}
|
|
||||||
|
|
||||||
// Private
|
|
||||||
_getContentForTemplate() {
|
|
||||||
return {
|
|
||||||
[SELECTOR_TITLE]: this._getTitle(),
|
|
||||||
[SELECTOR_CONTENT]: this._getContent()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_getContent() {
|
|
||||||
return this._resolvePossibleFunction(this._config.content)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Static
|
|
||||||
static jQueryInterface(config) {
|
|
||||||
return this.each(function () {
|
|
||||||
const data = Popover.getOrCreateInstance(this, config)
|
|
||||||
|
|
||||||
if (typeof config !== 'string') {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof data[config] === 'undefined') {
|
|
||||||
throw new TypeError(`No method named "${config}"`)
|
|
||||||
}
|
|
||||||
|
|
||||||
data[config]()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* jQuery
|
|
||||||
*/
|
|
||||||
|
|
||||||
defineJQueryPlugin(Popover)
|
|
||||||
|
|
||||||
export default Popover
|
|
||||||
|
|
@ -1,296 +0,0 @@
|
||||||
/**
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
* Bootstrap scrollspy.js
|
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
|
|
||||||
import BaseComponent from './base-component.js'
|
|
||||||
import EventHandler from './dom/event-handler.js'
|
|
||||||
import SelectorEngine from './dom/selector-engine.js'
|
|
||||||
import {
|
|
||||||
defineJQueryPlugin, getElement, isDisabled, isVisible
|
|
||||||
} from './util/index.js'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Constants
|
|
||||||
*/
|
|
||||||
|
|
||||||
const NAME = 'scrollspy'
|
|
||||||
const DATA_KEY = 'bs.scrollspy'
|
|
||||||
const EVENT_KEY = `.${DATA_KEY}`
|
|
||||||
const DATA_API_KEY = '.data-api'
|
|
||||||
|
|
||||||
const EVENT_ACTIVATE = `activate${EVENT_KEY}`
|
|
||||||
const EVENT_CLICK = `click${EVENT_KEY}`
|
|
||||||
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
|
|
||||||
|
|
||||||
const CLASS_NAME_DROPDOWN_ITEM = 'dropdown-item'
|
|
||||||
const CLASS_NAME_ACTIVE = 'active'
|
|
||||||
|
|
||||||
const SELECTOR_DATA_SPY = '[data-bs-spy="scroll"]'
|
|
||||||
const SELECTOR_TARGET_LINKS = '[href]'
|
|
||||||
const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group'
|
|
||||||
const SELECTOR_NAV_LINKS = '.nav-link'
|
|
||||||
const SELECTOR_NAV_ITEMS = '.nav-item'
|
|
||||||
const SELECTOR_LIST_ITEMS = '.list-group-item'
|
|
||||||
const SELECTOR_LINK_ITEMS = `${SELECTOR_NAV_LINKS}, ${SELECTOR_NAV_ITEMS} > ${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}`
|
|
||||||
const SELECTOR_DROPDOWN = '.dropdown'
|
|
||||||
const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle'
|
|
||||||
|
|
||||||
const Default = {
|
|
||||||
offset: null, // TODO: v6 @deprecated, keep it for backwards compatibility reasons
|
|
||||||
rootMargin: '0px 0px -25%',
|
|
||||||
smoothScroll: false,
|
|
||||||
target: null,
|
|
||||||
threshold: [0.1, 0.5, 1]
|
|
||||||
}
|
|
||||||
|
|
||||||
const DefaultType = {
|
|
||||||
offset: '(number|null)', // TODO v6 @deprecated, keep it for backwards compatibility reasons
|
|
||||||
rootMargin: 'string',
|
|
||||||
smoothScroll: 'boolean',
|
|
||||||
target: 'element',
|
|
||||||
threshold: 'array'
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Class definition
|
|
||||||
*/
|
|
||||||
|
|
||||||
class ScrollSpy extends BaseComponent {
|
|
||||||
constructor(element, config) {
|
|
||||||
super(element, config)
|
|
||||||
|
|
||||||
// this._element is the observablesContainer and config.target the menu links wrapper
|
|
||||||
this._targetLinks = new Map()
|
|
||||||
this._observableSections = new Map()
|
|
||||||
this._rootElement = getComputedStyle(this._element).overflowY === 'visible' ? null : this._element
|
|
||||||
this._activeTarget = null
|
|
||||||
this._observer = null
|
|
||||||
this._previousScrollData = {
|
|
||||||
visibleEntryTop: 0,
|
|
||||||
parentScrollTop: 0
|
|
||||||
}
|
|
||||||
this.refresh() // initialize
|
|
||||||
}
|
|
||||||
|
|
||||||
// Getters
|
|
||||||
static get Default() {
|
|
||||||
return Default
|
|
||||||
}
|
|
||||||
|
|
||||||
static get DefaultType() {
|
|
||||||
return DefaultType
|
|
||||||
}
|
|
||||||
|
|
||||||
static get NAME() {
|
|
||||||
return NAME
|
|
||||||
}
|
|
||||||
|
|
||||||
// Public
|
|
||||||
refresh() {
|
|
||||||
this._initializeTargetsAndObservables()
|
|
||||||
this._maybeEnableSmoothScroll()
|
|
||||||
|
|
||||||
if (this._observer) {
|
|
||||||
this._observer.disconnect()
|
|
||||||
} else {
|
|
||||||
this._observer = this._getNewObserver()
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const section of this._observableSections.values()) {
|
|
||||||
this._observer.observe(section)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
dispose() {
|
|
||||||
this._observer.disconnect()
|
|
||||||
super.dispose()
|
|
||||||
}
|
|
||||||
|
|
||||||
// Private
|
|
||||||
_configAfterMerge(config) {
|
|
||||||
// TODO: on v6 target should be given explicitly & remove the {target: 'ss-target'} case
|
|
||||||
config.target = getElement(config.target) || document.body
|
|
||||||
|
|
||||||
// TODO: v6 Only for backwards compatibility reasons. Use rootMargin only
|
|
||||||
config.rootMargin = config.offset ? `${config.offset}px 0px -30%` : config.rootMargin
|
|
||||||
|
|
||||||
if (typeof config.threshold === 'string') {
|
|
||||||
config.threshold = config.threshold.split(',').map(value => Number.parseFloat(value))
|
|
||||||
}
|
|
||||||
|
|
||||||
return config
|
|
||||||
}
|
|
||||||
|
|
||||||
_maybeEnableSmoothScroll() {
|
|
||||||
if (!this._config.smoothScroll) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// unregister any previous listeners
|
|
||||||
EventHandler.off(this._config.target, EVENT_CLICK)
|
|
||||||
|
|
||||||
EventHandler.on(this._config.target, EVENT_CLICK, SELECTOR_TARGET_LINKS, event => {
|
|
||||||
const observableSection = this._observableSections.get(event.target.hash)
|
|
||||||
if (observableSection) {
|
|
||||||
event.preventDefault()
|
|
||||||
const root = this._rootElement || window
|
|
||||||
const height = observableSection.offsetTop - this._element.offsetTop
|
|
||||||
if (root.scrollTo) {
|
|
||||||
root.scrollTo({ top: height, behavior: 'smooth' })
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// Chrome 60 doesn't support `scrollTo`
|
|
||||||
root.scrollTop = height
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
_getNewObserver() {
|
|
||||||
const options = {
|
|
||||||
root: this._rootElement,
|
|
||||||
threshold: this._config.threshold,
|
|
||||||
rootMargin: this._config.rootMargin
|
|
||||||
}
|
|
||||||
|
|
||||||
return new IntersectionObserver(entries => this._observerCallback(entries), options)
|
|
||||||
}
|
|
||||||
|
|
||||||
// The logic of selection
|
|
||||||
_observerCallback(entries) {
|
|
||||||
const targetElement = entry => this._targetLinks.get(`#${entry.target.id}`)
|
|
||||||
const activate = entry => {
|
|
||||||
this._previousScrollData.visibleEntryTop = entry.target.offsetTop
|
|
||||||
this._process(targetElement(entry))
|
|
||||||
}
|
|
||||||
|
|
||||||
const parentScrollTop = (this._rootElement || document.documentElement).scrollTop
|
|
||||||
const userScrollsDown = parentScrollTop >= this._previousScrollData.parentScrollTop
|
|
||||||
this._previousScrollData.parentScrollTop = parentScrollTop
|
|
||||||
|
|
||||||
for (const entry of entries) {
|
|
||||||
if (!entry.isIntersecting) {
|
|
||||||
this._activeTarget = null
|
|
||||||
this._clearActiveClass(targetElement(entry))
|
|
||||||
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
const entryIsLowerThanPrevious = entry.target.offsetTop >= this._previousScrollData.visibleEntryTop
|
|
||||||
// if we are scrolling down, pick the bigger offsetTop
|
|
||||||
if (userScrollsDown && entryIsLowerThanPrevious) {
|
|
||||||
activate(entry)
|
|
||||||
// if parent isn't scrolled, let's keep the first visible item, breaking the iteration
|
|
||||||
if (!parentScrollTop) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
// if we are scrolling up, pick the smallest offsetTop
|
|
||||||
if (!userScrollsDown && !entryIsLowerThanPrevious) {
|
|
||||||
activate(entry)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_initializeTargetsAndObservables() {
|
|
||||||
this._targetLinks = new Map()
|
|
||||||
this._observableSections = new Map()
|
|
||||||
|
|
||||||
const targetLinks = SelectorEngine.find(SELECTOR_TARGET_LINKS, this._config.target)
|
|
||||||
|
|
||||||
for (const anchor of targetLinks) {
|
|
||||||
// ensure that the anchor has an id and is not disabled
|
|
||||||
if (!anchor.hash || isDisabled(anchor)) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
const observableSection = SelectorEngine.findOne(decodeURI(anchor.hash), this._element)
|
|
||||||
|
|
||||||
// ensure that the observableSection exists & is visible
|
|
||||||
if (isVisible(observableSection)) {
|
|
||||||
this._targetLinks.set(decodeURI(anchor.hash), anchor)
|
|
||||||
this._observableSections.set(anchor.hash, observableSection)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_process(target) {
|
|
||||||
if (this._activeTarget === target) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this._clearActiveClass(this._config.target)
|
|
||||||
this._activeTarget = target
|
|
||||||
target.classList.add(CLASS_NAME_ACTIVE)
|
|
||||||
this._activateParents(target)
|
|
||||||
|
|
||||||
EventHandler.trigger(this._element, EVENT_ACTIVATE, { relatedTarget: target })
|
|
||||||
}
|
|
||||||
|
|
||||||
_activateParents(target) {
|
|
||||||
// Activate dropdown parents
|
|
||||||
if (target.classList.contains(CLASS_NAME_DROPDOWN_ITEM)) {
|
|
||||||
SelectorEngine.findOne(SELECTOR_DROPDOWN_TOGGLE, target.closest(SELECTOR_DROPDOWN))
|
|
||||||
.classList.add(CLASS_NAME_ACTIVE)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const listGroup of SelectorEngine.parents(target, SELECTOR_NAV_LIST_GROUP)) {
|
|
||||||
// Set triggered links parents as active
|
|
||||||
// With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
|
|
||||||
for (const item of SelectorEngine.prev(listGroup, SELECTOR_LINK_ITEMS)) {
|
|
||||||
item.classList.add(CLASS_NAME_ACTIVE)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_clearActiveClass(parent) {
|
|
||||||
parent.classList.remove(CLASS_NAME_ACTIVE)
|
|
||||||
|
|
||||||
const activeNodes = SelectorEngine.find(`${SELECTOR_TARGET_LINKS}.${CLASS_NAME_ACTIVE}`, parent)
|
|
||||||
for (const node of activeNodes) {
|
|
||||||
node.classList.remove(CLASS_NAME_ACTIVE)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Static
|
|
||||||
static jQueryInterface(config) {
|
|
||||||
return this.each(function () {
|
|
||||||
const data = ScrollSpy.getOrCreateInstance(this, config)
|
|
||||||
|
|
||||||
if (typeof config !== 'string') {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
|
|
||||||
throw new TypeError(`No method named "${config}"`)
|
|
||||||
}
|
|
||||||
|
|
||||||
data[config]()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Data API implementation
|
|
||||||
*/
|
|
||||||
|
|
||||||
EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
|
|
||||||
for (const spy of SelectorEngine.find(SELECTOR_DATA_SPY)) {
|
|
||||||
ScrollSpy.getOrCreateInstance(spy)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
/**
|
|
||||||
* jQuery
|
|
||||||
*/
|
|
||||||
|
|
||||||
defineJQueryPlugin(ScrollSpy)
|
|
||||||
|
|
||||||
export default ScrollSpy
|
|
||||||
|
|
@ -1,315 +0,0 @@
|
||||||
/**
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
* Bootstrap tab.js
|
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
|
|
||||||
import BaseComponent from './base-component.js'
|
|
||||||
import EventHandler from './dom/event-handler.js'
|
|
||||||
import SelectorEngine from './dom/selector-engine.js'
|
|
||||||
import { defineJQueryPlugin, getNextActiveElement, isDisabled } from './util/index.js'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Constants
|
|
||||||
*/
|
|
||||||
|
|
||||||
const NAME = 'tab'
|
|
||||||
const DATA_KEY = 'bs.tab'
|
|
||||||
const EVENT_KEY = `.${DATA_KEY}`
|
|
||||||
|
|
||||||
const EVENT_HIDE = `hide${EVENT_KEY}`
|
|
||||||
const EVENT_HIDDEN = `hidden${EVENT_KEY}`
|
|
||||||
const EVENT_SHOW = `show${EVENT_KEY}`
|
|
||||||
const EVENT_SHOWN = `shown${EVENT_KEY}`
|
|
||||||
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}`
|
|
||||||
const EVENT_KEYDOWN = `keydown${EVENT_KEY}`
|
|
||||||
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}`
|
|
||||||
|
|
||||||
const ARROW_LEFT_KEY = 'ArrowLeft'
|
|
||||||
const ARROW_RIGHT_KEY = 'ArrowRight'
|
|
||||||
const ARROW_UP_KEY = 'ArrowUp'
|
|
||||||
const ARROW_DOWN_KEY = 'ArrowDown'
|
|
||||||
const HOME_KEY = 'Home'
|
|
||||||
const END_KEY = 'End'
|
|
||||||
|
|
||||||
const CLASS_NAME_ACTIVE = 'active'
|
|
||||||
const CLASS_NAME_FADE = 'fade'
|
|
||||||
const CLASS_NAME_SHOW = 'show'
|
|
||||||
const CLASS_DROPDOWN = 'dropdown'
|
|
||||||
|
|
||||||
const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle'
|
|
||||||
const SELECTOR_DROPDOWN_MENU = '.dropdown-menu'
|
|
||||||
const NOT_SELECTOR_DROPDOWN_TOGGLE = `:not(${SELECTOR_DROPDOWN_TOGGLE})`
|
|
||||||
|
|
||||||
const SELECTOR_TAB_PANEL = '.list-group, .nav, [role="tablist"]'
|
|
||||||
const SELECTOR_OUTER = '.nav-item, .list-group-item'
|
|
||||||
const SELECTOR_INNER = `.nav-link${NOT_SELECTOR_DROPDOWN_TOGGLE}, .list-group-item${NOT_SELECTOR_DROPDOWN_TOGGLE}, [role="tab"]${NOT_SELECTOR_DROPDOWN_TOGGLE}`
|
|
||||||
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="tab"], [data-bs-toggle="pill"], [data-bs-toggle="list"]' // TODO: could only be `tab` in v6
|
|
||||||
const SELECTOR_INNER_ELEM = `${SELECTOR_INNER}, ${SELECTOR_DATA_TOGGLE}`
|
|
||||||
|
|
||||||
const SELECTOR_DATA_TOGGLE_ACTIVE = `.${CLASS_NAME_ACTIVE}[data-bs-toggle="tab"], .${CLASS_NAME_ACTIVE}[data-bs-toggle="pill"], .${CLASS_NAME_ACTIVE}[data-bs-toggle="list"]`
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Class definition
|
|
||||||
*/
|
|
||||||
|
|
||||||
class Tab extends BaseComponent {
|
|
||||||
constructor(element) {
|
|
||||||
super(element)
|
|
||||||
this._parent = this._element.closest(SELECTOR_TAB_PANEL)
|
|
||||||
|
|
||||||
if (!this._parent) {
|
|
||||||
return
|
|
||||||
// TODO: should throw exception in v6
|
|
||||||
// throw new TypeError(`${element.outerHTML} has not a valid parent ${SELECTOR_INNER_ELEM}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set up initial aria attributes
|
|
||||||
this._setInitialAttributes(this._parent, this._getChildren())
|
|
||||||
|
|
||||||
EventHandler.on(this._element, EVENT_KEYDOWN, event => this._keydown(event))
|
|
||||||
}
|
|
||||||
|
|
||||||
// Getters
|
|
||||||
static get NAME() {
|
|
||||||
return NAME
|
|
||||||
}
|
|
||||||
|
|
||||||
// Public
|
|
||||||
show() { // Shows this elem and deactivate the active sibling if exists
|
|
||||||
const innerElem = this._element
|
|
||||||
if (this._elemIsActive(innerElem)) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// Search for active tab on same parent to deactivate it
|
|
||||||
const active = this._getActiveElem()
|
|
||||||
|
|
||||||
const hideEvent = active ?
|
|
||||||
EventHandler.trigger(active, EVENT_HIDE, { relatedTarget: innerElem }) :
|
|
||||||
null
|
|
||||||
|
|
||||||
const showEvent = EventHandler.trigger(innerElem, EVENT_SHOW, { relatedTarget: active })
|
|
||||||
|
|
||||||
if (showEvent.defaultPrevented || (hideEvent && hideEvent.defaultPrevented)) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this._deactivate(active, innerElem)
|
|
||||||
this._activate(innerElem, active)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Private
|
|
||||||
_activate(element, relatedElem) {
|
|
||||||
if (!element) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
element.classList.add(CLASS_NAME_ACTIVE)
|
|
||||||
|
|
||||||
this._activate(SelectorEngine.getElementFromSelector(element)) // Search and activate/show the proper section
|
|
||||||
|
|
||||||
const complete = () => {
|
|
||||||
if (element.getAttribute('role') !== 'tab') {
|
|
||||||
element.classList.add(CLASS_NAME_SHOW)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
element.removeAttribute('tabindex')
|
|
||||||
element.setAttribute('aria-selected', true)
|
|
||||||
this._toggleDropDown(element, true)
|
|
||||||
EventHandler.trigger(element, EVENT_SHOWN, {
|
|
||||||
relatedTarget: relatedElem
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
this._queueCallback(complete, element, element.classList.contains(CLASS_NAME_FADE))
|
|
||||||
}
|
|
||||||
|
|
||||||
_deactivate(element, relatedElem) {
|
|
||||||
if (!element) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
element.classList.remove(CLASS_NAME_ACTIVE)
|
|
||||||
element.blur()
|
|
||||||
|
|
||||||
this._deactivate(SelectorEngine.getElementFromSelector(element)) // Search and deactivate the shown section too
|
|
||||||
|
|
||||||
const complete = () => {
|
|
||||||
if (element.getAttribute('role') !== 'tab') {
|
|
||||||
element.classList.remove(CLASS_NAME_SHOW)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
element.setAttribute('aria-selected', false)
|
|
||||||
element.setAttribute('tabindex', '-1')
|
|
||||||
this._toggleDropDown(element, false)
|
|
||||||
EventHandler.trigger(element, EVENT_HIDDEN, { relatedTarget: relatedElem })
|
|
||||||
}
|
|
||||||
|
|
||||||
this._queueCallback(complete, element, element.classList.contains(CLASS_NAME_FADE))
|
|
||||||
}
|
|
||||||
|
|
||||||
_keydown(event) {
|
|
||||||
if (!([ARROW_LEFT_KEY, ARROW_RIGHT_KEY, ARROW_UP_KEY, ARROW_DOWN_KEY, HOME_KEY, END_KEY].includes(event.key))) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
event.stopPropagation()// stopPropagation/preventDefault both added to support up/down keys without scrolling the page
|
|
||||||
event.preventDefault()
|
|
||||||
|
|
||||||
const children = this._getChildren().filter(element => !isDisabled(element))
|
|
||||||
let nextActiveElement
|
|
||||||
|
|
||||||
if ([HOME_KEY, END_KEY].includes(event.key)) {
|
|
||||||
nextActiveElement = children[event.key === HOME_KEY ? 0 : children.length - 1]
|
|
||||||
} else {
|
|
||||||
const isNext = [ARROW_RIGHT_KEY, ARROW_DOWN_KEY].includes(event.key)
|
|
||||||
nextActiveElement = getNextActiveElement(children, event.target, isNext, true)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (nextActiveElement) {
|
|
||||||
nextActiveElement.focus({ preventScroll: true })
|
|
||||||
Tab.getOrCreateInstance(nextActiveElement).show()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_getChildren() { // collection of inner elements
|
|
||||||
return SelectorEngine.find(SELECTOR_INNER_ELEM, this._parent)
|
|
||||||
}
|
|
||||||
|
|
||||||
_getActiveElem() {
|
|
||||||
return this._getChildren().find(child => this._elemIsActive(child)) || null
|
|
||||||
}
|
|
||||||
|
|
||||||
_setInitialAttributes(parent, children) {
|
|
||||||
this._setAttributeIfNotExists(parent, 'role', 'tablist')
|
|
||||||
|
|
||||||
for (const child of children) {
|
|
||||||
this._setInitialAttributesOnChild(child)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_setInitialAttributesOnChild(child) {
|
|
||||||
child = this._getInnerElement(child)
|
|
||||||
const isActive = this._elemIsActive(child)
|
|
||||||
const outerElem = this._getOuterElement(child)
|
|
||||||
child.setAttribute('aria-selected', isActive)
|
|
||||||
|
|
||||||
if (outerElem !== child) {
|
|
||||||
this._setAttributeIfNotExists(outerElem, 'role', 'presentation')
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!isActive) {
|
|
||||||
child.setAttribute('tabindex', '-1')
|
|
||||||
}
|
|
||||||
|
|
||||||
this._setAttributeIfNotExists(child, 'role', 'tab')
|
|
||||||
|
|
||||||
// set attributes to the related panel too
|
|
||||||
this._setInitialAttributesOnTargetPanel(child)
|
|
||||||
}
|
|
||||||
|
|
||||||
_setInitialAttributesOnTargetPanel(child) {
|
|
||||||
const target = SelectorEngine.getElementFromSelector(child)
|
|
||||||
|
|
||||||
if (!target) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this._setAttributeIfNotExists(target, 'role', 'tabpanel')
|
|
||||||
|
|
||||||
if (child.id) {
|
|
||||||
this._setAttributeIfNotExists(target, 'aria-labelledby', `${child.id}`)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_toggleDropDown(element, open) {
|
|
||||||
const outerElem = this._getOuterElement(element)
|
|
||||||
if (!outerElem.classList.contains(CLASS_DROPDOWN)) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const toggle = (selector, className) => {
|
|
||||||
const element = SelectorEngine.findOne(selector, outerElem)
|
|
||||||
if (element) {
|
|
||||||
element.classList.toggle(className, open)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
toggle(SELECTOR_DROPDOWN_TOGGLE, CLASS_NAME_ACTIVE)
|
|
||||||
toggle(SELECTOR_DROPDOWN_MENU, CLASS_NAME_SHOW)
|
|
||||||
outerElem.setAttribute('aria-expanded', open)
|
|
||||||
}
|
|
||||||
|
|
||||||
_setAttributeIfNotExists(element, attribute, value) {
|
|
||||||
if (!element.hasAttribute(attribute)) {
|
|
||||||
element.setAttribute(attribute, value)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_elemIsActive(elem) {
|
|
||||||
return elem.classList.contains(CLASS_NAME_ACTIVE)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Try to get the inner element (usually the .nav-link)
|
|
||||||
_getInnerElement(elem) {
|
|
||||||
return elem.matches(SELECTOR_INNER_ELEM) ? elem : SelectorEngine.findOne(SELECTOR_INNER_ELEM, elem)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Try to get the outer element (usually the .nav-item)
|
|
||||||
_getOuterElement(elem) {
|
|
||||||
return elem.closest(SELECTOR_OUTER) || elem
|
|
||||||
}
|
|
||||||
|
|
||||||
// Static
|
|
||||||
static jQueryInterface(config) {
|
|
||||||
return this.each(function () {
|
|
||||||
const data = Tab.getOrCreateInstance(this)
|
|
||||||
|
|
||||||
if (typeof config !== 'string') {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
|
|
||||||
throw new TypeError(`No method named "${config}"`)
|
|
||||||
}
|
|
||||||
|
|
||||||
data[config]()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Data API implementation
|
|
||||||
*/
|
|
||||||
|
|
||||||
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
|
|
||||||
if (['A', 'AREA'].includes(this.tagName)) {
|
|
||||||
event.preventDefault()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isDisabled(this)) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
Tab.getOrCreateInstance(this).show()
|
|
||||||
})
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Initialize on focus
|
|
||||||
*/
|
|
||||||
EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
|
|
||||||
for (const element of SelectorEngine.find(SELECTOR_DATA_TOGGLE_ACTIVE)) {
|
|
||||||
Tab.getOrCreateInstance(element)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
/**
|
|
||||||
* jQuery
|
|
||||||
*/
|
|
||||||
|
|
||||||
defineJQueryPlugin(Tab)
|
|
||||||
|
|
||||||
export default Tab
|
|
||||||
|
|
@ -1,225 +0,0 @@
|
||||||
/**
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
* Bootstrap toast.js
|
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
|
|
||||||
import BaseComponent from './base-component.js'
|
|
||||||
import EventHandler from './dom/event-handler.js'
|
|
||||||
import { enableDismissTrigger } from './util/component-functions.js'
|
|
||||||
import { defineJQueryPlugin, reflow } from './util/index.js'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Constants
|
|
||||||
*/
|
|
||||||
|
|
||||||
const NAME = 'toast'
|
|
||||||
const DATA_KEY = 'bs.toast'
|
|
||||||
const EVENT_KEY = `.${DATA_KEY}`
|
|
||||||
|
|
||||||
const EVENT_MOUSEOVER = `mouseover${EVENT_KEY}`
|
|
||||||
const EVENT_MOUSEOUT = `mouseout${EVENT_KEY}`
|
|
||||||
const EVENT_FOCUSIN = `focusin${EVENT_KEY}`
|
|
||||||
const EVENT_FOCUSOUT = `focusout${EVENT_KEY}`
|
|
||||||
const EVENT_HIDE = `hide${EVENT_KEY}`
|
|
||||||
const EVENT_HIDDEN = `hidden${EVENT_KEY}`
|
|
||||||
const EVENT_SHOW = `show${EVENT_KEY}`
|
|
||||||
const EVENT_SHOWN = `shown${EVENT_KEY}`
|
|
||||||
|
|
||||||
const CLASS_NAME_FADE = 'fade'
|
|
||||||
const CLASS_NAME_HIDE = 'hide' // @deprecated - kept here only for backwards compatibility
|
|
||||||
const CLASS_NAME_SHOW = 'show'
|
|
||||||
const CLASS_NAME_SHOWING = 'showing'
|
|
||||||
|
|
||||||
const DefaultType = {
|
|
||||||
animation: 'boolean',
|
|
||||||
autohide: 'boolean',
|
|
||||||
delay: 'number'
|
|
||||||
}
|
|
||||||
|
|
||||||
const Default = {
|
|
||||||
animation: true,
|
|
||||||
autohide: true,
|
|
||||||
delay: 5000
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Class definition
|
|
||||||
*/
|
|
||||||
|
|
||||||
class Toast extends BaseComponent {
|
|
||||||
constructor(element, config) {
|
|
||||||
super(element, config)
|
|
||||||
|
|
||||||
this._timeout = null
|
|
||||||
this._hasMouseInteraction = false
|
|
||||||
this._hasKeyboardInteraction = false
|
|
||||||
this._setListeners()
|
|
||||||
}
|
|
||||||
|
|
||||||
// Getters
|
|
||||||
static get Default() {
|
|
||||||
return Default
|
|
||||||
}
|
|
||||||
|
|
||||||
static get DefaultType() {
|
|
||||||
return DefaultType
|
|
||||||
}
|
|
||||||
|
|
||||||
static get NAME() {
|
|
||||||
return NAME
|
|
||||||
}
|
|
||||||
|
|
||||||
// Public
|
|
||||||
show() {
|
|
||||||
const showEvent = EventHandler.trigger(this._element, EVENT_SHOW)
|
|
||||||
|
|
||||||
if (showEvent.defaultPrevented) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this._clearTimeout()
|
|
||||||
|
|
||||||
if (this._config.animation) {
|
|
||||||
this._element.classList.add(CLASS_NAME_FADE)
|
|
||||||
}
|
|
||||||
|
|
||||||
const complete = () => {
|
|
||||||
this._element.classList.remove(CLASS_NAME_SHOWING)
|
|
||||||
EventHandler.trigger(this._element, EVENT_SHOWN)
|
|
||||||
|
|
||||||
this._maybeScheduleHide()
|
|
||||||
}
|
|
||||||
|
|
||||||
this._element.classList.remove(CLASS_NAME_HIDE) // @deprecated
|
|
||||||
reflow(this._element)
|
|
||||||
this._element.classList.add(CLASS_NAME_SHOW, CLASS_NAME_SHOWING)
|
|
||||||
|
|
||||||
this._queueCallback(complete, this._element, this._config.animation)
|
|
||||||
}
|
|
||||||
|
|
||||||
hide() {
|
|
||||||
if (!this.isShown()) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE)
|
|
||||||
|
|
||||||
if (hideEvent.defaultPrevented) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const complete = () => {
|
|
||||||
this._element.classList.add(CLASS_NAME_HIDE) // @deprecated
|
|
||||||
this._element.classList.remove(CLASS_NAME_SHOWING, CLASS_NAME_SHOW)
|
|
||||||
EventHandler.trigger(this._element, EVENT_HIDDEN)
|
|
||||||
}
|
|
||||||
|
|
||||||
this._element.classList.add(CLASS_NAME_SHOWING)
|
|
||||||
this._queueCallback(complete, this._element, this._config.animation)
|
|
||||||
}
|
|
||||||
|
|
||||||
dispose() {
|
|
||||||
this._clearTimeout()
|
|
||||||
|
|
||||||
if (this.isShown()) {
|
|
||||||
this._element.classList.remove(CLASS_NAME_SHOW)
|
|
||||||
}
|
|
||||||
|
|
||||||
super.dispose()
|
|
||||||
}
|
|
||||||
|
|
||||||
isShown() {
|
|
||||||
return this._element.classList.contains(CLASS_NAME_SHOW)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Private
|
|
||||||
|
|
||||||
_maybeScheduleHide() {
|
|
||||||
if (!this._config.autohide) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this._hasMouseInteraction || this._hasKeyboardInteraction) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this._timeout = setTimeout(() => {
|
|
||||||
this.hide()
|
|
||||||
}, this._config.delay)
|
|
||||||
}
|
|
||||||
|
|
||||||
_onInteraction(event, isInteracting) {
|
|
||||||
switch (event.type) {
|
|
||||||
case 'mouseover':
|
|
||||||
case 'mouseout': {
|
|
||||||
this._hasMouseInteraction = isInteracting
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'focusin':
|
|
||||||
case 'focusout': {
|
|
||||||
this._hasKeyboardInteraction = isInteracting
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
default: {
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isInteracting) {
|
|
||||||
this._clearTimeout()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const nextElement = event.relatedTarget
|
|
||||||
if (this._element === nextElement || this._element.contains(nextElement)) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this._maybeScheduleHide()
|
|
||||||
}
|
|
||||||
|
|
||||||
_setListeners() {
|
|
||||||
EventHandler.on(this._element, EVENT_MOUSEOVER, event => this._onInteraction(event, true))
|
|
||||||
EventHandler.on(this._element, EVENT_MOUSEOUT, event => this._onInteraction(event, false))
|
|
||||||
EventHandler.on(this._element, EVENT_FOCUSIN, event => this._onInteraction(event, true))
|
|
||||||
EventHandler.on(this._element, EVENT_FOCUSOUT, event => this._onInteraction(event, false))
|
|
||||||
}
|
|
||||||
|
|
||||||
_clearTimeout() {
|
|
||||||
clearTimeout(this._timeout)
|
|
||||||
this._timeout = null
|
|
||||||
}
|
|
||||||
|
|
||||||
// Static
|
|
||||||
static jQueryInterface(config) {
|
|
||||||
return this.each(function () {
|
|
||||||
const data = Toast.getOrCreateInstance(this, config)
|
|
||||||
|
|
||||||
if (typeof config === 'string') {
|
|
||||||
if (typeof data[config] === 'undefined') {
|
|
||||||
throw new TypeError(`No method named "${config}"`)
|
|
||||||
}
|
|
||||||
|
|
||||||
data[config](this)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Data API implementation
|
|
||||||
*/
|
|
||||||
|
|
||||||
enableDismissTrigger(Toast)
|
|
||||||
|
|
||||||
/**
|
|
||||||
* jQuery
|
|
||||||
*/
|
|
||||||
|
|
||||||
defineJQueryPlugin(Toast)
|
|
||||||
|
|
||||||
export default Toast
|
|
||||||
|
|
@ -1,633 +0,0 @@
|
||||||
/**
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
* Bootstrap tooltip.js
|
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
||||||
* --------------------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
|
|
||||||
import * as Popper from '@popperjs/core'
|
|
||||||
import BaseComponent from './base-component.js'
|
|
||||||
import EventHandler from './dom/event-handler.js'
|
|
||||||
import Manipulator from './dom/manipulator.js'
|
|
||||||
import {
|
|
||||||
defineJQueryPlugin, execute, findShadowRoot, getElement, getUID, isRTL, noop
|
|
||||||
} from './util/index.js'
|
|
||||||
import { DefaultAllowlist } from './util/sanitizer.js'
|
|
||||||
import TemplateFactory from './util/template-factory.js'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Constants
|
|
||||||
*/
|
|
||||||
|
|
||||||
const NAME = 'tooltip'
|
|
||||||
const DISALLOWED_ATTRIBUTES = new Set(['sanitize', 'allowList', 'sanitizeFn'])
|
|
||||||
|
|
||||||
const CLASS_NAME_FADE = 'fade'
|
|
||||||
const CLASS_NAME_MODAL = 'modal'
|
|
||||||
const CLASS_NAME_SHOW = 'show'
|
|
||||||
|
|
||||||
const SELECTOR_TOOLTIP_INNER = '.tooltip-inner'
|
|
||||||
const SELECTOR_MODAL = `.${CLASS_NAME_MODAL}`
|
|
||||||
|
|
||||||
const EVENT_MODAL_HIDE = 'hide.bs.modal'
|
|
||||||
|
|
||||||
const TRIGGER_HOVER = 'hover'
|
|
||||||
const TRIGGER_FOCUS = 'focus'
|
|
||||||
const TRIGGER_CLICK = 'click'
|
|
||||||
const TRIGGER_MANUAL = 'manual'
|
|
||||||
|
|
||||||
const EVENT_HIDE = 'hide'
|
|
||||||
const EVENT_HIDDEN = 'hidden'
|
|
||||||
const EVENT_SHOW = 'show'
|
|
||||||
const EVENT_SHOWN = 'shown'
|
|
||||||
const EVENT_INSERTED = 'inserted'
|
|
||||||
const EVENT_CLICK = 'click'
|
|
||||||
const EVENT_FOCUSIN = 'focusin'
|
|
||||||
const EVENT_FOCUSOUT = 'focusout'
|
|
||||||
const EVENT_MOUSEENTER = 'mouseenter'
|
|
||||||
const EVENT_MOUSELEAVE = 'mouseleave'
|
|
||||||
|
|
||||||
const AttachmentMap = {
|
|
||||||
AUTO: 'auto',
|
|
||||||
TOP: 'top',
|
|
||||||
RIGHT: isRTL() ? 'left' : 'right',
|
|
||||||
BOTTOM: 'bottom',
|
|
||||||
LEFT: isRTL() ? 'right' : 'left'
|
|
||||||
}
|
|
||||||
|
|
||||||
const Default = {
|
|
||||||
allowList: DefaultAllowlist,
|
|
||||||
animation: true,
|
|
||||||
boundary: 'clippingParents',
|
|
||||||
container: false,
|
|
||||||
customClass: '',
|
|
||||||
delay: 0,
|
|
||||||
fallbackPlacements: ['top', 'right', 'bottom', 'left'],
|
|
||||||
html: false,
|
|
||||||
offset: [0, 6],
|
|
||||||
placement: 'top',
|
|
||||||
popperConfig: null,
|
|
||||||
sanitize: true,
|
|
||||||
sanitizeFn: null,
|
|
||||||
selector: false,
|
|
||||||
template: '<div class="tooltip" role="tooltip">' +
|
|
||||||
'<div class="tooltip-arrow"></div>' +
|
|
||||||
'<div class="tooltip-inner"></div>' +
|
|
||||||
'</div>',
|
|
||||||
title: '',
|
|
||||||
trigger: 'hover focus'
|
|
||||||
}
|
|
||||||
|
|
||||||
const DefaultType = {
|
|
||||||
allowList: 'object',
|
|
||||||
animation: 'boolean',
|
|
||||||
boundary: '(string|element)',
|
|
||||||
container: '(string|element|boolean)',
|
|
||||||
customClass: '(string|function)',
|
|
||||||
delay: '(number|object)',
|
|
||||||
fallbackPlacements: 'array',
|
|
||||||
html: 'boolean',
|
|
||||||
offset: '(array|string|function)',
|
|
||||||
placement: '(string|function)',
|
|
||||||
popperConfig: '(null|object|function)',
|
|
||||||
sanitize: 'boolean',
|
|
||||||
sanitizeFn: '(null|function)',
|
|
||||||
selector: '(string|boolean)',
|
|
||||||
template: 'string',
|
|
||||||
title: '(string|element|function)',
|
|
||||||
trigger: 'string'
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Class definition
|
|
||||||
*/
|
|
||||||
|
|
||||||
class Tooltip extends BaseComponent {
|
|
||||||
constructor(element, config) {
|
|
||||||
if (typeof Popper === 'undefined') {
|
|
||||||
throw new TypeError('Bootstrap\'s tooltips require Popper (https://popper.js.org)')
|
|
||||||
}
|
|
||||||
|
|
||||||
super(element, config)
|
|
||||||
|
|
||||||
// Private
|
|
||||||
this._isEnabled = true
|
|
||||||
this._timeout = 0
|
|
||||||
this._isHovered = null
|
|
||||||
this._activeTrigger = {}
|
|
||||||
this._popper = null
|
|
||||||
this._templateFactory = null
|
|
||||||
this._newContent = null
|
|
||||||
|
|
||||||
// Protected
|
|
||||||
this.tip = null
|
|
||||||
|
|
||||||
this._setListeners()
|
|
||||||
|
|
||||||
if (!this._config.selector) {
|
|
||||||
this._fixTitle()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Getters
|
|
||||||
static get Default() {
|
|
||||||
return Default
|
|
||||||
}
|
|
||||||
|
|
||||||
static get DefaultType() {
|
|
||||||
return DefaultType
|
|
||||||
}
|
|
||||||
|
|
||||||
static get NAME() {
|
|
||||||
return NAME
|
|
||||||
}
|
|
||||||
|
|
||||||
// Public
|
|
||||||
enable() {
|
|
||||||
this._isEnabled = true
|
|
||||||
}
|
|
||||||
|
|
||||||
disable() {
|
|
||||||
this._isEnabled = false
|
|
||||||
}
|
|
||||||
|
|
||||||
toggleEnabled() {
|
|
||||||
this._isEnabled = !this._isEnabled
|
|
||||||
}
|
|
||||||
|
|
||||||
toggle() {
|
|
||||||
if (!this._isEnabled) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this._activeTrigger.click = !this._activeTrigger.click
|
|
||||||
if (this._isShown()) {
|
|
||||||
this._leave()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this._enter()
|
|
||||||
}
|
|
||||||
|
|
||||||
dispose() {
|
|
||||||
clearTimeout(this._timeout)
|
|
||||||
|
|
||||||
EventHandler.off(this._element.closest(SELECTOR_MODAL), EVENT_MODAL_HIDE, this._hideModalHandler)
|
|
||||||
|
|
||||||
if (this._element.getAttribute('data-bs-original-title')) {
|
|
||||||
this._element.setAttribute('title', this._element.getAttribute('data-bs-original-title'))
|
|
||||||
}
|
|
||||||
|
|
||||||
this._disposePopper()
|
|
||||||
super.dispose()
|
|
||||||
}
|
|
||||||
|
|
||||||
show() {
|
|
||||||
if (this._element.style.display === 'none') {
|
|
||||||
throw new Error('Please use show on visible elements')
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!(this._isWithContent() && this._isEnabled)) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const showEvent = EventHandler.trigger(this._element, this.constructor.eventName(EVENT_SHOW))
|
|
||||||
const shadowRoot = findShadowRoot(this._element)
|
|
||||||
const isInTheDom = (shadowRoot || this._element.ownerDocument.documentElement).contains(this._element)
|
|
||||||
|
|
||||||
if (showEvent.defaultPrevented || !isInTheDom) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: v6 remove this or make it optional
|
|
||||||
this._disposePopper()
|
|
||||||
|
|
||||||
const tip = this._getTipElement()
|
|
||||||
|
|
||||||
this._element.setAttribute('aria-describedby', tip.getAttribute('id'))
|
|
||||||
|
|
||||||
const { container } = this._config
|
|
||||||
|
|
||||||
if (!this._element.ownerDocument.documentElement.contains(this.tip)) {
|
|
||||||
container.append(tip)
|
|
||||||
EventHandler.trigger(this._element, this.constructor.eventName(EVENT_INSERTED))
|
|
||||||
}
|
|
||||||
|
|
||||||
this._popper = this._createPopper(tip)
|
|
||||||
|
|
||||||
tip.classList.add(CLASS_NAME_SHOW)
|
|
||||||
|
|
||||||
// If this is a touch-enabled device we add extra
|
|
||||||
// empty mouseover listeners to the body's immediate children;
|
|
||||||
// only needed because of broken event delegation on iOS
|
|
||||||
// https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
|
|
||||||
if ('ontouchstart' in document.documentElement) {
|
|
||||||
for (const element of [].concat(...document.body.children)) {
|
|
||||||
EventHandler.on(element, 'mouseover', noop)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const complete = () => {
|
|
||||||
EventHandler.trigger(this._element, this.constructor.eventName(EVENT_SHOWN))
|
|
||||||
|
|
||||||
if (this._isHovered === false) {
|
|
||||||
this._leave()
|
|
||||||
}
|
|
||||||
|
|
||||||
this._isHovered = false
|
|
||||||
}
|
|
||||||
|
|
||||||
this._queueCallback(complete, this.tip, this._isAnimated())
|
|
||||||
}
|
|
||||||
|
|
||||||
hide() {
|
|
||||||
if (!this._isShown()) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const hideEvent = EventHandler.trigger(this._element, this.constructor.eventName(EVENT_HIDE))
|
|
||||||
if (hideEvent.defaultPrevented) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const tip = this._getTipElement()
|
|
||||||
tip.classList.remove(CLASS_NAME_SHOW)
|
|
||||||
|
|
||||||
// If this is a touch-enabled device we remove the extra
|
|
||||||
// empty mouseover listeners we added for iOS support
|
|
||||||
if ('ontouchstart' in document.documentElement) {
|
|
||||||
for (const element of [].concat(...document.body.children)) {
|
|
||||||
EventHandler.off(element, 'mouseover', noop)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this._activeTrigger[TRIGGER_CLICK] = false
|
|
||||||
this._activeTrigger[TRIGGER_FOCUS] = false
|
|
||||||
this._activeTrigger[TRIGGER_HOVER] = false
|
|
||||||
this._isHovered = null // it is a trick to support manual triggering
|
|
||||||
|
|
||||||
const complete = () => {
|
|
||||||
if (this._isWithActiveTrigger()) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this._isHovered) {
|
|
||||||
this._disposePopper()
|
|
||||||
}
|
|
||||||
|
|
||||||
this._element.removeAttribute('aria-describedby')
|
|
||||||
EventHandler.trigger(this._element, this.constructor.eventName(EVENT_HIDDEN))
|
|
||||||
}
|
|
||||||
|
|
||||||
this._queueCallback(complete, this.tip, this._isAnimated())
|
|
||||||
}
|
|
||||||
|
|
||||||
update() {
|
|
||||||
if (this._popper) {
|
|
||||||
this._popper.update()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Protected
|
|
||||||
_isWithContent() {
|
|
||||||
return Boolean(this._getTitle())
|
|
||||||
}
|
|
||||||
|
|
||||||
_getTipElement() {
|
|
||||||
if (!this.tip) {
|
|
||||||
this.tip = this._createTipElement(this._newContent || this._getContentForTemplate())
|
|
||||||
}
|
|
||||||
|
|
||||||
return this.tip
|
|
||||||
}
|
|
||||||
|
|
||||||
_createTipElement(content) {
|
|
||||||
const tip = this._getTemplateFactory(content).toHtml()
|
|
||||||
|
|
||||||
// TODO: remove this check in v6
|
|
||||||
if (!tip) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
tip.classList.remove(CLASS_NAME_FADE, CLASS_NAME_SHOW)
|
|
||||||
// TODO: v6 the following can be achieved with CSS only
|
|
||||||
tip.classList.add(`bs-${this.constructor.NAME}-auto`)
|
|
||||||
|
|
||||||
const tipId = getUID(this.constructor.NAME).toString()
|
|
||||||
|
|
||||||
tip.setAttribute('id', tipId)
|
|
||||||
|
|
||||||
if (this._isAnimated()) {
|
|
||||||
tip.classList.add(CLASS_NAME_FADE)
|
|
||||||
}
|
|
||||||
|
|
||||||
return tip
|
|
||||||
}
|
|
||||||
|
|
||||||
setContent(content) {
|
|
||||||
this._newContent = content
|
|
||||||
if (this._isShown()) {
|
|
||||||
this._disposePopper()
|
|
||||||
this.show()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_getTemplateFactory(content) {
|
|
||||||
if (this._templateFactory) {
|
|
||||||
this._templateFactory.changeContent(content)
|
|
||||||
} else {
|
|
||||||
this._templateFactory = new TemplateFactory({
|
|
||||||
...this._config,
|
|
||||||
// the `content` var has to be after `this._config`
|
|
||||||
// to override config.content in case of popover
|
|
||||||
content,
|
|
||||||
extraClass: this._resolvePossibleFunction(this._config.customClass)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return this._templateFactory
|
|
||||||
}
|
|
||||||
|
|
||||||
_getContentForTemplate() {
|
|
||||||
return {
|
|
||||||
[SELECTOR_TOOLTIP_INNER]: this._getTitle()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_getTitle() {
|
|
||||||
return this._resolvePossibleFunction(this._config.title) || this._element.getAttribute('data-bs-original-title')
|
|
||||||
}
|
|
||||||
|
|
||||||
// Private
|
|
||||||
_initializeOnDelegatedTarget(event) {
|
|
||||||
return this.constructor.getOrCreateInstance(event.delegateTarget, this._getDelegateConfig())
|
|
||||||
}
|
|
||||||
|
|
||||||
_isAnimated() {
|
|
||||||
return this._config.animation || (this.tip && this.tip.classList.contains(CLASS_NAME_FADE))
|
|
||||||
}
|
|
||||||
|
|
||||||
_isShown() {
|
|
||||||
return this.tip && this.tip.classList.contains(CLASS_NAME_SHOW)
|
|
||||||
}
|
|
||||||
|
|
||||||
_createPopper(tip) {
|
|
||||||
const placement = execute(this._config.placement, [this, tip, this._element])
|
|
||||||
const attachment = AttachmentMap[placement.toUpperCase()]
|
|
||||||
return Popper.createPopper(this._element, tip, this._getPopperConfig(attachment))
|
|
||||||
}
|
|
||||||
|
|
||||||
_getOffset() {
|
|
||||||
const { offset } = this._config
|
|
||||||
|
|
||||||
if (typeof offset === 'string') {
|
|
||||||
return offset.split(',').map(value => Number.parseInt(value, 10))
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof offset === 'function') {
|
|
||||||
return popperData => offset(popperData, this._element)
|
|
||||||
}
|
|
||||||
|
|
||||||
return offset
|
|
||||||
}
|
|
||||||
|
|
||||||
_resolvePossibleFunction(arg) {
|
|
||||||
return execute(arg, [this._element])
|
|
||||||
}
|
|
||||||
|
|
||||||
_getPopperConfig(attachment) {
|
|
||||||
const defaultBsPopperConfig = {
|
|
||||||
placement: attachment,
|
|
||||||
modifiers: [
|
|
||||||
{
|
|
||||||
name: 'flip',
|
|
||||||
options: {
|
|
||||||
fallbackPlacements: this._config.fallbackPlacements
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'offset',
|
|
||||||
options: {
|
|
||||||
offset: this._getOffset()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'preventOverflow',
|
|
||||||
options: {
|
|
||||||
boundary: this._config.boundary
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'arrow',
|
|
||||||
options: {
|
|
||||||
element: `.${this.constructor.NAME}-arrow`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'preSetPlacement',
|
|
||||||
enabled: true,
|
|
||||||
phase: 'beforeMain',
|
|
||||||
fn: data => {
|
|
||||||
// Pre-set Popper's placement attribute in order to read the arrow sizes properly.
|
|
||||||
// Otherwise, Popper mixes up the width and height dimensions since the initial arrow style is for top placement
|
|
||||||
this._getTipElement().setAttribute('data-popper-placement', data.state.placement)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
...defaultBsPopperConfig,
|
|
||||||
...execute(this._config.popperConfig, [defaultBsPopperConfig])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_setListeners() {
|
|
||||||
const triggers = this._config.trigger.split(' ')
|
|
||||||
|
|
||||||
for (const trigger of triggers) {
|
|
||||||
if (trigger === 'click') {
|
|
||||||
EventHandler.on(this._element, this.constructor.eventName(EVENT_CLICK), this._config.selector, event => {
|
|
||||||
const context = this._initializeOnDelegatedTarget(event)
|
|
||||||
context.toggle()
|
|
||||||
})
|
|
||||||
} else if (trigger !== TRIGGER_MANUAL) {
|
|
||||||
const eventIn = trigger === TRIGGER_HOVER ?
|
|
||||||
this.constructor.eventName(EVENT_MOUSEENTER) :
|
|
||||||
this.constructor.eventName(EVENT_FOCUSIN)
|
|
||||||
const eventOut = trigger === TRIGGER_HOVER ?
|
|
||||||
this.constructor.eventName(EVENT_MOUSELEAVE) :
|
|
||||||
this.constructor.eventName(EVENT_FOCUSOUT)
|
|
||||||
|
|
||||||
EventHandler.on(this._element, eventIn, this._config.selector, event => {
|
|
||||||
const context = this._initializeOnDelegatedTarget(event)
|
|
||||||
context._activeTrigger[event.type === 'focusin' ? TRIGGER_FOCUS : TRIGGER_HOVER] = true
|
|
||||||
context._enter()
|
|
||||||
})
|
|
||||||
EventHandler.on(this._element, eventOut, this._config.selector, event => {
|
|
||||||
const context = this._initializeOnDelegatedTarget(event)
|
|
||||||
context._activeTrigger[event.type === 'focusout' ? TRIGGER_FOCUS : TRIGGER_HOVER] =
|
|
||||||
context._element.contains(event.relatedTarget)
|
|
||||||
|
|
||||||
context._leave()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this._hideModalHandler = () => {
|
|
||||||
if (this._element) {
|
|
||||||
this.hide()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
EventHandler.on(this._element.closest(SELECTOR_MODAL), EVENT_MODAL_HIDE, this._hideModalHandler)
|
|
||||||
}
|
|
||||||
|
|
||||||
_fixTitle() {
|
|
||||||
const title = this._element.getAttribute('title')
|
|
||||||
|
|
||||||
if (!title) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this._element.getAttribute('aria-label') && !this._element.textContent.trim()) {
|
|
||||||
this._element.setAttribute('aria-label', title)
|
|
||||||
}
|
|
||||||
|
|
||||||
this._element.setAttribute('data-bs-original-title', title) // DO NOT USE IT. Is only for backwards compatibility
|
|
||||||
this._element.removeAttribute('title')
|
|
||||||
}
|
|
||||||
|
|
||||||
_enter() {
|
|
||||||
if (this._isShown() || this._isHovered) {
|
|
||||||
this._isHovered = true
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this._isHovered = true
|
|
||||||
|
|
||||||
this._setTimeout(() => {
|
|
||||||
if (this._isHovered) {
|
|
||||||
this.show()
|
|
||||||
}
|
|
||||||
}, this._config.delay.show)
|
|
||||||
}
|
|
||||||
|
|
||||||
_leave() {
|
|
||||||
if (this._isWithActiveTrigger()) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this._isHovered = false
|
|
||||||
|
|
||||||
this._setTimeout(() => {
|
|
||||||
if (!this._isHovered) {
|
|
||||||
this.hide()
|
|
||||||
}
|
|
||||||
}, this._config.delay.hide)
|
|
||||||
}
|
|
||||||
|
|
||||||
_setTimeout(handler, timeout) {
|
|
||||||
clearTimeout(this._timeout)
|
|
||||||
this._timeout = setTimeout(handler, timeout)
|
|
||||||
}
|
|
||||||
|
|
||||||
_isWithActiveTrigger() {
|
|
||||||
return Object.values(this._activeTrigger).includes(true)
|
|
||||||
}
|
|
||||||
|
|
||||||
_getConfig(config) {
|
|
||||||
const dataAttributes = Manipulator.getDataAttributes(this._element)
|
|
||||||
|
|
||||||
for (const dataAttribute of Object.keys(dataAttributes)) {
|
|
||||||
if (DISALLOWED_ATTRIBUTES.has(dataAttribute)) {
|
|
||||||
delete dataAttributes[dataAttribute]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
config = {
|
|
||||||
...dataAttributes,
|
|
||||||
...(typeof config === 'object' && config ? config : {})
|
|
||||||
}
|
|
||||||
config = this._mergeConfigObj(config)
|
|
||||||
config = this._configAfterMerge(config)
|
|
||||||
this._typeCheckConfig(config)
|
|
||||||
return config
|
|
||||||
}
|
|
||||||
|
|
||||||
_configAfterMerge(config) {
|
|
||||||
config.container = config.container === false ? document.body : getElement(config.container)
|
|
||||||
|
|
||||||
if (typeof config.delay === 'number') {
|
|
||||||
config.delay = {
|
|
||||||
show: config.delay,
|
|
||||||
hide: config.delay
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof config.title === 'number') {
|
|
||||||
config.title = config.title.toString()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof config.content === 'number') {
|
|
||||||
config.content = config.content.toString()
|
|
||||||
}
|
|
||||||
|
|
||||||
return config
|
|
||||||
}
|
|
||||||
|
|
||||||
_getDelegateConfig() {
|
|
||||||
const config = {}
|
|
||||||
|
|
||||||
for (const [key, value] of Object.entries(this._config)) {
|
|
||||||
if (this.constructor.Default[key] !== value) {
|
|
||||||
config[key] = value
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
config.selector = false
|
|
||||||
config.trigger = 'manual'
|
|
||||||
|
|
||||||
// In the future can be replaced with:
|
|
||||||
// const keysWithDifferentValues = Object.entries(this._config).filter(entry => this.constructor.Default[entry[0]] !== this._config[entry[0]])
|
|
||||||
// `Object.fromEntries(keysWithDifferentValues)`
|
|
||||||
return config
|
|
||||||
}
|
|
||||||
|
|
||||||
_disposePopper() {
|
|
||||||
if (this._popper) {
|
|
||||||
this._popper.destroy()
|
|
||||||
this._popper = null
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.tip) {
|
|
||||||
this.tip.remove()
|
|
||||||
this.tip = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Static
|
|
||||||
static jQueryInterface(config) {
|
|
||||||
return this.each(function () {
|
|
||||||
const data = Tooltip.getOrCreateInstance(this, config)
|
|
||||||
|
|
||||||
if (typeof config !== 'string') {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof data[config] === 'undefined') {
|
|
||||||
throw new TypeError(`No method named "${config}"`)
|
|
||||||
}
|
|
||||||
|
|
||||||
data[config]()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* jQuery
|
|
||||||
*/
|
|
||||||
|
|
||||||
defineJQueryPlugin(Tooltip)
|
|
||||||
|
|
||||||
export default Tooltip
|
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue