LoginSignup
0
0

More than 3 years have passed since last update.

bootstrap導入方法

Last updated at Posted at 2020-07-08

1 bootstrapの公式を開く https://getbootstrap.com/docs/4.5/getting-started/introduction/

2 公式の「Get started」をクリック。(ダウンロードかリンクへのアクセスかの2通りの利用方法があるが、特別な理由がない限り下記の方法でのリンクアクセスで良い。わざわざダウンロードしてPCの容量を圧迫する必要はない。)

3 IntroductionのQuick startの真下にある、CSSのCopy-paste the stylesheet into your

before all other stylesheets to load our CSS.と書かれた直下のコード <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css 以下略をコピー。

4 自分の作りたいアプリ等のhtmlファイルに貼り付ける。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ホゲホゲ</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" ←ここから、
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> ←ここまでが貼り付けたコードです。
<style>

5 これで準備は完了。
特徴として、class名に ナビバーならclass="navbar-nav、各種ボタンならclass="btn btn-primary などの対応したclass名が必要になり、それによって上記のlink relのアクセス先から対応したcssを読み取ってナビバーやボタンなどを表示できるようになる。ハンバーガーメニューもある。
いずれも、準備後はbootstrap公式に記載された、自分がほしい機能の項目に書いてあるコードをコピーしてhtmlに貼り付けるだけですぐに使える。

また、bootstrapはグリッドメニューにも対応しており、画面を縦に12分割したカラム分けをすることができる。(短冊のように画面を縦割りで管理できる)
分割ごとにブロックを作ることもできる。(ぷよぷよをイメージしてもらうとわかりやすい)
これによってレスポンシブデザインにも対応していて、PC・タブレット・スマホそれぞれに対応した画面表示になってくれる。公式サイトにも使われているから、公式の画面を縮めてみればわかる。
(ハンバーガーメニューは、スマホ並みに画面(ウィンドウ)を縮めないとハンバーガーメニューが表示されないようなので、縮めていないと「ハンバーガーメニューのコード貼り付けたのにでない‥!?」となるので注意。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0