2017-03-01 9 views
0

私はブートストラップを使って自分のログインページを反応させるつもりです。しかし、コード内にブートストラップリンクを追加すると、HTMLの表示が何らかの理由で影響を受けます。私はなぜそれがあるのか​​知りたいのですが、あなたに私のヒントを教えてもらえますか?ログインページをどのように反応させることができますか?ブートストラップリンクを追加するとコードが変わるのですか?

enter image description here

マイコード:

body { 
 
    width: auto; 
 
    margin:0; 
 
    padding:0; 
 

 

 
} 
 

 
@font-face { 
 
    font-family: "Gidole"; 
 
    src: url(CODE Light.otf); 
 
} 
 

 
h2 { 
 
    text-align: center; 
 

 
} 
 

 
.container { 
 
    width: 960px; 
 
    height: 500px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    position: relative; 
 

 
} 
 

 

 
.row { 
 
    width: 320px; 
 
    position: absolute; 
 
    top: 60%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    color: #191919; 
 
    background-color: green;  
 
    box-shadow: 0 1px 1px #ABBEB5; 
 
    font-family: "Gidole", sans-serif; 
 
    padding: 10px 55px 40px;  
 
    border: 1px solid black; 
 

 
} 
 

 

 
input[type=text],[type=password] { 
 
    width: 97%; 
 
    height: 22px; 
 
    padding-left: 5px; 
 
    margin-bottom: 20px; 
 
    margin-top: 8px; 
 
    color: #191919; 
 
    font-family: "Gidole", sans-serif; 
 
    margin-top:5px; 
 

 

 
} 
 

 
#login { 
 
    width: 100%; 
 
    margin-top: 5px; 
 
    padding: 10px; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
    /* display: block; use for centering */ 
 
    display: block; 
 
    color: #000000; 
 

 
} 
 

 
#signup { 
 
    color: #191919; 
 
    margin-top: 5px; 
 
    cursor: pointer; 
 
    font-size: 12px; 
 
    text-align: center; 
 
    display: block 
 

 
} 
 

 
#forgotpass { 
 
    color: #191919; 
 
    cursor: pointer; 
 
    font-size: 12px; 
 
    text-align: center; 
 
    display: block 
 
}
<link rel="stylesheet" href="bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" /> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
     <h2> User Login </h1> 
 
     <div class="myForm1"> 
 
      <form action="p1.php" method="POST"> 
 
       <input type="text" name="username" placeholder="Username" /> <br/> 
 
       <input type="password" name="password" placeholder="Password" /> <br/> 
 
       <input type="submit" name="submit" id="login"/> 
 
      </form> 
 

 
      <form action="register.php" method="POST"> 
 

 
       <p> <a href="register.php" name="register" id="signup"> Sign up </a> </p> 
 
       <p> <a href="" name="register" id="forgotpass"> Forgot password? </a> </p> 
 

 
      </form> 
 
     </div> 
 
    </div> 
 
</div>
何のブートストラップのリンクが存在しない場合はここで

enter image description here

はイメージです:ブートストラップリンクが追加された場合はここで はイメージです

+0

あなたの画像は壊れています.... –

+0

私はすでにそれを編集しました。また、それは私の最後に表示されます。 – studentAir01

+0

彼らは今働いています –

答えて

1

Twitter Bootstrapは、cssjsのコンポーネントをあなたのプロジェクトで使用する準備ができています。

プロジェクトでブートストラップで使用されているいくつかのクラス名を使用しました。 Bootstrapをロードせずに、ライブラリをロードしていないため、これらのクラスのライブラリで定義されているルールは適用されません。ロードすると、それらが適用されます。

あなたが使用しているブートストラップのスタイルのクラスには、containerrowがあります。あなたは時間をかけてその例を見て、適用されたCSSルールを調べて、それぞれが何をするのかをよりよく理解する必要があります。

また、ブートストラップを使用する場合、ベストプラクティス(これまでのところ)は、提供された例から始めて、特にレイアウトに関して最小限の変更を保つことです。

ブートストラップが、そのような違い

  • 応答

  • しかし、再びレンダリング

    • ブラウザとして最も一般的なレイアウトの問題の修正とソリューションを提供していますのでご注意ください。ブートストラップはあなたのページを分析し修正するロボットではありません。それはちょうどCSSルール、@mediaクエリのコレクションです(と時には小さいjsスニペット)。それを使用する予定がある場合は、それぞれのコンポーネントが何をしているかを知る必要があります。

      飛行機のふりをしているようなふりをしているようなふりをしてはいけません。いくつかありますが、自動システムが失敗した場合に備えて、操縦、着陸および離陸の方法を知っているのが最良です。

    +0

    divクラスのコンテナと行の名前をdivクラスparやrosのように変更しようとしましたが、同じエラー – studentAir01

    +0

    例へのリンクを提供できますか?なぜそれが働いていないのか教えてあげましょう。 –

    +0

    私は同じコードを使用しています、それは私のdivコンテナと行の名前を変更するだけです... – studentAir01

    1

    さらに@Andreiゲオルギューは、Google Chromeブラウザ上で開いた親切、 アップあなたのコンソールに答え(右クリック '要素を点検' をクリックするか、Ctrlは、+ + IまたはF12シフト)どのような手の込んだ

    enter image description here

    あなたの[style.css] {width}プロパティのクラス{container}がTwitter Bootstrap [bootstrap.min.css]クラス{container}プロパティによってオーバーライドされたことを画像で確認できます(コンソールを確認してください)。

    CSSのプロパティは、CSSファイルの読み込み順序によって変わります。この場合、私はこの順序でCSSファイルをインポートします。

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

    これは、CSSプロパティは、[bootstrap.min.css]でオフに開始されることを意味し、我々は逆にもしそうなら [style.cssに]で従ってくださいこのような順序:

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

    これが起こる: enter image description here

    そして、この1 .... enter image description here

    Twitter Bootstrap [bootstrap.min.css]クラス{container}プロパティは、[style.css]クラス{container}プロパティをオーバーライドします。

    「@media」という接頭辞があります。

    https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    しかし@Andreiの言及のように、あなたは、ブートストラップの提供例からログインページレイアウトを開始することができ、可能な場合は最小限に、あなたのスタイルを保つ:あなたは@mediaここにあなたのログインページが応答するために を照会する使用方法についての詳細を学ぶことができます。これがあなたに役立つことを願っています。

    +0

    私は自分のスタイルシートを自分のブートストラップにオーバーライドするか、その逆にあなたの提案に従おうとしましたが、私はまだ同じ問題に遭遇しました... – studentAir01

    +0

    どのような問題がありますか? – eeya

    関連する問題