Bootstrapでそれっぽいサイトをチョッパヤで作ってみた

それっぽさ。

Bootstrapとは

いい感じのCSSとJSが用意されたコンポーネントライブラリ。味気ない素のエレメントを、ちょっとしたコーディングで今風な感じに仕上げてくれます。

getbootstrap.com

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

使い方は簡単で、HTMLに以下を追加。

（HEAD内に）
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

（BODY内に）
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

あとは要素のクラス名をいじるだけでいい感じの雰囲気になります。今回は以下のサイトを参考にしながら、サイトのアップデートを行ってみました。

https://hackerthemes.com/bootstrap-cheatsheet/

実際に使ってみた

以前作ったGitHub Pagesをすべて更新してみました。

pokiiio.github.io

pokiiio.github.io

pokiiio.github.io

pokiiio.github.io

pokiiio.github.io

pokiiio.github.io

実際のイメージがこんな感じ。

フォントだけでなく、NavBarもそれっぽく。

ダイアログもそれっぽく。

モバイルもそれっぽく。

チョッパヤでいい感じに！