Androidのメモとか

ポキオの日記です。今日も遅延してない。

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

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

bootstrap pokiiio

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

bootstrap pokiiio

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

bootstrap pokiiio

モバイルもそれっぽく。

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

「Androidのメモとか」は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

このブログは個人的なメモ書きであったり、考えを書く場所であります。執筆者の所属する団体や企業のコメントや意向とは無関係であります。また、このブログは必ずしも正しいことが書かれているとは限らず、誤字脱字や意図せず誤った情報を載せる場合がありえます。それが原因で読者が不利益を被ったとしても、執筆者はいかなる責任も負いません。ありがとうございます。