らいふしふったー

プログラミング、読書、映画や消防ネタを取り扱います。

プログラミング

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

初授業に行ってきました

no image

【第3回】Progate Sunday Schoolに行ってきた

日曜日にProgateを使ってプログラミングを勉強するイベント 【第3回】Progate Sunday Schoolに応募できたので、Progate(プロゲート)に行ってきました。 関連

no image

DIC5回目の授業

卒業までにオリジナルアプリケーションを創るようです。 それも兼ねて今回の授業は「アイデアと要件」がテーマでした。   関連

no image

退職願を書く

こんばんは、今日はカフェで退職願を書いていました信です。 退職願をちゃちゃっと書いてProgateで遊んでました。 関連

no image

タイトルに困ったら近況報告

月の下旬になると家賃振り込んだり、スクールの授業料を決済したりしてお金の重みを感じる…。 もっと毎日を充実させて一つでも成長しなきゃって思うんです。 関連