Comment introduire les fichiers conteneurs dans bootstrap

Les fichiers conteneurs Bootstrap sont utilisés pour créer des mises en page réactives composées d'une ou plusieurs colonnes enveloppées dans une rangée de divs. L'introduction d'un fichier conteneur Bootstrap nécessite les étapes suivantes : Installer Bootstrap Ajouter le fichier conteneur au HTML Créer un conteneur Créer des lignes et des colonnes

Comment introduire un fichier conteneur Bootstrap

Les fichiers conteneur Bootstrap sont utilisés pour créer un mise en page réactive flexible, qui contient une ou plusieurs colonnes enveloppées dans une rangée de divs. L'introduction du fichier conteneur Bootstrap nécessite les étapes suivantes :

1. Installez Bootstrap

• Utilisez NPM : npm install bootstrapnpm install bootstrap
• 使用 CDN：https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css

2. 将容器文件添加到 HTML

<code class="html"><link rel="stylesheet" href="path/to/bootstrap.min.css"></code>

3. 创建一个容器

<code class="html"><div class="container">
  <!-- 内容 -->
</div></code>

4. 创建行和列

<code class="html"><div class="container">
  <div class="row">
    <div class="col-sm-6">
      <!-- 第一列的内容 -->
    </div>
    <div class="col-sm-6">
      <!-- 第二列的内容 -->
    </div>
  </div>
</div></code>

注意：

• container 类为容器提供内边距。
• row 类创建一个水平行。
• col-* 类用于创建具有特定宽度和间距的列。例如，col-sm-6 创建了一个在小屏幕（sm
Utilisez CDN : https://cdn.jsdelivr. net/ npm/bootstrap@5.1.3/dist/css/bootstrap.min.css

🎜🎜🎜2. Ajoutez le fichier conteneur au HTML🎜🎜rrreee🎜🎜3. Créez un conteneur🎜🎜rrreee🎜🎜4. . Créez des lignes et des colonnes 🎜🎜rrreee🎜🎜Remarque : La classe 🎜🎜🎜🎜container fournit un remplissage pour les conteneurs. La classe 🎜🎜row crée une ligne horizontale. 🎜🎜 Les classes col-* sont utilisées pour créer des colonnes avec une largeur et un espacement spécifiques. Par exemple, col-sm-6 crée une colonne qui occupe 6 espaces sur les appareils à petit écran (sm). 🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!