• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:Bootstrapのインストール?)

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

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

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

  • ベストアンサー
noname#251971
noname#251971
回答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>

TeijigoTeatime
質問者

お礼

早々のレスありがとうございます。 /var/www/html をドキュメントルートにしています。 一応、ご指示通りにしたところ表示できることはできるのですが、サンプルとはちょっと違う表示になったりしています。 少しずつ調べたいと思います。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • winIEではOKなのに、macIEでは画像がずれる

    現在、スタイルシートを使ってホームページを作っています。 winのIEでは画像やテキストがきちんと収まっているのに、 macのIEだと画像だけずれてしまい、下のほうに表示されてしまいます。 なにが問題なのでしょうか? 説明が下手なので、急ぎで http://phpstation.fc2web.com/setsubi01.html にページをアップしてみました。 (ちょっとjavascriptにエラーがありますが気にしないで下さい。) 画像も少ししかアップしていないので、表示されない部分もありますがこんな感じです。 http://phpstation.fc2web.com/css/kotobuki.css にスタイルシートがあります。 よろしくお願いいたします。

  • -css- ページオープン時やリロード時の表示崩れの回避方法

    現在構築中のサイトでカルーセルを使って画像リストをamazon風に表示させるページを作っています。 http://sorgalla.com/projects/jcarousel/examples/static_simple.html ただページオープン時やリロード時に一瞬リスト形式に縦に画像が並んで見えてしまいます。 わりと長いリストを載せる予定なんですが、一瞬でもやっぱり不恰好です。 この<div>内のみスタイルシートも完全に読み込むまで表示させないなど、 何か回避する方法はありませんでしょうか? ちなみに<body>~</body>を完全に読み込むまで表示させない方法はあるのですが、 これだとページ内のflash(プレローダー付)も完全に読みこむまで表示しないので、それでは反応が遅すぎるのです。

  • サイト全体にどのようにCSSを使うのでしょうか?

    今までサイトを作ったことがなく、一枚のWebページしか作ってこなかった(習ってこなかった)ので・・・ 例えば、このサイトhttp://www.matsuyafoods.co.jp/では、6枚のスタイルシート(開発者のツールによると)が使われているのですが、それぞれのスタイルシートの役割が分かりません。このサイトの場合で言うと、メニュー(gnavi)のスタイルシート、店舗案内のスタイルシート、IR情報のスタイルシートなど、Webページごとにそれ用のスタイルシートを適用しているのかと思っていましたが、そうではないみたいです。さすがに、リセットスタイルシートやベースとなるスタイルシート(header,gnavi,footerなど)は、一枚のスタイルシートで全てのWebページに適用しているということは分かるのですが・・・

    • ベストアンサー
    • CSS
  • Java Distributed Computing

    http://docstore.mik.ua/orelly/java-ent/dist/ch10_02.htm このページに有るサンプルプログラムを使うためのパッケージ、"dcj.examples.Collaborative"は もうどこにも存在しないのでしょうか? ftp://ftp.ora.com/published/oreilly/java/javadc/ にて配布していたようなのですが、現在はリンク切れのようです. 情報があったらご教授のほどよろしくお願いいたします.

  • apacheの設定について

    環境はcentos6.5、Apache/2.2.15です。 http://centossrv.com/ CentOSで自宅サーバー構築のページを見ながらWebサーバー構築(Apache)をしています。 http://centossrv.com/apache.shtml このページの通りやってみたのですが、 ポート開放、OK、 http://www.websitepulse.com/help/tools.php?host=&test=web&do=Go! Website test resultsのテストもOKでした。しかし http://サーバー名/にアクセスしてテストページが表示されればOK 、とありますが、 このとおりにやっても、空白のページしか表示されませんでした。 公開するためにやっているのではなく、 /var/www/html/index.htmlにあるこの/index.htmlというページが、サーバ名で表示させたいだけです。 ServerNameで何故index.htmlが表示されないのかが解りません。 情報量少なくてスミマセン。 何か解った方、宜しくお願いします。

  • AutoHotKeyがインストールできません?

    今は「AutoHotKey」を使ってますが、最近は「AutoHotKey L」の方が主流になるとの記事を見ましたので、AutoHotKey Lに買えようかなと思ってます。 http://www.autohotkey.com/download/のページで、「AutoHotkey_Lのインストーラは・・・・・・」の項目をクリックして「AutoHotkey109702.zip」をダウンロードしました。 エクスプローラ画面を表示して、「AutoHotkey109702.zip」のファイルをクリックしたら、訳の分からない文字が画面一杯に表示されてしまいます。 何が悪のか分かりません? 見当のつく方は教えて下さい。

  • サーブレットが実行できない

    似たような質問が何件かあるのですがそちらを読んでも解決できないので、質問させてください。 java servlet初心者なのですが、 http://www.hellohiro.com/servlet.htm のサイトをもとにサーブレット環境を自分のパソコンで作ろうとしています。 とりあえず ・Tomcat5.5.23をダウンロード ・http://localhost:8080でページが表示されることを確認 ・HelloWorldServlet.classを作る。 まで正常にできました。 その後、 [Tomcatのフォルダ]\webapps\examples\WEB-INF\classes にHelloWorldServlet.classをコピーし、 http://localhost:8080/examples/servlet/HelloWorldServlet  を実行したところ 404エラーが発生しました。 もともとwebappsファイル下にexamplesというファイルがなかったのですが、これは正常なのでしょうか? jsp-examplesファイルとservlets-examplesファイルがあったのでその中の \WEB-INF\classes下にHelloWorldServlet.classを入れてみたり、 webapps下に\examples\WEB-INF\classesを作って、その中にそのclassファイルを入れてみたりといろいろやってみたのですが、 まったくエラーは変わりません。 何が悪いのかわからないのですが、 何かアドバイスをいただけないでしょうか? お願いします。

    • ベストアンサー
    • Java
  • JSP <%@ %> <% %>が表示されてしまう

    初めてApache Tomcatを連携させてWebページを作成しています。 JSPでページを作成し、ブラウザで表示させたところ、 <%@ ~ %>や<% ~ %>といった ディレクティブやスクリプトレットがそのまま表示されてしまいます。 Apache Tomcat ExamplesのJSP Examplesにあるページは、 Sourceにタグを含んでいてもそのタグは表示されていません。 ディレクティブ、スクリプトレットがブラウザ上で表示される理由には、何が考えられますか? また、どうすればこの問題を解決できますか?

  • 印刷用スタイルシートの作り方

    スタイルシートを使ってWEBページを作り、印刷プレビューにすると、画像とかが、飛んでしまって、印刷範囲にないのですが、スタイルシートの記述で、印刷用に、外部スタイルシートを作るにはどうすればよいのでしょうか?よいサイトがあれば教えてください。

  • Tomcat5.0.30とApache2.2.3の連携方法について

    Tomcat5.0.30とApache2.2.3を入れて、連携させたいのですがどうしても上手くいきません。 環境は OS:Windows XP Tomcat:Ver5.0.30 Apache:Ver2.2.3 です。 不足情報がありましたら仰って下さい。 Tomcat単体では左上にマークとVerが表示され、Apache単体ではIt works!と表示されます。 http://archive.apache.org/dist/tomcat/tomcat-4/archive/v4.0.1/bin/win32/webapp-module-1.0-tc40-windows.zip 上記URLからwebappをDLして、Apacheのmodulesフォルダに入れて、httpd.confの最後に " LoadModule webapp_module modules/mod_webapp.so WebAppConnection conn warp localhost:8080 WebAppDeploy examples conn /examples " の3行を追加してみたのですが上手くいかず http://www.apache.org/dist/tomcat/tomcat-connectors/jk2/binaries/win32/jakarta-tomcat-connectors-jk2.0.4-win32-apache2.0.49.zip こちらからmod_jk2.soをDLして入れ、workers2.propertiesファイルを新規製作し " [status:] [uri:/jkstatus/*] group=status: [shm:] disabled=1 [channel.socket:] [ajp13:] [uri:/servlets-examples/*] [uri:/examples/*] " とし、Apache/confフォルダに入れてみたのですが連携できていません。 httpd.confには LoadModule jk2_module modules/mod_jk2.so を最後に追加しました。 一応、ファイルを追加したり修正したりしたときは、Tomcat/Apache共に再起動をさせています。 どうしたらいいのでしょうか? また、httpd.confに行を追加するときは最初に"#"をつけているのですが、その他のファイルにもつけなくてはいけないのでしょうか? 教えていただけないでしょうか。 宜しくお願いします。

    • ベストアンサー
    • Java