2016-05-03 10 views
0

私は、ブートストラップ機能を備えた単純な静的なWebページを作成しようとしています。私はこれを達成するためにAWS ec2インスタンスにLAMPサーバーを設定しました。HTMLページをブートストラップ(jumbotron)に接続

いくつかのことを試してみるには、ジャンボトロンを使用して、ブートストラップライブラリを自分のhtmlページに接続できることを確認したかっただけです。私はこれをある時点で達成しましたが、私はこの作業をやめて、数週間後にやってきてやり続けました。私は同じ正確なコードで中断したところを拾いましたが、今回は、私が作業していたジャンボトロンはもはや存在しませんでした。基本的に、私が作ったhtmlページは通常のフォントとジャンボトロン効果のない典型的なhtmlページでした。私のコードは以下の通りです:

<!DOCTYPE html> 

<html lang="en"> 

<head> 
<title>Test</title> 

<meta charset="utf-8"> 
<!--meta tag viewport purpose is to scale screen correctly--> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<link rel="stylesheet" href="css/bootstrap.min.css" > 
<link href="custom.css" rel="stylesheet" > 


</head> 

<body> 

<div class = "jumbotron"> 
    <div class = "container"> 
     <h1>Welcome to landing page!</h1> 
    <p>This is an example for jumbotron.</p> 
    </div> 
</div> 


</body> 



</html> 

私はこれがAWS ec2インスタンスで行われていると述べました。だから私のhtmlファイルへのパスは/ var/www/htmlだと仮定します。 htmlディレクトリは私の静的なウェブページである私の.htmlファイルを保持し、ブートストラップからダウンロードされたjs、fonts、cssディレクトリも保持します。だから... ...もう一度、htmlディレクトリの内容は次のとおりです。

CSSのcustom.cssフォントJS Will.html

私は一人でコードを残しどのようにして数週間後に戻って来た後のように混乱しています、ジャンボトロンはもはや働いていませんでした。当初、css、fonts、およびjsディレクトリを保持するマスターブートストラップディレクトリがありましたが、私はそのマスターディレクトリを取り除き、htmlページと同じレベルに3つのディレクトリを入れました。それは問題ではありません、私はちょうどそれらのディレクトリへのパスを変更しました。私はaws ec2インスタンス上で自分のLAMPサーバーを更新しました。確かに、このジャンボトロンをどのように働かせるかについての助けは素晴らしいだろう。

ありがとうございました。

答えて

0

この

<!DOCTYPE html> 

<html lang="en"> 

<head> 
<title>Test</title> 

<meta charset="utf-8"> 
<!--meta tag viewport purpose is to scale screen correctly--> 
<meta name="viewport" content="width=device-width, initial-cale=1.0"> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" > 
<link href="custom.css" rel="stylesheet" > 


</head> 

<body> 

<div class = "jumbotron"> 
    <div class = "container"> 
     <h1>Welcome to landing page!</h1> 
    <p>This is an example for jumbotron.</p> 
    </div> 
</div> 


</body> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

</html> 
してみてください
関連する問題