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

Demerit

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

キャプチャ.JPG 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

キャプチャ3.JPG 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

キャプチャ5.JPG 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

キャプチャ6.JPG

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

Recommended Posts

A brief summary of Bootstrap features for beginners
[For beginners] Summary of java constructor
A brief summary of DI and DI containers
Rails: A brief summary of find, find_by, where
A collection of simple questions for Java beginners
A brief summary of Rails association options (foreign_key, primary_key)
[Java] Summary of for statements
A brief explanation of commitAllowingStateLoss
Ruby on Rails for beginners! !! Summary of new posting functions
Explanation of Ruby on rails for beginners ③ ~ Creating a database ~
A list of rawValues for UITextContentType.
A brief description of JAVA dependencies
A memorandum for android application development beginners
[For programming beginners] What is a method?
Summary of Docker understanding by beginners ② ~ docker-compose ~
Rails [For beginners] Implementation of comment function
Features of spring framework for java developers
Explanation of Ruby on rails for beginners ①
[For Rails beginners] Summary of how to use RSpec (get an overview)
A summary of only Rails tutorial setup related
Summary of Java environment settings for myself [mac]
Summary of new features added in Deeplearning4J 1.0.0-beta4
Summary of Docker understanding by beginners ① ~ docker run -p ~
[For beginners] Procedure for creating a controller using rails
LSTM supports a huge amount of RNA-Seq features
[Introduction to Java] Basics of java arithmetic (for beginners)
Awareness of object-oriented programming for half a year
I made a Docker image of SDAPS for Japanese
A review of the code used by rails beginners
Get a list of MBean information for Java applications
[For beginners] DI ~ The basics of DI and DI in Spring ~
[For beginners] Quickly understand the basics of Java 8 Lambda
[Spring Boot] How to create a project (for beginners)
Output a list of cron settings for all users.
Introduction to Java for beginners Basic knowledge of Java language ①
List of frequently used Java instructions (for beginners and beginners)
Explanation of Ruby on rails for beginners ⑥ ~ Creation of validation ~
A record of a brief touch on GCP's Data Flow
Explanation of Ruby on rails for beginners ② ~ Creating links ~
List of MySQL sentences for programming beginners * Personal memo
Summary of file reading method for each Java file format
Explanation of Ruby on rails for beginners ⑦ ~ Flash implementation ~
A brief explanation of a maze game made in Java for a cousin of an elementary school student
A summary of what Java programmers find when reading Kotlin source for the first time