【Bootstrap 便利】webアプリで使えそうなコンポーネントを紹介します。

Bootstrapでコメント欄を作る

webアプリを作りたいけど、デザインが苦手だなー

内部のシステムを作ることに集中したいから手軽に見た目を作りたい

 

ティロ

こんにちは、ティロといいます

プログラミング好きな理系大学生です

 

Bootstrapを使うと簡単におしゃれなデザインを作ることが出来ます。

今回はコメント欄で使えそうなコンポーネントをご紹介します。

Bootstrapってなんぞや?という方はこちらをご覧ください。

関連記事

Bootstrapってなに?Bootstrapの基本的な使い方が知りたい ティロこんにちは、ティロといいます Bootstrapを使うと何が良いのか、また基本的な使い方[…]

bootstrapの導入から使い方

 

Bootstrapをcdnで読み込む

以下のコードをhead内に貼り付けてください。

 

 

 

コメントを作りたい

ツイッターでよくある写真とコメント横並びになっているデザインがあります。それをBootstrapで簡単に表現します。

こんな感じです。

コメントの例

コードはこんな感じです。

クラスの意味はこんな感じです。

containerpcで1140pxの幅を取ります。レスポンシブデザイン対応なので幅はデバイスによって変化します。
media子要素を横並びにします。
media-bodyコメント欄を作ります。

 

写真の大きさは各自で調整してください。

コードのクラスにはmyやmtがあります。これはマージンを表していて、例えばmyはマージンをy軸方向(上下)に取ります。mtはマージンをトップに取ります。

m-(0,1,2,3,4,5) 1=0.25rem=4px 例:m-5 全方向に0.25rem×5(20px)のマージンを取る

1remは16pxです。

全方向にマージンを取る
mt-(0,1,2,3,4,5)上にマージンを取る
mb-(0,1,2,3,4,5)下にマージンを取る
mr-(0,1,2,3,4,5)右にマージンを取る
ml-(0,1,2,3,4,5)左にマージンを取る
mx-(0,1,2,3,4,5)左右(x軸方向)にマージンを取る
my-(0,1,2,3,4,5)上下(y軸方向)にマージンを取る

 

マージンだけでなくパディングもあります。p(r,l,t,b,x,y)-(0,1,2,3,4,5)です。マージンと同じです。

 

class=”media”の下にclass=”media”を入れると上の写真のように入れ子構造になります。

 

こちらの記事もオススメです! webアプリで使えそうなコンポーネントを紹介しています。

関連記事

簡単におしゃれたサイトを作りたいなそんなときはBootstrapのカードが便利です。クラスをつけるだけで簡単に作れます。 ティロこんにちは、ティロといいますプログラミング好きな理系大[…]

背景の色を変える

いかがでしたでしょうか?

Bootstrapの機能をもっと知りたい!という方はこちらの書籍がおススメです。

Bootstrapの機能はほぼ載っています。

また実際にサイトを作りながら勉強したい!という方はこちらがおすすめです.

 

参考にしたサイト

Cards – Bootstrap 4.2 – 日本語リファレンス