Twitter Bootstrap inclusion issue

Question

I am having some trouble showing Bootstrap components on my page in a Visual Studio using Asp.Net MVC 5. I am using these examples here for the drop down and here for the button groups.

This is what the page looks like:

在此处输入图片说明

This is the page source that gets generated

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>NewIndex</title>
</head>
<body>
    <script src="/Scripts/jquery-1.10.2.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/respond.js"></script>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/justified-nav.css" rel="stylesheet"/>

    New Index page

    <div class="dropdown">
        <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu2" data-toggle="dropdown">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        </ul>
    </div>

    <br />

    <div class="btn-group">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
    </div>


</body>
</html>

All of the referenced files are there in their respective paths. Any idea on what could be wrong?

Answer 1

As per my comment :

You should add CSS file with link tag, instead of <script></script> block. Script block is used for adding the Javascript .

Adding External Style Sheet (CSS) on your web page:

Each page must include a link to the style sheet with the tag. The tag goes inside the head section:

<head>
<link rel="stylesheet" type="text/css" href="yourstyle.css">
</head>

Try this:

<link rel="stylesheet" type="text/css" href="/Content/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/Content/site.css" />
<link rel="stylesheet" type="text/css" href="/Content/justified-nav.css" />

According to the @cvrebert comment, You must include the Jquery library references ( jquery-1.10.2.js ) before the other javascript files. the correct order of the Script File is:

<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>

As i mentioned above you must put your link tag into head section. So the correct HTML of page look like this -

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>NewIndex</title>
    <!--Your CSS Style Sheets-->
    <link rel="stylesheet" type="text/css" href="/Content/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="/Content/site.css" />
    <link rel="stylesheet" type="text/css" href="/Content/justified-nav.css" />
</head>
<body>
    <!--Your Script Files-->
    <script src="/Scripts/jquery-1.10.2.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/respond.js"></script>
    <div> 
        New Index page
        <br />
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
            <li role="presentation" class="dropdown-header">Dropdown header</li>
            ...
            <li role="presentation" class="divider"></li>
            <li role="presentation" class="dropdown-header">Dropdown header</li>
            ...
        </ul>
    </div>


    <div class="dropdown">
        <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        </ul>
    </div>
 </body>
</html>

Answer 2

将您的bootstrap.css引用从脚本标签更改为链接标签。例如：

<link href="../Styles/mystyle.min.css" rel="stylesheet" />

Twitter Bootstrap inclusion issue

Question

2 answers

solution1
1 2014-06-05 13:20:10

solution2
0 2014-06-05 13:17:17

Twitter Bootstrap inclusion issue

Question

2 answers

solution1 1 2014-06-05 13:20:10

solution2 0 2014-06-05 13:17:17

solution1
1 2014-06-05 13:20:10

solution2
0 2014-06-05 13:17:17