0

この質問をするのはかなりばかげているように感じますが、それを理解できないようです。

Twitter のブートストラップ テーマを試してみたかったので、ファイルをダウンロードして、非常に基本的なサンプル ページをセットアップしてみました。そのコードは次のとおりです。

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>With Bootstrap</title>
    <link rel="stylesheet" href="bootstrap.min.css">
 </head>

 <body>
    <p>Hello Bootstrap!</p>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
 </body>
</html>

ファイルが正しい場所にあると確信しています（クロムからソースを確認し、スタイルシートへのリンクをたどってこれを確認しました）。ただし、ブートストラップ バージョンではなく、デフォルトのスタイル設定されたページを取得するだけなので、CSS がドキュメントでうまく機能していないようです。何か案は？

4

3 に答える 3

0

すべてのコンテンツを「コンテナ」クラスを持つ div にする必要がある場合があります。「bootstrap.min.css」が現在の HTML ファイルと同じレベルにあることも確認してください。そうでない場合は、'href' 値を変更します。

于 2013-06-12T20:37:19.353 に答える
0

BootstrapCDN の Bootstrap ファイルを使用すると、簡単に開始できます。

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
            <title></title>
            <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
            <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>    
    <div class="container">

    <h1>Bootstrap starter template</h1>
    <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>

    </div>
    </body>
    </html>

これが機能する場合は、ローカルの Bootstrap ファイルのパスを再確認する必要があります。

于 2013-06-12T20:38:19.140 に答える
0

コード例に基づいて、最初に考えたのは、マークアップのスタイルを設定するためにブートストラップ クラスを使用していないということです。

これを試して：

<p class="text-error">Hello Bootstrap!</p>

これにより、テキストが赤で表示されます。http://twitter.github.io/bootstrap/base-css.htmlにあるブートストラップ ドキュメントにいくつかの優れた例があります。使用する Bootstrap ディレクティブをマークアップで指定する必要があります。

以下は、アンカー タグがボタンに変換された 2 列のレイアウトを提供する、より完全な例です。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>With Bootstrap</title>
        <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    </head>
    <body>
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span8">
                    <!--Sidebar content-->
                    <a href="#" class="btn btn-primary">This link looks like a button!</a>
                </div>
                <div class="span4">
                    <!--Body content-->
                    <p class="text-success">Isn't this great?</p>
                </div>
            </div>
        </div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="bootstrap.min.js"></script>
    </body>
</html>

うまくいけば、これはあなたが始めるのに役立ちます!

于 2013-06-12T20:57:22.970 に答える