1
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

最低限知っておきたいBootstrapの使い方

Posted at

はじめに

ここでは、Bootstrapの基本的な利用方法について解説します。

スターターテンプレート

Bootstrapには、色々なデザインが用意されていますが、その大元となる「スターターテンプレート」があります。

よく使うデザイン

Jumbotron

ウェブページのヘッダーのテンプレートとして使いやすいデザインです。
https://getbootstrap.jp/docs/4.4/components/jumbotron/

Alerts

処理完了やエラーメッセージの表示に使えます。
alert-のclass属性は、色の指定にも使えるので便利です。

Buttons

他のページへのリンクやフォームの送信ボタンなどに使えます。
こちらもbtn-successなどのクラス属性は、色を変える時に使えます。

Cards

ブログの記事一覧で個々の記事を表示したりするのに使えます。

Forms

新規登録や記事投稿などのフォームに使えます。

Navbar

ヘッダー部分のメニューバーなどとして使えます。

Pagination

記事一覧ページなどのページネーションに使えます。

チートシート

Bootstrapのチートシートのページには、様々なデザインと、対応するコードがまとめられています。

1
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?