らいふしふったー

20代後半の未経験がプログラミングに挑戦していくサイト。

プログラミング

Bootstrap

投稿日:2017年3月5日 更新日:

Pocket

今日はBootstrapを学んだのでそのアウトプットをします。

開発現場では、バックエンドのエンジニアもフロント側を少しでも理解しておいた方がいいです。
連携や簡単な手直しができると生産性や作業効率が上がります。サーバー側も分かると仕事の幅も広がり強みになりますね。
自分でプロトタイプのサイトを作るにしてもデザインの見た目が悪かったら使ってくれません。
HTML、CSS、JSあたりのフロント側も並行して学んで行きたいですね。
(おすすめサイトはプロゲートさんです)
Bootstrapは、CSSのフレームワークです。用意されている型を使って素早い構築を行うことができる。
魅力的なのが、グリッドシステムによるレスポシブウェブデザインに適応していることです。
グリッドは、container(コンテナ)、row(行)、column(列)で縦12列に分割構成されています。
(レスポシブウェブデザインは、配列が変化しPCやスマホ等に合わせた画面配置になる)
表示画面サイズによって配置が切り替わるブレイクポイント5つある。
BootstrapのCSSをアプリケーションに配置、HTMLファイルにBootstrapのクラスをそれぞれ配置する必要があります。
○使用ルール
  1. class=”container”か”container-fluid”の中に
  2. class=”row”の中に
  3. class=”col-{prefix}-{columns}”の形式で
  4. {columns}は合計値が12になるように指定

Bootstrapではテーブル、ボタン、フォームなどのテンプレートもある。

テスト

テスト

-プログラミング
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

プログラミングスクールに2ヶ月通ってみて

no image

プログラミングの基礎

no image

とりあえず求職者支援訓練に応募してみた

no image

DIVE INTO CODEのDEMODAYに行ってきた。

DIVE INTO CODEのDEMODAYが5月28日(日)にあったので観戦してきました。 開催場所は、渋谷ヒカリエ内にあるレバレジーズさんのオフィスです。 関連

no image

Railsだけじゃない