[RAILS] Résumé des fonctionnalités simples de Bootstrap pour les débutants

introduction

Ceci est le premier message. Je crée un portfolio en utilisant le "Bootstrap" que j'ai appris dans le tutoriel Rails, mais j'aimerais garder une note des fonctionnalités que j'ai utilisées. J'espère que cela sera utile pour les débutants autant que possible.

1. 1. Avantages de l'utilisation de Bootstrap

Bootstrap est un framework de production Web créé par Twitter. Vous pouvez facilement créer un site Web à part entière qui prend en charge différents navigateurs et tailles d'écran.

mérite

• Même si vous manquez de connaissances et de compétences en conception, vous pouvez introduire un design moderne
• Facile à introduire réactif
• Vous pouvez réduire la quantité de code

Démérite

• Vous devez apprendre votre propre style d’écriture et vos propres règles
• Il a tendance à être une conception similaire
• Plus d'efforts lors de la tentative de personnalisation

2. Installation de Bootstrap

Pour Rails, lorsque vous utilisez Bootstrap, utilisez le gem bootstrap-sass pour le déployer dans votre application Rails.

Gemfile

gem 'bootstrap-sass', '3.4.1'

Mettez à jour Bootstrap.

python

 bundle install

Créez un fichier CSS personnalisé et utilisez `` @ import '' pour charger Bootstrap (et ses pignons associés).

app/assets/stylesheets/custom.scss

 @import "bootstrap-sprockets";
 @import "bootstrap";

3. 3. Spécifiez la couleur de la police

Vous pouvez facilement ajouter une couleur de texte en spécifiant ce qui suit dans l'attribut `` class '' de la balise HTML.

index.html

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

Si vous souhaitez aligner les caractères, ajoutez l'attribut Classe comme indiqué ci-dessous.

index.html

<p class="text-center text-primary">Centré</p>
<p class="text-right text-secondary">Justifié à droite</p>
<p class="text-left text-success">Justifié à gauche</p>

Quatre. Spécifiez la couleur d'arrière-plan

Vous pouvez spécifier la couleur d'arrière-plan en spécifiant .bg- comme indiqué ci-dessous dans l'attribut class de la balise HTML.

index.html

<div class="bg-primary text-white">.bg-primary</div>
<div class="bg-secondary text-white">.bg-secondary</div>
<div class="bg-success text-white">.bg-success</div>
<div class="bg-danger text-white">.bg-danger</div>
<div class="bg-warning text-dark">.bg-warning</div>
<div class="bg-info text-white">.bg-info</div>
<div class="bg-light text-dark">.bg-light</div>
<div class="bg-dark text-white">.bg-dark</div>
<div class="bg-white text-dark">.bg-white</div>
<div class="bg-transparent text-dark">.bg-transparent</div>

Cinq. Joindre un bouton

Vous pouvez créer un bouton en spécifiant btn '' dans classe '' comme suit. De plus, pour changer la couleur d'arrière-plan du bouton, spécifiez la couleur après btn-.

index.html

<button type="submit" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

6. Activer la navigation

La barre de navigation est utilisée avec `` nav '' comme classe.

index.html

<nav class="nav">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

Site de référence

Site Web officiel de Bootstrap