新しい冒険をはじめる。

*「はい、をクリックした。」

*「他のブログ記事もチェックしてみてね!」

*「ブートストラ魔人が現れた。」

*「戦闘力が違いすぎる。たぶん無理だと思い直した。」

*「逃げるのは、不可能なようだ。」

自分「やーい、胴長短足」
ブートストラ魔人「ムキーーーー!!上半身がマッチョなだけだ!」

*「足を捻挫した。」

*「貴方はNakedのようだ。何ももっていない。」

自分「やーい、3頭身」
ブートストラ魔人「キャラだし頭身とか関係ないわっ!ムキームキー!!!」

*「腕を捻挫した。」

*「すでに謝罪じゃ収まらないようだ」

*「ブートストラ魔人は、すねて故郷に帰ってしまった」

*「貴方はブートストラ魔人を倒し、秘儀ブートストラップ コラプスを修得可能です。習得しますか?」

はい、こんにちわ。コウスケです。久しぶりの投稿でございます。

この長い間、ずーーーーーーーと漫画を読みふけっていました。
特に、ファンタジー系

おそらく、10作品ぐらい読んだかもしれません。
そう、もう僕のあたまの中はファンタジーであふれかえっております。

そしてブートストラップ コラップスという秘儀を教示するという技を身につけました
イタイコ、イタイコ、トンデイケー

今回、貴方がここまで読み進んでいるということは、
ブートストラ魔人を倒して、「秘儀ブートストラップ コラプス」を習得したいということですね!!?

ブートストラ魔人「いや、”はい”を選択しないと半強制的に無限ループだったし。。。」

(スルー)それでは、君に秘儀ブートストラップ コラプスを伝授しよう!

そもそも、ブートスラップって?

「WEBサイトやWEBページを効率よく開発するためのWEBフレームワーク」なんです。
https://getbootstrap.com/

Wikipediaさんより。
https://ja.wikipedia.org/wiki/Bootstrap

BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。 タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。

GitHubで二番目に人気があり、アメリカ航空宇宙局やMSNBCなどに採用されている。

NASAやテレビ局で使われているって、むしろもっとわけわからんですね。
でも、、、Webサイトを構築する人にとっては、欠かせないアイテムなんです!

何が便利なの?

ブートストラップ自体が重宝され、どんどん進化、機能追加されているため、多機能のフレームワークになっているのですが、
一番重宝されている内容は、グリッドシステムです。
ブートストラップのグリッドシステムを利用するだけで、スマートフォンサイトと携帯サイトのレイアウトがお手軽にできあがります。

そして、通常では、JavaScriptの知識がないと実現しない機能もBootstrapのフレームワークを使うことで、HTMLとCSSの知識だけで使えちゃいます!

ブートストラップ コラプスとは?

正式には、Bootstrapのcollapseというクラスなのですが、、、
そう、あなたは、すでに経験しています。
ブートストラ魔人を倒すときに出てきた選択肢。そして、選択肢を押下したときに出てきたメッセージ。
あれは、ブートストラップのcollapseというクラスでできているんです。

そのボタン(選択肢)を押したら、メッセージが現れたり、消えたりするような動的機能は、HTMLでは実現できず、Javascriptを頼らなければなりません。
しかし、ブートストラップが用意しているクラスを使えばあっという間に出来上がります。

サンプルボタン

以下のような選択肢の場合。

下準備としては、公式よりダウンロードするか、CDNという外部リンクを自身のページのHEADタグの中に入れる必要がります。
詳しくは、公式サイトを訪れてみてください。

*「はい、をクリックした。」

*「いいえ、をクリックした。」

 

■HTML

■CSS

 

実際に使い方がピンとこなかったかもしれないが、ブートストラップを使えば、 動的なひとつレベルアップした動きが実現できることがで伝われば、幸いだ。 ではでは!

IT留学に関するお問い合わせ
秘儀Bootstrap Collapseでブートストラ魔人をやっつけろ!攻略方法を解説

この記事が気に入ったら
いいね!をお願いします(^^)