[RAILS] A brief summary of Bootstrap features for beginners

Introduction

This is the first post. I'm creating a portfolio using the "Bootstrap" I learned in the Rails tutorial, but I'd like to keep a note of the features I used. I hope it helps beginners even a little.

1. 1. Benefits of using Bootstrap

Bootstrap is a framework for web production created by Twitter. You can easily create a full-fledged website that supports various browsers and screen sizes.

merit

• Modern design can be introduced even if you lack design knowledge and skills
• Easy to introduce responsive
• You can reduce the amount of code

Demerit

• You need to learn your own writing style and rules
• It tends to be a similar design
• Man-hours increase when trying to customize

2. Bootstrap installation

For Rails, when using Bootstrap, use bootstrap-sass gem to deploy it in your Rails application.

Gemfile

gem 'bootstrap-sass', '3.4.1'

Update Bootstrap.

python

 bundle install

Create a custom CSS file and use @import to load Bootstrap (and its associated Sprockets).

app/assets/stylesheets/custom.scss

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

3. 3. Specify the font color

You can easily add the text color by specifying the following in the class attribute of the HTML tag.

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>

If you want to align the characters, add the Class attribute as shown below.

index.html

<p class="text-center text-primary">Centered</p>
<p class="text-right text-secondary">Right justified</p>
<p class="text-left text-success">Left justified</p>

Four. Specify the background color

You can specify the background color by specifying .bg- as shown below in the class attribute of the HTML tag.

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>

Five. Attach a button

You can create a button by specifying btn in class as follows. Also, to change the background color of the button, specify the color after 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. Turn on navigation

Use the navigation bar with nav as the class.

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>

Reference site

Bootstrap official website