Bootstrapのメモ part2
PHPをいじり始めて1年近いらしいので書こうかなと思って前回の続き書きます。
これの続きです。
2回目の今回は単一ページ内でタブ切り替えする方法の話をします。
実装してできる内容はこんな感じ
イメージとしてはこんな感じ(画像のやつは個人的に欲しいシステム実装しようと思ってフロントからやってるコードを開いて見た時の画像です。
コードはそんなに手の込んだコードにはならないです。
とりあえず前回のエントリにも書いたCSSとJsのライブラリを読み込みます。
あとはタブを切り替えて表示したいコンテンツを以下のような感じで記述するだけ
<div class="tab-content">
<div class="tab-pane fade in active">
<!--ここに切り替える内容を記述-->
</div>
<div class="tab-pane fade"><!--ここに切り替える内容を記述2-->
</div>
</div>
こんな感じです。
コードの簡単な解説をすると
<div class="tab-content"></div>
内に切り替えて表示したい内容をさらにクラスを分けて記述します。
<div class="tab-pane fade in active"></div>
この中に記述される内容がタブの中に含まれるコンテンツです。
class内のtab-paneはタブの内容であることを示すクラスの名称です。
fade inはタブを切り替えた時にフェードイン効果をつけることができます。
activeは最初に該当するページを開いた時に表示されるタブの内容であることを示します。
こういうのを活用すると一度に表示したくないけど同一ページ内で扱いたい情報とかの取り扱いがグッと便利になるのでこういう機能は活用していきたいです。
---参考----
前回と同じ
Bootstrapのメモ part1
朝夜が寒くなってきました。
末端冷え性に辛い季節が始まりますね。。。
Bootstrapを使い始めたのでそのメモを
今回はレイアウト関連
Bootstrap
そもそもBootstrapとは
Bootstrapはwebアプリケーションを作成するフロントエンドフレームワーク
#wikipedia 参照
デザインなどがとてもいい感じになるフレームワークです
対応言語
HTML,CSS,Javascript
できること
色々ある
- レスポンシブデザイン
- ドロップダウン
- ボタン
- などなど
使用前の準備
<¥--Bootstrap CDNを用いるとき-->
head部に以下の記述をする
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
また、Javascriptに関してはbody部に以下を読みこむ
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
色々できることがあるのでまずはレスポンシブデザインに関わるところからやる
グリッドシステム(grid system)
グリッドシステムとは
Bootstrapに用意されているシステム
ディスプレイに応じて表示領域の調整を行うことができる
使用する前の準備
グリッドシステムを適応したいところをclass="row"で囲む
グリッドシステムの仕様
イメージとしてはこういう感じ
画面全体を12として分割してレイアウトすることができます
これをカラムごとにいくつの領域を使うか指定してレイアウトすることで画面サイズが変わっても対応できるようになっています。
グリッドシステムの使い方
分割したいコードをrow内でさらにカラムとして扱います
class="col-XX-YY"にまとめます
XX内には以下の内容を記述します
- xs:モバイル向け ~767px
- sm:タブレット向け 768~991px
- md:デスクトップ向け 992~1199px
- lg:デスクトップ(ワイド)向け 1200px~
これはディスプレイサイズに応じて画面の分割を変更するときにわけて書きます
YY内には以下の内容を記述します
1~12(11)の数字:画面全体の中のどれだけの幅を用いるかを数字で示します。横並びにするときは並べたいコンテンツを合計12になるように分割します。
------------参考文献---------------
夏(休み)の終わり
夏休みのイベント消化しちゃったので夏休みを振り返る
8/5 (夏休み初日)
東京行きました(正確には授業最終日にバイト行って直接夜行で）
面談会でした。
サポーターズさんのイベントでした。
話を聞かせていただく機会は何度かありましたが、自分の話をする機会はほぼなく、とてもいい経験になりました。
8/7
Unity 道場
ほぼ興味だけで申し込んで参加しました。
コードを記述して動かすのとは異なりとても面白かったです。
その後も時間ができたらUnityで遊んでみてます。
8/15
成人しました。
同級生の軽音部のライブに参加しました。
同級生に祝われるのもあまりなく(夏休みど真ん中の誕生日なので)とても楽しかったです。
8/18
東京
面談会でお話しさせていただいた株式会社リブセンス様、Sansan株式会社様のオフィスを見せていただきました。
就活の話もさせていただきとてもいい経験になりました。
BEENOS株式会社様の1dayインターンにも同日に参加しました。
事業を始めるという立場の話はあまり聞いたことがなく、今まで自分で考えたことのない分野でとても面白かったです。
9/2 oto festival
ライブですね
同級生に誘われて行ってきました。
超メジャーなアーティストのライブで楽しかったです。
9/3 All Asian contest (Phone)
もともと他の予定入ってて出る予定じゃなかったコンテスト
誰も出てないのはまずいっていうことになり18時に急遽運用することに。
部室で一夜を明かしました。中途半端に寒くて寝れるわけあるかって感じでした。
運用しながらドットインストールみてた記憶が残ってます。
9/4~8 インターンシップ
9/10 TOEIC
空調寒すぎてお腹痛くて死ぬかと思った
9/16 flumpoolライブ
楽しかったよかったすごかった
あと今年の夏休みはSuicaを使うように意識して生活してました
電子マネー色々ある中でSuicaにしたのは電車にも使えるところからでした
小銭多くなるより圧倒的に便利でした
学校で使えれば全部こっちにしてもいいくらいのレベルで使ってました
今年の夏は思ってた以上に色々な経験をすることができた1ヶ月半になりました。
とても勉強になる出来事が多く、(ほぼ)終わってみて充実感がすごいです。
金銭的にはそこそこかつかつでしたが、とてもいい時間でした。
