Bootstrapのインストール方法と使い方

2017/08/08 12:20

このQ&Aのポイント

Bootstrapを使ったWebページの作成方法について解説します。
Bootstrapのインストール方法と展開場所について説明します。
Bootstrapを使って簡易の管理ページをかっこよく作成する方法を紹介します。

TeijigoTeatime
お礼率93% (272/291)

CSS
回答数1
ありがとう数2

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#251971

2017/08/09 22:06 回答No.1

bootstrapはCSSとJavascriptで構成されるものですので、ブラウザが読み込めるならばどこに置いてもOKです。「bootstrap-3.3.7-dist.zipを展開して、/var/www/htmlに」とありますが、それでOKのはずです。(おそらく /var/www/html をドキュメントルートにしているんですよね？) また、bootstrapはjqueryも利用するはずですので、それも合わせて置いておく必要があります。手書きでのHP作成経験があるとのことなのでご存じかもしれませんが、bootstrapもjqueryもブラウザ上(ローカルマシン上)で動くものなので、とりあえず学習するために自分で使うだけならばサーバ上ではなくローカルマシン内に置いておいても良いです。また、「cdnjs」のようにオンラインでみんなが利用出来るようScriptやCSSを集めておいてあるライブラリ的なサーバもあります。社内のセキュリティポリシーなどで問題がなければ、そもそも自分で配置せずにそちらを参照させる手もあります。たとえば、cdnjsを参照する以下のようなHTMLファイルを作ればすぐにbootstrapを触りはじめることができます。 <!DOCTYPE html> <html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <title>Bootstrap Test</title> </head> <body> <div> <p> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button> </p> </div> </body> </html>

質問者