使用bootstrap.css样式创建新帐户

时间:2013-07-08 12:16:27

标签: twitter-bootstrap

我创建了一个使用bootstrap.css进行样式化的简单网页。它似乎不起作用。我指定了一个“水平”布局,标签位于字段的左侧,标签的右边缘对齐,但输出显示为堆叠,标签位于字段上方。

这是HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Home</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet"
            href="netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
    </head>
    <body>
        <h1>Welcome to My Site</h1>
        <form class="form-horizontal" method="post"
            enctype="application/x-www-form-urlencoded"
            action="/auth/page/account/newaccount">
            <fieldset>
                <legend>Register a new account</legend>
                <input type="hidden" name="_token" value="PPMN5nK3IL">
                <div class="control-group clearfix required ">
                    <label class="control-label" for="h2">Username</label>
                    <div class="controls input">
                        <input id="h2" name="f2" type="text" required value="">
                    </div>
                </div>
                <div class="control-group clearfix required ">
                    <label class="control-label" for="h3">Email</label>
                    <div class="controls input">
                        <input id="h3" name="f3" type="email" required="" value="">
                    </div>
                </div>
                <div class="control-group clearfix required ">
                    <label class="control-label" for="h4">Password</label>
                    <div class="controls input">
                        <input id="h4" name="f4" type="password" required="" value="">
                    </div>
                </div>
                <div class="control-group clearfix required ">
                    <label class="control-label" for="h5">Confirm</label>
                    <div class="controls input">
                        <input id="h5" name="f5" type="password" required="" value="">
                    </div>
                </div>
                <div class="form-actions">
                    <input class="btn primary btn-large" type="submit"
                        value="Create New Account">
                </div>
            </fieldset>
        </form>
        <script src="netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js">
        </script>
        <script src="ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js">
        </script>
    </body>
</html>

1 个答案:

答案 0 :(得分:2)

您在样式表链接中缺少//

将其更改为

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">

同样适用于底部的脚本标记。

另请注意,您需要在jQuery文件前添加bootstrap文件,因为bootstrap取决于多个jQuery功能。

相关问题