グローディア 株式会社 
bootstrapとは
bootstrapはCSSフレームワークです。
html,CSS,JSで作られたテンプレートですね。
とっても便利です。レスポンシブ対応されてます。
ヘッダーとか検索フォームとか表とかボタンとか、コピペで実装できちゃいます。
比較的簡単にレスポンシブでちょっとかっこいいサイトが作れちゃいます！
CSSフレームワークはたくさんありますが、
bootstrap派生でもいっぱいあるんですよー！
bootflatとか。
ほとんど英語ばっかで分かりにくいんですけど、日本製のHonokaというのもあります！
導入方法
さて肝心な導入方法ですね！
今回はとりあえず導入方法のみご紹介します。
Downloadページに飛び、Compiled CSS and JSのDownload。
これでbootstrap一式のzipがダウンロードできます。
展開すると、bootstrap-4.1.1-distになります。
中身はCSSフォルダとJSフォルダのみ！笑
中にはたくさんファイルがありますけどね！
そしてこれらはイジる必要はありません。
逆にイジっちゃうと戻せなくなったりするので…。
まず、CSSフォルダとJSフォルダと同じ階層にindex.htmlを作成します。
あとは必要なCSSとJSとjQueryだけ必ず指定してあげればもう動きます！
|
1 2 3 4 5 |
<link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> |
公式サイトに載っているサンプルだとこんな感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> </body> </html> |
補足
冒頭にも書いたように、CSSは上書きではなく別ファイルで作成した方がいいですね。
個人的な意見なので岡のユーザーは分かりませんが…。
やらかしたときにめんどくさいです。笑
多くの方がご存知かとは思いますが、
使ったことがない方はぜひ1度使ってみてください！
秒でレスポンシブサイトが作れちゃいます！！